/*  
Theme Name: MAA Mobile Stylesheet
Description: Mobile specific stylesheet
Version: 1.0
Tags: Clean, light, mobile
*/

/* ---------------------------------------
   GLOBALS
   --------------------------------------- */

html {
	background: #fff url(/images/mobile/background.jpg) top left repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 66%;
	margin: 0px;
	}
	
body{
	background: none;
	margin: 0px;
	position: relative;
	}
	
#features, #sidebar, #homesidebar, #survivor-home, #blog-section, #news-section, img.banner, .related, #breadcrumbs, #sub-navigation { 
	display: none; 
	}
	
#container, #internal-container {
	background: none;
	margin: 0px;
	padding: 0;
	width: 100%;
	}
	
a {
	color: #268abc;
	}
	
/* ---------------------------------------
   OVERLAY AD
   --------------------------------------- */
   
#mobile-ad {
	background: url(/images/mobile/ad-back.jpg) top left repeat-x;
	display: block;
	height: 49px;
	z-index: 10000;
	width: 100%;
	}
	
	#mobile-ad a {
		background: url(/images/mobile/mobile-ad.jpg) top left no-repeat;
		display: block;
		height: 49px;
		margin: 0px auto;
		text-indent: -90000px;
		width: 320px;
		}
	
/* Reposition on scroll */
body.scrolled #overlay-ad {
	top: 307px;
	}
	
/* Reposition on orientation change */
body[orient="landscape"] #overlay-ad {
	top: 220px;
	}

/* Reposition on scroll */
body.scrolled[orient="landscape"] #overlay-ad {
	top: 159px;
	}
	
/* ---------------------------------------
   HEADER
   --------------------------------------- */
   
#header {
	height: 88px;
	position: relative;
	margin: 0px;
	width: 100%;
	}

#logo a {
		background: url(/images/mobile/logo.png) top left no-repeat;
		display: block;
		height: 40px;
		left: 10px;
		position: absolute;
		text-indent: -9000px;
		top: 9px;
		width: 160px;
		}
		
		#logo a img {
			display: none;
			}

.search {
	display: none;
	}
	
.callnow {
		color: #15688f;
		display: block;
		font-size: 11px;
		right: 15px;
		position: absolute;
		text-align: right;
		top: 15px;
		width: 400px;
		}
		
		.callnow span.huge {
			color: #082b36;
			font-family: Myriad Pro, Arial, Helvetica, sans-serif;
			font-size: 12px;
			font-weight: bold;
			font-style: italic;
			text-transform: uppercase;
			}
			
/* ---------------------------------------
   NAVIGATION
   --------------------------------------- */
   
div#mesosublist, div#treatmentsublist, div#doctorssublist, div#clinicssublist, div#asbestossublist, 
div#asbestossublist, div#exposuresublist, div#veteranssublist, div#legalsublist, ul#navigation li.doctorsexpanded,
ul#navigation li.clinicsexpanded, ul#navigation li.legalsexpanded, ul#navigation li.asbestosexpanded,
ul#navigation li.mesoexpanded {
	display: none;
	visibility: hidden;
	}
	
ul#navigation {
	background: #15688f url(/images/mobile/nav-back.jpg) top left repeat-x;
	border-bottom: 1px solid #1a5774;
	position: absolute;
	padding: 3px 0px 3px 0px;
	top: 47px;
	left: 0px;
	width: 100%;
	}
	
	ul#navigation li {
		display: block;
		float: left;
		font-size: 9px;
		height: 28px;
		margin: 0px 0px;
		outline: none;
		overflow: none;
		text-align: center;
		width: 24%;
		}
		
		ul#navigation li a {
			display: block;
			font-family: Arial, sans-serif;
			color: #fff;
			overflow: hidden;
			height: 12px;
			padding: 8px 0px;
			text-decoration: none; 
			text-transform: uppercase;
			}
					
		ul#navigation li.treatmentexpanded {
			text-indent: -95px;
			}
			
		ul#navigation li.treatmentexpanded {
			margin-left: 15px;
			}
			
		ul#navigation li.exposureexpanded {
			text-indent: -73px;
			}
			
		ul#navigation li.veteransexpanded {
			text-indent: -100px;
			}
			
		ul#navigation li.legalexpanded {
			margin-right: 0px;
			padding-right: 0px;
			text-indent: -107px;
			}
			
	ul#navigation li.treatmentexpanded:hover div#treatmentsublist, 
	ul#navigation li.exposureexpanded:hover div#exposuresublist,
	ul#navigation li.veteransexpanded:hover div#veteranssublist {
		display: block;
		overflow: hidden;
		}
	
/* ---------------------------------------
   CONTENT
   --------------------------------------- */
	
#content {
	background: none;
	padding: 10px 15px;
	}
	
#container p {
	line-height: 120%;
	}
	
#content h1 {
		border-bottom: 1px solid #d6e9f6;
		color: #082b36;
		clear: both;
		display: block;
		font-size: 16px;
		margin-bottom: 4px;
		padding-bottom: 3px;
		}
		
	#content h3 {
		color: #2189be;
		font-size: 14px;
		margin-bottom: 4px;
		margin-top: 15px;
		padding-bottom: 2px;
		}
	
.rightcolumn {
	margin: 0px;
	}
	
	.rightcolumn img {
		border: 1px solid #87b1c7;
		padding: 2px;
		height: 100px;
		margin: 0px 10px;
		width: 100px;
		}
		
	.rightcolumn img.alignleft {
		float: left;
		margin: 10px 15px 10px 0px;
		}
		
	.rightcolumn img.alignright {
		float: right;
		margin: 10px 0px 10px 15px;
		}

/* ---------------------------------------
   MOBILE CONTACT FORM
   --------------------------------------- */

ul.mobile-contact {
	list-style: none;
	margin: 15px 0 0 0;
	padding: 0px; 
	}
	
ul.mobile-contact li {
	list-style: none;
	margin: 4px 0px;
	padding: 0px;
	}
	
ul.mobile-contact li input {
	border: 1px solid #ccc;
	font-size: 13px;
	width: 90%;
	padding: 5px;
	}
	
	ul.mobile-contact li input.firstName { width: 50%; }
	ul.mobile-contact li input.lastName { width: 70%; }
	ul.mobile-contact li input.city { width: 50%; }
	ul.mobile-contact li input.state { width: 20%; }
	ul.mobile-contact li input.zip { width: 20%; }
	ul.mobile-contact li input.phone { width: 30%; }
	
ul.mobile-contact li label {
	color: #15698e;
	font-weight: bold;
	margin-bottom: 3px;
	text-transform: uppercase;
	}
	
input.mobile-submit {
	margin-top: 15px;
	height: 30px;
	text-transform: uppercase;
	width: 100px;
	}
		
/* ---------------------------------------
   FOOTER
   --------------------------------------- */
   
#footer {
	border-top: 1px #cde3f4 solid;
	font-size: 10px;
	height: 470px;
	padding: 10px 15px;
	}
	
#footer p.copyright {
	width: 230px;
	}
		
#footer div.hon {
	float: right;
	font-size: 8px;
	margin: -20px -10px 15px 15px;
	width: 80px;
	}
	
	#footer div.hon img {
		float: none;
		margin-left: 10px;
		margin-bottom: 10px;
		}
	
.footer-right-column {
 	color: #ccc;
	}
	
	.footer-right-column img {
		display: block;
		}
	
#footer iframe {
	display: inline;
	float: left;
	font-size: 8px;
	margin-left: -10px;
	width: 100%;
	}