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


   Screen.css // AMPS Industrial Controls


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


/* RESET  (BY ERIC MEYER)   
-------------------------------------------------------------- */

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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

body { line-height: 1; color: #333; background: white; }
button { background: transparent; border: 0; padding: 0; margin: 0;}
button img  { margin: 0; padding: 0; }
address { text-style: normal; }

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* -------------------------------------------------------------- 
   
   TYPOGRAPHY
  
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Wilson Miner      [wilsonminer.com]
  
-------------------------------------------------------------- */   

body {
  font-family: helvetica, arial, verdana, sans-serif;
  line-height: 1.5; /* Unitless for proper inheritance */
}
   
body          { font-size: 75%; }   /* IE */
html > body   { font-size: 13px; }  /* Other browsers */


/* HEADINGS
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { 
  font-family: "lucida grande", "lucida sans", Tahoma, arial, verdana, sans-serif;
  color:#111; 
  clear:both; 
}

h1 { font-size: 3em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; line-height:2; }
h4 { font-size: 1.2em; line-height:1.25; font-weight:bold; }
h5 { font-size: 1em; font-weight:bold; }
h6 { font-size: 1em; }


/* TEXT ELEMENTS
-------------------------------------------------------------- */



ul, ol      { margin: 0 0 1.5em 0; }
ol          { list-style-type: decimal; }
dl          { margin: 1.5em 0; }
dl dt       { font-weight: bold; }

a           { color: #ac3e21; text-decoration: underline; outline: none; }
a:hover     { color: #000; }

blockquote  { margin: 1.5em 0 1.5em 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em          { font-style: italic; }
pre         { margin-bottom: 1.3em; background: #eee; border:0.1em solid #ddd; padding:1.5em; }
code        { font:0.9em Monaco, monospace; }
sup         { font-size: 1em}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ccc; 
  color: #ccc;
  clear: both; 
  float: none; 
  width: 100%; 
  height: 0.1em;
  margin: 1.7em 0 1.4em 0;
  border: none; 
}
* html hr { margin: 0 0 1.2em 0; } /* IE6 fix */


/* LAYOUT
------------------------------------------------------- */
body {
text-align: center; /* IE Fix */
margin:36px 0;
}
body.home {background: #fff url(images/bg-body-home.gif) repeat-x top;}
body.sub  {background: #fff url(images/bg-body-sub.gif) repeat-x top;}

/* A container should group all your columns. */
.container {
text-align: left;
position: relative;
padding: 0 10px;
margin: 0 auto;   /* Centers layout */
width: 800px !important;     /* Total width */
width /**/:843px;
}

/* MASTHEAD
------------------------------------------------------- */
#masthead {
padding-top: 13px;
height: 134px;
}
h1#logo a {
background: url(/images/logo-amps.gif) no-repeat 0 0;
height: 92px;
width: 165px;
text-indent: -9000px;
outline: 0;
margin-left: 22px;
display: block;
}
h2#tagline {
background: url(/images/tagline.gif) no-repeat 0 0;
height: 22px;
width: 456px;
text-indent: -9000px;
outline: 0;
position: absolute;
top: 61px;
left: 255px;
}

/* MAIN NAVIGATION
------------------------------------------------------- */
#mnav {
position: relative;
height: 60px;
}
ul.nav {
padding: 11px 0 0 29px;
}
ul.nav, ul.nav li {
list-style: none;
margin: 0;
}
ul.nav li {
display: inline;
float: left;
margin-right: 1px;
}
ul.nav li a {
background-color: transparent;
background-repeat: no-repeat;
background-position: 0 0;
display: block;
text-decoration: none;
float: left;
height: 36px;
text-indent: -9000px;
outline: 0;
}
ul.nav li a.home {
background-image: url(images/tab-home.gif);
width: 68px;
}
ul.nav li a:hover,
body.products-services ul.nav a.products,
body.home ul.nav .home,
body.testimonials ul.nav a.testimonials,
body.about ul.nav a.about,
body.contact ul.nav a.contact {
background-color: #A34318;
}
ul.nav li a.products {
background-image: url(images/tab-products.gif);
width: 167px;
}
ul.nav li a.testimonials {
background-image: url(images/tab-testimonials.gif);
width: 109px;
}
ul.nav li a.about {
background-image: url(images/tab-about.gif);
width: 82px;
}
ul.nav li a.contact {
background-image: url(images/tab-contact.gif);
width: 100px;
}

/* SITE SEARCH
------------------------------------------------------- */
#site-search {
width: 219px;
height: 53px;
position: absolute;
top: 154px;
left: 568px;
z-index: 9;
}
#site-search input.text {
background: #f8f9f5;
border: 1px solid #9B3107;
position: absolute;
top: 8px;
left: 10px;
line-height: 1;
padding: 3px 4px 3px;
margin: 0;
width: 155px;
height: 19px;
}
#site-search #btn-search {
cursor: pointer;
position: absolute;
left: 173px;
top: 7px;
z-index: 10;
}

/* SPOTLIGHT
------------------------------------------------------- */
#spotlight {
position: relative;
margin: 0 0 0 21px;
height: 252px;
margin-bottom: 12px;
}
#spotlight ul, #spotlight li {
list-style: none;
padding: 0;
margin: 0;
}
#spotlight ul {
padding-left: 4px;
}
#spotlight .spotitem {
height: 202px;
width: 145px;
float: left;
margin: 17px 0 0 4px;
}
#spotlight .spotitem a {
display: block;
height: 0 !important;
height /**/:202px;
padding: 202px 0 0 0;
overflow: hidden;
}
#spotlight a.spot-1 {background: #A34318 url(/images/spotphoto-1.png) no-repeat 0 0;}
#spotlight a.spot-2 {background: #A34318 url(/images/spotphoto-2.png) no-repeat 0 0;}
#spotlight a.spot-3 {background: #A34318 url(/images/spotphoto-3.png) no-repeat 0 0;}
#spotlight a.spot-4 {background: #A34318 url(/images/spotphoto-4.png) no-repeat 0 0;}
#spotlight a.spot-5 {background: #A34318 url(/images/spotphoto-5.png) no-repeat 0 0;}

* html #spotlight a.spot-1 {background: url(/images/spotphoto-1.gif) no-repeat 0 0;}
* html #spotlight a.spot-2 {background: url(/images/spotphoto-2.gif) no-repeat 0 0;}
* html #spotlight a.spot-3 {background: url(/images/spotphoto-3.gif) no-repeat 0 0;}
* html #spotlight a.spot-4 {background: url(/images/spotphoto-4.gif) no-repeat 0 0;}
* html #spotlight a.spot-5 {background: url(/images/spotphoto-5.gif) no-repeat 0 0;}

#spotlight a.spot-1:hover,
#spotlight a.spot-2:hover,
#spotlight a.spot-3:hover,
#spotlight a.spot-4:hover,
#spotlight a.spot-5:hover
{background-color: #2c2c2c;}

/* CONTENT
------------------------------------------------------- */
#content {
clear: both;
background: #fff;
padding-top: 22px;
min-height: 360px;
}
.home #content {
padding: 30px 30px 15px;
}
.sub #content {
background: #fff url(/images/bg-content.gif) repeat-x top;
padding: 0 30px 15px;
}
.sub #content {
padding-bottom: 40px;
position: relative;
width: 741px;
}
#content #span-1 {
float: left;
width: 269px;
}
.sub #content #span-1 {
width: 520px;
}
#content #span-2 {
float: left;
padding-left: 30px;
width: 435px;
}
.sub #content #span-2 {
width: 184px;
padding-left: 0;
float: right;
}
.sub #content #span-2 blockquote {
background: url(/images/ldquo.gif) no-repeat 0 0;
}
.sub #content #span-2 blockquote p {
background: url(/images/rdquo.gif) no-repeat right bottom;
margin: 0;
padding: 0 0 10px;
text-align: center;
}
#head-we-are {
background: transparent url(/images/head-we-are.gif) no-repeat 0 0;
height: 0 !important;
height /**/: 45px;
padding: 45px 0 0 0;
overflow: hidden;
}
#content .box {
background: #eff1e7;
font-size: 1em;
color: #555;
padding: 18px;
width: 233px;
}
#content .box p {
line-height: 1.3em;
margin: .4em 0 .7em;
}
#content p {
font-size: 1.1em;
margin-bottom: .8em;
}
.sub #content h1 {
font-size: 15px;
letter-spacing: 0;
line-height: 1.2em;
margin: 0 0 22px -30px;
padding: 21px 30px;
position: relative;
text-transform: uppercase;
}
.sub #content p.preamble {
color: #AC3E21;
font-family: "lucida grande", "lucida sans", tahoma, helvetica, arial, sans-serif;
font-size: 1.5em;
letter-spacing: -1px;
line-height: 1.4em;
margin: 0 0 1em;
width: 480px;
}
.sub #content p.preamble2 {
color: #706942;
font-size: 1.4em;
line-height: 1.3em;
margin: .6em 0 .6em;
}
.sub #content p.preamble2 strong {
color: #222;
font-weight: normal;
}
.sub #content h2 {
color: #AC3E21;
font-family: "lucida grande", "lucida sans", Tahoma, arial, sans-serif;
font-size: 1.5em;
font-weight: normal;
letter-spacing: -1px;
margin: 0 0 .4em;
clear: left;
}
.sub #content #span-2 h2 {
font-size: 1.1em;
text-transform: uppercase;
margin-bottom: .8em;
}
.sub #content h3 {
color: #333;
font-family: "lucida grande", "lucida sans", tahoma, helvetica, arial, sans-serif;
font-size: 1.5em;
letter-spacing: -1px;
margin: 1em 0 .4em;
}
#content blockquote {
background: #eff1e7;
color: #555;
margin: 0;
padding: 16px 22px 13px;
margin: 1.4em 0 .5em;
font-family: georgia, serif;
font-size: 1.1em;
font-style: italic;
}
#content .cite {
font-size: 11px;
letter-spacing: 1px;
text-align: right;
text-transform: uppercase;
}
#content ul {
list-style: none;
}
#content ul li {
background: url(/images/bullet-square.gif) no-repeat 0 4px;
padding-left: 14px;
list-style: none;
margin: .4em 0;
line-height: 1.4em;
}

#content .submenu ul li {
background: transparent;
padding-left: 0;
line-height: 1.2em;
margin: 0;
}
#content .submenu ul li a {
border-bottom: 1px solid #ddd;
color: #444;
display: block;
padding: 7px 6px 6px;
text-decoration: none;
}
#content .submenu ul li a:hover {
background: #e8e6dd url(/images/bg-submenu-hover.gif) repeat-x top;
}
* html #content .submenu ul li a,
* html #content .submenu ul li {
height: 1%;
}

/* POST
------------------------------------------------------- */
#posts h2 {
color: #6c6c6c;
font-size: 12px;
font-family: "lucida grande", "lucida sans", Tahoma, arial, verdana, sans-serif;
margin: 0;
text-transform: uppercase;
}
.post h3 {
margin: 0;
}
.post h3 a {
background: url(/images/arrow-rt.gif) no-repeat right center;
display: block;
float: left;
line-height: 2em;
padding-right: 24px;
padding-top: 2px;
color: #ac3e21;
text-decoration: none;
}
.press-releases .post h3 a {
background: transparent;
}
.post h3 a:hover {
text-decoration: underline;
}
.post-meta {
margin: .8em 0;
font-size: .95em;
color: #7c7c7c;
}
.post-body {
clear: both;
color: #222;
font-size: 1.1em;
margin: 0 0 .5em 0;
}
#content .post-body p {
color: #555;
font-size: 1em;
line-height: 1.3em;
margin: 0 0 .5em 0;
text-align: justify;
}
/* CONTACT FORM
------------------------------------------------------- */
.contact #content form {
background: #f7f7f3;
border: 1px solid #ddd;
}
.contact #content form fieldset {
padding: 20px 20px;
}
.contact #content form .row {
padding: 5px 0;
}
.contact #content form label {
color: #333;
font-size: 11px;
text-transform: uppercase;
}
.contact #content form .text {
color: #222;
border: 1px solid #ccc;
padding: 4px 5px;
width: 270px;
}
.contact #content form textarea.text {
height: 140px;
width: 350px;
}
.contact #content form button { 
background: #a14028 url(/images/bg-button-red.gif) repeat-x top;
border: 1px solid #a14028; 
padding: 6px; 
margin: 0; 
color: #fff; 
font-size: 11px; 
text-transform: uppercase;
}
.contact #content form button:hover {color: #222; cursor: pointer;}

/* ADDRESS
--------------------------------------- */
#address {
background: #f7f7f3;
border: 1px solid #ddd;
padding: 15px;
}
td.street {
line-height: 1.3em;
padding-bottom: .4em;
}
tr.narrow th,
tr.narrow td {
padding: 0;
line-height: 1.3em;
}
table.contact {
margin-bottom: .5em;
}
table.contact th {
color: #999;
padding-left: 5px;
}
table.contact td em {
font-style: normal;
}

/* LOGOS 
--------------------------------------- */
table.logos {
clear: both;
width: 100%;
}
table.logos td {
float: none;
vertical-align: middle;
padding: 14px 0;
text-align: center;
}


/* TESTIMONIALS
--------------------------------------- */
.testimonials #content p.preamble {
text-align: center;
width: 100%;
}
.testimonials #content blockquote,
.testimonials #content p.cite {
margin: 0 100px;
}
.testimonials #content p.cite {
margin: .8em 100px 1.5em;
}
.testimonials #content p.cite a {
text-decoration: none;
}
.testimonials #content blockquote {
font-style: italic;
}

/* FOOTER
------------------------------------------------------- */
#footer {
background: #fff;
clear: both;
padding: 0 30px;
}
#footer .box {
background: #eff1e7;
padding: 7px 19px;
margin-bottom: 10px;
height: 27px !important;
height /**/: 37px;
}
#footer .box strong {
color: #ac3e21;
font-weight: bold;
}
#footer a.btn-send-msg {
background: red;
background: url(/images/btn-send-msg.gif) 0 0;
display: block;
height: 0 !important;
height /**/: 25px;
padding: 25px 0 0 0;
width: 154px;
overflow: hidden;
border: 1px solid #ccc;
}
#footer a.btn-send-msg { float: left; }
#footer .box span      { float: left; margin-right: 10px; line-height: 2.1em; }
#footer a.btn-send-msg:hover {
border: 1px solid #aaa;
}
.legal {
color: #888;
font-size: .95em;
margin: 1em 0 0 19px;
}
.legal a {
color: #333;
text-decoration: none;
}

/* MISC
------------------------------------------------------- */

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }   
.clear:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }

img.photo-wide {
margin-bottom: 14px;
}
.floatleft {
float: left;
}
#btn-address img {
border: 1px solid #ccc;
}
#btn-address:hover img {
border: 1px solid #aaa;
}
img.wide {
margin: 0 0 7px 0;
}
img.photo {
background: #999;
padding: 1px;
}
img.right {
float: right;
margin: 0 0 12px 12px;
}
img.left {
float: left;
margin: 0 12px 12px 0;
}
.top {
margin-top: 0 !important;
}
.hidden { visibility: hidden; }