s

/*================ [ general styles ] ================ */

/* base reset */ html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, 
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

li, ul, ol, dl { position: relative; }


body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FFF;
}



/*================ [ holding site ] ================ */


div#maincontainer {
	width: 1170px;
	margin-left:auto;
	margin-right:auto;
	height: 1520px;
	background-color: #CC6;

}


 .containershad {
	width: 15px;
	height: 1520px;
	float:left;
	background-color: #F00;
}
	
	
	div#container {
	width: 1140px;
	float:left;
	height: 1520px;
	background-color: #CF3;

}

/*================ [ Navigation ] ================ */



div#headernav {
	width: 1075px;
	height: 126px;
	background-color: #fff;
	position:fixed;
	margin-left:33px;
	margin-right:32px;
}

div#nav {
	width: 1050px;
	height: 125px;
	margin-left:auto;
	margin-right:auto;
	background-color: #fff;
}

div#line {
	width: 1075px;
	height: 1px;
	float:left;
	background-color:#333;
}


div#logo {
	width: 230px;
	height: 61px;
	margin-top:32px;
	margin-bottom:30px;
	margin-right:12px;
	background-image: url(images/Forecast_Design_Logo.png);
	float:right;
}


/*================ [ css slider ] ================ */

div#pagenav {
	width: 746px;
	height: 125px;
	margin-left:12px;
	float:left;
	background-color: #fff;
}


#underlinemenu{
margin: 0;
padding: 0;
text-decoration:none;
margin-top:45px;

}

#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-left: 10px;
float: left;
font-weight: bold;
width: 100%;
border-width: 1px 0;
text-decoration:none;

}

* html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/
margin-bottom: 0;
text-decoration:none;

}

#underlinemenu ul li{
display: inline;
text-decoration:none;
font-size:20px;
word-spacing:3px;

}


#underlinemenu ul li a{
float: left;
color: ;
padding: 2px 2px 2px 2px;
text-decoration: none;
margin-left: 15px;
color:#4d4d4f;


}

#underlinemenu ul li a:hover{
color:#4d4d4f;
border-bottom: 4px solid #1a61ad;
padding-bottom: 0;
text-decoration:none;
}

/*================ [ main content ] ================ */


div#maincontent {
	width: 1075px;
	height: 1300px;
	float:left;
	margin-top:126px;
	margin-left:33px;
	margin-right:32px;
}

div#pagename {
	width: 1050px;
	margin-left:auto;
	margin-right:auto;
	height: 30px;
	float:left;
	background:#ff7;
}

div#imageholder {
	width: 330px;
	height: 760px;
	float:left;
	background:#fff;
}

div#image {
	width: 330px;
	height: 200px;
	float:left;
		margin-bottom:30px;
		background:#fff;

}


/*================ [ Image flipping ] ================ */

/* entire container, keeps perspective */
.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}
  /* flip the pane when hovered */
  .flip-container:hover .flipper, .flip-container.hover .flipper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

.flip-container, .front, .back {
  width: 330px;
  height: 200px;
}

/* flip speed goes here */
.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;

  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;

  transition: 0.6s;
  transform-style: preserve-3d;

  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
}

/* back, initially hidden pane */
.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}