@charset "UTF-8";
@import url(reset.css);
@import url(menu.css);
@import url(form.css);

/******************************************************************************************************

										Market Hardware Core CSS

/******************************************************************************************************/

/* typography */
body { font-size: 0.75em /* 12px */; background: #80D4FC url(../design/bg_body.jpg) repeat-x 0 0; color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 1.5em; margin: 0 auto; }

h1, h2, h3, h4, h5, h6 { line-height: 1; /* Use to set global header styles. ie, bold, italic, color, margin, padding */ }
h1 { font-size: 2.33em /* 28px */; color: #999; font-weight: normal; margin-bottom: 20px;  }
h2 { font-size: 1.5em /* 18px */; font-weight: bold; color: #6fac03; margin-bottom: 8px; }
h3 { font-size: 1.33em /* 16px */; font-weight: normal; text-transform: uppercase; margin-bottom: 6px;  }
h4, h5, h6 { font-size: 1.1em /* 13px */; }

p, ul, ol { margin-bottom: 1.1em; } /* DO NOT RESIZE */
li { margin-bottom: 0.5em; }

a, a:visited { color: #0063A5; text-decoration: none; }
a:hover, a:active { color: #EC9A22; text-decoration: none; }

/* group (also known as clearfix) applies style to div's containing other floating elements - FLOAT CHILDREN LEFT AND CLEAR NONE */
.group:after, .left-column form label:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.group, .left-column form label { zoom: 1; display: block; }

/* Image replacement generic */
.ir { display: block; overflow: hidden; position: relative; line-height: 1.0; font-size: 1em; }
.ir span { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; background: url(../images/txt_all.png) no-repeat; }
.ir a { cursor: pointer; display: block; height: 100%; width: 100%; text-indent: -999em; }
.ir a span, a.ir span { cursor: pointer; }

span.b, span.t { position: absolute; overflow: hidden;z-index: 2; }

/* layout */
.container { width: 960px; margin: 0 auto; position: relative; }
#branding { position:relative; }

#callout ul, #callout li { margin: 0; padding: 0; text-indent: 0; list-style-type: none; }

#footer { margin: 0 auto 12px auto; font-size: 0.92em; height: 45px;  text-align: center; color: #000; background: url(../design/bg_footer.png); }
#footer p { padding: 4px 90px; margin: 0; }
#footer a, #footer a:visited { color: #0063A5; text-decoration: none; }
#footer a:hover, #footer a:active { color:#0063A5; text-decoration: underline; }

.breadcrumb { font-size:85%; padding-bottom: 10px; }
.breadcrumb a { outline: none; }

blockquote {background: #F8F8F8; border: 1px solid #F2F2F2; padding: 15px; margin-bottom: 20px;}
blockquote p {margin: 0; font-size: 1.2em; line-height: 1.5em; color: #666;}
cite {font-style: italic;}
.home blockquote {  padding: 15px; background: #F8F8F8; border: 1px solid #F2F2F2; }
.home blockquote p {  font-family: "Lucida Sans"; font-size: 1.2em; color: #999; font-style: italic; text-align: center; margin: 0; }


#branding { position: relative; background: #fff; margin-bottom: 17px; padding-bottom: 6px; zoom: 1; }
#branding span.b { background: url(../design/bg_header.png) no-repeat bottom left; width: 960px; height: 17px; bottom:-17px; left:0; }
#branding #logo { width: 321px; height: 116px;  border: 0; padding: 6px 0 0 46px; }

#branding #logo span { background: url(../images/logo.gif)  no-repeat 0 0; left: 46px; top: 6px; }
#branding h2 { color: #999999; font-size: 1.5em; margin: 19px 0 0 46px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px }
#branding h2 a { font-size: 15px; font-weight: bold; font-family: Arial; }
#branding p.right { position: absolute; top:19px; right:-32px; width: 440px; }

#branding p.right .phone { float: left; display: inline; font-size: 1em; margin-bottom: 2px; width: 200px; padding-right: 12px; height: 20px; }
#branding p.right .phone strong { padding-right: 12px; width: 70px; display: inline-block; }
#branding p.right a.btn-service { background: url(../design/btn_service.jpg) no-repeat 0 0; width: 236px; height: 52px; display: inline; clear: both; float: left; color: #0063A5; font-size: 1.5em; font-weight: bold; vertical-align: middle; margin: 12px 0 0 80px; padding-left: 52px;padding-top:8px;line-height:1.1em;  }
#branding p.right a.btn-service:hover { background-position: 0 -60px; color: #fff;  }

#branding p.right a.btn-service em {font-style: normal;text-align: center;padding-left: 15px;}
/* content */
#content { background: #fff url(../design/side.png) 0 0 repeat-y; position: relative; padding: 0px 0 0 18px; width: 942px;border-bottom:10px solid #FFF;  }
#content span.t { background: url(../design/bg_content.png) no-repeat top left; width: 960px; height: 17px; top: -17px; left:0; }
#content .left-column { float: left; width: 197px; background: #E5E5E5; margin-bottom: 5px; }
#content .right-column { float: left; width: 670px; padding: 0 0 0 56px; }

.left-column  .photo { display: block; }
#callout img { margin-top: 4px; }
#callout { position: relative; background: #E5E5E5; border-top: 1px solid #fff; }
#callout h2 { font-size: 1.5em; color: #000; margin: 50px 0 6px 32px; }
#callout li { margin: 0 20px 0 32px; }
#callout li h3, #callout li p { font-size: 1em;  }
#callout a.btn-contact { display: block; text-transform: uppercase; font-weight: bold; font-size: 1.33em; margin: 20px 0 10px 32px; }
#callout img.brand { margin: 0 0 20px 28px; }
#callout li h3 a {text-transform: none; font-weight: bold;}

.right-column ul.service-list { margin: 20px 0 0 0; padding: 0 0 0 0; overflow: hidden; width: 670px; }
.right-column ul.service-list li { list-style: none; width: 286px; padding-top:6px; float: left; background: url(../design/ico_tick.gif) no-repeat 0 0; padding-left: 28px;  }
.right-column ul.service-list li.odd { margin-right: 38px; }

.right-column ul.service-list li a { color: #0063A5; font-weight: bold; font-size: 1.33em; }
.right-column ul.service-list li a:hover { color: #94C948; }
.right-column h1.head { width: 330px; height: 31px; margin: 12px 0 0 0; }
.right-column h1.head span { background: url(../images/how-can-we-help.gif) no-repeat 0 0;}

.right-column .service-area { width: 620px; }
.right-column .service-area h2 { margin: 40px 0 12px 0;  color: #A7A7A7; }
.right-column .service-area ul { margin: 12px 0 12px 12px; padding: 0; }
.right-column .service-area li { margin: 0; padding: 0; list-style: inside; }
/* font-size guide
	10px->0.83em 11px->0.92em 12px->1em 13px->1.1em 14px->1.2em 15px->1.4 em 16px->1.33em 17px->1.42em 18px->1.5em 19px-> 20px->1.67em 21px->1.75em 22px->1.83em 23px->1.92em 24px->2em 28px->2.33em
 */
 


body.interior .right-column ul { padding: 0 0 18px 28px; margin: 0; }
body.interior .right-column ol { margin: 0; padding: 0 0 0 34px; }
body.interior .right-column li  { padding: 0; margin: 0; }

body.interior blockquote { margin: 32px 0 0 0 ; padding: 18px 22px; }
body.interior blockquote p { margin: 0 0; text-align: left; font-family: Arial; font-size: 1em; color: #333; font-style: normal; }
body.interior blockquote p span { font-style: italic }



div.bottom-links {margin: 35px 0;}
div.bottom-links h2 {display: inline;}
div.bottom-links p {color: #ccc; font-size: 1.13em; width: auto; display: inline; }
div.bottom-links a {text-transform: uppercase; padding: 0 10px; font-weight: bold;}

.contact #contact-left {width: 300px; float: left;}
.contact #contact-right {width: 300px; float: right;}
.contact #contact-right table td, .contact #contact-right table th {padding: 5px;}

#social-network {padding:0;margin:5px 0 10px 30px; }
#social-network img {width: 40px; height:40px;}