/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

@font-face {
    font-family: 'dancing';
    src: url('../fonts/dancingscript-regular-webfont.eot');
    src: url('../fonts/dancingscript-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/dancingscript-regular-webfont.woff') format('woff'),
         url('../fonts/dancingscript-regular-webfont.ttf') format('truetype'),
         url('../fonts/dancingscript-regular-webfont.svg#dancing_script_otregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
	background:	url("../images/bg.jpg") no-repeat fixed center center  #FFFFFF;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	/* some code to make IE do cover backgrounds as well */
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.../images/bg.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale')";
}
.wrapper{
	margin-top: 20px;
	position:relative;
}
.container{
	background-color: #fff;
}

#footer{
	width: 100%;
	height: 200px;
	margin: 60px 0 0 0;
	background-color: #000;
	color: #fff;
	padding: 20px 0 60px 0;
	font-size: 16px;
}

#footer a{
	color: #fff;
	text-decoration: none;
}

#footer a:hover{
	text-decoration: underline;
}

#footer hr{
	border-bottom: 1px solid #fff;
	margin: 15px 0;
}

#footer img{
	display: block;
	margin: 0 auto 20px;
}

#footer .container{
	background-color: #000;
}

#footer .container .columns{
	text-align: center;
}

#footer .footerlinks{
	font-size: 12px;
}

#footer .tag{
	color: #00a096;
}

.imagecaption{
	font-style: italic;
	color: #00A096;
	font-size: 12px;
	
}

.navarea{
	position: relative;
}

.navarea ul {
	float: left;
	margin:0;
}

.navarea ul li{
	float: left;
}

.navarea ul li a{
	text-decoration: none;
	font-size: 18px;
	padding: 10px 10px;
	background: url('../images/pipe.gif') right center no-repeat;
}

.navarea ul li a.last{
	background: none;
}

#home h1{
	color: #666;
	margin-top: 20px;
	padding-right: 80px;
	font: 30px/120% dancing, "Lucida Grande", Lucida, Verdana, sans-serif;
}

.bar{
	display:block;
	position: relative; 
	width: 1000px; 
	margin: 0 auto; 
	padding: 0; 
	background-color: #00a096;
	height:20px;
}

.container{ position: relative; width: 960px; margin: 0 auto; padding: 0 20px 30px; }


.green{
	color: #00a096;
}

.header .logo{
	float: right;
	margin: 20px 0;
}

.social{
	position: relative;
	padding-bottom:10px;
}

.navarea ul , .navarea ul ul {
	list-style: none;
}

.navarea ul a {
	display: block;
	color:#444;	
}

.navarea ul a:hover{
	/*background-color: #00a096;*/
	color: #999;
}

.navarea ul li ul {
	position: absolute;
	width: 160px;
	left: -999em;
	margin: 0;
	background-color: #fff;
	z-index: 999;
}

.navarea ul li ul li{
	margin: 0;
	width: 160px;
}

.navarea ul li ul li a{
	padding: 10px;
	background-color: #00a096;
	color: #FFF;
	background-image: none !important;
}

.navarea ul li ul li a:hover{
	background-color: #999;
	color: #FFF;
}
.navarea ul li:hover > a{
	color: #999;
}


.navarea ul li:hover ul {
	left: auto;
}

.footershadow{
	width: 1008px;
	height: 250px;
	background: url(../images/bottom-shadow.png) no-repeat;
	position: absolute;
	bottom: -60px;
	right: -55px;
	z-index: -1;
}

.topshadow{
	width: 48px;
	height: 238px;
	background: url(../images/top-shadow.png) no-repeat;
	position: absolute;
	top: 0;
	right: -48px;
	z-index: -1;
}

.twelve.columns.right{
	float:right !important;
}
.pageCopy{
	padding-left:10px;
}
.four.columns.left{
	text-align:center;
}
.title{
	font-size:20px;
}
.subtitle{
	font-size:14px;
	color:#999;	
}
#slider{
	-moz-box-shadow: 5px 5px 5px #888;
	-webkit-box-shadow: 5px 5px 5px #888;
	box-shadow: 5px 5px 5px #888;
	margin-bottom:10px;
}
/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.footershadow, .topshadow{
			display: none;
		}
		.bar{ width:808px !important; }
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.footershadow. .topshadow{
			display: none;
		}
		.wrapper{ margin-top:70px; }
		.four.columns.left{ clear:both; }
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.navarea ul {
			margin: 10px 0 0 0;
		}
		.footershadow, .topshadow{
			display: none;
		}
        .bar { width: 460px !important; }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.navarea ul {
			margin: 10px 0 0 0;
			display: none;
		}
		.navarea{
			height: 115px;
		}
		.header .logo{
			float: left;
			margin: 10px 0 0 0;
		}
		.footershadow, .topshadow{
			display: none;
		}
		.bar{ width:340px !important; }
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/