/* @group Body, header, footer */

html {
	background: #283c81 url('../images/header/site-background_3px.jpg') repeat-x;
	margin: 0;
	padding: 0;
}

body {
	background: url('../images/header/header-background2.jpg') no-repeat top center;
	font: normal normal 10px/150% Helvetica, Arial, Geneva, sans-serif;
	font-size: 62.5%;
	color: #9eabb2;
	margin: 0;
	padding: 0;
	/* min-width: 1108px; */
	min-width: 1108px;
}

a img {
	border: none;
}

.clearer {
	clear: both;
}

table tr td {
	border: none;
	padding: 0;
	margin: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	display: table;
}

.upper_layer {
    z-index: 2;
}

.lower_layer {
    z-index: 0;
}

.login_status {
	position: absolute;
	height: 100%; /* IE6: treated as min-height*/
    min-height: 100%;
    text-align: left;
    margin: 0 0 0 0;
    background-color: transparent;
    top: 252px;
	font-size: 70%;
	color: #283c81;
	z-index: 3;
}

.login_status p {
	color: #283c81;
}

.login_status a {color: #283c81;}
.login_status a:link {text-decoration: none; color: #283c81;}
.login_status a:hover {text-decoration: underline; color: #283c81; font: bold;}
.login_status a:visited {color: #283c81;}


.download_curriculum_package {
	background: url('../overview/protected_content/images/download_curriculum_package.png') no-repeat;
	width: 500px;
	height: 90px;
	overflow: hidden;
}

.download_curriculum_package a { padding: 170px ;  opacity: 0;}

.header {
	height: 296px;
	position: relative;
}

.header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	top: 222px;
	left: 102px;
}

.header li {
	float: left;
}

.top_header_content {
    z-index: 2;
}

#nav-logo {
	width: 600px;
	height: 200px;
	overflow: hidden;
}

#nav-logo a {
	padding: 150px 250px 120px 280px;
	text-indent: 250px;
	opacity: 0;
}

#outer_wrapper 
    {
    position: relative;  /* needed for footer positioning */
    height: auto  !important;  real browsers */
	height: 100%; /* IE6: treated as min-height*/
    min-height: 100%;
    margin: 0 auto 0 auto;
    width: 1040px;
    background-color: transparent;
    overflow: visible;
    z-index: 1;
    }
    
#inner_wrapper 
    {    
    margin: 0 auto 0 auto;
    height: 100%;
    width: 900px;
    background-color: transparent;
    } 


#copy
    {
    margin: 90px 0 0 100px;
    padding: 25px 0 0 0;  /* bottom padding for footer */
    text-align: center;
    position: relative;
    width: 800px;
    min-height: 400px;
    line-height: 1.5em;
    background-color: transparent;
    z-index: 0;
    }
    
#index_quote
	{
	margin: 5px 0 0 82px;
    padding: 15px 0 0 0;  /* bottom padding for footer */
    text-align: center;
    width: 775px;
    min-height: 240px;
    line-height: 1.5em;
    background-color: transparent;
    z-index: 0;
    }
    
.outreach_content {
	position: relative;  /* needed for footer positioning */
    height: auto  !important;  /* real browsers */
	height: 100%; /* IE6: treated as min-height*/
    min-height: 100%;
    margin: 0 auto 0 97px;
    width: 900px;
    background-color: transparent;
    overflow: visible;
    z-index: 1;
}

.outreach_content a:visited {color: grey;}
.outreach_content a:link {color: #00d8ff;}

.nav-overview, .nav-schools, .nav-feedback, .nav-faqs, .nav-contact, .nav-links {
        z-index: 2;
	background: url('../images/header/nav-overview.jpg') no-repeat;
	width: 201px;
	height: 76px;
	overflow: hidden;
}

.nav-overview > img { position: relative; cursor: pointer; padding-bottom: 35px; z-index: 2; }

.nav-overview:hover, .nav-schools:hover, .nav-feedback:hover, .nav-faqs:hover, .nav-contact:hover, .nav-links:hover { background-position: 0 -76px; }

.nav-overview a, .nav-schools a, .nav-feedback a, .nav-faqs a, .nav-contact a, .nav-links a { padding: 140px; /* for IE */position:absolute; filter:alpha(opacity=0); opacity: 0; }
.nav-schools { z-index: 2; background: url('../images/header/nav-schools.jpg') no-repeat; width: 197px; }
.nav-feedback { z-index: 2; background: url('../images/header/nav-feedback.jpg') no-repeat; width: 197px; }
.nav-faqs { z-index: 2; background: url('../images/header/nav-faqs.jpg') no-repeat; width: 125px; }
.nav-contact { z-index: 2; background: url('../images/header/nav-contact.jpg') no-repeat; width: 179px; }
.nav-links { z-index: 2; background: url('../images/header/nav-links.jpg') no-repeat; width: 144px; }
.nav-selected { z-index: 2; background-position: 0 -152px; }
.nav-selected:hover { z-index: 2; background-position: 0 -152px; }

.protected_sidebar {
	font-size: 85%;
        margin-left:25px;
}

.footer {
	height: 60px;
	min-width: 1100px;
	top: 0px;
	position: relative;
}

.footer p {
	margin: 0;
	padding: 18px 0 0 14px;
	text-align: center;
	font-size: 1.2em;
	color: #9eabb2;
	text-shadow: black 0 1px 1px;
}

.ucbpsych, .whitney_lab, .ucberkeley, .nsf, .nsf_acknowledgment{
	background: url('../images/footer/outreach_footer_background.jpg') no-repeat;
	padding: 0px 0px 0 0px;
	width: 237px;
	height: 65px;
	overflow: hidden;
	float: left;
}

.ucbpsych:hover, .whitney_lab:hover, .ucberkeley:hover, .nsf:hover, .nsf_acknowledgment:hover { background-position: 0 -64px; }

.ucbpsych a { padding: 140px ;  position: absolute; opacity: 0;}
.whitney_lab a { padding: 140px ; position: absolute; opacity: 0;}
.ucberkeley a { padding: 140px; position: absolute; opacity: 0; }
.nsf a { padding: 140px; position: absolute; opacity: 0; }
.nsf_acknowledgment a { padding: 140px; position: absolute; opacity: 0; }

.ucbpsych {
	background: url('../images/footer/outreach_footer_ucbpsych.jpg') no-repeat;
	width: 183px;
	left: 50px;
	position: absolute;
}

.whitney_lab {
	background: url('../images/footer/outreach_footer_wlab_wide_v1p3.jpg') no-repeat;
	width: 270px;
	left: 285px;
	position: absolute;
}

.ucberkeley {
	background: url('../images/footer/outreach_footer_ucberkeley.jpg') no-repeat;
	width: 193px;
	left: 600px;
	position: absolute;
}

.nsf_acknowledgment {
	background: url('../images/footer/outreach_footer_nsf_acknowledgment.jpg') no-repeat;
	width: 206px;
	left: 845px;
	position: absolute;
}

.nsf {
	background: url('../images/footer/outreach_footer_nsf.jpg') no-repeat;
	width: 64px;
	left: 1055px;
	position: absolute;
}

.topspace {
	margin-top: 25px;
}

.bottomspace {
	margin-bottom: 25px;
}

.teachers {
	background: url('../images/overview/teachers.png') no-repeat;
	height: 33px;
	width: 138px;
	overflow: hidden;
}

.students {
	background: url('../images/overview/students.png') no-repeat;
	height: 33px;
	width: 137px;
	overflow: hidden;
}

.teachers a, .students a { padding: 138px ;  opacity: 0;}

.screenshot {
	margin: 0px 0px 0px 0px;
	float: left;
}

.color_module {
	top: 90px;
	left: 40px;
	position: absolute;
}

.motion_module {
	top: 94px;
	left: 445px;
	position: absolute;
}

.depth_module {
	top: 359px;
	left: 42px;
	position: absolute;
}

.faces_module {
	top: 359px;
	left: 446px;
	position: absolute;
}

.feature_module {
	top: 260px;
	left: 273px;
	position: absolute;
}

.overview_img {
	margin: 10px 10px 10px 0px;
	text-align: center;
	color: #9eabb2;
	text-shadow: black 0 1px 1px;
}

.heading_img {
	margin: 30px 0 30px 33px;
}

.sub_heading_img {
	margin: 15px 0 30px 63px;
}

.protected_heading_img {
	margin: 40px 0 30px -50px;
}

.protected_sub_heading_img {
	margin: 40px 0 30px -50px;
}

.testimonial_content {
	margin: 15px 0 60px 63px;
}

.news_img {
	text-align: center;
	margin: 30px 0 30px 0px;
}

.schools_img {
	text-align: center;
	margin: 30px 0 30px 0px;
}

.about_img {
	text-align: center;
	margin: 30px 0 0px 10px;
}

/* @end */

/* @group Text */

h1 {
	font: bold 2.2em/150% Helvetica, Arial, Geneva, sans-serif;
	letter-spacing: -1px;
	color: #e5e8ed;
	margin: 0;
	padding: 17px 0 10px 14px;
	text-align: left;
	text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
}

h1 a {
	text-decoration: none;
	color: #e5e8ed;
}

h1 a:hover {
	color: #e5e8ed;
	text-shadow: rgba(255,255,255,1) 0 0 2px;
}

h2 a, h3 a, p a {
	text-decoration: none;
	color: #5cc2f2;
	text-shadow: none;
}

h2 a:hover, h3 a:hover, p a:hover {
	color: white;
	text-shadow: rgba(255,255,255,1) 0 0 3px;
}

p, h3, h4, ul {
	font: normal normal 1.5em/150% Helvetica, Arial, Geneva, sans-serif;
	font-weight: normal;
	color: #c4cad2;
	margin: 0;
	padding: 0 5px 13px 14px;
	text-align: left;
	text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
}

.intro {
	font-size: 1.8em;
	color: white;
}

h3 {
	font: bold 1.7em/150% Helvetica, Arial, Geneva, sans-serif;
	color: #e5e8ed;
	letter-spacing: -1px;
}

h4 {
	font: bold 1.5em/150% Helvetica, Arial, Geneva, sans-serif;
	color: #e5e8ed;
	letter-spacing: 0px;
	padding: 0 5px 0 14px;
}

h5 {
	font: bold 1.3em/130% Helvetica, Arial, Geneva, sans-serif;
	color: #e5e8ed;
	letter-spacing: 0px;
}

b {
	color: white;
	font-weight: bold;
}

small {
	color: #64686f;
	font-size: 70%;
}

.indent {
	margin-left: 20px;
}

.qa_indent {
	margin-left: 70px;
}

.nsf_indent {
	margin-top: 50px;
	margin-left: 117px;
	margin-bottom: 200px;
	color: grey;
}

.nsf_indent p {
	font: bold 1.7em/150% Helvetica, Arial, Geneva, sans-serif;
	color: lt-grey;
}

.music_player {
	margin-left: 140px;
	margin-top: 268px;
}

.music_text {
	font-size: 90%;
	text-align: center;
}

.small_ish {
	font-size: 70%;
}



.h1-icon {
	float: left;
	width: 32px;
	height: 32px;
	background: url('../images/test/icon.png') no-repeat;
	margin-right: 5px;
}

ul {
	list-style: square;
	/* list-style-image: url('../images/content/list-arrow.png'); */
	padding-left: 32px;
	padding-bottom: 25px;
}

li {
	margin: 0;
	padding: 0;
}

.white {
	color: white;
}

/* @end */

/* @group Forms */

textarea {
	background: #202020;
	border: none;
	border-bottom: 2px solid #474747;
	box-shadow: 0 0 5px black;
	-webkit-box-shadow: 0 0 5px black;
	margin: 2px 0;
	padding: 5px 3px;
	color: #aaafb7;
	font: normal normal 1.5em/150% Helvetica, Arial, Geneva, sans-serif;
	text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
	width: 309px;
	max-width: 309px;
	outline: none;
	opacity: 0.7;
	-khtml-border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

input {
	background: #202020;
	border: none;
	border-bottom: 2px solid #474747;
	box-shadow: 0 0 5px black;
	-webkit-box-shadow: 0 0 5px black;
	margin: 2px 0;
	padding: 5px;
	color: #aaafb7;
	color: white;
	font: normal normal 1.5em/150% Helvetica, Arial, Geneva, sans-serif;
	text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
	width: 305px;
	outline: none;
	opacity: 0.7;
	-khtml-border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

input:focus, textarea:focus {
	color: white;
	opacity: 1;
}

fieldset {
	padding: 0;
	margin: 25px 0 0 0;
	border: none;
	text-align: left;
}

.list_menu {
	text-align: left;
	vertical-align: bottom;
	height: 20px;
}

.subscribe_text {
	text-align: left;
	margin: 0px 0 0 -13px;
}

.subscribe_labels {
	text-align: left;
	font: normal normal 1.5em/150% Helvetica, Arial, Geneva, sans-serif;
	padding-top: 0.55em;
	color: #84898e;
}

.subscribe_radiobuttons {
	text-align: left;
	height: 20px;
	margin: 10px;
}

label {
	float: left;
	width: 30%;
	height: 100%;
	margin-right: 0.6em;
	color: #c4cad2;
	text-align: right;
	text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
}

.subscribe_button {
	text-align: right;
}

.form-toppad {
	font: normal normal 1.5em/150% Helvetica, Arial, Geneva, sans-serif;
	padding-top: 0.55em;
	color: #84898e;
}

.form-hide {
	display: none;
}

button {
	background: #419291 url('../images/buttons/small-mid.gif') repeat-x;
	font: bold 1.2em/150% Helvetica, Arial, Geneva, sans-serif;
	text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
	padding: 2px 15px;
	border: 1px solid #66b6b4;
	box-shadow: 0 0 5px black;
	-webkit-box-shadow: 0 0 5px black;
	color: white;
	-khtml-border-radius: 12px;
	-o-border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}

button:hover {
	border: 1px solid #93e3e0;
}

button:active {
	background: #277c7a;
	color: #a1aaac;
	border: 1px solid #56a6a4;
}

/* @end */

/* @group Blueprint Grid.css */

/* -------------------------------------------------------------- 
   
   grid.css
   * Sets up an easy-to-use grid of 24 columns.
   
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Khoi Vinh         [subtraction.com]
   
   By default, the grid is 950px wide, with 24 columns 
   spanning 30px, and a 10px margin between columns.
   
   If you need fewer or more columns, use this 
   formula to find the new total width: 
   Total width = (columns * 40) - 10
   
   Read more about using a grid here:
   * subtraction.com/archives/2007/0318_oh_yeeaahh.php
   
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
  width: 1110px;
  /* width: 950px; */
  margin: 0 auto;
}


/* Columns
-------------------------------------------------------------- */

/* Use this class together with the .span-x classes
   to create any composition of columns in a layout. */
   
.column {
  float: left;
  margin-right: 10px;
}


/* The last column in a row needs this class. */
.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1   { width: 30px; }
.span-2   { width: 70px; }
.span-3   { width: 110px; }
.span-4   { width: 150px; }
.span-5   { width: 190px; }
.span-6   { width: 230px; }
.span-7   { width: 270px; }
.span-8   { width: 310px; }
.span-9   { width: 350px; }
.span-10  { width: 390px; }
.span-11  { width: 430px; }
.span-12  { width: 470px; }
.span-13  { width: 510px; }
.span-14  { width: 550px; }
.span-15  { width: 590px; }
.span-16  { width: 630px; }
.span-17  { width: 670px; }
.span-18  { width: 710px; }
.span-19  { width: 750px; }
.span-20  { width: 790px; }
.span-21  { width: 830px; }
.span-22  { width: 870px; }
.span-23  { width: 910px; }
.span-24  { width: 950px; }
.span-25  { width: 990px; }
.span-26  { width: 1030px; }
.span-27  { width: 1070px; }
.span-28  { width: 1110px; margin: 0; }

/* Add these to a column to append empty cols. */
.append-1   { padding-right: 40px; }  
.append-2   { padding-right: 80px; } 
.append-3   { padding-right: 120px; } 
.append-4   { padding-right: 160px; } 
.append-5   { padding-right: 200px; } 
.append-6   { padding-right: 240px; } 
.append-7   { padding-right: 280px; } 
.append-8   { padding-right: 320px; } 
.append-9   { padding-right: 360px; } 
.append-10  { padding-right: 400px; } 
.append-11  { padding-right: 440px; } 
.append-12  { padding-right: 480px; } 
.append-13  { padding-right: 520px; } 
.append-14  { padding-right: 560px; } 
.append-15  { padding-right: 600px; } 
.append-16  { padding-right: 640px; } 
.append-17  { padding-right: 680px; } 
.append-18  { padding-right: 720px; } 
.append-19  { padding-right: 760px; } 
.append-20  { padding-right: 800px; } 
.append-21  { padding-right: 840px; } 
.append-22  { padding-right: 880px; } 
.append-23  { padding-right: 920px; } 
.append-24  { padding-right: 960px; } 
.append-25  { padding-right: 1000px; } 
.append-26  { padding-right: 1040px; } 
.append-27  { padding-right: 1080px; } 

/* Add these to a column to prepend empty cols. */
.prepend-1   { padding-left: 40px; }  
.prepend-2   { padding-left: 80px; } 
.prepend-3   { padding-left: 120px; } 
.prepend-4   { padding-left: 160px; } 
.prepend-5   { padding-left: 200px; } 
.prepend-6   { padding-left: 240px; } 
.prepend-7   { padding-left: 280px; } 
.prepend-8   { padding-left: 320px; } 
.prepend-9   { padding-left: 360px; } 
.prepend-10  { padding-left: 400px; } 
.prepend-11  { padding-left: 440px; } 
.prepend-12  { padding-left: 480px; } 
.prepend-13  { padding-left: 520px; } 
.prepend-14  { padding-left: 560px; } 
.prepend-15  { padding-left: 600px; } 
.prepend-16  { padding-left: 640px; } 
.prepend-17  { padding-left: 680px; } 
.prepend-18  { padding-left: 720px; } 
.prepend-19  { padding-left: 760px; } 
.prepend-20  { padding-left: 800px; } 
.prepend-21  { padding-left: 840px; } 
.prepend-22  { padding-left: 880px; } 
.prepend-23  { padding-left: 920px; } 
.prepend-24  { padding-left: 960px; }
.prepend-25  { padding-left: 1000px; }
.prepend-26  { padding-left: 1040px; }
.prepend-27  { padding-left: 1080px; }


/* Border on right hand side of a column. */
.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee;
}


/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column. */

.pull-1  { margin-left: -40px; }
.pull-2  { margin-left: -80px; }
.pull-3  { margin-left: -120px; }
.pull-4  { margin-left: -160px; }

.push-0  { margin: 0 0 0 18px; }
.push-1  { margin: 0 -40px 0 18px; }
.push-2  { margin: 0 -80px 0 18px; }
.push-3  { margin: 0 -120px 0 18px; }
.push-4  { margin: 0 -160px 0 18px; }
.push-0, .push-1, .push-2, .push-3, .push-4 { float: right; }


/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #eee; 
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #9eabb2; 
  color: #9eabb2;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.4em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }

/* @end */