/* ----------------------------------------------------------------------------------------- 
____________________________________________________________________

"Screen" Style Sheet
@Project - " Adnan Enterprise "
@Description - Developed in November 2011
@Author - Mustafa Quilon for Zahab (http://mustafaquilon.com / http://thisiszahab.com)
@Version - 1.0 
@Copyright : Zahab Studio.
___________________________________________________________________

----------------------------------------------------------------------------------------- */



/* Reset
----------------------------------------------------------------------------------------- */
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; }
ol, ul { list-style: none; list-style-image: none; list-style-position: outside; list-style-type: none; }
a { text-decoration: none; font-weight:normal; }
a:hover, a:focus { text-decoration: none; overflow: hidden;}
abbr, acronym { border-bottom: 1px dotted #888888; cursor: help; } 
small { font-size: 0.7em; }
strong { font-weight: bold; }
sub { font-size: 0.7em; vertical-align: sub; }
sup { font-size: 0.7em; vertical-align: super; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
em { font-style: italic; }
ol { list-style-type: decimal;}

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none;}
blockquote, q { quotes: "" ""; }
a img { border: none; }

/*visualHide*/
.visuallyHidden { position: absolute; top: -500px; left: 0px; width: 1px; height: 1px; overflow: hidden; }

/* =textSelect */
::selection { color: #000; background-color: #98ACD2; text-shadow: none; } /* webkit */
::-moz-selection { color: #000; background-color: #98ACD2; text-shadow: none; } /* mozilla */

/* Clear Floated Elements (taken from 960gs)
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/* Font Face
----------------------------------------------------------------------------------------- */
@font-face {
    font-family: 'Museo300';
    src: url('../fonts/museo300/museo300-regular-webfont.eot');
    src: url('../fonts/museo300/museo300-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museo300/museo300-regular-webfont.woff') format('woff'),
         url('../fonts/museo300/museo300-regular-webfont.ttf') format('truetype'),
         url('../fonts/museo300/museo300-regular-webfont.svg#Museo300') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Layout
----------------------------------------------------------------------------------------- */
body{ margin:0; padding:0; background:#fff url(../images/bg-pattern.jpg);}

/* Header
----------------------------------------------------------------------------------------- */
#headerWrapper { width: 100%; z-index: 1000; background-color: #e8e4e4; border-bottom: 1px solid #fff; }
#header { position: relative; width: 950px; height: 140px; margin: 0 auto; padding: 25px 0 0; background: url(../images/tools.jpg) no-repeat 440px top transparent; }
#header h1 { font: bold 50px 'Museo300', Arial, Helvetica, sans-serif; color:#4467a7; text-shadow: 1px 1px 1px #fff; }
.contactInfo { float: right; width: 250px; font: normal 12px 'Museo300', Arial, Helvetica, sans-serif; color:#666; text-shadow: 1px 1px 1px #fff; }
.contactInfo li { line-height: 24px; padding-left: 26px; } 
.contactInfo a {  color:#2756ad; }
.phone { background: url(../images/mobile.png) no-repeat left center; }
.email { background: url(../images/mail.png) no-repeat left center; }
.email a:hover { color:#666;  }

/* Navigation
----------------------------------------------------------------------------------------- */
#navMain { position: absolute; top: 130px; left: 0; font: normal 14px 'Museo300', Arial, Helvetica, sans-serif; overflow: hidden; z-index: 1000; border:1px solid #555;
background: rgb(104,104,104); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(104,104,104,1) 0%, rgba(69,69,69,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(104,104,104,1)), color-stop(100%,rgba(69,69,69,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(104,104,104,1) 0%,rgba(69,69,69,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(104,104,104,1) 0%,rgba(69,69,69,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(104,104,104,1) 0%,rgba(69,69,69,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(104,104,104,1) 0%,rgba(69,69,69,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686868', endColorstr='#454545',GradientType=0 ); /* IE6-9 */ }
#navMain li { display: block; float: left; background: url(../images/menu-separator.png) repeat-y right center; }
#navMain a { display: block; float: left; color: #F8F8F8; padding: 8px 15px; text-decoration: none; text-shadow: 1px 1px 1px #333; }
#navMain a:hover, #navMain a:focus, #navMain a.selected { color: #fff;
background: rgb(69,69,69); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(69,69,69,1) 0%, rgba(104,104,104,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,69,69,1)), color-stop(100%,rgba(104,104,104,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(69,69,69,1) 0%,rgba(104,104,104,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(69,69,69,1) 0%,rgba(104,104,104,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(69,69,69,1) 0%,rgba(104,104,104,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(69,69,69,1) 0%,rgba(104,104,104,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#686868',GradientType=0 ); /* IE6-9 */ }

/* Body Content
----------------------------------------------------------------------------------------- */
#contentWrapper { position:relative; width: 950px; margin: 0 auto; overflow: hidden;}
#contentWrapper hr{ background: url(../images/separator.png) repeat-x; border: none; height: 8px; padding:0; clear:both;}
#contentWrapper h1{ font: normal 52px 'Museo300', Arial, Helvetica, sans-serif; color:#2756ad; margin:20px 0 0 0; text-shadow: 0px 1px 1px #fff;}
#contentWrapper h2{font: normal 22px 'Museo300', Arial, Helvetica, sans-serif; color:#2756ad; margin-bottom: 50px; padding-top: 70px; text-shadow: 0px 1px 1px #fff;}
#contentWrapper h3{font: 500 16px 'Museo300', Arial, Helvetica, sans-serif; color:#2756ad; text-shadow: 0px 1px 1px #fff;}
#contentWrapper h4{font: 500 14px 'Museo300', Arial, Helvetica, sans-serif; color:#2756ad; text-shadow: 0px 1px 1px #fff; width: 300px;}
#contentWrapper p{ font: 12px/20px Arial, Helvetica, sans-serif; color:#666666; margin:0 0 20px 0; clear:both; text-shadow: 0px 1px 1px #fff;}
.productList { font: normal 12px/20px  Arial, Helvetica, sans-serif; color:#666; text-shadow: 0px 1px 1px #fff; margin:0 0 10px 20px;} 

/* Product
----------------------------------------------------------------------------------------- */
.category { overflow: hidden; }
.category li { display: block; float: left; margin: 10px 20px 10px 7px; }
.category li img { border: 5px solid #fff; box-shadow: #ccc 0px 0px 3px; -moz-box-shadow: #ccc 0px 0px 3px; -webkit-box-shadow: #ccc 0px 0px 3px; background-color: #fff; }
.category h3 { text-align: center; margin-top:3px;}
.last { margin-right: 0 !important; }

/* google maps 
----------------------------------------------------------------------------------------- */
#map { margin: 15px; margin-bottom:15px; border: 5px solid #fff; box-shadow: #ccc 0px 0px 2px; -moz-box-shadow: #ccc 0px 0px 2px; -webkit-box-shadow: #ccc 0px 0px 2px;}

/* Footer Wrapper
----------------------------------------------------------------------------------------- */
#footerWrapper { width: 100%; float: right; font: normal 12px Arial, Helvetica, sans-serif;  background: #fff; padding: 15px 0; border-top: 1px solid #cccccc;}
#footer { width: 950px; overflow: hidden; margin: 0 auto;}
.footerLeft { float:left; width:400px; }
.footerRight a { color: #4467A7; }
.footerRight a:hover, .footerRight a:focus  { color: #4467A7; font-weight: bold;}
.footerRight { float:right; }
.footerRight, .footerLeft { color:#98acd2; text-shadow: 1px 1px 0px #fff; line-height: 18px; }

/* =form
----------------------------------------------------------------------------------------- */
.contactForm { width: 475px; float: left;}
form { padding: 0; margin: 0; color: #666666; font: normal 12px  Arial, Helvetica, sans-serif;}
fieldset { clear: both; }
fieldset p { margin-bottom: 0 !important; padding-bottom: 10px; }
form .field, form .buttons { padding-bottom: 10px; }
label, button, input.submit { cursor: pointer; }
input.submit { background: #ccc; color: #666666; border:1px solid #fff; padding: 5px; }
input.submit:hover { background: #6390e2; color: #fff; }
input.text, textarea { font: normal 12px  Arial, Helvetica, sans-serif; color: #666; border: 1px solid #eee; margin-right: 15px; background-color: #fff;}
input.text { width: 250px; height: 26px; }
textarea { width: 420px; }
input.text:focus, input.password:focus, textarea:focus, select:focus {  border: 1px solid #959595; }

.ajaxresponse h4 { color: #fff; font: normal 12px/18px 'MetaNormalRomanRegular', Arial, Helvetica, sans-serif;  text-align: center}
.ajaxresponse p { color: #9AB9FE; text-align: center; }
.error input.text_input, .error textarea { border: 1px solid #ff9191; }
.valid input.text_input, .valid textarea { border-color: #00b604; }

.addressDetail { background: url(../images/contact-separator.png) repeat-y right; width:2px; min-height:100%; height: auto !important; height: 100%; margin-left: 15px; float: left; margin-bottom:200px;}
.addressDetail h4 { margin: 0 0 10px 22px ; }
.addressDetail p{ font-style:normal; margin: 0 0 0 20px !important; width: 280px; }
p.iconMail { background: url(../images/new-mail.png) no-repeat left center; margin: 10px 0 10px 20px !important; padding-left: 20px;}
p.iconMail a { color:#2756ad; }
p.iconMail a:hover { color: #666; }