/*
Theme Name: SABE
Theme URI: http://www.sabeusa.org
Author: Dan Wasserman / SABE
Author URI: http://www.sabeusa.org
Description: The SABE website theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, three-columns, right-sidebar, flexible-width
Text Domain: sabe

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/* =================================================================================================
	
	Client: SABEUSA.org (Self Advocates Becoming Empowered)
	Site Design: Leslie Emerson
	Front End Dev: Scott Phelps
	Company: Lazarus Group (solutions@lazarusgroup.com)
	Date: 10/26/2009
	
	TABLE OF CONTENTS
	- RESET
		Reset browsers to work better in all browsers including legacy browser (IE6, etc)

	- TYPOGRAPHY
		Sets a solid framework for typography, allows CMS to function and remain 'clean'

	- GRID LAYOUT
		Layout on a grid framework creates an 'unbreakable' layout tool that also keeps elements in balance

	- DESIGN
		All of the other design elements

 ================================================================================================= */



/* E. MEYERS RESET
----------------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
	height: 100%;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}



/* TYPOGRAPHY
----------------------------------------------------------------------------------------------------*/
/* This is where you set your desired font size. The line-heights 
   and vertical margins are automatically calculated from this. 
   The percentage is of 16px (0.75 * 16px = 12px). */
body { font-size: 100%; }


/* Default fonts and colors. */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { color: #4c4c4c; font-family: Helvetica, Arial, sans-serif; }


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: bold; letter-spacing: -.8px; }

h1 { font-size: 2.4em; margin-bottom: 0.75em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }

/* h2 + h3, h2 + p, h3 + p { margin-top: -1em; } */

/* Text elements
-------------------------------------------------------------- */

p { margin: 10px; color: #000; line-height: 130%; }

ul, ol { margin: 0 1.5em 1.5em 1.5em; }
ul { list-style-type: circle; }
ol { list-style-type: decimal; }
li { line-height: 1.4em; }

dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dl dd { margin-left: 1.5em; }

abbr, acronym { border-bottom: 1px dotted #000; }
address { margin-top: 1.5em; font-style: normal; }
del { color: #000; }

a { color: #000; 
text-decoration: none;
}
a:hover { text-decoration: underline; }

blockquote { margin: 1.5em; }
strong { font-weight: bold; }
em, dfn { font-style: italic; }
dfn { font-weight: bold; }
pre, code { margin: 1.5em 0; white-space: pre; }
pre, code, tt { font: 1em monospace; line-height: 1.5; } 
tt { display: block; margin: 1.5em 0; line-height: 1.5; }

hr { margin: 2em 0; height: 1px; border: 1px solid #000; color: #000; background-color: #000; }

/* Tables
-------------------------------------------------------------- */

table { margin-bottom: 1.4em; }
th { border-bottom: 2px solid #000; font-weight: bold; }
td { border-bottom: 1px solid #000; 
vertical-align: top;
}
th,td { padding: 4px 10px 4px 0; }
tfoot { font-style: italic; }
caption { background: #ffc; }


/* Some default classes
-------------------------------------------------------------- */

.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.quiet { color: #999; }

.hide { display: none; }
.highlight { background: #ffc; }

.top { margin-top: 0; padding-top: 0; }
.bottom { margin-bottom: 0; padding-bottom: 0; }


/* GRID SYSTEM
----------------------------------------------------------------------------------------------------*/


/* Containers
----------------------------------------------------------------------------------------------------*/
.container_10 {
	margin:0 auto;
	width: 795px;
	height: 100%;
	background: #fff;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_9,
.grid_10 {
	display:inline;
	float: left;
	position: relative;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* Grid >> 10 Columns
----------------------------------------------------------------------------------------------------*/

.container_10 .grid_1 {
	width:61px;
}

.container_10 .grid_2 {
	width:142px;
}

.container_10 .grid_3 {
	width:223px;
}

.container_10 .grid_4 {
	width:304px;
}

.container_10 .grid_5 {
	width:385px;
}

.container_10 .grid_6 {
	width:466px;
}

.container_10 .grid_7 {
	width:547px;
}

.container_10 .grid_8 {
	width:610px;
	float: right;
	min-height: 400px;
	background: #fff;
}

.container_10 .grid_9 {
	width:709px;
}

.container_10 .grid_10 {
	height: auto;
}
.container_10{
	width: 805px;
	background: #fff;
}
#content{
	width: 610px;
	float: right;
	min-height: 100%;
}

/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}


/* DESIGN
----------------------------------------------------------------------------------------------------*/

/* Head 
------------------------------------------------------------------------------*/
body { 
	text-align: center;
	background: #c4c4c4;
}

#wrap{ 
	/*overflow: auto; */
	width: 795px;
	height: auto;
	text-align: left;
	margin: 0 auto;
	background: #fff;
	}
#wrap .container_10{ 
		background: #fff;
}
#head { 
	background: url(sabe_header_red.jpg) 0 0 no-repeat;
	height: 278px;
	width: 795px;
	overflow: hidden;
	}
#head2 { 
	background: url(sabe_header_red2.jpg) 0 0 no-repeat;
	height: 278px;
	width: 795px;
	overflow: hidden;
	}
#head3 { 
	background: url(sabe_header_red_ocss.jpg) 0 0 no-repeat;
	height: 278px;
	width: 795px;
	overflow: hidden;
	}
#head .grid_10{
	margin: 0px;
}
	#head h1,#head2,#head3 h1 { font-size: .0001em; text-indent: -9999em; }

	#head h1 a { 
		display: block;
		height: 278px;
		width: 790px;
		}

/* Nav
------------------------------------------------------------------------------*/
#nav {  }

#nav ul {
	margin: 0 0 0 0;
	width: 147px;
	}

#nav li {
		background-color: #1e3c5f;
		height: 40px;
		list-style-type: none;
		margin-bottom: 10px;
		text-align: center;
		display: inline;

		}

		#nav a, #nav a:visited { 
			background-color: #1e3c5f;
			color: #fff;
			display: block;
			font-size: 1.25em;
			font-weight: bold;
			height: 40px;
			line-height: 40px;
			text-decoration: none;
					border-bottom: 1px #fff solid;
			}

		#nav a:hover { background-color: #0964dc; }

	#nav ul.sub-menu {
		background-color: transparent;
		/*height: 18px;*/
		}
		
		#nav ul.sub-menu li {
			height: 20px;
			line-height: 20px;
			}
		
		#nav ul.sub-menu a { 
			background-color: transparent;
			color: #000;
			font-size: 1em;
			font-weight: normal;
			/* height: 20px; */
			height: auto;
			line-height: 20px;
			}

			#nav ul.sub-menu a:hover { color: #00459F; }


/* Content
------------------------------------------------------------------------------*/
h1, h2, h3,h4, h5, h6 { color: #0563da; }

.box { border: 1px solid #0964DC; width: 98%; }
.box h2 { background-color: #0964DC; color: #fff; padding: 4px 12px; }
.box h3 { padding: 4px 12px; margin-bottom: 0; }
.box p { padding: 4px 12px; }

img {
margin: 10px;
}
#content p img{
	margin: 0px;
}
#content p img.usa{
	width: 635px;
}
ul.resource_landing li{
	list-style-type: none;
	height: 180px;
	width: 160px;
	display: block;
	float: left;
	margin: 10px 10px 20px 10px;
	font-size: 80%;
	text-align: center;
}
.resource_item{
	width: 590px;
	height: auto;
	padding: 5px;
	margin: 10px 10px 10px 0px;
	border: 1px solid #000;
	overflow: auto;
}
.resources_images{
	width: 200px;
	float: left;
}
.resources_images img{
	height: 50px;
	width: 50px;
}
.resources_information{
	width: 375;
	float: right;
	font-size: 90%;
}
table.no_border td{
	border-bottom: none;
}
table.toolkit{
	border: 1px solid #000;
}
table.toolkit h3{
	margin: 10px 0px 10px 0px;
}
/* Footer
------------------------------------------------------------------------------*/
#footer { 
	height: 40px; 
	padding-top: 20px;
	width: 795px;
	background-color: #1e3c60;
	}
#footer ul { 

	}

#footer li { 
	display: inline; 
	list-style-type: none;
	}

#footer a {
	color: #fff;
	font-size: 1.2em;
	padding: 0 10px;
	text-decoration: none;
	}
#footer a:hover { text-decoration: underline; }

#readmore{
	margin-bottom: 30px;
}

#searchform {
	background-color: #1e3c5f;
	width: 147px;
}

#searchform div {
	text-align:center
}