/***
==========================================
iPhone CSS Layout by Alt-Web Design and Publishing
http://www.alt-web.com    
Copyright August 2010 ~ May 2011
==========================================
***/

/** zero out default browser values on everything**/
* {margin:0; padding:0; line-height:98%; font-size: 98%}

body {
font-size:75%;
background:#330000; 
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
html > body {font-size:14px;}

#Wrapper {
width: 95%; 
margin:0 auto;
min-width: 300px; 
border: 5px solid #990000;
background-color: #CC6666;
}

/**ROUNDED CORNERS**/
#Wrapper, 
.Box1, 
.Box2, 
.Box3{
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-khtml-border-radius: 16px;
border-radius: 16px;
}

/**BOX SHADOWS**/
.Box1, .Box2, .Box3 {
-moz-box-shadow: 5px 5px 5px #999;
-webkit-box-shadow: 5px 5px 5px #999;
box-shadow: 5px 5px 5px #999;
}

/**HEADER**/
#Header {
width: 100%;
text-align: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
min-height: 7.25em;
}

#Header h1 {
padding: 12px;
font-size: 2.25em;
text-shadow: #330000 0.1em 0.1em 0.2em;
color: #FFF;
}

#Header h2 {
padding: 0 12px;
letter-spacing: 3px;
text-transform:uppercase;
}
#Header address {
color: #FFF;
font: bold oblique 14px/1.2em Arial, Helvetica, sans-serif;
line-height: 1.5em;
padding: 12px;
}


/**TOP MENU AND OTHER LINKS**/
#navlist {
font-size: 12px;
font-weight: bold;
text-align: center;
padding: 0.65em;
min-height: 4em;
/**for no-gradient browsers**/
background:#883838;
/**CSS3 GRADIENT**/
background: -moz-linear-gradient(24% 71% 90deg,#CC6666, #330000);
background: -webkit-gradient(linear, 71% 0%, 71% 71%, from(#330000), to(#CC6666));
}

#navlist li {list-style:none;}

a {
display:block;
padding: 0.5em;
line-height: 1.2em;
font-size: 16px;
font-weight: bold;
margin: 0.75em auto;
width: 178px;
border: 2px solid silver;
background-color: #990000;
text-decoration:none;
text-align: center;

/**SHADOWS**/
text-shadow: #330000 0.1em 0.1em 0.2em;
-moz-box-shadow: #330000 0.1em 0.1em 0.5em;
-webkit-box-shadow: #330000 0.1em 0.1em 0.5em;
-khtml-box-shadow: #330000 0.1em 0.1em 0.5em;
box-shadow: #330000 0.1em 0.1em 0.5em;

/**ROUNDED BORDERS**/
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
}

a:link, a:visited {color:#CCC999}
a:hover,
a:active,
a:focus{text-decoration:none;background: #C4292C; color: #EDE1BE;} 

/**PERSISTENT PAGE INDICATOR ON TOP MENU**/
body.home #navlist li a.home, 
body.about #navlist li a.about, 
body.products #navlist li a.products, 
body.services #navlist li a.services,
body.contact #navlist li a.contact {
color: #FFAF00;
border: 3px solid #FFAF00;

}
/**end top menu**/

/**this content is not shown to mobile devices**/
.desktops {display:none}

/** Main **/
#MainContent {
padding-top: 12px;
text-align:left;
color:#663333;
background: #EAEAEA;
}
#MainContent li {margin:0; padding:0;list-style:none;}

#MainContent blockquote {
font:italic 1.2em Georgia, "Times New Roman", Times, serif;
color: #996666;
}

/**ROUNDED BOXES**/
#Boxes {width: 275px; margin:0 auto;}

#Boxes ul, #Boxes li {
	margin-left: 18px;
	padding-bottom: 5px;
	padding-left: 10px;
	list-style: square outside;
	line-height: 1;
	font-size: 12px;
}
#Boxes li li {list-style:none; padding-top: 2px; padding-bottom: 0;margin-left: -25px;}

.Box1, .Box2, .Box3 {
	width: 230px;
	min-height: 160px;
	border: 4px solid #990000;
	background:#EDE1BE;
	font-size: 0.8em;
	float:none;
	margin:0 auto  0.95em auto}

#Boxes h2{
text-align: center;
font-size: 14px;
color: #990000;
}
/**end boxes**/

#Footer {
text-align: center;
padding: 5px 0;
color: #FFF;
font-weight: bold;
font-size: 0.65em;
}


/**General text styles**/
h1,h2,h3,h4,h5 {
font-size:1.2em;
line-height:1.50em;
margin-bottom:0;
margin:12px 0 8px 0;
padding: 0 20px 0 20px;
}
p {
font-size: 1em; 
line-height: 1.25;
margin: 8px 0 12px 0;
padding:0 20px 0 20px;}


/**text align**/
.left, 
.right {text-align: left}
.center {text-align:center}


/**no floats and clearing**/
.floatRight, 
.floatLeft {
float:none;
}

/**since we are not displaying floats here, we can remove the clearing hr **/
hr {display:none}

#Myfooter {display:none}

/**optional disable images on iPhone
img{display:none;}**/

/**optional resize images on iPhone**/
img {width: 25%; height: 25%; margin:0 auto;}