/* 
    Document   : main
    Created on : 10/09/2010, 10:45:02 AM
    Author     : Mat Gebhardt
    Description:
        Bolton's Precision Engineering main stylesheet
*/

/* CSS Reset *****************************************************************/

* { vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; padding: 0;  margin: 0; outline: 0; }

/* HTML5 Structural Elements *************************************************/

section, article, header, footer, nav, aside, hgroup { display: block; }

/* Firefox trickery to prevent custom font flickering - http://boxcarpress.com/us/blog/2009/11/05/css-font-face-flickering-in-firefox-somewhat-solved/ */

.loading { opacity: 0; }

/* Page Layout ***************************************************************/

* { font: 16px/25px 'Droid Sans'; letter-spacing: -0.5px; }

html { width: 100%; background-color: #040b13; }
body { margin: 0 auto 0 auto; width: 960px; background-color: #040b13; }
#page {  background-color: #040b13; }

/* Header ********************************************************************/

#page_header { margin: 20px 19px; }

/* Navigation ****************************************************************/

#page_header nav { margin: 0 0 0 0; display: block; height: 40px; }
#page_header nav ul { list-style: none; }
#page_header nav ul li { padding: 5px 0.75em; float: left;}
#page_header nav ul li a { display: block; height: 30px; text-decoration: none; color: #c0c0c0;  padding-top: 8px; font-size: 16px; letter-spacing: -1px;  }
#page_header nav ul li a:hover { color: #7b8cbe; text-decoration: none; }
#page_header nav ul li.current { background-image: url('../imgs/nav/pointer.png'); background-position: bottom center; background-repeat: no-repeat }
#page_header nav ul li.current a { color: #ffb036; font-size: 1em; }

/* Content Formatting ********************************************************/

#page_content * { letter-spacing: -0.5px; }
#page_content { margin: 20px; color: #282828; }
#page_content h1 { font-size: 1.5em; font-weight: bold; padding-bottom: 1em; letter-spacing: -1px; }
#page_content h2 { font-size: 1.1em; font-weight: bold; padding-bottom: 1em; letter-spacing: -1px;  }
#page_content p { text-align: justify; margin-bottom: 1em; }
#page_content li { text-align: justify; margin: 0 0 1em 2em; }
#page_content a { color: #282828; text-decoration: none; border-bottom: 1px dotted #282828; }
#page_content a:hover {color: #0075A8; border-bottom: 1px dotted #0075A8; }
#page_content strong { font-weight: bold; }

#page_content .image { text-align: center; padding: 4px 4px 4px 5px; margin-bottom: 1em; background-color: #fff; -moz-box-shadow: 2px 2px 2px #888; -webkit-box-shadow: 2px 2px 2px #888; box-shadow: 2px 2px 2px #888; }
#page_content .image img { display: block; }

#page_content #gallery .image { float: left; text-align: center; margin: 10px; padding: 4px; margin-bottom: 1em; background-color: #fff; -moz-box-shadow: 2px 2px 2px #888; -webkit-box-shadow: 2px 2px 2px #888; box-shadow: 2px 2px 2px #888; }
#page_content #gallery .image a { border-bottom: none; }

/* Content layout ************************************************************/

#left_column { background-color: #e8e8e8; width: 680px; min-height: 900px; float: left; padding-bottom: 11em; }
#left_column #left-block { width: 20px; height: 20px; float: left; background-color: #040b13; }
#left_column #right-block { width: 20px; height: 20px; float: right; background-color: #040b13; }
#left_column #content { clear: both; padding: 20px 20px; }

#left_column ul.twocol li { float: left; width: 240px; margin-left: 3em; }

/* Side boxes ****************************************************************/

#sidebar { margin: 30px 0px 20px 20px; float: right; width: 220px; font-size: 14px; }
#sidebar nav { margin-bottom: 20px; padding: 10px; color: #e0e0e0; }

#sidebar nav h1 { font-size: 1.1em; font-weight: bold; padding-bottom: 0.25em; text-align: center;  }
#sidebar ul { list-style: none;  }
#sidebar li { margin: 0 auto 1em auto; padding-top: 5px; display: block; width: 190px; height: 170px; text-align: center; background-color: #e8e8e8; font-size: 1.2em;  color: #202020; }
#sidebar li a { text-decoration: none; margin: 0; padding: 0; border: 0; font-style: italic; font-weight: bold; }
#sidebar li a div { height: 135px; width: 180px; margin: 0 auto 5px auto; background-position: top center; background-repeat: no-repeat }
#sidebar li a:hover { color: #bf3434; border: 0; }
#sidebar li a:hover div { background-position: bottom center; }

#sidebar li a.trailers div { background-image: url('../imgs/nav/trailers.jpg'); }
#sidebar li a.sheetmetal div { background-image: url('../imgs/nav/sheetmetal.jpg'); }
#sidebar li a.engineering div { background-image: url('../imgs/nav/engineering.jpg'); }
#sidebar li a.plasma div { background-image: url('../imgs/nav/plasma.jpg'); }
#sidebar li a.materials div { background-image: url('../imgs/nav/materials.jpg'); }

/* Forms *********************************************************************/

form input { border: 1px solid #c0c0c0; padding: 4px; background-color: #f0f0f0; font-size: 1em; color: #202020; width: 340px; }
form input.error { border: 1px solid #ff0000; background-color: #ffcccc; }
form textarea { border: 1px solid #c0c0c0; padding: 4px; background-color: #f0f0f0; font-size: 1em; color: #202020; width: 340px; }
form textarea.error { border: 1px solid #ff0000; background-color: #ffcccc; }
form select { border: 1px solid #c0c0c0; padding: 4px; background-color: #f0f0f0; font-size: 1em; color: #202020; }
form input.ce { display: none; }
form img { margin-left: 10px; vertical-align: middle; }
form em { color: #c31613; }
legend { font-size: 1em; font-weight: bold; line-height: 1.5em; padding: 0 1em  0 1em; }
fieldset div { padding: 1em 1em 0 1em; }
fieldset p { padding-bottom: 1em; }
label { float: left; width: 160px; margin-right: 10px; text-align: right; padding-top: 2px; }
form div.error { margin: 0 0 0 170px; font-size: 0.8em; color: #c31613; line-height: 1em; padding: 0; }
#cmdSubmit { width: auto; margin: 0 0 0 170px; }
#note { font-size: 15px; margin-bottom: 1.5em; }

/* Footer ********************************************************************/

#page_footer { margin: 10px 20px; color: #c0c0c0; }
#page_footer p { font-size: 14px; }