body,html{
	position:absolute;
	width:100%;
	min-height:100%;
	min-width:960px;
}
body{
	background:#FFF;
	min-height:100%;
	font-family: 'Molengo', sans-serif;
	font-size:16px;
	line-height:1.3em;
	color:#8E8E8E;
}
a{
	text-decoration:none;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

/* common */
.clear{zoom:1;}
.clear:after{
	content:'.';
	display:block;
	visibility:hidden;
	clear:both;
	height:0;
	line-height:0;
}

/* animated background */
#background{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	z-index:1;
}
#bgnd-clouds-bottom{
	background:url(images/clouds-bottom.jpg);
	height:200px;
}
#bgnd-clouds-top{
	background:url(images/clouds-top.png);
	height:206px;
	position:absolute;
	left:0;
	top:70%;
	z-index:2;
	width:100%;
}
/* main container */
#content{
	width:900px;
	padding:40px 30px;
	min-height:300px;
	margin:4px auto;
	background: #FFF;
	position:relative;
	z-index:3;
	-webkit-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.5);
	-o-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.5);
	border-radius:8px;
}
#main-header{
	position:relative;
	padding: 30px 0 0 0;
	width:960px;
	margin:0 auto;
	margin-bottom: 3px;
	left:0;
	top:0;
	z-index:2;
}

/* logo */
.main-logo{
	font-family: 'Fredericka the Great', cursive;
	font-size:40px;
	text-shadow:1px 1px 7px #000;
	text-shadow:1px 1px 7px rgba(0,0,0,0.9);
	font-weight:normal;
}
.textEff0, .textEff6, .textEff11{color:#FF0000}
.textEff1, .textEff7, .textEff12{color:#00FF00}
.textEff2, .textEff8, .textEff13{color:#0000FF}
.textEff4, .textEff9, .textEff14{color:#FFFF00}
.textEff5, .textEff10, .textEff15{color:#FF00FF}

.main-navigation{
	position:absolute;
	right: 8px;
	top: 24px;
	width: 612px;
}
.menu-primary-menu-container {
	float:right;
}
.menu li{
	float:left;
	margin-left:10px;
}
.menu li a{
	color:#FFF;
	display:block;
	padding:10px 6px;
	height:100px;
	text-transform:uppercase;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	-webkit-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.5);
	-o-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.5);
	text-shadow:1px 1px 7px #000;
	-webkit-text-shadow:1px 1px 7px rgba(0,0,0,0.9);
	-moz-text-shadow:1px 1px 7px rgba(0,0,0,0.9);
	text-shadow:1px 1px 7px rgba(0,0,0,0.9);
}
.menu li a:hover{
	margin-top:-10px;
}

.menu li:nth-child(1) a{background:#FF0000}
.menu li:nth-child(2) a{background:#00FF00}
.menu li:nth-child(3) a{background:#0000FF}
.menu li:nth-child(4) a{background:#FFFF00}
.menu li:nth-child(5) a{background:#FF00FF}

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/
/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%; width:100%;}

#main {overflow:auto;
	padding-bottom: 200px;}  /* must be same height as the footer */

#footer {
	position: relative;
	margin-top: -200px; /* negative value of footer height */
	height: 100px;
	padding-top: 100px;
	min-width:960px;
	clear:both;
	z-index:4;
	background:#289F00 url(images/body-bgnd.jpg) top repeat-x;
	color:#FFF;
} 
#footer a{
	color:#FFF;
}
#footer a:hover{
	text-decoration:underline;
}
#footer-content{
	width:960px;
	margin:0 auto;
	font-size:12px;
}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

/* */