/* **********************************************
	PHASE0 - COLORS
	Structure Color customizations go here.
	That way, if we change any structure to
	one of the landing pages, we can apply the 
	new style sheet to all landing pages and
	just make sure the colors are swapped up here!
	I'm a genius, I know.
	Go to Text Format Phase for Text Colors.
   ********************************************** */ 

	.body { /* Page Defaults/Behind Content Box */
	color: #003333;

	
background: #50C9C3; 
	
background: -webkit-linear-gradient(to bottom, #009999 , #ccffff); 

	background: linear-gradient(to bottom, #009999 , #ccffff); 
 
	}

	.wholething { /* Main Contaner Box */
	background: #ffffff;
	}

	.accentbox { /* This is the main box with the two top pictures and success video */

	
background: #085078; 
	
background: -webkit-linear-gradient(to right, #085078 , #85D8CE);
	
background: linear-gradient(to right, #085078 , #85D8CE);
  
	}

	.contactbox { /* The color of the Contact Form Box */
	background: #ff0000;
	}

	.subnav ul li { /* Horizontal Menus/Tabs */
	background: #006666;
	
background: -webkit-linear-gradient(to bottom, #006666 , #009999); 
	
background: linear-gradient(to bottom, #006666 , #009999); 
 
	}



/* **********************************************
	PHASE1 - BASIC STRUCTURE
	Content placement on the page.
	Placement will adjust depending on
	the screen size.
   ********************************************** */ 

/* ----------------------------------------------
	Media Defaults 
	Layouts will have these settings unless
	otherwise noted in the media queries.
*/

	.box { 
	display: block; 
	padding: 10px; 
	position: relative; 
	text-align: center; 
	}

	.desktop {
	display: block;
	width: 100%;
	}

	.mobile {
	display: none;
	}

	.wholething {
    	width: 90%;
    	overflow: hidden;
    	margin: 0 auto;
    	border-radius: 10px;
	display: block;
        padding: 10px;
	margin-top: 10px;
	}
	
	.columnthird {
	display: inline-block;
	width: 33%;
	height: 100%
	overflow: auto;
	margin: 1%
	margin-top: 0px;
	margin-bottom: 0px;
	border-radius: 10px;
	text-align: center;
	vertical-align: bottom;
	color: #ffffff;	
	text-align: center;
	}

	.columnthird a {
	color: #fff;
	}

	.accentbox {
	width: 90%;
	margin: 0px;
	padding: 5%;
	border-radius: 20px;
	color: #ccffff;

	text-align: center;

	}


	.contactbox {
	border-radius: 13px;
	font-weight: bold;
	color: #ffffff;

	float: right;
	clear: right;
	width: 280px;
	}


	.imgboxx { /* Images with Captions */
	  float: right;
	  width: 30%;
	  text-align: center;
	  font-style: italic;
 	 font-size: smaller;
	  text-indent: 0;
	  border: thin silver solid;
	  margin: 0.5em;
	  padding: 0.5em;
	  clear: right;
	}

	.check li {
	  list-style: none;
	}

	.box2 {
	float:right; 
	width:280px; 
	text-align:center; 
	font-size:16px; 
	margin: 0 10px;
	}

	.content {
	display: block; 
	width: 90%; 
	clear: both; 
	margin-left: auto; 
	margin-right: auto;
	}


/* ----------------------------------------------
	Mobile Settings Query
	We tell things do act differently
	for phones of recent models
	like iPhones and Mid-Range to Flagship Androids.
*/

@media screen and (min-width: 321px) and (max-width: 768px) { /* Start mobile Query */

	.desktop {
	display: none;
	}

	.mobile {
	display: block;
	}


  .wholething {
    width: 96%;
    overflow: hidden;
    border-radius: 5px;
	margin-top: 2%;
	padding: 2%;
	}

	.logo {	
	width: auto;
	height: auto;
	}

	.columnthird {
	display: block; 
	width: 95%; 
	height: auto;
	margin-top: 2%;
	margin-left: auto;
	margin-right: auto;
	}

	.box2 {
	float: none; 
	width: 96%; 
	}

	.contactbox {
	background: #009999;
	border-radius: 13px;
	font-weight: bold;
	color: #ffffff;

	float: none;
	clear: none;
	width: 90%;
	}

	.accentbox {
	width: 98%;
	margin: 0px;
	padding: 1%;
	border-radius: 10px;
	}

} /* End Mobile Query 1 */

/* ----------------------------------------------
	Please, googlebot. Stop.
	If this doesn't satisfy you
	I don't know what will
	This Query is for utra-small, Old, and/or
	budget Android Devices
*/

@media screen and (max-width: 320px) { /* Start other mobile Query */

	.clickme {
	display: table-cell;
	height: 50px;
	margin: 5px 0%;
	clear: both;
	padding: 0% 0%;
	font-size: 125%;
	font-weight: bold;
	}

	.desktop {
	display: none;
	}

	.mobile {
	display: block;
	width: 98%;
	}


	.wholething {
	width: 98%;
	overflow: none;
	margin: 0 auto;
	border-radius: 5px;
	box-shadow: none;
	text-align: center;
	padding: 1%;
	}

	.headerbox {
	background: none;
	text-align: center;
	padding: 0px;
	}

	.logo {	
	width: 250px;
	height: auto;
	}

	.toplinks {
	display: none;
	}

	.columnthird {
	display: block; 
	margin-top: 1%;
	text-align: center;
	width: 98%; 
	}

	.accentbox {
	width: 96%;
	margin: 0px;
	padding: 1%;
	border-radius: 5px;
	}
} /* End Mobile Query 2 */

/* ----------------------------------------------
	High Definition Displays	
*/

@media screen and (min-width: 1600px) { /* Start 1080p Query */
 .wholething {
	width: 1300px;
}
}  /* End Mobile Query 3 */

/* ----------------------------------------------
	This last Media Query is for ALL MOBILE SIZES
	Bits and Pieces that apply to a site as long as
	it is mobile-sized, regardless of device.
	Where specific size does not matter.		
*/

@media screen and (max-width: 768px) { /* Start mobile Query */

	.box2 {
	float: none; 
	display: inline-block; 
	text-align: center;
	position: relative;
	}

	.imgboxx {
	float: none;
	display: block;
	clear: both;
	width: 90%;
	}

	.content {
	display: block; 
	width: 100%; 
	clear: both; 
	margin-left: auto; 
	margin-right: auto;
	text-align: center;
	}

	.box { 
	display: block; 
	padding: 1%; 
	position: relative; 
	text-align: center; 
	}

} /* end Mobile Query 4 */


/* **********************************************
	PHASE2 - BUTTONS
	CSS buttons and other stylized boxes
   ********************************************** */ 

 
	.action { /* For the Call Us/Directions buttons. Color is the same for all sites */
	position: relative;
	display: table-cell;
	max-width: 100%;
	vertical-align: center;
	height: 50px;
	margin: 5px 0%;
	clear: both;
	font-size: 125%;
	font-weight: bold;
	color: #ffffff;
	background: #0073bb;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	    text-shadow: 0 1px 1px rgba(0,0,0,.3);
	   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
	   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
	   box-shadow: rgba(0,0,0,1) 0 1px 0;
 	   text-align: center;
 	   font: Arial, Helvetica, sans-serif;
 	   border-top: 1px solid #0073bb;
	   background: -webkit-gradient(linear, left top, left bottom, from(#005285), to (#0073bb));
 	  background: -webkit-linear-gradient(top, #005285, #0073bb);
 	  background: -moz-linear-gradient(top, #005285, #0073bb);
  	 background: -ms-linear-gradient(top, #005285, #0073bb);
  	 background: -o-linear-gradient(top, #005285, #0073bb);
	a: #ffffff;
	}

	.action a {
	color: #ffffff;
	}
	.action a:hover {
	text-decoration:none;
	}

		.clickme a {
	color: #ffffff;
	}

	.clickme a:hover {
	text-decoration:none;
	}


	.subnav { /* The Submenus / Tab Buttons */
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
	}

	.subnav ul {
	clear:left;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	left:50%;
	text-align:center;
	}


	.subnav ul li {
	margin: 1%;
	word-break: keep-all;
	display: inline-block;
	list-style:none;
	position:relative;
	right:50%;margin: 3px;
	padding: 5px 10px;
	font-size: 16px;font-weight: bold;color: #ffffff;
	text-align: center;	
	font: Arial, Helvetica, sans-serif;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	border-radius: 10px;
	-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
	-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
	box-shadow: rgba(0,0,0,1) 0 1px 0;
	border-top: 1px solid #ccffff;     
	}

	.subnav ul li a {
	color: #ffffff;
	}


/* **********************************************
	PHASE3 - TEXT FORMAT
 	These are the colors and such of the 
	text, lines, paragraphs, and then some.
	This phase applies to all versions of the site.
   ********************************************** */ 

	body {
	font-family: arial, Helvetica, sans-serif;
 	}

	img {
    	max-width: 100%;
   	height: auto;
   	border: 0px;
        }

	h1, .h1like { 
	font-weight: bold;
	padding-left:10px;
	margin:0;
	}

	h2 { 
	font-weight: bold;
	margin-left:10px;
	margin-right:10px;
	}

	h3 { 	 
	font-weight: bold;
	margin-left:10px;
	margin-right:10px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	}

	h4 { 
	font-weight: bold;
	}

	a { 
	font-weight: bold;
	text-decoration: none;
	color:#009999;
	}


	a:hover { text-decoration: bold;}

	li { 	 
	line-height: 25px;
	margin-left:-5px;
	margin-right:5px;
	list-style-image: url(img/box.gif);
	}

	.clear {
 	clear: both;
	}

	hr {
	color:#000000;
 	background:#000000;
 	height:1px;
 	border:0;
	}

	.address {
	font-weight:bold;
	}

	.bottomlinks {
		color:#33cccc;
		font-weight:normal;
 		text-decoration:none;
		font-size: 80%;
		width: 100%;
		}
	

	.bottomlinks a {
		color:#009999;
 		font-weight:bold; 
		text-decoration:none;
 		line-height:20px;
		}

	.bottomlinks a:hover {
		color:#99ffff;
 		font-weight:bold;
 		text-decoration:none;
 		line-height:20px;
		}

	.bottomlinks ul li {
	margin: 1%;
 	word-break: keep-all;
 	display: inline;
 	list-style:none;
 	position:relative;
   	right:50%;
	}

	.bottomlinks ul {   
	clear:left;   
	float:left;   
	list-style:none;   
	margin:0;   
	padding:0;   
	position:relative;   	left:50%;   
	text-align:center;
	}



/* **********************************************
	PHASE5 - Other Containers
	that don't fit in other categories
   ********************************************** */ 




.autocrop {
 	display: inline-block;
	overflow: hidden;
	max-height: 350px;
	border-radius: 5px;
	margin: 0px;
	position: relative;
}

.specialoffer {
	background: #fff;
	padding: 4px;
	border-radius: 10px;
	float: left;
	position: relative;}

.coupon {
	border: 5px dashed #f00;
	background: #fff;
	padding: 2px;
	Margin:  0px;
	padding-top: 15px;
	padding-bottom: 15px;
}

/* **********************************************
	PHASEX - Temporary Code
	Put in right place if we plan
	on using this code officially in site
   ********************************************** */