@charset "utf-8";

/* =============================
Clips for Class
Copyright 2009-Present Cengage Learning, www.cengage.com
Designed by: Lauren Girardin laurengirardin[AT-SYMBOL-HERE]gmail[DOT-GOES-HERE]com
Created: November 2009
Last Updated: March 2010 by LG
============================= */

/* COLORS ======================
dark blue #0b3757
bright blue #3d87a6
darkest blue in gradient background #365c6d
light manila #efdf9c
dark manila #d4c37d
gray #48575b
white #fff
black #000
============================= */

/* SITE ORGANIZATION ======== */

body {
font: 100% Arial, Helvetica, sans-serif;
font-size: 62.5%/1.6em;
background: #365c6d url(images/backgroundgradient.jpg) repeat-x; /*color is bottom of gradient background image*/
margin: 0; /*it's good practice to zero the margin & padding of the body element to account for differing browser defaults*/
padding: 0;
text-align: center; /*centers the container in IE 5*. Text default is then set to the left aligned in the #container selector*/
color: #000;
}
#container {
width: 940px;
background: none;
margin: 0 auto; /*the auto margins (in conjunction with the width) center the page*/
border: none;
text-align: left; /*overrides text-align: center on the body element*/
}

/* RESETS AND OVERRIDES ====== */
*{margin: 0; padding: 0;} /*universal selector, resets all padding and margins to 0 for all browsers*/

a {outline: none;} /*removes dotted outline on all linked images*/
a:link, a:visited, a:hover, a:active {text-decoration: none;}
img, img a, img a:link, img a:visited, img a:hover, img a:active {outline: none; border: none; text-decoration: none;}

/* BASIC SETTINGS ============ */
p, li {font-size: 14px;}
.justify {text-align: justify;}
.show {display:inline;}
.hide {display:none;}
.displaynone {display:none;}

/* FLOATS ---------- */
.left {float:left;}
.right {float:right;}

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

/* MAIN LAYOUT ============== */

#header {
background: none; 
padding: 10px 0 5px;
margin: 0;
text-align: center;
border: none;
}
#header h1 {
margin: 0;
padding: 0;
display: none;
}
#header img, #header img a, #header img a:hover {
margin: 0 auto; /*zeroing margin of last element in the #header will stop margin collapse, the unexplainable space between divs*/
display: block; /*eliminates random 1px line beneath linked image*/
padding: 0; 
outline: none;
border: none;
}

/* NAVIGATION =============== */
/*Visit http://www.electrictoolbox.com/css-sprites-image-navigation/ for more on using CSS sprites for image navigation.*/

#navigation { /*the div that contains all the navigation tabs*/
background: none; 
padding: 0;
text-align: center;
}
#navrow-top, #navrow-middle, #navrow-bottom { /*different divs for each row of navigation*/
padding: 0;
margin: 0 auto -5px;
overflow: hidden;
height: 30px; /*half the height of the images of the navigation rows that show both colors*/
position: relative;
}
	/*These 3 styles specify a different width for each row of navigation, the div width the same as the image width*/
	#navrow-top {width: 607px;}
	#navrow-middle {width: 708px;}
	#navrow-bottom {width: 809px;}

#navrow-top ul, #navrow-middle ul, #navrow-bottom ul {
list-style-type: none;
}
#navrow-top li, #navrow-middle li, #navrow-bottom li {
float: left;
}
#navrow-top a, #navrow-middle a, #navrow-bottom a {
display: block;
background-repeat: no-repeat;
padding-top: 25px; /*equal to navrow-x's height minus the bottom margin*/
text-decoration: none; /*needed for some browsers, otherwise it still shows the underlines*/
outline: none;
}
	/*These 3 styles specify a different image for each row of navigation*/
	#navrow-top a {background-image: url(images/navrow-top.png);}
	#navrow-middle a {background-image: url(images/navrow-middle.png);}
	#navrow-bottom a {background-image: url(images/navrow-bottom.png);}

/* BUTTONS STYLING: 
Controls color change on hover and active. Remember the left-most button (button1) is 102px wide, all others are 101 px wide*/

/* BUTTONS: home, consciousness, memory */ 
	.button1 {width: 102px;} /* 1st button is different, only specify width of button */
	.button1:hover, .button1:focus, #home li.home a, #consciousness li.consciousness a, #memory li.memory a
		{background-position: 0 -30px;} /* vertical tells to move background img up 30px*/
	
/* BUTTONS: faq, developmental, motivation */
	.button2 {width: 101px; background-position: -102px 0;} /*width of butotn; background position of botton "off" state*/
	.button2:hover, .button2:focus, #faq li.faq a, #developmental li.developmental a, #motivation li.motivation a
		{background-position: -102px -30px;} /* horiz is the neg of all previous button widths combined */

/* BUTTONS: comments, emotion, personality */
	.button3 {width: 101px; background-position: -203px 0;}
	.button3:hover, .button3:focus, #comments li.comments a, #emotion li.emotion a, #personality li.personality a
		{background-position: -203px -30px;}
	
/* BUTTONS: abnormal, health, research */
	.button4 {width: 101px; background-position: -304px 0;}
	.button4:hover, .button4:focus, #abnormal li.abnormal a, #health li.health a, #research li.research a
		{background-position: -304px -30px;}
	
/* BUTTONS: biological, io, sandp */
	.button5 {width: 101px; background-position: -405px 0;}
	.button5:hover, .button5:focus, #biological li.biological a, #io li.io a, #sandp li.sandp a
		{background-position: -405px -30px;}
	
/* BUTTONS: cognition, language, sexuality */
	.button6 {width: 101px; background-position: -506px 0;}
	.button6:hover, .button6:focus,#cognition li.cognition a, #language li.language a, #sexuality li.sexuality a
		{background-position: -506px -30px;}

/* BUTTONS: learning, social */
	.button7 {width: 101px; background-position: -607px 0;}
	.button7:hover, .button7:focus, #learning li.learning a, #social li.social a
		{background-position: -607px -30px;}

/* BUTTONS: statistics */
	.button8 {width: 101px; background-position: -708px 0;}
	.button8:hover, .button8:focus, #statistics li.statistics a, #statistics li.statistics 
		{background-position: -708px -30px;}
	
/* CONTENT ================== */

#content {
padding: 20px 30px;
background: #efdf9c;
width: 896px;
height: 410px;
overflow: auto;
border: 1px solid #48575b;
position: relative; /*with z-index below, makes sure content is forward of (layered above) the navigation*/
z-index: 100;
}
#content p {
padding: 0 0 10px 0;
}
#content ul, ol {
margin-left: 0;
padding: 0 0 10px 30px;
}
#content ul ul, ol ol {
padding-bottom: 0;
}
#content h1 { /* PAGE HEADINGS - General settings */
padding: 0 0 10px;
margin: 0 auto;
text-align: center;
text-indent: -9999em; /*leaves text on site so screen readers can "read" it, but moves off screen for everyone else*/
background-repeat: no-repeat;
height: 32px;
width: 549px;
}
	/* PAGE HEADINGS - Individual pages: 
	These settings call each page's heading as an image. For simplicity's sake, all #content h1 images are the same 
	height+width, set above in #content h1. Height+width COULD be set independently in each #content h1 class below.
	*/
	#content h1.home {background-image: url(images/home.jpg);}
	#content h1.faq {background-image: url(images/faq.jpg);}
	#content h1.comments {background-image: url(images/comments.jpg);}
	#content h1.abnormal {background-image: url(images/abnormal.jpg);}
	#content h1.biological {background-image: url(images/biological.jpg);}
	#content h1.cognition {background-image: url(images/cognition.jpg);}
	#content h1.consciousness {background-image: url(images/consciousness.jpg);}
	#content h1.developmental {background-image: url(images/developmental.jpg);}
	#content h1.emotion {background-image: url(images/emotion.jpg);}
	#content h1.health {background-image: url(images/health.jpg);}
	#content h1.io {background-image: url(images/io.jpg);}
	#content h1.language{background-image: url(images/language.jpg);}
	#content h1.learning {background-image: url(images/learning.jpg);}
	#content h1.memory {background-image: url(images/memory.jpg);}
	#content h1.motivation {background-image: url(images/motivation.jpg);}
	#content h1.personality {background-image: url(images/personality.jpg);}
	#content h1.research {background-image: url(images/research.jpg);}
	#content h1.sandp {background-image: url(images/sandp.jpg);}
	#content h1.sexuality {background-image: url(images/sexuality.jpg);}
	#content h1.social {background-image: url(images/social.jpg);}
	#content h1.statistics{background-image: url(images/statistics.jpg);}
	#content h1.notfound{background-image: url(images/notfound.jpg);}


h2 { /* SUB-CATEGORY HEADINGS */
padding: 10px 0;
font-size: 22px;
color: #0b3757;
text-align: center;
font-variant:small-caps;
}
h3 { /* VIDEO HEADINGS */
padding: 0 0 10px;
font-size: 19px;
color: #3d87a6;
}
#content a, a:link, a:visited, a:hover, a:active {
color: #3d87a6;
border-bottom: none;
}
#content a:hover {
border-bottom: 1px solid #3d87a6;
}
#content a.top, #content a.top:link, #content a.top:visited, #content a.top:hover, #content a.top:active { /* BACK TO TOP LINKS */
font-size: 11px;
color: #48575b;
border-bottom: none;
}
#content a.top:hover {
border-bottom: 1px solid #48575b;
}
#content .subnav {
text-align: center;
font-size: 12px;
padding: 0 30px 10px;
line-height: 17px;
color: #48575b;
}
#content .subnav a, #content .subnav a:link, #content .subnav a:visited, #content .subnav a:active {
color: #48575b; 
border-bottom: none;
}
#content .subnav a:hover {
color: #3d87a6;	
border-bottom: 1px solid #3d87a6;
}
.narrow , p.question, p.answer {
margin-left: 170px;
margin-right: 170px;
}
#homebackground { /* HOME PAGE CONTENT */
 position: relative;
 height: 362px;
 width: 880px;
 background: url(images/superlatives.gif) center top no-repeat #efdf9c;
}
#homebackground p {
font-size: 16px;
text-align: justify;
margin-left: 210px;
margin-right: 210px;
padding-top: 13px !important;
}
.c4csignature {
padding-top: 5px;
}
p.question {
font-weight: 700;
margin-top: 15px;
}
p.answer {
}
sup {
height: 0;
line-height: 1;
position: relative;
top: -0.6em;
vertical-align: baseline !important;
vertical-align: bottom;
}
#smallerlist {
margin-left: 170px;
margin-right: 170px;
}
#smallerlist ul,
#smallerlist li {
font-size: 12px;
}
#smallerlist li {
padding-bottom: 4px;
}
.disorder {
font-weight: 600;
}
div.video {
float: left;
padding: 5px 20px 20px 0;
}
.videotitle {
font-style: italic;
}

/* FORM ELEMENTS ============= */
fieldset {
clear: left;
width: 510px;    
margin: 0 auto;    
padding: 3px 7px 7px;
border: 1px solid #d4c37d;
background: #d4c37d;
}
legend {
margin-left: 5px;
font-weight: 700;
font-size: 19px;
color: #3d87a6;
}
fieldset ol {
padding: 6px 0 0;  
margin: 0;
list-style: none;
}
fieldset li {
padding-bottom: 1px;
float: left;
clear: left;    
width: 100%;    
}
fieldset.submit, input.button {  
border: 1px solid #000;
float: left;
width: auto;
font-size: 14px;
padding: 2px;
text-transform: uppercase;
font-weight: 700;
margin: 10px 0 0 130px;
background-color: #3d87a6;
color: #fff;
}
input.button:hover {
background-color: #fff;
color: #3d87a6;
}
label { 
display: block;
float: left;    
margin: 2px 10px 0 0;
font-size: 12px;
font-weight: 700;
text-align: right;
}
label.narrowlabel {
width: 120px;
}
label.checkbox {
margin-left: 130px;
}
input, textarea {
border:1px solid #48575b;
font-size:12px;
margin:1px 0;
padding:1px 0;
background:#fff;
}
fieldset p {
margin: 0;
padding: 0;
}
.errormsg {
color: red;
font-weight: 700;
}
span.requiredasterisk {
color: red;
padding: 0 3px;
font-weight: 700;
}
.requirednote, .humanexplain {
font-style: italic;
color: #48575b;
font-size: 12px;
}
.requirednote {
float: right;
}

/* FOOTER =================== */

#footer {
padding: 10px 1px 10px 104px; /*104px left padding is the same width as the Cengage logo floated right. This centers the text*/
background: none;
text-align: center;
}
#footer p {
margin: 0; /*zeroing margins of the 1st element in the footer avoids margin collapse - a space between divs*/
padding: 0 0 5px 0; /*padding on this element will create space, just as the the margin would have, w/o margin collapse issue*/
color: #fff;
font-size: 10px;
}
#footer a, a:link, a:visited, a:hover, a:active {
color: #fff;
}
#footer a {
border-bottom: 1px solid #fff;
}