/* CSS Document for our Mobile Site */

/**************************************************************************************** 
Install Google Font (visit http://www.google.com/webfonts#HomePlace:home) for more fonts
****************************************************************************************/
@import url(http://fonts.googleapis.com/css?family=PT+Sans);

/************************************************************************
Reset Layout
*************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1.1em;
}
ol, ul {
	list-style: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/************************************************************************
Base Style
*************************************************************************/
.hidden { display: none; visibility: hidden; } 
.invisible { visibility: hidden; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/************************************************************************
Main Layout
*************************************************************************/
body {
	font-family: "PT Sans",Helvetica,Arial,sans-serif; /* This controls the main font, but other areas must also change */
	font-size: 100%; /*Changes the font size for most of the site */
	line-height: 1.4em;
	text-align: center;
	color: #FFFFFF; /*Changes the text color for most of the site */
	background-color: #130911; /* Change the color value to change the background color */
}

#wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

#header {
	margin-top: .75em;
	text-align: center;
}

#header img {
	border: none;
}

#footer{
	width: 90%;
	height: auto;
	text-align: center;
	margin: .8em auto .5em auto;
}

#footer p.legalterms {
	font-size: 95%; /*Changes font size of "Legal Link Text" */
	padding: .5em 0 .7em 0;
	color: #EEEEEE; /* Changes text color of "Legal Link Text" */
}

#footer p.legalterms a {
	color: #EEEEEE; /*Changes link color of "Legal Links" */
	text-decoration: underline;
}

#footer2 {
	width: 100%;
	height: auto;
	min-height: 60px;
	background-color: #444; /* Changes Background Color of Footer Area */
	border-top: 1px solid #111;
	text-align: center;
	margin: .4em auto 0 auto;
	padding: 0;
}

#footer2 p.poweredby {
	font-size: 95%; /*Changes font size of "Powered by Text" */
	padding: .3em 0 2em 0;
	color: #F5F5F5; /* Changes text color of "Powered by Text" */
	margin-bottom: 0;
}

#footer2 p.poweredby a {
	color: #FFFFF; /*Changes link color of "Powered by Link" */
	text-decoration: underline;
}

/************************************************************************
Basic Elements
*************************************************************************/
p{
	margin: 8px 0px 12px 0px;
	font-size: 1.025em;
}
a{
	color: #2A9AD4; /*Changes the color of text links */
}

h1 {
	font-size: 18px;
	padding-bottom: 9px;
	margin-bottom:  11px;
	color: #FFFFFF; /* Changes text color of Heading 1 text */
}

/************************************************************************
General Form Styling
*************************************************************************/
button.button{
	font-size: 13px;
	font-weight: bold;
	background-color: #333;
	width: 95%;
	-webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
    padding: 10px;
    text-align: center;
    color: #CCC;
    border: none;
}
input, textarea{
	font-family: "PT Sans",Helvetica,Arial,sans-serif;
	-webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
	color:#555555;
	background:#FBFBFB none repeat scroll 0 0;
	border:1px solid #E5E5E5;
	font-size:12px;
	line-height: 16px;
	margin-bottom:16px;
	margin-right:6px;
	margin-top:2px;
	padding:10px;
	display: block;
	width: 92%;
}
label {
	font-size: 12px;
	font-weight: bold;
	color:#5B5A5A;
	padding-bottom: 3px;
	display: block;
}
label span, .required {
	color: #C00;	
}
form p {
	color:#5B5A5A;
}

p.privacy {
	text-align: center;
	font-style: italic;
}

.clear {
	clear: both;
}

p.optin {
	font-size: 120%;
}

/********************************************************************
Styling for the Tap to Call button
*********************************************************************/

#taptocall {
	text-align: center;
}

#taptocall .tapbutton {
	height: 1.4em;
	width: 90%;
	background-color: #FE0000; /* Color for browsers that do not support the CSS Gradient Color values below */
	cursor: pointer;
	background: -moz-linear-gradient(center top,#FE0000 20%,#FCFA44 100%); /* First color changes the top color - Second changes the bottom */
	background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #FE0000),color-stop(1, #FCFA44)); /* Same as above, but for WebKit browsers */
	font-family: sans-serif;
	font-size: 1.4em;
	display: inline-block;
	padding: .4em .3em .4em .3em;
	margin: 0 auto 1em auto;
	border: 1px solid #000; /* Changes the thickness and color of the button's border line */
	color: white !important;
	text-align: center;
	text-decoration: none !important;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, 
		inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 
		0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
	-moz-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, 
		inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 
		0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
	box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, 
		inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 
		0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
}

#taptocall .tapbutton span.phoneicon {
	background: url("../images/icons/icon-phone.png") no-repeat 0 0;
	display: block;
	color: #FFF; /* Changes color of text over CSS button WITH phone icon ON */
	min-height: 24px;
	padding: .1em 0 .3em .2em;
}

#taptocall .tapbutton span.noicon {
	display: block;
	color: #FFFFF; /* Changes color of text over CSS button WITH phone icon OFF */
	min-height: 18px;
}

/********************************************************************
Styles Specific to the Tap to Call Landing Pages
**********************************************************************/

#landingcontent {
	width: 100%;
	margin: 0 auto;
}

#landingcontent img {
	border: none;
	margin: 0 auto;
	text-align: center;
}

#landingcontent p.calltoaction {
	font-size: 110%;
	font-weight: bold;
	text-align: center;
	line-height: 1.5em;
	margin: .25em auto .5em auto;
	width: 90%;
}

/******************************************************************** 
Styling for the "Go To Full Mobile Site" Button 
********************************************************************/

#mobilesitebtn {
	text-align: center;
}

#mobilesitebtn .rtnbutton {
	height: 1.2em;
	width: 60%;
	background-color: #666; /* Color for browsers that do not support the CSS Gradient Color values below */
	cursor: pointer;
	background: -moz-linear-gradient(center top,#999 20%,#333 100%); /* First color changes the top color - Second changes the bottom */
	background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #999),color-stop(1, #333)); /* Same as above, but for WebKit browsers */
	font-family: sans-serif;
	font-size: 1.1em;
	display: inline-block;
	padding: .5em .5em .7em .5em;
	margin: .5em auto .8em auto;
	border: 1px solid #000; /* Changes the thickness and color of the button's border line */
	color: white !important;
	text-align: center;
	text-decoration: none !important;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, 
		inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 
		0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
	-moz-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, 
		inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 
		0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
	box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, 
		inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 
		0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
}

#mobilesitebtn .rtnbutton span.noicon {
	display: block;
	color: #FFF;  /* Changes color of text over CSS button */
	min-height: 16px;
}


/********************************************************************  
Styling for the "Go To Regular Website" Button 
*********************************************************************/

#mainsitebtn {
	text-align: center;
}

#mainsitebtn .rtnbutton {
	height: 1.2em;
	width: 60%;
	background-color: #666; /* Color for browsers that do not support the CSS Gradient Color values below */
	cursor: pointer;
	background: -moz-linear-gradient(center top,#999 20%,#333 100%); /* First color changes the top color - Second changes the bottom */
	background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #999),color-stop(1, #333)); /* Same as above, but for WebKit browsers */
	font-family: sans-serif;
	font-size: 1.1em;
	display: inline-block;
	padding: .5em .5em .7em .5em;
	margin: .5em auto .8em auto;
	border: 1px solid #000; /* Changes the thickness and color of the button's border line */
	color: white !important;
	text-align: center;
	text-decoration: none !important;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, 
		inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 
		0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
	-moz-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, 
		inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 
		0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
	box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, 
		inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 
		0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
}

#mainsitebtn .rtnbutton span.noicon {
	display: block;
	color: #FFF; /* Changes color of text over CSS button */
	min-height: 16px;
}