@charset "UTF-8";
/* CSS Document */


body {
	color: black;     /* text color for the entire page unless overruled  */ 
	background-color: #4D4B4A;     /* background color for the entire page  */ 
	font-family: Times New Roman, Georgia, Serif;   /* listed in descending order of preference  */
	text-align: justify;
	font-size: 16px;
	line-height: 130% 
}


h1 {
	text-align: center;
	letter-spacing: 3px;
	font-size: 19px;
	font-family: Arial, Verdana, sans-serif;
	color: #515151;   /* text color */ 
	background-color: #e0dbc2;    
	border: none;

}


h2 {
	text-align: center;
	letter-spacing: 3px;
	font-size: 19px;
	font-family: Arial, Verdana, sans-serif;
	color: #515151;   /* text color */ 
	border: none;

}


h3 {
	text-align: center;
	font-size: 19px;
	color: black;    
}


h4 {
	text-align: center;
	font-size: 16px;
	color: #383737;   /* text color */ 
}

h5 {
	text-align: center;
	font-size: 13px;
	font-family: Arial, Verdana, sans-serif;
	color: #383737;   /* text color */ 
}

h6 {
	text-align: center;
	font-size: 14px;
	font-family: Arial, Verdana, sans-serif;
	color: #383737;   /* text color */ 
}

h7 {
	text-align: center;
	font-size: 13px;
	font-family: Arial, Verdana, sans-serif;
	color: #383737;   /* text color */ 
}


h8 {
	text-indent: 12px;   /* first line indent in a paragraph  */
	text-align: justify;
	font-size: 16px;
	Color: navy;
	font-family: Times New Roman, Georgia, Serif;
	line-height: 140%   /* Line height—the distance between lines. Can be in px or pt. Double-spacing could be defined like: line-height: 2 or 200%.  */
}

h9 {
	text-align: center;
	font-size: 12px;
	font-family: Arial, Verdana, sans-serif;
	color: #737171;   /* text color */ 
}





p {
	text-indent: 12px;   /* first line indent in a paragraph  */
	text-align: justify;
	font-size: 16px;
	Color: black;
	font-family: Times New Roman, Georgia, Serif;
	line-height: 130%   /* Line height—the distance between lines. Can be in px or pt. Double-spacing could be defined like: line-height: 2 or 200%.  */
}






a:link {
	color: navy;
	text-decoration: none;
}
a:visited {
	color: navy;
	text-decoration: none;
}
a:active {
	color: orange;
	text-decoration: none;
}
a:hover {
	color: #B70818;
	text-decoration: none;
	background-color: none;
	
}





/* Layout/ Structure */

#main_container {   
	position:relative;   /* position:relative rule allows us to define absolutely placed objects within this container */
	background-color: #E0DBC2;
	margin: auto;   /* margin:auto rule centers the box */
	width: 960px;
}

#header {
	background-color:#4D4B4A;
	background-image: url(header.jpg);
	height:146px;
	padding-left:0px;   /* can define padding & margins specifically or in general: padding:5px or padding-left:15px padding-right:5px padding-top:2px padding-bottom:5px */
}


#footer {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	background-color:#365937;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	font-family: Arial, Verdana, sans-serif;
	color: #eeeeee;   
	text-decoration:none;
	padding-left:0px;   /* Avoid padding-top and padding-bottom, as these properties expand the height of the div tag 
                               to which they’re applied. Instead, use padding-left, and if you wish, padding-right. Start 
                               with 5 pixels of padding on the left, and add more or right padding if necessary. */
}


#footer a {
	color: #eeeeee;
	text-decoration:none;
	width:100%;
	text-align: center;
}
#footer a:hover{
	text-decoration:none;
	background-color: transparent;  
        color: #029feb;
	padding-bottom: 0px;
	display:inline;
}



#footer-top {
	position:absolute;
	bottom:175px;
	left:0;
	width: 100%;
	background-color:#e0dbc2;
	text-align: center;
	
	text-decoration:none;
	padding-left:0px;   /* Avoid padding-top and padding-bottom, as these properties expand the height of the div tag 
                               to which they’re applied. Instead, use padding-left, and if you wish, padding-right. Start 
                               with 5 pixels of padding on the left, and add more or right padding if necessary. */
}


#footer-top a {
	text-decoration:none;
	width:100%;
	text-align: center;
}
#footer-top a:hover{
	text-decoration:none;
	background-color: transparent;  
        padding-bottom: 0px;
	display:inline;
}






#side_column {
	background-color: #EEE9Cf;
	float: right;
	width: 220px;   /* 220px + 20px padding = 240px  */
	padding-left: 10px; 
	padding-right: 10px; 
}


#central_column {
	background-color: #EEE9Cf;
	float: left;
	width: 680px;   
	padding-left: 20px;
	padding-right: 20px;
}




/* Images with Zoom Effect + Captions */

.image-zoom-right {
	display:table;
	margin: 10px;
	border: none;
	padding: 2px;
	float: right;	
	transition: transform .4s; /* Animation */
}
.image-zoom-right:hover {
    	background-color: beige;
	transform: scale(1.15); /* (115% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.image-zoom-center {
	display:table;
	margin-left:auto;
  	margin-right:auto;
	border: none;
	padding: 2px;
	float: center;	
	transition: transform .4s; /* Animation */
}
.image-zoom-center:hover {
    	background-color: beige;
	transform: scale(1.20); /* (120% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.image-zoom-left {
	display:table;
	margin: 10px;
	border: none;
	padding: 2px;
	float: left;	
	transition: transform .4s; /* Animation */
}
.image-zoom-left:hover {
    	background-color: beige;
	transform: scale(1.15); /* (115% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}


.caption {
	color:#336600; 
	font-size:12px;
	font-family: Times New Roman, Georgia, Serif;  
	text-align:center;
	line-height: 120% 
}

.thumbnails {
	text-align:center;
	border:none;
	opacity: 1;
}
.thumbnails a {
	border:none;
	width:100%;
}
.thumbnails a:hover{
	background-color: transparent;
	border:none;	
	opacity: 0.5;
	transition: opacity .15s ease-in-out;
	-moz-transition: opacity .15s ease-in-out;
	-webkit-transition: opacity .15s ease-in-out;
}

.comment {
	background-color: beige;
	margin: auto;
	padding: 15px;
	width: 600px;
	float: center;
}

.response {
	
	margin: auto;
	padding: 15px;
	width: 600px;
	float: center;
	font-style: italic;
}



.contact {
	text-align:center;
	border:none;
	opacity: 1;
}
.contact a {
	border:none;
	width:100%;
}
.contact a:hover{
	background-color: transparent;
	border:none;	
	opacity: 0.7;
	transition: opacity .15s ease-in-out;
	-moz-transition: opacity .15s ease-in-out;
	-webkit-transition: opacity .15s ease-in-out;
	
}



.image-no-zoom {
	text-align:center;
	border:none;
	opacity: 1;
}
.image-no-zoom a {
	border:none;
	width:100%;
}
.image-no-zoom a:hover{
	background-color: transparent;
	border:none;	
	opacity: 0.7;
	transition: opacity .15s ease-in-out;
	-moz-transition: opacity .15s ease-in-out;
	-webkit-transition: opacity .15s ease-in-out;
	
}



/* Classroom Kits Image Galery + hover zoom */

/* Three image containers (use 25% for four, and 50% for two, etc) */

.column {
	width: 220px; <!-- or 30% -->
	height: 250px;
	padding: 5px;
	text-align:center;
	display:inline-block;
	margin: 5px;
	border: none;
}


.column:hover {
    	background-color: #fff;
	-moz-box-shadow:    0px 0px 5px 2px #cccaca;
  -webkit-box-shadow: 0px 0px 5px 2px #cccaca;
  box-shadow:         0px 0px 5px 2px #cccaca;
}



.column a {
	border:none;
	width:100%;
}

.column a:hover{
	background-color: transparent;
	border:none;	
}


.container {
 position: relative;
 width: 220px;
 height: 200px;
 overflow: hidden;




 }
.container:hover .item img {
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}

.item {
 position: absolute;
 top: 0;
 left: 0;
}
.item img {
 -webkit-transition: 0.6s ease;
 transition: 0.6s ease;
}


/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
} 
.legend {
	font-size:12px;
	font-family: Arial, Verdana, sans-serif;
	color: #383737;   
	text-align:center;
	text-decoration:none;
	line-height: 120% 
	position: 0 0 0;
}




.pic-cap {
	background-color: beige;
	margin: 5px;
	padding: 5px;
	height: 200px;
	width: 200px;
	float: right;
}


#wrapper { 
	style="width:100%; 
	text-align:center;
}


/* Vertical Navigation Bar Starts */ 

#navigation { 
	width:220px; 
	font-size: 13px;
	font-weight: bold;
	font-family: Arial, Verdana, sans-serif;
	color: #383737;         
	text-decoration:none;

}
#navigation a {
	color: #4D4B4A;
	cursor: pointer;
	display:block;
	height: 30px; 
	line-height: 30px;
	text-indent: 15px;                   
	text-decoration:none;
	width:100%;

}
#navigation a:hover{
	text-decoration:none;
	background: #B0AB94;  
        color: #B70818;
	padding-bottom: 0px;
	display:block;
	
}
#navigation ul { 
	margin:0px; padding:0px; 
}

#navigation li { 
	list-style: none; /* add color: white;?? */
}
#navigation li:hover {
 position: relative;
}


ul.top-level { 
	background:#A49F8A;
}
ul.top-level li {
	border-bottom: #858276 solid;
	border-top: #858276 solid;
	border-width: 0px;
}


/* Vertical Navigation Bar Ends */



/* Horizontal Navigation Bar Starts */ 

#menu {  
	list-style:none;  
        width:920px;  
        margin:0px auto 0px auto;  
        height:40px;  
        padding:0px 20px 0px 20px;



/* Navigation bar goes on top of banner */  
	
	position:relative;
	z-index:444;
      

/* Rounded Corners for a whole navigation bar */  
          
        -moz-border-radius: 10px;  
        -webkit-border-radius: 10px;  
        border-radius: 0px 0px 1px 0px; 

      
/* Background color and gradients */  
          
        background: -moz-linear-gradient(top, #707070, #160F0F);  
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#707070), to(#160F0F));

        
/* Borders for a whole navigation bar */  
          
        border: 0px solid #1E4101;  
      
        -moz-box-shadow:inset 0px 0px 1px #848383;  
        -webkit-box-shadow:inset 0px 0px 1px #848383;  
        box-shadow:inset 0px 0px 5px #8D8C8C;  
}  

#menu li {  
	float:left;  
	display:block;  /* ??? delete */
	text-align:center;  
	position:relative;  
	padding: 4px 10px 4px 10px;  
	margin-right:30px;  
	margin-top:7px;  
	border:none;  
	font-family:Arial, Helvetica, sans-serif;  
	font-size:14px; 
	color: #EEEEEE;  
}  
 
 
 

 
#menu li:hover {  
    border: 1px solid #504e4e;  
    padding: 6px 9px 4px 9px;  
      
    /* Background color and gradients */  
      
    background: #504e4e;  /* Button background color */  
  
      
    /* Rounded corners */  
      
    -moz-border-radius: 5px 5px 0px 0px;  
    -webkit-border-radius: 5px 5px 0px 0px;  
    border-radius: 5px 5px 0px 0px;  /* 1-left top, 2-right top, 3-right bottom, 4-left bottom   */
}  


  
#menu li a {  
    	font-family:Arial, Helvetica, sans-serif;  
    	font-size:14px; 
    	color: #EEEEEE;  
    	display:block;  
    	outline:0;  
    	text-decoration:none;  
    	text-shadow: 1px 1px 1px #000;  
	background: transparent;
}  

  
#menu li:hover a {  
    	color:#EEEEEE;  
    	text-shadow: 0px 0px 0px #FFFFFF;  
}  


#menu li .drop {  
    	padding-right:28px;  
    	/* background:url("image/drop.png") no-repeat rightright 8px;   */
}  


#menu li:hover .drop {  
	/* background:url("image/drop.png") no-repeat rightright 7px;   */
}  




/* Drop Down */


.dropdown_1column,   
.dropdown_2columns,   
.dropdown_3columns,   
.dropdown_4columns,  
.dropdown_5columns {  
    margin:4px auto;
    position:absolute;  
    left:-999em; /* Hides the drop down */  
    text-align:left;  
    padding:10px 5px 10px 5px;  
    border:1px solid ##504e4e;  
    border-top:none; 
    background:#504e4e;;  
   
  
    /* Rounded Corners */  
    -moz-border-radius: 0px 5px 5px 5px;  
    -webkit-border-radius: 0px 5px 5px 5px;  
    border-radius: 0px 5px 5px 5px;  
}  
  
.dropdown_1column {width: 120px;}  
.dropdown_2columns {width: 280px;}  
.dropdown_3columns {width: 420px;}  
.dropdown_4columns {width: 560px;}  
.dropdown_5columns {width: 150px;}  
  
#menu li:hover .dropdown_1column,   
#menu li:hover .dropdown_2columns,   
#menu li:hover .dropdown_3columns,  
#menu li:hover .dropdown_4columns,  
#menu li:hover .dropdown_5columns {  
    left:-1px;     
    top:auto;  
}  


/* Columns */  
  
.col_1,  
.col_2,  
.col_3,  
.col_4,  
.col_5 {  
    display:inline;  
    float: left;  
    position: relative;  
    margin-left: 5px;  
    margin-right: 5px;  
}  
.col_1 {width:130px;}  
.col_2 {width:270px;}  
.col_3 {width:410px;}  
.col_4 {width:550px;}  
.col_5 {width:120px;}  


/* Right alignment */  
  
#menu .menu_right {  
    float:rightright;  
    margin-right:0px;  
}  
#menu li .align_right {  
    /* Rounded Corners */  
    -moz-border-radius: 5px 0px 5px 5px;  
    -webkit-border-radius: 5px 0px 5px 5px;  
    border-radius: 0px 5px 5px 5px;  
}  
#menu li:hover .align_right {  
    left:auto;  
    rightright:0px;  
    top:auto;  
}  


/* Drop Down Content Stylings */  
  
#menu p, #menu h2, #menu h3, #menu ul li {  
    font-family:Arial, Helvetica, sans-serif;  
    line-height:21px;  
    font-size:12px;  
    text-align:left;  
    text-shadow: 1px 1px 1px #FFFFFF;  
}  
#menu h2 {  
    font-size:21px;  
    font-weight:400;  
    letter-spacing:-1px;  
    margin:7px 0 14px 0;  
    padding-bottom:14px;  
    border-bottom:1px solid #504e4e;  
}  
#menu h3 {  
    font-size:14px;  
    margin:7px 0 14px 0;  
    padding-bottom:7px;  
    border-bottom:1px solid #888888;  
}  
#menu p {  
    line-height:18px;  
    margin:0 0 10px 0;  
}  
  
#menu li:hover div a {  
    font-size:12px;  
    color:white;  
}  
#menu li:hover div a:hover {  
    color:white;  
}  
.strong {  
    font-weight:bold;  
}  
.italic {  
    font-style:italic;  
}  
.imgshadow {  
    background:#FFFFFF;  
    padding:4px;  
    border:1px solid #777777;  
    margin-top:5px;  
    -moz-box-shadow:0px 0px 5px #504e4e;  
    -webkit-box-shadow:0px 0px 5px #504e4e;  
    box-shadow:0px 0px 5px #504e4e;  
}  
.img_left { /* Image sticks to the left */  
    width:auto;  
    float:left;  
    margin:5px 15px 5px 5px;  
}  
#menu li .black_box {  
    background-color:#333333;  
    color: #eeeeee;  
    text-shadow: 1px 1px 1px #000;  
    padding:4px 6px 4px 6px;  
  
    /* Rounded Corners */  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
  
    /* Shadow */  
    -webkit-box-shadow:inset 0 0 3px #000000;  
    -moz-box-shadow:inset 0 0 3px #000000;  
    box-shadow:inset 0 0 3px #000000;  
}  
#menu li ul {  
    list-style:none;  
    padding:0;  
    margin:0 0 12px 0;  
}  
#menu li ul li {  
    font-size:12px;  
    line-height:24px;  
    position:relative;  
    text-shadow: 1px 1px 1px #ffffff;  
    padding:0;  
    margin:0;  
    float:none;  
    text-align:left;  
    width:130px;  
}  
#menu li ul li:hover {  
    background:none;  
    border:none;  
    padding:0;  
    margin:0;  
}  
#menu li .greybox li {  
    background:#F4F4F4;  
    border:1px solid #bbbbbb;  
    margin:0px 0px 4px 0px;  
    padding:4px 6px 4px 6px;  
    width:116px;  
  
    /* Rounded Corners */  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
}  
#menu li .greybox li:hover {  
    background:#ffffff;  
    border:1px solid #aaaaaa;  
    padding:4px 6px 4px 6px;  
    margin:0px 0px 4px 0px;  
}  


/* Horizontal Navigation Bar Ends */




/* CSS code to style the pictures */
  .carousel {
   text-align: center;
  }
  #bigpic {
   height: 375px;
  }
  .thumbs img {
   height: 80px;
  }




/* Changinging Images Gallery Starts */ 


#cycler{width:650px; height:391px; margin: 0 0 0 0px; padding:10px;position:relative;}
#cycler img{position:absolute; z-index:1;left:0;top:0; background-color:#e0dbc2;
          
/* Shadow */  
padding-bottom:0px;
margin-bottom:0px;
-moz-box-shadow:0px 0px 0px #e0dbc2;
-webkit-box-shadow:0px 0px 0px #e0dbc2;
box-shadow:0px 0px 0px #e0dbc2;



/* Rounded Corners */  
padding:4px 4px;
-moz-border-radius:0px 0px 0 0;
-webkit-border-radius:0px 0px 0 0;
border-radius:0px 0px 0px 0px;
}

#cycler img.active{z-index:3;}



/* Changinging Images Gallery Ends */ 



#card{width:650px; height:650px; margin: 0 0 0 0px; padding:10px;position:relative;}
#card img{position:absolute; z-index:1;left:0;top:0; background-color:#e0dbc2;
/* Shadow */  
padding-bottom:0px;
margin-bottom:0px;
-moz-box-shadow:0px 0px 0px #e0dbc2;
-webkit-box-shadow:0px 0px 0px #e0dbc2;
box-shadow:0px 0px 0px #e0dbc2;



/* Rounded Corners */  
padding:4px 4px;
-moz-border-radius:0px 0px 0 0;
-webkit-border-radius:0px 0px 0 0;
border-radius:0px 0px 0px 0px;
}



/* RUFFLE STARTS */