/* Style Sheet for Responsive */

body{
	padding: 0;
	margin: 0;
	text-align: center;
	background: #f3f3f3;
	font-family: 'Roboto', sans-serif;
	}
	
#mainContainer{ 
	clear: both;
	margin: auto;
	width: 100%; 
	text-align: center;
}

.regMark{ font-size: smaller; vertical-align: super; }

.fullSize{ clear: both; width: 100%; margin: auto; text-align: center; }
.clearsLeft{ clear: left; float: left; }
.clearsRight{ clear: right; float: right; }
.clearsBoth{ clear: both; margin: auto; }

.floatsLeft{ clear: left; float: left; }
.floatsMiddle{ clear: both; margin: auto; text-align: center; }
.floatsRight{ clear: none; float: right; }

.noShow{ display: none; }

.perLine{ clear: both; margin: auto; width: 100%; text-align: left; }
.perLine .heading{ 
	clear: left; float: left; width: 25%; 
}
.perLine .values { 
	clear: none; float: right; width: 75%; text-align: left; 
}

.fiftyLeft{ clear: left; float: left; width: 50%; text-align: left; }
.fiftyRight{ clear: none; float: right; width: 50%; text-align: left; }

.thirtyLeft{ clear: left; float: left; width: 30%; text-align: left; }
.seventyRight{ clear: none; float: right; width: 70%; text-align: left; }

.sixtyLeft{ clear: left; float: left; width: 60%; text-align: left; }
.fortyRight{ clear: none; float: right; width: 40%; text-align: center; }

.fortyLeft{ clear: left; float: left; width: 40%; text-align: left; }
.sixtyRight{ clear: none; float: right; width: 60%; text-align: left; }

.minHeight{ height: 6px; }
.defHeight{ height: 18px; }
.maxHeight{ height: 32px; }

.blueDivider{ clear: both; width: inherit; background: #ee3c08; height: 2px;  }
.blackDivider{ clear: both; width: inherit; background: #000; height: 2px;  }
.white{ color: #fff; }

.percent90 { clear: both; margin: auto; text-align: center; max-width: 980px; padding: 10px; }

.font14{ font-size: 14px; }

.medBkg{ background: #b5e655; }
.darkBkg{ background: #96ca2d; }

/* Start Header Styles */
#header{ 
	background: #fff;
	clear: both; 
	width: 100%; 
	text-align: center;
	}
	
	.headerLogo{ 
		clear: left; float: left; width: 60%; text-align: left;
	}
	.headerLogo a{
		text-decoration: none; 
	}
	.headerLogo img{
		height: 48px;
	}
	
	.logoText{
		font-size: 16px; 
		color: #225378; 
		text-transform: uppercase;
		text-decoration: none;
		text-align: left;
		clear: none; float: left; 
		margin-top: 6px;
	}
	.logoText hr{ 
		margin: 0; padding: 0; 
		max-width: 350px;
	}
	
	.headerNav{ 
		clear: none; float: left; width: 40%; text-align: left;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	.mobileNav{ 
		margin-right: 10px;
	}
	.mobileNav .icons{ 
		clear: none; float: right;
		width: 32px;
		margin: 0 0 0 16px; 
	}
	.mobileNav .icons a{
		color: #696b73; 
		font-size: 12px;
		text-decoration: none;
	}
	
	.fullsizeNav{ display: none; color: #fff; }
	.fullsizeNav a{ color: #fff; }
	.loginButton{ clear: none; float: right; text-align: right; }
	.loginButton a{  color: #fff; font-size: 14px; text-decoration: none; }
	.fsn{ clear: none; float: right; margin-left: 6px; font-size: 18px; }
	.white{ color: #fff; }
	.fullsizeNav .telephone{ clear: right; float: right; width: 100%; text-align: right; color: #030303; font-size: 18px; margin-right: 12px; }
	
	.fullsizeNav .telephone .gc-cs-link, .pfRight .telephone .gc-cs-link{ color: #fff !important; text-decoration: none; }
	
	.collapsableNav .telephone .gc-cs-link{ color: #fff; }
	
	.collapsableNav{ background: #002453; display: none;  }
	.cNavHeading{ 
		clear: left; float: left; 
		margin-left: 30px; margin-right: 30px;
		line-height: 32px;
		font-size: 18px;
		/*color: #006ebb;*/
		color: #fff;
		font-weight: normal;
	}
	.cNavHeading:first-child{ margin-left: 0; }
	.cNavHeading:last-child{ margin-right: 0; }
	.cNavHeading a{
		color: #fff;
		text-shadow: 1px 1px 4px #000;
		font: inherit;
		text-decoration: none;
	}
	
	.framedPhoto{ border: solid 3px #fff;  margin-bottom: 6px; margin-left: 6px; }
	.shadowedPhoto{ border: solid 3px #fff; box-shadow: 3px 3px 9px #3f3f3f; }
	
/* Blue Page Feature Section */
	.pageFeature{ 
		padding: 10px 0 12px 24px;
		margin: -10px 0 0 0;
		width: 98%;
		color: #333;
		padding-bottom: 10px;
		min-height: 400px;	/* so it is even with left nav */
	}
	
	.contentBkg{ 
		background: url('/images/home-page-feature.jpg') repeat-x top left #3c3c3c; 
	}
	.blueGemsBkg{
		background: url("/images/blue-diamond-gems2.jpg") repeat-x top left #3c3c3c;
	}
	.emeraldGemsBkg{
		background: url('/images/emerald-gems2.jpg') repeat-x top left #3c3c3c;
	}
	.sapphireGemsBkg{
		background: url('/images/sapphire-gems3.jpg') repeat-x top left #3c3c3c; 
	}
	.krystallysBkg{ 
		background: url('/images/krystallys-finished.jpg') repeat-x top left #3c3c3c;
	}
	.whiteClassic{ 
		background: url("/images/white-classic.jpg") repeat-x top left #3c3c3c;
	}
	.whiteGrad{ 
		background: #f7f7f7; /* Old browsers */
	}
	
	.pfLeft{
		clear: left; float: left;
		width: 20%;
		padding: 10px;
		margin-left: -10px;
		margin-top: -10px;
	}
	.pfLeft ul{ 
		list-style-type: none;
		margin: 0; padding: 0;
	}
	.pfRight{ 
		clear: none; float: left;
		margin-left: 1%;
		width: 75%;
	}
		
	/* Page Feature Specifics */
	.pfLeft ul li{ 
		clear: left; float: left;
		margin: 0; 
		padding: 0;
		font-weight: normal;
		color: #333;
		width: 100%;
		text-align: center;
		border-bottom: solid 1px #3f3f3f;
		font-size: 22px;
		font-weight: bold;
		text-align: left;
		height: 48px;
		margin-bottom: 6px;
		padding-top: 6px;
		cursor: pointer;
	}
	.pfLeft ul li:hover{
		background: #fff;
	}
	
	.pfLeft ul li .font12{ font-size: 10px; font-weight: normal; letter-spacing: 0; color: #3f3f3f; }
	
	.pfLeft ul li a{ 
		font: inherit;
		color: inherit;
		text-decoration: None;
	}

	.pfRight{ 
		text-align: left;
	}
	.pfRight h1{ 
		margin-top: 0; 
		padding-top: 0;
		font-weight: normal;
		padding-bottom: 0;
		margin-bottom: 6px;
	}
	.pfRight h2{ 
		margin-top: 0; 
		padding-top: 0; 
	}
	
	.pfButton{
		clear: both; 
		width: 100%; 
		text-align: center;
		color: #696b73;
		font-size: 18px;
		line-height: 32px;
		cursor: pointer;
		text-shadow: none;
		background: #fff;
	}
	
	/* End Page Feature */
	
	.pageContent{
		clear: both;
		background: #f2f2f2;
		padding-top: 10px;
		margin-top: -10px;
	}
	.pcLeft{ 
		clear: left; float: left;
		width: 63%;
		border-right: solid 1px #707070;
	}
		.plcHeading{ 
			font-size: 15px;
			line-height: 22px;
			color: #0392c7;
			font-weight: bold;
			margin-bottom: 6px;
		}
		.plcHeading img{ margin-right: 8px; }
		.plcH2{
			font-size: 15px;
			color: #707070;
			font-weight: 300;
		}
		.pcRight{ font-size: 13px; color: #707070; }
		.pcRight ul{ text-align: left; line-height: 22px; margin-top: 0; padding-top: 0; }
		.pcRight p{ font-size: 13px; color: #707070; font-weight: normal; }
		.pcRight a{ color: #707070; font-weight: normal; }
		
		.pcLeft ul{
			clear: left; float: left; text-align: left;
			margin-top: 0; 
			padding-top: 0;
			list-style-type: none;
		}
		.pcLeft ul li{
			line-height: 24px;
			font-size: 14px;
			font-weight: 300;
		}
		.pcLeft ul li a{
			color: #707070;
			text-decoration: none;
		}
		
		.pcl1{
			clear: left; float: left; width: 50%;
			text-align: left;
		}
		.pcl2{
			clear: none; float: Left; width: 50%;
			text-align: left;
		}
	.pcRight{
		clear: none; float: right;
		width: 35%;
	}
	
	.disclaimer{ 
		font-size: 8px;
	}
	
/* Pre Footer */
	.preFooter{ 
		clear: both; width: 100%; text-align: center; 
		background: #262626;
		border-top: solid 1px #fff;
		border-bottom: solid 1px #000;
	}
	.preFooter h3{ 
		font-size: 16px;
		color: #fff;
		text-shadow: 1px 1px 4px #000;
		padding: 0; margin: 0;
		line-height: 36px;
	}
	
/* Begin Footer */ 
	.pageFooter{ 
		color: #fff;
		text-shadow: 1px 1px 4px #000;
		font-size: 16px;
		background: #000;
	}
	.pageFooter a{
		color: #696b73; 
	}
	.pageFooter ul{ 
		list-style-type: none; 
		width: 100%;
	}
	.pageFooter ul li{ 
		clear: none; float: left;
		margin: 3px 32px 12px 32px;
	}
	.pageFooter ul li:first-child{ 
		margin-left: 0; 
	}
	.pageFooter ul li a{
		color: #f2f2f2;
	}
	.pageFooter ul li .gc-cs-link{
		color: #f2f2f2;
	}
	
	.pageFooter ul{
		list-style-type: none;
		margin: 0; 
		padding: 0;
	}
	.pfu1{
		clear: left; float: left; width: 50%;
	}
	.pfu2{
		clear: none; float: right; width: 50%; 
	}
	
	.pf1{ 
		clear: left; float: left; width: 64%;
		text-align: left;
	}
	.pf3{
		clear: none; float: right; width: 32%;
		text-align: left;
	}
	.pfHeading{ font-size: 14px; margin-bottom: 8px; margin-top: 8px; text-decoration: none; }
	.pfHeading a{ text-decoration: None; }
	
/* Small Features */
.miniFeature{ 
	clear: both; margin: auto; width: 100%; text-align: center; 
}
	.miniFeature .box1{ clear: left; float: left; }
	.miniFeature .box2{ clear: none; float: left; margin-left: 12px; }
	.miniFeature .box3{ clear: none; float: left; margin-left: 12px; }
	
/* Large Features */
.laregeFeature{
	clear: both; margin: auto; width: 100%; text-align: center;
}
	.largeFeature .box1{ clear: left; float: left; }
	.largeFeature .box2{ clear: none; float: left; margin-left: 12px; }
	.largeFeature .box3{ clear: none; float: left; margin-left: 12px; }
	.largeFeature .box3{ clear: none; float: left; margin-left: 12px; }
	
	.only33{ width: 33%; }
	.only25{ width: 25%; padding: 0; margin: 0; overflow: hidden; margin-left: 0px !important; }
	
	.box1 h4, .box2 h4, .box3 h4{ font-size: 16px; margin-bottom: 0; padding-bottom: 0; }
	.box1 p, .box2 p, .box3 p{ font-size: 14px; }
	
	
/* Sponsored Events Filmstrip stuff */
.filmStrip{ 
	clear: both; text-align: center; width: 100%; overflow: hidden;
	background: #fff;
}
.filmStripTall{ 
	clear: right; float: right; width: 30%; text-align: center;
	border: solid 1px #696969;
	border-radius: 8px;
	background: #fff;
	box-shadow: 1px 1px 8px #696969;
	margin-left: 6px;
	margin-bottom: 6px;
}

.filmStripTall .floatsLeft{ width: 50%; text-align: center; }
.filmStripTall .floatsRight{ width: 50%; text-align: center; }

	.filmStrip .heading, .filmStripTall .heading{ 
		clear: both; margin: auto;  
		width: 90%;
		background: #fff; color: #002453;
		text-align: center;
		font-weight: bold;
	}
	.filmStrip ul, .filmStripTall ul{ 
		list-style-type: none; 
		margin: 0; padding: 0;
	}
	.filmStrip ul li{ 
		clear: none; float: left; margin-left: 8px; margin-right: 8px; cursor: pointer;
	}
	.filmStripTall ul li{ 
		margin-bottom: 8px; 
	}
	.filmStrip ul li:first-child{ 
		clear: left; float: left; 
		margin-left: 8px;
	}
	.filmStrip ul li:last-child{ 
		margin-right: 0; 
	}
	.filmStrip .thumbs{ 
		clear: left; float: left; width: 100%; text-align: left;
	}
	.filmStrip .thumbs .thumb{ width: 175px; height: 175px; box-shadow: 4px 4px 8px #424242; margin: 6px 8px 6px 0px; }
	
	.dateBox{ 
		clear: both; 
		width: 100%; 
		border: double 1px #fff; 
		padding: 0 10px 10px 10px;
	}
	
	.pfImage img{ float: right; }
	
/*  Mobile */
/* @media (max-width: 599px) and (orientation: portrait) , (max-width: 799px) and (orientation: landscape){*/
/* Mobile Phones */
@media (orientation: portrait) and (max-device-width: 599px), (orientation: landscape) and (max-device-width: 765px){
	.plcHeading img{ display: none; }
	.fiftyLeft{ display: none; }
	.fiftyRight{ width: 100%; }
	
	.fullSize .percent90{ padding-left: 0; margin-left: -10px; width: 100%; overflow: hidden; }
	.fullSize .percent90 .pfRight{ clear: both; margin: auto; width: 90%; }
	.fullSize .percent90 .pfRight .pfImage img{ clear: both; margin: auto; width: 90%; float: left; }
	
	.costFactors .floatsLeft, .costFactors .floatsRight, .lightingFactors .floatsLeft, .lightingFactors .floatsRight { 
		clear: both; width: 100%; text-align: left; margin: auto;
	}
	
	.sixtyLeft{ clear: both; margin: auto; width: 100%; text-align: center; }
	.fortyRight{ clear: both; margin: auto; width: 100%; text-align: center; }
	.dateBox{ width: 90%; padding: 0 5% 3% 3%;  }
	.dateBox h3{ width: inherit; }
	.dateBox p { width: inherit; }
	
	.headerLogo img{ display: none; }
	/* .headerLogo img{ clear: left; float: left; } */
	
	.logoText{ font-size:  20px; }
	
	.logoText hr{ display: none; }
	.logoText .font14{ display: none; }
	
	.blackDivider{ display: none; } 
	
	/* .pfImage{ display: none; } */
	/* Feature Images Strip */
	.filmStrip{ clear: both; margin: auto; text-align: center; width: 95%; margin: 0; padding: 0; }
	.filmStrip ul{ clear: both; margin: auto; text-align: center; padding: 0; }
	.filmStrip ul li{ clear: none; float: left; width: 48%; padding: 0; margin: 0; padding-left: 6px; padding-bottom: 6px; }
	.filmStrip ul li:first-child{ margin-left: 0; }
	.filmStrip ul li img{ clear: none; float: left; width: 95%; margin: 0; padding: 0; overflow: hidden; border: 0; }
	/* Tall FilmStrip */
	.filmStripTall{ background: none; padding: 0; margin: 0; border-radius: 0; box-shadow: none; clear: both; margin: auto; width: 100%; text-align: center; border: none; }
	.filmStripTall .heading{ display: none; }
	.filmStripTall ul li{ display: none; }
	.filmStripTall ul li:first-child{ display: block; margin-top: -13px; margin-bottom: 12px; }
	.filmStripTall ul li:first-child img{ clear: both; margin: auto; width: 100%; border: solid 6px #fff; box-shadow: 3px 3px 9px #3f3f3f; margin-bottom: 6px; margin-left: 6px;}
	
	
	
	.pfLeft{ display: none; }
	.pfRight{ width: 100% !important; }
	
	.pfRight h1{ font-weight: normal; }
	
	.pcLeft{ clear: both; margin: auto; width: 100%; border: none; }
	.pcl1{  clear: both; margin: auto; width: 100%; }
	.pcl2{  clear: both; margin: auto; width: 100%; }
	
	.pcRight{ clear: both; margin: auto; width: 100%;}
	
	.pcLeft ul{ list-style-type: none;  text-align: center; margin: 0; padding: 0; width: 100%;  margin-bottom: 12px; }
	.pcLeft ul li, .plc3 ul li{ clear: both; margin: auto; text-align: center; display: none; line-height: 36px; font-size: 18px; border-bottom: 1px solid #3e3e3e; }
	
	.pcl1{ text-align: center; }
	.pcl2{ text-align: center; }
	
	.plcH2{ display: none; }
	
	/*.plc3{ display: none; }*/
	.plc3 ul{ margin: 0; padding: 0; list-style-type: none; width: 100%; text-align: center; }
	
	.plcHeading{ 
		clear: both; 
		width: 100%; 
		text-align: center;
		color: #0083b4;
		font-size: 18px;
		line-height: 32px;
		border: solid 1px #3e3e3e;
		cursor: pointer;
	}
	
	.pf1{ 
		clear: both; margin: auto; width: 100%;
		text-align: center;
	}
	.pf2{ 
		clear: both; margin: auto; width: 100%;
		text-align: center;
	}
	.pf3{
		clear: both; margin: auto; width: 100%;
		text-align: center;
	}
	
	.pfu1{
		clear: both; margin: auto; width: 100%;
	}
	.pfu2{
		clear: both; margin: auto; width: 100%; 
	}
	
	.headerNav{ width: 60%; }
	.headerLogo{ width: 40%;}	
	
	.pfLeft .extraFeature{ display: none; }
	
	.notMobile{ display: none; }
	.pfRight .sixtyRight{ width: 100%; }
	
	.perLine .heading{ display: none; }
	.perLine .values{ width: 100%; }
	.perLine .values input{ width: 98%; font-size: 18px; margin-bottom: 6px; }
	.perLine .values select{ width: 98%; font-size: 18px; margin-bottom: 6px; }
	.perLine textarea{ 
		width: 98%; 
		font-size: 18px;
		margin-bottom: 6px;
	}
	
	.preFooter h3{ text-align: left; }
	.pageFooter .percent90 ul { clear: both; width: 100%; text-align: center; }
	.pageFooter .percent90 ul li{ clear: both; margin: auto; text-align: center; }
	
	.collapsableNav{ clear: both; width: 100%; text-align: center; }
	.collapsableNav .percent90{ clear: both; margin: auto; text-align: center; width: 100%; }
	
	.cNavHeading{ clear: both; width: 90%; text-align: left; text-indent: 12px; margin: auto; border-bottom: solid 1px #fff;  height: 36px; line-height: 36px; }
	
	.mobileNav{ clear: both; margin: auto; width: 100%; text-align: center; }
	
	.mobileFloatLeft{ clear: both !important; float: left !important; width: 100% !important; text-align: center !important; }

	.contactFormImage{ display: none; }	
}

/* Full Size */
@media (orientation: portrait) and (min-device-width: 600px), (orientation: landscape) and (min-device-width: 766px){
	
	.pfButton{ 
		max-width: 260px;
	}
	.collapsableNav{ display: block; }
	
	.cNavHeading{ 
		clear: none; float: left; 
	}
	
	.headerLogo img{
		height: 62px;
		margin-right: 12px;
	}
	.logoText{ display: inline; font-size: 22px; }
	.mobileNav{ display: none; }
	.fullsizeNav{ display: inline; }
	
}




/* Buttons and More */

/* Fancy Button for Header */
.fancyButton {
	background: #0083B4;
	background-image: -webkit-linear-gradient(top, #3498db, #0083B4);
	background-image: -moz-linear-gradient(top, #3498db, #0083B4);
	background-image: -ms-linear-gradient(top, #3498db, #0083B4);
	background-image: -o-linear-gradient(top, #3498db, #0083B4);
	background-image: linear-gradient(to bottom, #3498db, #0083B4);
	-webkit-border-radius: 7;
	-moz-border-radius: 7;
	border-radius: 7px;
	color: #ffffff;
	font-size: 16px;
	padding: 0px 10px 0px 10px;
	text-decoration: none;
}

.fancyButton:hover {
	background: #0083B4;
  	background-image: -webkit-linear-gradient(top, #3cb0fd, #0083B4);
  	background-image: -moz-linear-gradient(top, #3cb0fd, #0083B4);
  	background-image: -ms-linear-gradient(top, #3cb0fd, #0083B4);
  	background-image: -o-linear-gradient(top, #3cb0fd, #0083B4);
  	background-image: linear-gradient(to bottom, #3cb0fd, #0083B4);
  	text-decoration: none;
}