/** mobile styles **/

/* Hide screen only things */
.screenonly {
	display:none;
}
.signup, #iphone {
	display:none;
}
	
	
body {
	background:#BFEFFB;
	width:100%;
	overflow:auto;
	margin:0;
	padding:0;
	font-family:'Droid Sans', Helvetica, Arial, sans-serif;
} 

/** TOP BAR SECTION **/

.topbar {
	width:100%;
	background:url(../images/80px_blue_bar.png) repeat-x;
	height:35px;
	background-position:0 -35px;
	text-align:right;
	color:white;
	font-size:75%;
	line-height:35px;
}

.topbar img {
	margin: 3% 3% 0 1%;
	float:right;
	}
	
/** End Top Bar **/

/** HEADER **/
	
.logo {
	width:90%;
	margin:5%;
	clear:both;
}

.tagline {
	display:block;
	text-align:right;
	font-size:120%;
	color:#2A5E94;
	margin:-20px 15px 0 0;
	}
	
#citizen .tagline {
	color:#AE0000;
}

/** END HEADER **/

/** MAIN SECTION **/

.main h1, .main h2, .main h3 {			/* heading */
	font-weight:normal;
	font-size:110%;
	text-shadow:1px 1px 2px #ffffff;
	line-height:1.5;
	margin:5%;
	}
	
.main h1 b, .main h2 b {
	color:#235088;
}

.red {
	color:#AE0000;
}

.main h3 {
	color:#AE0000;
}
	
.textbox p {		/* copy */
	color:#333;
	line-height:1.5;
	font-size:95%;
	margin:0 5%;
}
	
h4 {
	font-weight:normal;
	font-size:105%;
	text-shadow:1px 1px 2px #ffffff;
	line-height:1.5;
	margin:5%;
}

#citizen h4 {
	background:white;
	padding:10px;
	color:#235088;
}

/** BUTTONS **/
.buttons {
	text-align:center;
	}
	
.buttons .gov, .buttons .cit {
display:block;
width:80%;
margin:5% 0 5% 2.5%;
font-size: 125%;
font-weight:bold;
color: #08498f;
padding: 10px 20px;
background: -moz-linear-gradient(
	top,
	#f5f5f5 0%,
	#d1d1d1);
background: -webkit-gradient(
	linear, left top, left bottom, 
	from(#f5f5f5),
	to(#d1d1d1));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #8a8a8a;
-moz-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 1px rgba(255,255,255,0.7);
-webkit-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 1px rgba(255,255,255,0.7);
text-shadow:
	0px -1px 0px rgba(000,000,000,0.4),
	0px 1px 0px rgba(255,255,255,0.3);
text-decoration:none;
}

.mobilebutton {
display:block;
width:82%;
margin:5% 2.5% 5% 2.5%;
font-size: 125%;
font-weight:bold;
color: white;
padding: 10px 20px;
background: -moz-linear-gradient(
		top,
		#4289cb 0%,
		#316697);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#4289cb),
		to(#316697));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #316697;
-moz-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 1px rgba(255,255,255,0.7);
-webkit-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 1px rgba(255,255,255,0.7);
text-shadow:
	0px -1px 0px rgba(000,000,000,0.4),
	0px 1px 0px rgba(255,255,255,0.3);
text-decoration:none;
}

.mobilebutton.ios, .mobilebutton.android {
background: -moz-linear-gradient(
	top,
	#f5f5f5 0%,
	#d1d1d1);
background: -webkit-gradient(
	linear, left top, left bottom, 
	from(#f5f5f5),
	to(#d1d1d1));
color: #08498f;
border: 2px solid #8a8a8a;
}

	
/** FEATURES **/

.sidebar {
	margin:10% 5%;
	text-align:center;
}

.sidebar h2, .sidebar h3 {
color:#3978AE;
text-shadow:1px 1px 2px #fff;
margin:0;
padding:0;
font-size:100%;
}

.sidebar h3 {
	margin:5%;
}

.sidebar h2 {
	font-size:130%;
}

.features {
	text-align:left;
	padding:10px;
	background:rgba(255,255,255,.75);
	margin-top:10px;
}

.features ul, .features ul li {
	list-style:none;
	margin:0;
	padding:0;
}

.features ul li {
	margin:10% 0;
	font-size:80%;
}

.timeline {
	width:80%;
}
		
.facebook, .photo, .map {
float:left;
width:70px;
height:70px;
margin:0 5%;
background-size:100%;
}


.facebook {
background:transparent url(../images/facebook.png) no-repeat;
-webkit-background-size:100%;
}

.photo {
background:transparent url(../images/pothole.png) no-repeat;
-webkit-background-size: 100%;
}

.map {
background:transparent url(../images/map.png) no-repeat;
-webkit-background-size: 100%;
}

.phones {
margin:0 auto;
width:90%;
}

/** Mobile Form **/

.formbox {
margin:5%;
}

.formbox label {
display:block;
font-size:125%;
font-weight:normal;
color:#666;
}

.formbox input[type=text], 
.formbox textarea, 
.formbox input[type=email], 
.formbox input[type=url],
.formbox input[type=number] {
width:90%;
padding:5%;
font-size:100%;
margin:1% 0 5% 0;
border-radius:10px;
-webkit-border-radius:10px;
outline:0;
border:none;
border-bottom:3px dashed #3978AE;
background:rgba(255,255,255,.8);
}

.formbox textarea {
height:100px;
}

#salesforce input:focus, #salesforce textarea:focus {
background:#ffc;
}

label.error {
font-size:small;
color:red;
width:100%;
text-shadow:none;
}

input.error, textarea.error {
border-bottom:3px solid red!important;
}


.required {
color:red;
font-size:smaller;
text-shadow:none;
}

/* submit button */
#submit {
	font-size: 22px;
	color: #3978AE;
	padding: 15px 25px;
	background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#ffffff 50%,
		#b5b5b5);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff),
		color-stop(0.50, #ffffff),
		to(#b5b5b5));
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 0px solid #2ea100;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 3px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 3px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,1);
	float:right;
	font-weight:bold;
	clear:both;
	margin:2% 0;
}

#footer {
	width:90%;
	background:#3978AE;
	padding:5%;
	font-size:75%;
	color:white;
	margin:5% 0 0 0;
	text-shadow:1px 1px 2px #666;
	border-top:1px solid #235088;
}

.footerlinks {
	color:white;
	padding:5px 0;
}

.footerlinks a {
	color:white;
}

/* iphone splash image */
.mobile {
	text-align:center;
}

.mobile img {
	width:90%;
}