/*
Description: pen-tec website layout
Author: Patrick
Author URI: 
Date: dec 2008
Version: 1
Notes: This is based on the bluetrip (http://bluetrip.org/) css system.
The grid system was removed along with a few other sections that are
unnecessary for this project.

––*/

/* MEYER RESET */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, 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.5;}
table {border-collapse:separate;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:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
a:active, a:focus {outline:none;} 

/* BASIC TYPOGRAPHY */
html { font-size: 62.5%; font-family:Tahoma, Arial, sans-serif; }
strong, th, thead td, h1, h2, h3, h4, h5, h6 { font-weight: bold; }
cite, em, dfn { font-style: italic; }
code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size: 92%; font-family: monaco, "Lucida Console", courier, monospace; }
del { text-decoration: line-through; color: #666; }
ins, dfn { border-bottom: 1px solid #ccc; }
small, sup, sub { font-size: 85%; }
abbr, acronym { text-transform: uppercase; font-size: 85%; letter-spacing: .1em; }
a abbr, a acronym { border: none; }
abbr[title], acronym[title], dfn[title] { cursor: help; border-bottom: 1px solid #ccc; }
sup { vertical-align: super; }
sub { vertical-align: sub; }
p {padding:5px 10px 5px 20px; color:#000000;}

/* BASE SIZES */
#container { font-size: 1.2em; line-height: 1.6em; color:#000000;}
#container h1 { font-size: 1.8em; font-weight:normal; line-height:1.4em }
#container h2 { font-size: 1.7em; font-weight:normal; }
#container h3 { font-size: 1.4em; font-weight:normal;}
#container h4 { font-size: 1.3em;}
#container h5 { font-size: 1.2em;}
#container h6 { font-size: 1em;}

h1 {color:#000; padding:0; padding:0 10px 5px 20px;}
h2 {color:#333333; padding:0 10px 10px 20px;}
h2 a, h2 a:visited {color:#333333; text-decoration:none;}
h3 {color:#181512; padding:5px 10px 0 20px;}
h3 a, h3 a:visited {color:#181512; text-decoration:none;}


/* LAYOUT */
.accessibility {text-indent:-9999px; float: left; height:1px;}
html {height: 100%; }
body {/*background:#ABB1BA;*/ background:#c4c4c3;  color:#fff; min-height: 100%; height: 100%; }

#login-bar {width:960px; margin:0 auto; padding:10px 65px 10px 0; text-align:right;}
#login-bar a, #login-bar a:visited {padding:2px; color:#333333; text-decoration:none; text-transform:uppercase;}
#login-bar a:hover {color:#000; background-color:#CCCCCC; text-decoration:none;}

#container {width:960px; margin:0 auto 0 auto; padding:0 0 10px 0; background:#fff url(/images/bar_right.jpg) 36px 90px no-repeat; text-align:left; border:1px solid #000;} 
#homepage #container {padding:0 0 10px 0; background:#fff url(/images/bar_left.jpg) 0 90px no-repeat; text-align:left;} 

#header { position:relative; height:88px; background:url(../images/top_metalbar.png) no-repeat;}

#logo {position:absolute; top:25px; left:27px; text-indent:-9999px; background:url(../images/pentec-logo.png) no-repeat; width:269px; height:43px;}
#logo a, #logo a:visited { display:block; width:269px; height:43px;}

.mainnav {float:right; text-align:right; margin:34px 27px 0 0;}
.mainnav li {display:inline;padding:2px 0; border-right:1px solid #eee;list-style:none;}
.mainnav li a, .mainnav li a:visited {font-size:1.2em; font-weight:normal; color:#fff; text-decoration:none; padding:2px 0 2px 0; margin:0 7px 0 4px; text-transform:uppercase;}
.mainnav li a:hover, .mainnav li a.current {color:#FFFF00;}
.mainnav li:last-child {border:none !important;}

/* home */
.home-headline{display:block; background:url(../images/hd_competitive_productivity.png); width:561px; height:60px; text-indent:-9999px; margin:120px 0 40px 300px;}

.home-image {width:263px; height:220px; float:left; margin:0 0 60px 0;}
.home-image p a, .home-image p a:visited {display: block; width:100%; height:202px; text-indent:-9999px; padding:0; margin:0;}

.home-image h1 {height:23px; width:240px; text-indent:-9999px; padding:0; }
.home-chamber {margin-left:85px; background: url(../images/img-chamber-services.jpg) bottom no-repeat;}
.home-chamber h1 {background: url(../images/hd-chamber-services.png) no-repeat;}
.home-technical {background: url(../images/img-technical.jpg) bottom no-repeat;}
.home-technical h1 {background:url(../images/hd-technical.png) no-repeat;}
.home-products { background:url(../images/img-products.jpg) bottom no-repeat;}
.home-products h1 {background:url(../images/hd-products.png) no-repeat;}

#news-container-home {width:780px; margin:0 auto;}
#h1-pentagon-news {background: url(../images/hd-pentagon-news.png) no-repeat; width:180px; height:23px; text-indent:-9999px;}
.news-item {background-color:#eee; height:auto; overflow:hidden; margin:0 0 10px 0;}
.news-item a, .news-item a:visited { color:#000; text-decoration:none;}
.news-item a:hover {color:#666666; cursor:pointer;}
.news-item img { float:left; margin:0 10px 0 0;}
.news-item span {display:block; padding:10px; height:100%;}

#news-container {width:580px; margin:0 0 0 20px;}

/*interior pages */
#col-1 {width:250px; margin:160px 0 0 0; float:left; }
#col-2 {width:660px; margin:160px 0 0 0; float:left;height:auto; border-left:1px solid #666666;}

#sidenav {margin:0 0 20px 40px; height:100%;}
#sidenav h2 {color:#333; padding:0 10px 10px 0;}
#sidenav h3 {padding:5px 0 5px 0;}
#sidenav li {margin:0 20px 1px 0;list-style:none;}
#sidenav li a, #sidenav li a:visited { display:block; text-decoration:none; padding:3px; color:#5F5C5C;}
#sidenav li a:hover, #sidenav li.current, #sidenav li.current a {color:#999999; /*background-color:#333333;*/}
#sidenav li a span { display:block; float:left; color:#000000;}

.main-article-image {display:block; margin:0 0 0 2px;}
.main-article-image img {/*border:2px solid #eee;*/}
.additional-views {display:block; padding:3px; color:#333333; text-transform:uppercase;}

.thumbnail-container {width:310px; float:right;/* background:#eee;*/ padding:25px 0 5px 10px;}
.thumbnail-link img {border:1px solid #eee; margin:2px;}
a.thumbnail-link:hover img {border:1px solid #FFFF00;}

#excerpt-container {width:95%; margin:0 auto;}
.excerpt-item {height:auto; overflow:hidden; margin:0 0 10px 0; padding:10px 0 10px 0; border-bottom:1px solid #eee;}
.excerpt-item a, .excerpt-item a:visited { color:#0000FF; text-decoration:none;}
.excerpt-item a:hover {color:#666666; cursor:pointer;}
.excerpt-item img { float:left; margin:0 20px 0 0;}
.excerpt-item span {display:block; padding:10px 0 10px 10px;}
.excerpt-item h2 {padding:5px 0 3px 20px;}
.excerpt-item h2 a:link, .excerpt-item h2 a:visited {color:#000; padding:0 0 3px 0; border-bottom:1px solid #eee;}
.excerpt-item h2 a:hover {color:#666666; padding:0 0 3px 0; border-bottom:1px solid #CCCCCC;}
.excerpt-item h3 {color:#666666;}
.excerpt-item:last-child {border:none;}
.learn-more {display:block; text-align:right; padding:0 20px 0 0; font-size:1.2em;}

.services-category { font-size:1em !important; font-weight:bold !important; padding:0 0 0 3px;}
.services-category:after {}
.services-category-link a:link, .services-category-link a:visited {font-weight:bold; color:#000 !important;}
.services-category-link a:hover {color:#666666 !important;}

#products h1 {white-space:nowrap;}
#error-page #col-2 {margin:120px 0 0 60px; width:750px;}
.message-box {border:1px solid #ccc; background:#eee; padding:10px; margin:20px 0 20px 15px; color:#000; width:350px;}
.message-box a { white-space:nowrap;}


.img-right {float:right; padding:25px 0 5px 10px;}
.nicelist {margin:5px 0 5px 40px;}
.nicelist ol {margin:5px 0 5px 20px;}
.nicelist ol ol {margin:5px 0 5px 20px;}

.float-left {float:left;}	
.clear-div {clear:both; height:1px;}
.smaller-font {font-size:x-small;}	

#flashcontent {width:300px; height:480px; float:right; margin:25px 0 10px 10px;}

#footer {width:960px; margin:10px auto; color:#333;}


/* QUOTES */
blockquote { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #666; }
blockquote *:first-child:before { content: "\201C"; }
blockquote *:first-child:after { content: "\201D"; }

/* FORMS */
fieldset { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend { font-weight: bold; font-size:1.2em; }
label { font-weight: bold; display:block; }
textarea, input[type='text'], input[type='password'], select { border: 1px solid #ccc; background: #fff; }
textarea:hover, input[type='text']:hover, input[type='password']:hover, select:hover { border-color: #aaa; }
textarea:focus, input[type='text']:focus, input[type='password']:focus, select:focus { border-color: #888; outline: 2px solid #ffffaa; }
input, select { cursor: pointer; }
input[type='text'] { cursor: text; }

.zemContactForm {width:450px; margin:0 0 0 20px;}

/* TABLES */

#container table { border-top: 1px solid #ccc;  border-left: 1px solid #ccc; }
#container th, #container td { border-bottom: 1px solid #ddd; border-right: 1px solid #ccc; }

.clear {clear:both;}


/*---------STYLES FOR BUTTONS----------*/
#container a.button, #container button {
  display: block;
  float: left;
  margin:0 0.583em 0.667em 0;
  padding:5px 10px 5px 7px;   /* Links */
  border:1px solid #dedede;
  border-top:1px solid #eee;
  border-left:1px solid #eee;
  background-color:#f5f5f5;
  font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  font-size:100%;
  line-height:130%;
  text-decoration:none;
  font-weight:bold;
  color:#565656;
  cursor:pointer;
}
#container button {
  width:auto;
  overflow:visible;
  padding:4px 10px 3px 7px;   /* IE6 */
}
#container button[type] {
  padding:4px 10px 4px 7px;   /* Firefox */
  line-height:17px;           /* Safari */
}

*:first-child+html #container button[type] {
  padding:4px 10px 3px 7px;   /* IE7 */
}

#container button img, #container a.button img{
  margin:0 3px -3px 0 !important;
  padding:0;
  border:none;
  width:16px;
  height:16px;
  float:none;
}

/* Standard Buttons */
button:hover, a.button:hover{
  background-color:#dff4ff;
  border:1px solid #c2e1ef;
  color:#336699;
}
a.button:active, button:active{
  background-color:#6299c5;
  border:1px solid #6299c5;
  color:#fff;
}