/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% NEW CSS drop copied below  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

@charset "UTF-8";

/* RESET */

html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	}

/* END reset*/

/* General Stuff here*/
body {
	font: 100%/1.4 'SlingNormal', Arial, Helvetica, sans-serif;
	background-color: #405367;
	margin: 0;
	padding: 0;
	color: #000;
}

@font-face {
    font-family: 'RosarivoItalic';
    src: url('../_fonts/rosarivo/Rosarivo-Italic-webfont.eot');
    src: url('../_fonts/rosarivo/Rosarivo-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../_fonts/rosarivo/Rosarivo-Italic-webfont.woff') format('woff'),
         url('../_fonts/rosarivo/Rosarivo-Italic-webfont.ttf') format('truetype'),
         url('../_fonts/rosarivo/Rosarivo-Italic-webfont.svg#RosarivoItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'SlingNormal';
    src: url('../_fonts/Sling/Sling-webfont.eot');
    src: url('../_fonts/Sling/Sling-webfont.eot?#iefix') format('embedded-opentype'),
         url('../_fonts/Sling/Sling-webfont.woff') format('woff'),
         url('../_fonts/Sling/Sling-webfont.ttf') format('truetype'),
         url('../_fonts/Sling/Sling-webfont.svg#SlingNormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ~~ Element/tag selectors ~~ */
dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0px;	 
	padding-right: 15px;
	padding-left: 15px; 
	padding-bottom: 10px;
}
h1 {font: Verdana, Arial, Helvetica, sans-serif;; font:bold; font-size: 2em;}
h2 {font: Verdana, Arial, Helvetica, sans-serif; font:bold;font-size: 1.6em;}
h3 {font: Verdana, Arial, Helvetica, sans-serif; font:bold;font-size: 1.3em;}
h4 {font: Verdana, Arial, Helvetica, sans-serif; font:bold;font-size: 1em;}
h5 {font-size: .8em;}
h6 {font-size: .6em;}

/* SET 'a' link COLORS for each unique feature area */

a:link    {color:#006C46; 
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}
a:visited {color:#96C;}
/* EDIT the following background color based on the feature area theme */
a:hover   {color:#36F; background-color: #F0EEAB;}
a img { 
	border: none;
}
/* next line makes hover image color equal container bkgrnd
a:hover img { background-color: #C1D3E8; }
*/
a:active  {color:#6F9;}




/* ~~the fixed width container surrounds the other divs
SIDEBAR
CONTENT   ~~ */
.container {
	position:relative;
	width: 780px;
	/* the following auto value on the sides, coupled with the width, centers the layout */
	margin: 0 auto; 
	/* THIS BACKGROUND sets the Faux Columns abd IS Unique to feature arrea pages */
	background-image: url(../zfaa/rfiles/images/bkgnd_tile.png);

/* set up for animation ADD these lines in the outer box container */
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	-o-perspective: 500px;
	perspective: 500px;
}

/* first in the model is the page header on top */
.header {
	height: 170px;
}
.header h1 { 
		margin-top: 0px; 
		padding: 0px;
		font-style: italic;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, .8);

}
.header div { margin:0px;
text-shadow: 4px 4px 5px rgba(0, 0, 0, .7);
}

/* ~~ the header is not given a width. It will extend the full width of your layout. ~~ */
#logo {
	position: absolute;
	top: 30px;
	left: 30px;
/*    for the animation add these lines    */
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	
	}
	

/*    set up for animation ADD the following to expand upon our rules above for the logo  THIS makes the graphic spin like a weather vane upon mouse hover   */

#logo:hover   {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.subheader {
	height: 25px;
	width 780;
	background-color: #DFE7D8;
	font-size:14px;
	text-align:center;
	padding-top: 10px;
}

.sidebar1 {
	float: left;
	width: 220px;
	padding-bottom: 10px;
	height: 100%;
	font: Arial, Helvetica, sans-serif;
}


/* These ID tags go to the conent o the Library Menu items */
#first, #third, #fourth, #fifth, #sixth, #seventh {
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
}
#second {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}
#eight {
}

.content {
	width: 560px;
	float: left;
	font: 'SlingNormal', Arial, Helvetica, sans-serif;
	font-size: 1.1em;
}
.content > h1 {
	padding-top: 10px;
}
.content h1 {
text-shadow: 2px 2px 1px rgba(0, 0, 0, .2);	
font-family:'RosarivoItalic',Arial,Helvetica,sans-serif;
}
.content h2, h3 {
text-shadow: 2px 2px 1px rgba(0, 0, 0, .2);	
font-family:'SlingNormal',Arial,Helvetica,sans-serif;
}
.sidebar1 h2, h3 {
text-shadow: 2px 2px 1px rgba(0, 0, 0, .2);	
font-family:'SlingNormal',Arial,Helvetica,sans-serif;
}
#moviebox {
	padding: 10px 0;
	width: 560px;
	float: left;  
	text-align:center;
}
.imagebox {
	text-align:center;
}
.flashbox {
	text-align:center;
}
.textbox {
	text-align:center;
}
aside{
	width: 175px;
	border: 1px solid #999;
	background:#F9F9E5;
	padding: 3px;
	margin: 3px;
	float: right;	
	
}
 table.center {
    width: 100%;
	margin-left:auto; 
    margin-right:auto;
  }
  td.center{
	margin-left:auto; 
    margin-right:auto;  
  }
table.gray {
	width: 400px;
	background: #CCC;
	margin-left:auto; 
    margin-right:auto;
  }  
  table.graywide {
	width: 490px;
	background: #CCC;
	margin-left:auto; 
    margin-right:auto;
	text-align:center;
  }  
   table.grayextrawide {
	width: 550px;
	background: #CCC;
	margin-left:auto; 
    margin-right:auto;
	text-align:center;
  }  
  
 table.smgreen {
	width: 250px;
	background: #DAE3D2;
	margin-left:auto; 
    margin-right:auto;
  }  
  
blockquote.plain{
	background-color:#F5FFEF;
}

.contentcollapsed {
	width:560px;
	float:left;
	font:Arial, Helvetica, sans-serif;
	background-color:#EDF8F3;
}
.contentcollapsed2 {
	width:560px;
	float:left;
	font:Arial, Helvetica, sans-serif;
	background-color:#EDF8F3;
}

/* ~~ The footer ~~ */
.footer {
	padding: 10px 0;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
	background-color: #F1F5E0;
	background-image: url(../sci/img/sci_bkgnd_tile.footer.png);
	height: 70px;
	text-align: center;

}

/* NOT SURE IF we need the following DREAMWEAVER selectors */

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}


.boldBlue{
	color: #0000CC;
	font-weight: bold;
}
.boldRed{
	color: #7E0000;
	font-weight: bold;
}
.graytext{
	color: gray;
	font-size: .8em;
}
.siennatext{
	color: #930;
	font-size: .8em;		
}
.boldRed33{
	color: #663300;
	font-weight: bold;
}
.boldRed99{
	color: #A90000;
	font-weight: bold;
}
.boldPurple{
	color: #660066;
	font-weight: bold;
}

blockquote
{
	margin-left: 25px;
	margin-bottom:20px;
	background-color:#FFFBE0;
}
/*
blockquote:before {
    content: '“';
	content: open-quote;
}
*/
/*  Drop close quote to allw inclusion of citation 
blockquote:after {
  	  content: '”';
	content: close-quote;    }
*/