@import url("/stylesheets/forms.css"); 
/*------------------------------------------------------------------
[Screen Stylesheet]

Project: Thompson-Shore
Version: 1.0
Last change:   06/03/08 [tables]
Assigned to:   Karl Kasischke
Primary use:   Entire site - two & three column layouts
-------------------------------------------------------------------*/



/*------------------------------------------------------------------
[Table of contents]
A. Global Reset

B. Typography

C. Layout
   1. Body 
   2. Skip to content / #skip (a)
   3. Layout wrapper / #wrapper
      3.1. Header / #header
         3.1.1. Logo / (h1) 
         3.1.2. Utility navigation / #utility
         3.1.3. Global navigation / #globalNav
      3.2. Banner / #banner
      3.3. Middle section / #middle     
         3.3.1. Primary column / #primeCol
            3.3.1.1. Breadcrumbs / #breadcrumbs
            3.3.1.2. Main content / #mainContent
            3.3.1.3. Secondary content / #secondContent
         3.3.2. Second column / #secondCol
            3.3.2.1. Search Box / #search
            3.3.2.2. Quick Links and Generic Sidebar / #links, .sidebar
            3.3.2.3. Local Subnavigation / #subNav
            3.3.2.4. Marketing sidebars /
         3.3.3. Third column / #thirdCol
      3.4. Footer / #footer
         3.4.1. Copyright & information / #copy
         3.4.2. Footer navigation / #footNav
-------------------------------------------------------------------*/



/*------------------------------------------------------------------
[Color codes]

white (wrapper background, logo text, utility text, global navigation hover text, local subnavigation link hover background): #fff
off-white (local subnavigation link background): #f3f3ed
black (text, headings, global navigation text): #000
bright red (logo background, global navigation hover background, subpage table captions, subpage heading, current local navigation): #b80f29
dark red (blockquotes): #8b0b04
deep red (FAQ questions, mailing list form header): #900
light green (h2 backgrounds): #d1d5a1
medium green (page background): #585525
dark green (borders): #70643a
clay (utility background, ): #bab58e
light gray (quick links background, local navigation background): e2e0d1
gray (h2 gray headers): #cfcec4
grayer (quick links border): c8c7c7
mid-gray (search box background): #dcdac6
dark gray (search field border): #666
dark gray (search box border, local subnavigation border): #918f8f
light blue-gray (mailing list form field backgrounds): #f5f7f9
blue-gray (breadcrumb background, table caption background): #ebebeb
dark blue-gray (mailing list form field borders): #abb2c3
blue (links, breadcrumbs, footer navigation): #369
dark blue (header spans): #49636d
yellow (local navigation highlight): #fbefc8
-------------------------------------------------------------------*/



/*------------------------------------------------------------------
A. GLOBAL RESET 
-------------------------------------------------------------------*/

body {font: 62.5%/1.4 arial,verdana,geneva,lucida,sans-serif; background: #fff; color: #000; margin: 0; padding: 0;}
p, h1, h2, h3, h4, h5, h6, /*fieldset,*/ form, label, input, textarea, /*legend,*/ dl, dt, dd, table, caption, th, td, blockquote, cite {margin: 0; padding: 0; font-size: 1em;}
ul, ol, li, ul *, ol *  {font-size: 1em;}

input, textarea {font-family: arial,verdana,geneva,lucida,sans-serif;}
textarea {overflow: auto;}
/*fieldset {border: solid 0 transparent;}*/
table {border-collapse: collapse;}
img {border: 0;}
acronym, abbr {border-bottom: 1px dotted; cursor: help;}
cite {font-style: italic;}
:focus {outline: 0;}

.nav, .dropdown, .scroll ul, #subscribe ul, #links ul, #subNav ul {margin: 0; padding: 0; list-style: none;}
.clear {clear: both;}
.left {float: left;}
.right {float: right;}
.center {text-align: center;}
.block {display: block;}

#utility .nav li:last-child, #footNav .nav li:last-child {display: none;}

/*------------------------------------------------------------------
B. TYPOGRAPHY  
-------------------------------------------------------------------*/
strong {font-weight: bold;}
a, #breadcrumbs, h4 {color: #369; text-decoration: none;}
a:hover {text-decoration: underline;}
#utility, #utility a {font-size: 1.1em; font-weight: bold; color: #fff;}
#primeCol {font-size: 1.2em;}
h2, h3 {font-size: 1.25em;}
h3 span span {font-size: 0.733em; color: #49636d;}
.subpage #mainContent h3 {color: #8b0b04;}
.quote blockquote p {font-size: 1.1em; color: #8b0b04;}
.narrow.quote p {font-size: 1.25em;}
#faq h4, #join h4 {color: #900; text-align: left;}
h6 {font-size: 0.9em;}
#links, #subNav {font-size: 1.3em; font-weight: bold;}
#subNav {font-size: 1.2em; line-height: 1.75em;}
#subNav a {color: #000; text-decoration: none;}
#subNav .current a, #subNav h3 a, #subNav a:hover, #subNav .current .current a, #subNav .current li a:hover {color: #8b0b04;}
#subNav .current li a {color: #000;}
#join {font-size: 1.1em;}
.dropdown a {font-size: 1.2em; color: #fff;}
.dropdown a:hover {text-decoration: none;} 
caption {font-size: 1.166em; font-weight: bold; color: #b80f29; text-align: left;}
th {text-align: left; font-weight: bold;}
td {line-height: 1.4em;}
.faq-cat h5{color: #900; text-indent: -1em;}


/*------------------------------------------------------------------
C. LAYOUT 
-------------------------------------------------------------------*/

/* 1. Body */
html {background: #585525 url(/images/gradient_bg.jpg) repeat-x; height: 100%;}
body {background: url(/images/stripes.gif); height: 100%;}
html > body {background: url(/images/stripes.png); min-height:100%; height:auto;}

/* 2. Skip to content */
#skip {position: absolute; top: -1000px;}

/* 3. Layout wrapper */
#wrapper {background: url(/images/shadow_bg.png) repeat-y; position: relative; left: 50%; margin-left: -484px; width: 968px;}
#wrapper-inner {background: #fff; margin: 0 18px; padding: 8px 10px 45px; width: 932px; w\idth: 912px;}

   /* 3.1. Header */
   #header {}

      /* 3.1.1. Logo */
      h1 {float: left; height: 101px; width: 599px; background: url(/images/logo.gif) no-repeat; text-indent: -9000px; z-index:3; }
      h1 a {display: block; height: 101px; width: 599px; background: url(/images/logo.gif) no-repeat;}

      /* 3.1.2. Utility navigation */
      #utility {background: #bab58e url(/images/util_bg.jpg) repeat-x; float: right; display: inline; margin-left: 6px; height: 101px; width: 307px; overflow: hidden;}
      #utility ul {line-height: 101px; margin-top: 6px;}
      #utility li {float: left;}
      #utility a {margin: 0 10px;}

      /* 3.1.3. Global navigation */
      #globalNav {float: left; margin-top: 6px; margin-bottom: 6px;}
      #globalNav ul {}
      #globalNav li {float: left;}
      #globalNav a {display: block; height: 44px; width: 106px; w\idth: 100px; border-left: 6px solid #fff; background: #bab58e; text-indent: -9000px;}
      #globalNav .home {background: url(/images/home.gif) no-repeat top left; border-left: 0; width: 100px;}
      #globalNav .home:hover, #globalNav .current .home {background-position: bottom left;}
      #globalNav .about {background: url(/images/about.gif) no-repeat top left;}
      #globalNav .about:hover, #globalNav .current .about {background-position: bottom left;}
      #globalNav .services {background: url(/images/services.gif) no-repeat top left;}
      #globalNav .services:hover, #globalNav .current .services {background-position: bottom left;}
      #globalNav .estimates {background: url(/images/estimates.gif) no-repeat top left;}
      #globalNav .estimates:hover, #globalNav .current .estimates {background-position: bottom left;}
      #globalNav .support {background: url(/images/support.gif) no-repeat top left; width: 181px; w\idth: 175px;}
      #globalNav .support:hover, #globalNav .current .support {background-position: bottom left;}
      #globalNav .news {background: url(/images/news.gif) no-repeat top left; width: 125px; w\idth: 119px;}
      #globalNav .news:hover, #globalNav .current .news {background-position: bottom left;}
      #globalNav .environment {background: url(/images/environment.gif) no-repeat top left; width: 188px; w\idth: 182px;}
      #globalNav .environment:hover, #globalNav .current .environment {background-position: bottom left;}


























      #globalNav li:hover {position: static;}
      #globalNav li:hover a, #globalNav li.sfhover a {background-position: bottom left;}
      .dropdown {position: absolute; width: 194px; w\idth: 170px; left: -999em; background: #b80f29 url(/images/dropdown_bg.gif) no-repeat top left; border: 6px solid #fff; border-top: 0; padding: 6px; padding-top: 12px; filter:alpha(opacity=90); opacity: .90; -moz-opacity:.90; z-index: 99;}
      .news + .dropdown {background-image: url(/images/dropdown-wide_bg.gif);}
      .support + .dropdown {background-image: url(/images/dropdown-wider_bg.gif);}
      .environment + .dropdown {background-image: none;}
      #globalNav .dropdown li {float: none; border-bottom: 1px solid #fff; margin-bottom: 6px;}
      #globalNav .dropdown a {height: auto; width: 100%; margin: 0; background: none; text-indent: 0; border: 0;}
      #globalNav .dropdown a:hover, #globalNav .dropdown .current a {background: url(/images/dropdown_over.jpg) repeat-x bottom;}
      #globalNav li:hover .dropdown, #globalNav li.sfhover .dropdown {left: auto;}

   /* 3.2. Banner */
   #banner {margin: 0 0 11px; clear: both;}
   #banner, #banner .cycle {position: relative; width: 912px; height: 239px; overflow: hidden;}
   #banner .prev {position: absolute; top: 16px; left: 845px; z-index: 20;}
   #banner .pause {position: absolute; top: 16px; left: 862px; z-index: 20;}
   #banner .next {position: absolute; top: 16px; left: 879px; z-index: 20;}
   #banner img {display: block;}
   #banner .cycle img {width: 912px; height: 239px;}

   /* 3.3. Middle section */
   #middle {clear: both; border-bottom: 4px solid #70643a; overflow: hidden; width: 100%;}
   h2, h3, #breadcrumbs {padding: 0.3em 12px;}

      /* 3.3.1. Primary column */
      #primeCol {float: right; width: 641px; padding-left: 7px; margin-left: 7px; margin-bottom: 25px; border-left: 1px solid #70643a;}
      #primeCol p {margin-bottom: 1.5em;}
      .narrow {width: 49%;}
      h2, #primeCol .green h3 {background: #d1d5a1 url(/images/header_bg.jpg) repeat-x bottom;}
      #primeCol .gray h3 {background: #cfcec4 url(/images/header_gray.jpg) repeat-x bottom;}
      .oneCol #primeCol {float: none; width: 100%; padding-left: 0; margin-left: 0; border-left: 0;}
      
         /* 3.3.1.1. Breadcrumbs */
         #breadcrumbs {background: #ebebeb; margin: 2px 0 16px;}
   
         /* 3.3.1.2. Main content */
         .module div {margin: 20px 25px;}
         .module img.left {margin-right: 25px;}
         .module img.right {margin-left: 25px;}

         .scroll, .cycle {height: 12em; overflow: hidden;}
         .cycle li {margin-bottom: 1em; width: 100%;}
         #newsTicker h3, #faq h3 {position: relative;}
         img.up, img.down {vertical-align: middle;}
         img.up {margin-left: 1em;}
         h3 .next {position: absolute; right: 12px; cursor: pointer;}
         #newsTicker .cycle img, .news_item img {float: right;}
         #newsTicker .cycle img {padding-left: 2em;}
         .news_item {margin-bottom: 3em; border-bottom: 1px dotted #70643a;}
         
         .narrow.featuredCustomer {float: left;}
         .featuredCustomer {text-align: center;}
         .featuredCustomer img {margin: 10px auto;}
         .featuredCustomer h3, .featuredCustomer p {text-align: left;}
         .featuredCustomer p {padding: 0 12px;}
         
         .narrow.quote {float: right;}
         .quote div {margin: 20px 0;}
         .quote {border-top: 1px dotted #70643a; border-bottom: 1px dotted #70643a; padding: 15px 0 0;}
         .narrow.quote {border: 0; padding: 0;}
         .quote blockquote p {padding: 0 15px 0 21px; text-indent: -16px; margin-bottom: 0;}
         .narrow.quote blockquote p {padding: 0 30px 0 36px; text-indent: -16px; margin-bottom: 0;}
         .quote p img {vertical-align: top;}
         .quote cite {position: relative; left: 50%; display: block; width: 50%;}

         #faq h4 {margin-bottom: 1.5em;}
         /*#faq h4, #faq p {margin-left: 2.5em; text-indent: -2.4em;}*/
         #faq .right {margin-top: 0; margin-right: 0; height: 15em; width: 164px; display: inline;}
         #faq .cycle {width: 400px;}
         #faq li span {float: left; font-weight: bold;}

         .subpage #mainContent h3 {margin-bottom: 15px;}
         .subpage #mainContent p {margin: 0 20px 1.5em 12px;}
         .subpage #mainContent img {margin: 0 20px 20px;}
         
         .oneCol #mainContent p {margin: 0;}

         .threeCol #mainContent {float: left; display: inline; width: 430px; padding-right: 7px; margin-right: 7px; padding-bottom: 25px; border-right: 1px solid #70643a;}

         #mainContent table {border-collapse: collapse; width: 100%; margin-bottom: 30px; line-height: 1.75em;}
         caption {background: #ebebeb; border-bottom: 1px solid #70643a; padding: 0 12px;}
         th {border-bottom: 1px solid #70643a; padding-left: 12px;}
         td {line-height: 1.4em; padding: 0.3em 0 0.3em 12px; vertical-align: top;}
         .colA {width: 60%;}
         .colB, .colC {}
         
         .faq-cat {list-style: none;}
         .faq-cat h5 {cursor: pointer;}
         
         /* 3.3.1.3. Secondary content */
         #secondContent {float: right; display: inline; width: 195px;}
         #secondContent .quote {margin-right: 12px;}
   
      /* 3.3.2. Second column */
      #secondCol {float: left; display: inline; width: 249px; margin: 0 0 25px 7px;}
      .oneCol #secondCol {display: none;}
   
         /* 3.3.2.1. Search Box */
         #search {background: #dcdac6; border: 1px solid #918f8f; margin-bottom: 1.2em; padding: 0.5em 12px;}
         #search input {vertical-align: middle;}
         #term {background: #fff; border: 1px solid #666; height: 2em; padding: 0.4em 0.5em 0.6em; he\ight: 1.5em; width: 180px; w\idth: 170px;}
         #goButton {margin-left: 10px;}
   
         /* 3.3.2.2. Quick Links and Generic Sidebar */
         #links, .sidebar {background: #e2e0d1; border: 1px solid #c8c7c7; margin-bottom: 25px; padding-bottom: 10px;}
         #links ul, .sidebar ul {padding: 0 12px;}
         .sidebar {font-size: 1.3em;}
         .sidebar ul {padding-left: 24px; list-style: none; margin-bottom: 1.5em;}
         .sidebar p {padding-left: 12px; padding-right: 12px; margin-bottom: 1.5em;}
         .sidebar a {font-weight: bold;}
         #links li, .sidebar li {margin: 5px 0;}
         #links li a, .sidebar li {background: url(/images/arrow_btn.gif) no-repeat left; padding-left: 30px;}
   
         /* 3.3.2.3. Local Subnavigation */
         #subNav {background: #e2e0d1; border: 1px solid #c8c7c7; margin-bottom: 45px;}
         #subNav ul {padding-bottom: 15px;}
         #subNav li {margin-bottom: 1px;}
         #subNav li a {display: block; width: 247px; w\idth: 217px; background: #f3f3ed url(/images/arrow-gray.gif) no-repeat 12px; padding-left: 30px;}
         #subNav li a:hover, #subNav .current a {background: #fff url(/images/arrow-red.gif) no-repeat 12px;}

         #subNav ul ul {padding: 0 0 0 20px; background: #fff;}
         #subNav ul ul a {width: 227px; w\idth: 197px;}
         #subNav .current li a {background: #fff url(/images/arrow-gray.gif) no-repeat 12px;}
         #subNav .current .current a, #subNav .current li a:hover {background: #fbefc8 url(/images/arrow-red.gif) no-repeat 12px;}
         
         #subNav ul ul ul {padding: 0 0 0 20px; background: #fff;}
         #subNav ul ul ul a {width: 207px; w\idth: 177px;}
         #subNav .current .current li a {background: #fff url(/images/arrow-gray.gif) no-repeat 12px;}
         #subNav .current .current li a:hover, #subNav .current .current .current a {background: #e2e0d1 url(/images/arrow-red.gif) no-repeat 12px;}

         /* 3.3.2.4. Marketing sidebars */
         .marketing {margin-bottom: 25px; text-align: center;}
         .marketing img {display: block; margin: 0 auto;}

         #join {margin-top: 60px;}
         #join h4 {margin: 1em 30px;}
         #subscribe {text-align: right; margin-right: 20px;}
         #subscribe li {margin-bottom: 2px;}
         #subscribe input, #subscribe label {vertical-align: middle;}
         #subscribe input {background: #f5f7f9; border: 1px solid #abb2c3; height: 2em; padding: 0.4em 0.5em 0.6em; he\ight: 1.5em; width: 146px; w\idth: 136px;}
         #subscribe #signUp {background: none; border: none; padding: 0; height: auto; width: auto; margin-right: 38px; margin-top: 7px;}
   
      /* 3.3.3. Third column */
      #thirdCol {display: none;}
   
   /* 3.4. Footer */
   #footer {clear: both; text-align: center; margin-top: 2px; border-top: 4px solid #e2e0d1;}
   
      /* 3.4.1. Copyright & information */
      #copy {margin-top: 2.5em;}
   
      /* 3.4.2. Footer navigation */
      #footNav {}



      #footNav ul {border-top: 1px dotted #000; width: 60%; margin: 0.5em auto; padding-top: 0.5em;}
      #footNav li {display: inline; margin-right: 3px;}
   
