/*
* 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
================================================== */
	body{
		background-color: rgb(231, 235, 236);
		background-color: rgb(245, 245, 245);
		background-color: rgb(255, 255, 255);
	}
	#paper-namecard{
		width: 380px;
	}
	.index-notice{
		padding: 6px;
		margin: 6px;
		color: white;
		background: white;
		font-weight: 800;
	}
	#appMain{
		margin-top: 120px;
		display: block;
		height: 90%;
	}
	#messages{
		position: fixed;
		top: 100px;
		z-index: 1000;
		height: 0px;		
	}
	#messages:first-child{
		color: reds;
	}

	.appMainWrap{
		min-height: 600px;
	}
/* Home stuff
================================================== */	
	#process, #client, #about, #fans{
		min-height: 200px;
		padding: 50px 0px 50px;
	}
	#process hr{
		margin: 30px 30px;
	}
	.center-text{
		text-align: center;

	}
/* Top
================================================== */	

	#top{	
		position: fixed;
		top: 0px;
		z-index: 2;
		background: white;
		width: 100%;
		border-bottom: 1px solid #ddd;
		box-shadow: 0 1px 10px rgba(222,222,222, 0);
	}
	#top a.logo{
		display: inline-block; 
		height: 100%; 
		vertical-align: middle; 
		line-height: 0px;
	}
	#top a.logo img{
		margin-top: 8px;
		height: 56px;
	}
	#top div.right{
		display: inline-block;
		float: right;
		height: 100%;
		padding-right: 22px;
	}
	#top div.left{
		display: inline-block;
		float: left;
		height: 100%;
		padding-left: 22px;
	}		
	#top nav{
		text-align: right;
	}
	#top ul.nav-list{
	 	height: 100%;
	 	display: inline-block;
		margin: 0px;
		line-height: 50px;
	}
	#top ul.nav-list li{
		height: 100%;
		margin: 0px;

	}	
	#top ul.nav-list a{
		padding: 16px;
		border: 0px solid #333;
		font-weight: 800;
	} 


	#top.business{
		background: #1D3340;
	}
	#top.business ul.nav-list a{
		padding: 16px;
		border: 0px solid #333;
		font-weight: 800;
		color: #ccc;
	} 
	#top.business ul.nav-list a{
		padding: 16px;
		border: 0px solid #333;
		font-weight: 800;
		color: #ccc;
	} 	
	#top  #welcome{
		 	display: inline;
		 	padding-left: 50px;
		}


	@media 
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
		#top  #welcome{
		 	display: block;
		 	margin-bottom: 6px;
		}		
		#top div.wrapper{
			text-align: center;
		}
		#top ul.nav-list, a.logo{
			display: block;

			float: none;
		}
		#top ul.nav-list a{
			padding: 10px;
			margin-top: 5px;
			border: 2px solid #333;
			font-weight: 800;
		} 
	}


/* #Customer support div
================================================== */	
	#customer-support{
		position: absolute;
		bottom: -48px;
		right: 22px;
		height: 46px;
		background-color: white;
		border-bottom-left-radius:  10px;
		border-bottom-right-radius: 10px;
		text-align: center;
		border-right: 2px solid #8CB2BF;
		border-left: 2px solid #8CB2BF;
		border-bottom: 2px solid #8CB2BF;
		background-color: #8CB2BF;
		background-color: #8CB2BF;
		box-shadow: 0 1px 10px rgba(0,0,0, .2);
		cursor: pointer;
	}
	#customer-support >div{
		position: relative;
		width: 100%;
		height: 100%;
	}


	#customer-support a{
		display: block;
		margin-top: 12px;
		color: #fff;
		padding: 0px 12px;


	}
	#customer-support strong, #error-support strong, #error-support p{
		color: #8CB2BF;
		color: #36AD55;
		color: rgb(88, 88 , 88);
	}
	
	#customer-support .wrapper div{
		display: inline-block;

	}

	#customer-support .wrapper .left-div{
		border-right: 0px solid #ddd;
		height: 444px;
		text-align: left;
	}

	#customer-support .wrapper .right-div{
		text-align: center;
		vertical-align: top;
		display: none;	
	}

	.right-div, .left-div{
		display: inline-block;
		width: 45%;
	}
	#customer-support input[type=email]{
		width: 300px;
		padding: 16px;
		font-size: 16px;
	}	
	#customer-support input[type=text]{
		color: #333;
	}
	#customer-support label{
		color: #777;
	}

	#customer-support textarea[name="question"]{
		width: 300px;
		height: 200px;
		border-color: #ddd;
	}

	#error-support{
		width: 680px;
		height: 500px;
		padding: 16px;
		border: 0px solid grey;
		border-radius: 5px;
		margin: 0 auto;
	}

	#error-support .doc td{
		background-color: #f1f1f1;
	}

	#error-support .doc .remove span{
		display: none;
	}

	#error-support input[type=email]{
		width: 300px;
		padding: 16px;
		font-size: 16px;
		background-color: #f4f4f4;
	}	

	#formThree .doc .remove{
		display: none;
	}

	#formThree .doc td{
		border: none;
		background-color: #f1f1f1;
	}

	#error-support-email-sent{
		padding-top: 16%;
		text-align: center;
		line-height: 200%;	
	}
	#error-support-email-sent h3{
		line-height: 200%;	
	}

	#error-support-email-sent  .button{
		margin: 16px;
	}

/* #Contact
================================================== */	
	#contact{
		position: fixed;

	}

/* #Login
================================================== */
	
	#login-form{
		width: 320px;
		padding: 32px;
		margin: 0 auto;
		border: 1px solid #ddd;
		border-radius: 3px;
		box-shadow: 0 1px 10px rgba(222,222,222, 1);
		margin-bottom: 55px;
	}

	#login-form input, #login-form .button, .facebook-login{
		width: 100%;
	}
	
	#login-form input.txt-field{
		background-color: #f8f8f8;
		color: #555;
		
	}
	#login-form a{
		text-decoration: none;
	}
	#login-form .button{
		padding-top: 12px;
		padding-bottom: 12px;
		font-weight: 800
	}	

	.txt-field {
		height: 40px;
		border: solid;
		border-color: #aaa;
		border-width: 1px;
		font-size: 16px;
		background-color: #f8f8f8;
		color: #777;
	}

	#privacy{
		vertical-align: middle;
	}
	#privacy a{
		text-decoration: underline;
	}
/* #Footer
================================================== */
	#footer {
		margin-top: 33px;
	}
	#footer .nav-list, #footer a, #footer span, #footer img{
		color: #000;
		margin: 0px;
		padding: 0px;
		text-align: center;
		vertical-align: bottom;
		color: grey;
	}
/* #Order positioning
================================================== */
	
	#stacked_wrapper_one{
		display: block;
		position: relative;
	}
	#stacked_wrapper_two{
		display: block;
		position: relative;
	}

	.stacked_wrapper .stacked_element{
		position: absolute;
		width: 100%;
		top: 0px;
	}
	

/* splash
================================================== */
	


	#splash-left{

		margin-bottom: 50px;
		padding: 0px;
		background-color: white;
	}
	#splash-left div{
		padding: 10px;
	}

	#splash-right{
		margin-bottom: 50px;
	}

	#splash-right .frame {
	    height: 300px;      /* equals max image height */
	    white-space: nowrap;
	    text-align: left; 
	    margin: 1em 0;
	    text-align: bottom;
	}

	#splash-right .helper {
	    display: inline-block;
	    height: 100%;
	    vertical-align: top;
	}

	#splash-right img {
	    vertical-align: top;
	    max-height: 300px;
	}

	#home-order-button{
		clear: both;
		width: 180px;
		padding: 12px;
		font-size: 21px;
		text-align: center;
		font-weight: 800;
		border-radius: 99px;

	}
/* FB
================================================== */
	#facebook-plugin{
		width:920px; height:258px;
	}
	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	#facebook-plugin{ width: 340px;}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	#facebook-plugin{ width: 340px;}
	}


/* Client Logo
================================================== */

	#client-logo table{	
		display: inline;
		background-color: white;
		margin-left: auto;
		margin-right: auto;
	}

	#client-logo  tr td {
	border: 0px solid red; 
	text-align: center;

	}
	
	.client-logo img{
		display: inline;
		width: 200px;
		vertical-align: middle;	
		padding-left: 10px;
		padding-right: 10px;
\
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	#client-logo img{width: 160px; vertical-align: middle;}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	#client-logo img{width: 140px; vertical-align: middle;}
	}
	/* Order Page Layout
================================================== */		
	#join{
		display: none;
		padding-top: 60px;
		padding-bottom: 20px;
	}

/* Order Page Layout
================================================== */

	#formOne, #formTwo{
		width: 100%;
		border-top: 0px solid #ddd;
		border-bottom: 0px solid #ddd;
		padding: 8px 0px 8px 0px;
		margin: 0px 0px 12px;
	}

	#formTwo .doc-error-message{
		display: none;
	}

 .disclaimer{
		font-size: 14px;
		color: #0D3340;
		color: #333;
	}
	table .input-val{
		color: #777;
		width: 360px;
		text-align: right;
		vertical-align: top;
	}
	table .input-val strong{
		color: #ccc;
		font-weight: 400;
		font-size: 28px;
	}

	table tr.final-price{
		border-bottom: 1px solid #ddd;
		vertical-align: middle;
	}
	#formTwo .input-val{
		vertical-align: top;
	}
	#formOne table, #formTwo table, #formThree table{
		vertical-align: middle;
		width: 100%;
		background-color: inherit;
	}	
	table .forms{
		padding: 0px 0px 0px 32px;
	}

	#formThree h5, #formTwo h5, #formOne h5, #formFour h5, #formFive h5{
		font-size: 16px;
		color: #555;
		font-weight: 800;
		margin: 0px 0px 16px;
	}
	#form-two-table{
		width: 100%;
	}
	#form-two-table td{
		width: 0px;
		vertical-align: middle;
		padding: 0px 0px 0px 0px;
	}

	#projectNotes{
		width: 100%;
		height: 400px;
	}

	#go-to-two{
		width: 270px;
		float: right;
		font-weight: 800;
	}

	#project-main table.summary td{
		background-color: inherit;
	}
	#project-main table.summary tr.discount td{
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}
	#project-main table.summary td:nth-child(1){
		display: none;
	}	
	#project-main table.summary td:nth-child(4){
		display: none;
	}	
	#namecard{
		width: 200px;
	}

	#confirm-summary{
		padding: 0px;
		background-color: inherit;
	}

/* Staff nav
================================================== */
#staff-nav{
	position: fixed;
	top: 10px;
	left: 10px;
}

#splash{
	 /*background: url('/images/desk-9.jpg')  no-repeat  no-repeat center top;
	 background-size: cover;*/
	 background-color: rgb(231, 235, 236);
	 width: 100%;
	 height: 940px;
	 text-align: left;
	 border-bottom: 0px solid #ccc;
}

#v-center{
	visibility: visible;
	height: 800px;
	padding-top: 180px;

}

#splash-overlay{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: inherit;
	background: rgba(222, 222, 222, 0 );
}
#main-content{
	position: relative;
	top: 10%;
	width: 1080px;
	margin: 0 auto;
}
}
#main-content ul li{
	display: inline;
	text-align: center;
	margin: 22px !important;
}

 div.wrapper{
	width: 620px;
	/*margin: 0 auto;*/
	padding: 16px 16px;
	border-radius: 5px;
	margin-bottom: 16px;
}

.dark{
	background: rgba(55, 55, 55, .9);
}

@media only screen and (max-width: 768px){
	.dark{display: none;}
}

.dark h4, .dark h3, .dark h2, .dark h1 {color: #fff;}

#discount{
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #eee;
	text-align: left;
}

 #one{
	display: inline-block;
	width: 64%;
	text-align: left;
	color: white;
}
 #two{
	display: inline-block;
	width: 35%;
	text-align: right;
}


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

	/* Standard 1200 (devices and browsers) */
	@media only screen and (max-width: 1200px) {

	}

	/* Note: Design for a width 1024 Desktop*/
	@media only screen and (min-width: 960px) and (max-width: 1199px){}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {

		#top{	
			margin-bottom: 0px;
			height: 100px;
		}
		#v-center{
			margin-top: 50px;
		}
		#top a.logo{
			display: inline-block; 
			height: 100%; 
			vertical-align: middle; 
			line-height: 0px;
		}
		#top a.logo img{
			height: 40px; 
			vertical-align: middle; 
			margin-top: 30px;
		}	
		#v-center h1{
			font-size: 32px;
		}
		 div.wrapper{
			width: 100%;
		}		
		#discount{
			margin-top: 12px;
			padding-top: 12px;
			border-top: 1px solid #eee;
			text-align: center;
		}		
		 #one{
		margin-top: 12px;
			padding-top: 12px;		 	
			display: block;
			width: 100%;
			text-align: center;
			color: white;
		}
		 #two{
		margin-top: 12px;
			padding-top: 12px;		 	
			display: block;
			width: 100%;
			text-align: center;
			color: white;
		}	
		#namecard{
			width: 200px;
		}
		#appMain{
			margin-top: 200px;
		}									
	}


	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		#top{	
			margin-bottom: 0px;
			height: 100px;
		}		
		#v-center{
			margin-top: 50px;
		}	
		#top a.logo{
			display: inline-block; 
			height: 100%; 
			vertical-align: middle; 
			line-height: 0px;
		}
		#top a.logo img{
			height: 40px; 
			vertical-align: middle; 
			margin-top: 30px;
		}
		#v-center h1{
			font-size: 32px;
		}
		 div.wrapper{
			width: 100%;
		}				
		#discount{
			margin-top: 12px;
			padding-top: 12px;
			border-top: 1px solid #eee;
			text-align: center;
		}		
		 #one{
		margin-top: 12px;
			padding-top: 12px;		 	
			display: block;
			width: 100%;
			text-align: center;
			color: white;
		}
		 #two{
		margin-top: 12px;
			padding-top: 12px;		 	
			display: block;
			width: 100%;
			text-align: center;
			color: white;
		}
		#namecard{
			width: 300px;
		}			
		#appMain{
			margin-top: 200px;
		}	
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		#top{	
			margin-bottom: 0px;
			height: 100px;
		}		
		#v-center{
			margin-top: 50px;
		}	
		#top a.logo{
			display: inline-block; 
			height: 100%; 
			vertical-align: middle; 
			line-height: 0px;
		}
		#top a.logo img{
			height: 40px; 
			vertical-align: middle; 
			margin-top: 30px;
		}	
		#v-center h1{
			font-size: 32px;
		}	
		 div.wrapper{
			width: 100%;
		}		
		#discount{
			margin-top: 12px;
			padding-top: 12px;
			border-top: 1px solid #eee;
			text-align: center;
		}		
		 #one{
		margin-top: 12px;
			padding-top: 12px;		 	
			display: block;
			width: 100%;
			text-align: center;
			color: white;
		}
		 #two{
		margin-top: 12px;
			padding-top: 12px;		 	
			display: block;
			width: 100%;
			text-align: center;
			color: white;
		}
		#namecard{
			width: 300px;
		}	
		#appMain{
			margin-top: 200px;
		}										
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		#top{	
			margin-bottom: 0px;
			height: 100px;
		}
		#v-center{
			margin-top: 50px;
		}
		#top a.logo{
			display: inline-block; 
			height: 100%; 
			vertical-align: middle; 
			line-height: 0px;
		}
		#top a.logo img{
			height: 40px; 
			vertical-align: middle; 
			margin-top: 30px;
		}
		#v-center h1{
			font-size: 32px;
		}
		 div.wrapper{
			width: 100%;
		}		
		#discount{
			margin-top: 12px;
			padding-top: 12px;
			border-top: 1px solid #eee;
			text-align: center;
		}		
		 #one{
		margin-top: 12px;
			padding-top: 12px;		 	
			display: block;
			width: 100%;
			text-align: center;
			color: white;
		}
		 #two{
		margin-top: 12px;
			padding-top: 12px;		 	
			display: block;
			width: 100%;
			text-align: center;
			color: white;
		}	
		#namecard{
			width: 300px;
		}	
		#appMain{
			margin-top: 200px;
		}					
	}




	.order-number{
		color: #0D3340;
	}



/* #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; }
*/