/*
====================================== 
Title: Mobile Template - Pearle Vision
Author: Balihoo Creative
Date: 2011ish
======================================
*/

/* --- Universal Selectors ---*/

.left  {float:left}
.right {float:left}

/* --- Overrides for jQuery Mobile --- */

.ui-body-c {
	border: 1px solid 		#2A2A2A /*{a-body-border}*/;
	background: 			#fff /*{a-body-background-color}*/;
	color: 					#fff /*{a-body-color}*/;
	 text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ #000 /*{a-body-shadow-color}*/;
	font-weight: normal;
	background-color:#E8E8E8;	
}


/*  Text Link CSS */
.ui-page.ui-body-c.ui-page-active a.ui-link      {color:#685E4C;font-weight:normal;}
.ui-page.ui-body-c.ui-page-active a.ui-link:hover{color:#685E4C;font-weight:normal;}

/* Button Background Color */
.ui-page.ui-body-a.ui-page-active .ui-btn-inner{
	background-image: linear-gradient(bottom, #567095 2%, #7D9BBC 69%);
	background-image: -o-linear-gradient(bottom, #567095 2%, #7D9BBC 69%);
	background-image: -moz-linear-gradient(bottom, #567095 2%, #7D9BBC 69%);
	background-image: -webkit-linear-gradient(bottom, #567095 2%, #7D9BBC 69%);
	background-image: -ms-linear-gradient(bottom, #567095 2%, #7D9BBC 69%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.02, #567095),
		color-stop(0.69, #7D9BBC)
	);
}


/*   Test     */
.ui-btn-up-a {
	border: 1px solid 		#222 /*{a-bup-border}*/;
	background: 			#567095 /*{a-bup-background-color}*/;
	font-weight: bold;
	color: 					#fff /*{a-bup-color}*/;
	text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #567095 /*{a-bup-background-start}*/), to( #7D9BBC /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(#7D9BBC /*{a-bup-background-start}*/, #567095 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(#7D9BBC /*{a-bup-background-start}*/, #567095 /*{a-bup-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient(#7D9BBC /*{a-bup-background-start}*/, #567095 /*{a-bup-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient(#7D9BBC /*{a-bup-background-start}*/, #567095 /*{a-bup-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient(#7D9BBC /*{a-bup-background-start}*/, #567095 /*{a-bup-background-end}*/);
}
.ui-btn-up-a a.ui-link-inherit {
	color: 					#fff /*{a-bup-color}*/;
}
.ui-btn-hover-a {
	border: 1px solid 		#000 /*{a-bhover-border}*/;
	background: 			#444444 /*{a-bhover-background-color}*/;
	font-weight: bold;
	color: 					#fff /*{a-bhover-color}*/;
	text-shadow: 0 /*{a-bhover-shadow-x}*/ -1px /*{a-bhover-shadow-y}*/ 1px /*{a-bhover-shadow-radius}*/ #000 /*{a-bhover-shadow-color}*/;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #617792 /*{a-bhover-background-start}*/), to( #3F526B /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(#617792 /*{a-bhover-background-start}*/, #3F526B /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(#617792 /*{a-bhover-background-start}*/, #3F526B /*{a-bhover-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient(#617792 /*{a-bhover-background-start}*/, #3F526B /*{a-bhover-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient(#617792 /*{a-bhover-background-start}*/, #3F526B /*{a-bhover-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient(#617792 /*{a-bhover-background-start}*/, #3F526B /*{a-bhover-background-end}*/);
}


.ui-btn-active {
	border: 1px solid 		#155678 /*{global-active-border}*/;
	background: 			#222335 /*{global-active-background-color}*/;
	font-weight: bold;
	color: 					#fff /*{global-active-color}*/;
	cursor: pointer;
	text-shadow: 0 /*{global-active-shadow-x}*/ -1px /*{global-active-shadow-y}*/ 1px /*{global-active-shadow-radius}*/ #145072 /*{global-active-shadow-color}*/;
	text-decoration: none;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#222335 /*{global-active-background-start}*/), to(#515266 /*{global-active-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #222335 /*{global-active-background-start}*/, #515266 /*{global-active-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #222335 /*{global-active-background-start}*/, #515266 /*{global-active-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #222335 /*{global-active-background-start}*/, #515266 /*{global-active-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient(top, #222335 /*{global-active-background-start}*/, #515266/*{global-active-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #222335 /*{global-active-background-start}*/, #515266 /*{global-active-background-end}*/);
	font-family: Helvetica, Arial, sans-serif /*{global-active-font}*/;
}


/* --- Structural Elements --- */

body {
	margin:0;
	padding:0;
	-webkit-hyphens: auto;
	hyphens: auto;
}

#wrapper {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	background-color:#fff;
}
#header {
	background-image:url('http://static.balihoo.com.s3.amazonaws.com/kohler/CRE-2696_Kohler_Plumbing_Mobile_Template/images/bgDark.jpg');	             background-repeat:repeat-x;	
	width:100%;
	height:57px;
	float:left;
	padding:0;
	margin:0;
}

.topBlockRight {
	height:42px;
	width:50%;
	background-color:#fff;
	float:left;
	padding:10px 0 5px 0;
}

.topBlockLeft {
	height:42px;
	width:50%;
	background-color:#fff;
	float:left
}

.callNowIcon {
	float:right;
	margin:20px 5px 0 0;
}

.border {
	background-color:#1A1B2F;
	width:100%;
	height:3px;
	margin:0 0 0px 0;
	padding:0;
	float:left;
}

.storeCTA {
	height:212px;
	width:100%;
	background-image:url('../images/store2.jpg');
	background-repeat:no-repeat;
	background-size: cover;
	-webkit-background-size: cover;/* Safari 3.0 */
	-o-background-size: cover; /* Opera 9.5 */
	-webkit-background-size: cover;/* Safari 3.0 */
	-khtml-background-size: cover; /* Konqueror 3.5.4 */
	-moz-border-image: url('../images/store2.jpg') 0; /* Gecko 1.9.1 (Firefox 3.5) */
	margin:0;
	padding:0;
	float:left;
} 

.storeCTA2 {
	height:212px;
	width:100%;
	background-image:url('http://static.balihoo.com.s3.amazonaws.com/kohler/CRE-2696_Kohler_Plumbing_Mobile_Template/images/hero.jpg');
	background-repeat:no-repeat;
	background-size: cover;
	-webkit-background-size: cover;/* Safari 3.0 */
	-o-background-size: cover; /* Opera 9.5 */
	-webkit-background-size: cover;/* Safari 3.0 */
	-khtml-background-size: cover; /* Konqueror 3.5.4 */
	-moz-border-image: url('http://static.balihoo.com.s3.amazonaws.com/kohler/CRE-2696_Kohler_Plumbing_Mobile_Template/images/hero.jpg') 0; /* Gecko 1.9.1 (Firefox 3.5) */
	margin:0;
	padding:0;
	float:left;
} 



#CTA {
	width:100%;
	height:50px; 
	background-image:url('http://static.balihoo.com.s3.amazonaws.com/kohler/CRE-2696_Kohler_Plumbing_Mobile_Template/images/bg.png');
	background-repeat:repeat-x;
	margin:162px 0 0 0;
	
}

.accordian {
	margin-left:40px;
	float:left;
	width:75%;
	height:100%;
}



/* --- Typography --- */

p {
	color:#000;
	text-shadow: #000 0px 0px 0px;
}


h1 {
	color:#000;
	text-shadow: #000 0px 0px 0px;
}

h2.CTA {
	font:17px "arial", arial, helvetica;
	color:#fff;
	/*margin:14px 0 0 10px;*/
	float:left;
}

p.blackText{
	font:14px "arial", arial, helvetica;
	color:#000;
	margin:5px 0 0 10px;
	float:left;
}

.blackText a {
	font:14px "arial", arial, helvetica;
	color:#000;
	margin:0;
	float:left;
	text-decoration:none;
}
.blackText a:hover {
	font:14px "arial", arial, helvetica;
	color:#000;
	margin:0;
	float:left;
	text-decoration:none;
}
.disclaimer {
	font-family: Helvetica, Arial, sans-serif;
	color:#ababab;
	font-size:12px;
}

a.disclaimer {
	text-decoration:none;
	font-family: Helvetica, Arial, sans-serif;
	color:#FF7701;
	font-size:12px;
}

.spacerLogo {height:57px;width:5%;float:left;
}

/* --- @2x Images --- */

.logo {
    height: 42px;
    width: 95%;
    padding:10px 0 5px 0;
    -webkit-background-size: 133px 42px;
    background: url("http://static.balihoo.com.s3.amazonaws.com/kohler/CRE-2696_Kohler_Plumbing_Mobile_Template/images/logoDark.jpg");
    background-repeat:no-repeat;
    background-position:left;
    float:left
}

@media screen and (-webkit-device-pixel-ratio: 2) {
    .logo {
        background: url("http://static.balihoo.com.s3.amazonaws.com/kohler/CRE-2696_Kohler_Plumbing_Mobile_Template/images/logoDark@2x.jpg");
        padding:10px 0 5px 0;
        background-repeat:no-repeat;
    	background-position:left;
    	float:left
    	
    }
}



/* --- Custom JQM Icons --- */

.ui-icon-myapp-callNow {
	background: url("http://static.balihoo.com.s3.amazonaws.com/kohler/CRE-2696_Kohler_Plumbing_Mobile_Template/images/phone.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

.ui-icon-myapp-compass {
	background: url("http://static.balihoo.com.s3.amazonaws.com/kohler/CRE-2696_Kohler_Plumbing_Mobile_Template/images/compass.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}



@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-icon-myapp-callNow {
		background: url("http://static.balihoo.com.s3.amazonaws.com/kohler/CRE-2696_Kohler_Plumbing_Mobile_Template/images/phone@2x.png") no-repeat rgba(0, 0, 0, 0.4) !important;
		background-size: 18px 18px;
	}
	
	.ui-icon-myapp-compass {
		background: url("http://static.balihoo.com.s3.amazonaws.com/kohler/CRE-2696_Kohler_Plumbing_Mobile_Template/images/compass@2x.png") no-repeat rgba(0, 0, 0, 0.4) !important;
		background-size: 18px 18px;
	}
	
	
}