/*********************
Global, reusable styles

**********************/

/***** Layout Styles *****/
.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 49.5%; }
.width45 { width: 45%; }
.width33 { width: 33%; }
.width25 { width: 24%; }
.float_left { float: left; }
img.float_left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
.float_right { float: right; }
img.float_right { float: right; margin: 1.5em 0 1.5em 1.5em; padding: 0; }
.align_left { text-align: left; }
.align_right { text-align: right; }
.align_center { text-align: center; }
.clear_left { clear: left; }
.clear_right { clear: right; }
.clear_both { clear: both; display: block; }
.layout_center { margin: 0 auto; }

/****** Print Styles *****/
.page-break 			{ page-break-before: always; }


/***** Font Styles *****/
.error { border: 1px solid #fb4343; padding: 3px; color: #fb4343; }
.warning { border: 1px solid #d4ac0a; padding: 3px; color: #d4ac0a; }
.success { border: 1px solid #149b0d; padding: 3px; color: #149b0d; }
.call_out { font-size: 125%; font-weight: bold; }
.strike_out { text-decoration: line-through; }
.underline { text-decoration: underline; }
.italic { font-style: italic; }
.bold { font-weight: bold; }

.hidden { display: none; }
.invisible { visibility: hidden; }

/* -------------------------------------------------------------- 
   
   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms
   
   Usage:
   * For text fields, use class .title or .text
   
-------------------------------------------------------------- */

label { font-weight: bold; }


/* Fieldsets */
fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; }

/* Text fields */
input.text, input.title   { width: 300px; margin:0.5em 0.5em 0.5em 0; }
input.text, input.title   { border:1px solid #bbb; background:#f6f6f6; padding:5px; }
input.text:focus,
input.title:focus         { border:1px solid #999; background:#fff; }
input.title               { font-size:1.5em; }

/* Textareas */
textarea            { width: 400px; height: 250px; margin:0.5em 0.5em 0.5em 0; }
textarea            { border:1px solid #bbb; background:#eee; padding:5px; }
textarea:focus      { border:1px solid #999; background:#fff; }

/* Select fields */
select              { border:1px solid #ccc; background:#f6f6f6; width:200px; }
select:focus        { border:1px solid #999; background:#fff; }


/* Success, error & notice boxes for messages and errors. */
.error,
.notice, 
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }
.error      { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #817134; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #529214; border-color: #C6D880; }
.error a    { color: #D12F19; }
.notice a   { color: #817134; }
.success a  { color: #529214; }

/* -------------------------------------------------------------- 
   
   typography.css
   * Sets up some sensible default typography.
  
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Wilson Miner      [wilsonminer.com]
   * Richard Rutter    [clagnut.com]
   
   Read more about using a baseline here:
   * alistapart.com/articles/settingtypeontheweb
  
-------------------------------------------------------------- */

/* 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: 75%; }


/* Default fonts and colors. 
   If you prefer serif fonts, remove the font-family 
   on the headings, and apply this one to the body:
   font: 1em Georgia, "lucida bright", "times new roman", serif; */
   
body { 
  color: #222; 
  font-family: Helvetica, Arial, Verdana, sans-serif; 
}
h1,h2,h3,h4,h5,h6 { 
  color: #111; 
  font-family: Helvetica, Arial, sans-serif; 
}


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

h1,h2,h3,h4,h5,h6 { font-weight: normal; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
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; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }


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

p           { margin: 0 0 1.5em; line-height: 1.75em; }
p.last      { margin-bottom: 0; }
p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.top   { margin-top: 0; } /* Use this if the image is at the top of the <p>. */
img         { margin: 0 0 1.5em; }

ul, ol      { margin:0 1.5em 1.5em 1.5em; }
ul          { list-style-type: circle; }
ol          { list-style-type: decimal; }
dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}

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

a:focus, 
a:hover     { color: #000; }
a           { color: #009; text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
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 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.5; } 
tt          { display: block; margin: 1.5em 0; line-height: 1.5; }


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

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

/* Use this if you use span-x classes on th/td. */
table .last { padding-right: 0; } 


/* 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: #666; }

.hide       { display: none; }
.highlight  { background:#ff0; }
.added      { color:#060; }
.removed    { color:#900; }

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

html, body {
	height: 100%;
}

body {
	background: #fff url(/_images/main_bg.jpg) repeat-x;
	color: #555656;
	font-family: Verdana, Arial, sans-serif;
	font-size: 75%;
	height:100%; 
	width:100%;
}

h1 {
	font-size: 1.5em;
	color: #df640a;
	border-bottom: 1px solid #df640a;
	padding-bottom: 5px;
        margin-top: 0;
}

h2 {
	font-size: 1.3em;
	color: #df640a;
}

h3 {
	font-size: 1.2em;
	font-style: italic;
	color: #0073bf;
}

a, a:hover {
	color: #0099ff;
	text-decoration: underline;
}

a:visited {
	color: #0073bf;
	text-decoration: dotted;
}

abbr {
	border-bottom: none;
}

ul {
	list-style-type: none;
}

ol > li {
	margin-bottom: 1.5em;
}

li {
	line-height: 1.5em;
	margin-bottom: .5em;
}

p {
	text-align: justify;
}

blockquote {
	background: transparent url(/_images/quotes2.jpg) bottom right no-repeat;
	margin: 0;

}

blockquote p {
	line-height: 1.75em;
	margin: 1.5em 0;
	padding: 1em 1.5em;
}

body#testimonials blockquote p {
	line-height: 1.75em;
	margin: 0 0 1.5em;
	padding: 0 1.5em;
}

body#testimonials blockquote {
	margin-bottom: 3em;
}


blockquote p.first {
	background: transparent url(/_images/quotes1.jpg) top left no-repeat;

}

blockquote p.cite {
	background: none;
	display: block;
	font-size: .9em;
	margin: 0;
	text-align: right;
}

blockquote p.cite:before {
	content: "\00BB \0020";
}

img { margin: 0; }

/***********************/
/***** Main Layout *****/

div#header {
	background: transparent url(/_images/content_top_bg.png) no-repeat top left;
	height: 205px;
	margin: 10px auto 0;
	width: 920px;
	
}

body#index div#header {
	background: transparent url(/_images/content_top_bg_1.png) no-repeat top left;
	
}

body#programs div#header, body#enrichment div#header, body#readiness div#header {
	background: transparent url(/_images/content_top_bg_3.png) no-repeat top left;
	
}

body#professionals div#header, body#certification div#header, body#directory div#header, body#workshop_schedule div#header, body#sponsor div#header, body#workshops div#header {
	background: transparent url(/_images/content_top_bg_4.png) no-repeat top left;
}

body#neuronet_science div#header, body#research div#header, body#testimonials div#header, body#reading_list div#header  {
	background: transparent url(/_images/content_top_bg_7.png) no-repeat top left;
}

body#espanol div#header {
	background: transparent url(/_images/content_top_bg_5.png) no-repeat top left;
	
}

body#china div#header {
	background: transparent url(/_images/content_top_bg_6.png) no-repeat top left;
	
}

div#shell {
	background: transparent url(/_images/content_bg.png) repeat-y;
	width: 910px;
	margin: 0 auto;
	position: relative;
}

div#content {
	margin: 0 30px;
}



/*******************/
/***** Utility *****/

ul#utility {
	border:none;
	list-style-type: none;
	margin: 0 auto;
	text-align: right;
	width: 920px;
}

ul#utility li {
	border: none;
	display: inline;
	margin: 0 0 0 25px;
}

ul#utility a {
	color: #0099ff;
	font-size: 90%;
	text-decoration: none;
}


/**********************************/
/***** Header and Navigation *****/
#logo {
	background: transparent url(/_images/logo.png) no-repeat;
	display: inline;
	float: left;
	height: 101px;
	margin: 20px 0 0 20px;
	width: 108px;
	text-indent: -9999px;
}

#header .title {
	color: #0099ff;
	font-size: 2.5em;
	line-height: 1em;
	margin-bottom: 0;
	padding-top: 50px;
}

#header .title a {
	text-decoration:none;
	color: #09f;
}

.subtitle {
	color: #999;
	font-size: 1.2em;
	letter-spacing: .07em;
	line-height: 1em;
	margin-bottom: 0;
}

.subtitle a {
	text-decoration:none;
	color: #999;
}

ul.navigation {
	background: #f6f5f5 url(/_images/navigation_bg.jpg) bottom left repeat-x;
	border: 1px solid #ccc;
	font-size: 1.1em;
	height: 2.5em;
	list-style-type: none;
	margin: 33px auto 0;
	width: 900px;
        padding: 0;
	
}
		
		ul.navigation li {
			float: left;
			padding: 7px 0;
			position: relative;
			width: 16%;
			text-align: center;
		}
		
		ul.navigation li a {
			color: #666666;
			text-decoration: none;
		}


.callout {
	font-size: 1.5em;
}



/******************/
/***** Footer *****/

div#footer {
	background: transparent url(/_images/content_bottom_bg.png) no-repeat top left;
	height: 100px;
	margin: 0 auto;
	width: 910px;
}

div#footer p, #footer ul {
	color: #999;
	float: left;
	font-size: 80%;
	margin: 0 10px;
	position: relative;
	top: 40px;
	
}

#footer ul {
	border:none;
	list-style-type: none;
	margin: 2px auto;
}

#footer ul li {
	border: none;
	display: inline;
	margin: 0 0 0 25px;
}

#footer ul li a {
	color: #0099ff;
	text-decoration: none;
}



/**************************/
/***** Column Layouts *****/

#three_col {
	float:left;
	width:260px;
	border-left:300px solid #f6f5f5; 
	/* The width and color of the left rail */
	border-right:300px solid #f6f5f5; 
	/* The width and color of the right rail */
	margin-top: 20px;
}

		#leftRail {
			float:left;
			width:255px;
			margin-left:-290px;
			position:relative;
			padding-right: 20px;
		}
		
		#center {
			float:left;
			width:260px;
			margin-right:-280px;
			margin-left: 10px;
		}
		
		#rightRail {
			float:right;
			width:250px;
			margin-right:-280px;
			margin-left: 10px;
			position:relative;
		}
		

#three_col blockquote {
	margin: 0 0 1.5em; 
}

#three_col blockquote p {
	margin: 0; 
	padding: 1em .5em;
}

#three_col blockquote p.cite {
	margin: 0; 
	padding: 0;
}



/***********************/
/***** Display Box *****/
.display_box {
	background: #eeeeef;
	border: 1px solid #ccc;
	font-style: normal;
	padding: 15px;
	position:relative;
	z-index:1000000;
}

body#testimonials .display_box {
	margin: 0 0 1.5em 1.5em;
}

.display_box h2.blue {
	color: #0073bf;
}


.display_box h2.blue a {
	text-decoration: none;
}

.display_box li {
	margin-left: 2em;
}

.display_box li:before, div#content ul li:before {
	color: #df640a;
	content: "\00BB \0020";
}

body#index .display_box p, body#index .display_box ul li {
	color: #0073bf;
}

body#directory .display_box {
	font-size: .9em;
}





/*************************/
/***** Highlight Box *****/

.highlight_box {
	background: #fff url(/_images/hilight_box_bg.jpg) top left repeat-x;
	border: 1px solid #ccc;
	display: inline;
	float: left;
	padding: 10px 5px;
}

.highlight_box h2 {
	color: #0099ff;
	font-size: 3em;
}

.highlight_box p {
	margin: .9em 20px 2em;
}

.width_400 {
	width: 400px;
}

.width_500 {
         width: 500px
}

.highlight_box img {
	float: left;
	margin: 5px 10px;
}






/******************/
/***** VEVENT *****/
.vevent {
	font-size: .95em;
	line-height: 1.5em;
	margin: 5px 5px 25px 20px;
}

body#workshop_schedule .vevent {
	font-size: 1em;
}

.vevent span {
	display: block;
	position: relative;
}

.vevent a{
	position: relative;
	
}




/******************/
/***** VCARD *****/

.vcard {
	line-height: 1.5em;
	margin: 0 0 2em;
}


.fn {
	font-size: 1.2em;
	color: #df640a;
}


.org, .email, .adr, .tel, .fax, .vcard p {
	padding-left: 1em;
}

.tel:before {
	content: "tel: ";
}

.fax:before {
	content: "fax: ";
}

.street-address span {
	display: block;
}



/***********************/
/**** Readin List *****/

ul.reading_list li {
	margin-bottom: 1em;
}

ul.reading_list span.author, ul.reading_list span.date  {
	display: block;
	margin-left: 1em;
}

ul.reading_list .volume:before {
	content: 'vol: ';
}

ul.reading_list .pages:before {
	content: 'pages: ';
}

ul#books .title {
	font-style: italic;
}

ul#books span.date {
	display: inline;
	margin-left: 0;
}

ul#books span.publisher, ul#periodicals span.publication {
	margin-left: 1em;
}


ul.reading_list span.author:before {
	content: "by: ";
}

ul.reading_list span.publisher:before {
	content: "Published by: ";
}




/****************/
/***** Form *****/
fieldset {
	border: 1px solid #ccc;
}

fieldset legend {
	color: #df640a;
	font-weight: normal;
	padding: 0 .3em;
}

fieldset div {
	margin: 0 0 1.5em 0;
}

label {
	display: block;
	margin: 0 0 .6em 0;
}

fieldset input, fieldset textarea, fieldset select {
	background: #fff;
	border: 1px solid #ccc;
}

fieldset textarea, fieldset select {
	width: auto;
	height: auto;
	margin: 0;
}

fieldset input.submit_button {
	color: #fff;
	background: #0099ff;
	border: 1px solid #85c2ff;
	padding: .2em .4em;
}

.checkbox_group label, .checkbox_group input {
	display: inline;
	font-weight: normal;
}

.checkbox_group div {
	margin: .5em .5em;
}

.checkbox_group .main {
	font-weight: bold;
	margin-bottom: 1em;
}




/**************/

.chinese {
	font-family: Arial;
}


.main_cta {
	background: #0099ff url(/_images/button_back.jpg) bottom left repeat-x;
	border: 1px solid #85c2ff;
	color: #fff;
	line-height: 2em;
	padding: 7px 10px;
}

div.main_cta {
	line-height: 1.3em;
}

.main_cta a, .main_cta a:hover {
	color: #fff;
	text-decoration: none;
}

.sub_cta a {
	color: #0073bf;
	text-decoration: none;
}

.sub_cta:before {
	color: #df640a;
	content: "\00BB \0020";
}


p.top_margin, .top_margin {
	margin-top: 20px;
}

h2.top_margin {
	margin-top: 40px;
}

.bottom_margin {
	margin-bottom: 40px;
}

.right_margin {
	margin-right: 25px;
}

.left_margin {
	margin-left: 25px;
}

.left_marginPC {
	margin-left: 20%;
}
.border_right {
	border-right: 1px solid #ccc;
}


div.width45 {
	padding: 20px;
}

body#readiness #content ul.display_box, body#enrichment #content ul.display_box, body#china #content ul.display_box, body#espanol #content ul.display_box {
	margin: 0;
}

body#readiness #content ul.display_box li, body#enrichment #content ul.display_box li, body#china #content ul.display_box li, body#espanol #content ul.display_box li {
	font-size: .9em;
	margin: 0 0 1em 0;
}

#content #main {
	margin-left: 30%;
}

.back_to_top, p.back_to_top {
	font-size: .8em;
	margin: 0 0 3em;
	text-align: right;
}

#breadcrumbs {
	color: #666666;
	font-size: .8em;
	margin: 0 0 1.5em 0;
}

body#directory .country {
	color: #0073bf;
	font-size: 1.5em;
	font-weight: bold;
}

body#espanol .display_box ul, body#espanol .display_box ul li {
	margin: 1em 0;
	padding: 0;
}

.caption {
	color: #666666;
	font-size: .9em;
	font-style: italic;
	margin-bottom: .5em;
	text-align: center;
}



