@import url(/stylesheets/forms.css); 

/*------------------------------------------------------------------
[Screen Stylesheet]

Project:       TorranceLearning
Version:       1.0
Last change:   04/23/09 [video]
Assigned to:   Karl Kasischke
Primary use:   Page Layouts - 2 column layouts for home & subpages
-------------------------------------------------------------------*/



/*------------------------------------------------------------------
[Table of contents]
A. Global Reset

B. Typography

C. Layout
   1. Body 
      1.1. Skip to content / ul#skip
   2. Layout wrapper / div#wrapper
      2.1. Logo / h1.logo
      2.2. Global navigation / div#globalNav
      2.3. Local subnavigation / #subNav
      2.4. Banner / div#banner
      2.5. Middle section / div#middle
         2.5.1. Primary column / div#primeCol
            2.5.1.1. Main content / div#mainContent
         2.5.2. Second column / div#secondCol
            2.5.2.1 Video Sidebar / div#videoplayer
            2.5.2.2 Text Sidebar / div.sidebar
            2.5.2.3 Image Sidebar / div.sidebar.image
            2.5.2.4 Signup form /div.sideup
   3. Footer / div#footer
      3.1. Copyright information / p#copy
      3.2. Footer navigation / ul#footNav
   4. Forms


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



/*------------------------------------------------------------------
[Color codes]

#fff        white          wrapper background
#000        black          text
#d9d9d9     grey           subnav dividers
#e8e8e8     grey #2        action items background
#77933c     green          headings, footNav dividers
#56a1d5     blue           links, navigation hover
#fdbe57     orange         banner button link hover

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



/*------------------------------------------------------------------
A. GLOBAL RESET 
-------------------------------------------------------------------*/
body {font: 62.5%/1.5 arial,verdana,geneva,lucida,sans-serif; background: #fff; color: #000; margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6, /*fieldset,*/ form, label, input, textarea, select, /*legend,*/ dl, dt, dd, table, caption, th, td, blockquote, cite {margin: 0; padding: 0; font-size: 1em;}
p, ul, ol, li, ul *, ol *  {font-size: 1em;}
p {margin: 1.5em 0;}
input, textarea, select {font-family: arial,verdana,geneva,lucida,sans-serif; font-size: inherit;}
textarea {overflow: auto;}
/*fieldset {border: solid 0 transparent;}*/
table {border-collapse: collapse;}
a img {border: 0;}
acronym, abbr {border-bottom: 1px dotted #ddd;}
cite {font-style: normal;}
small {font-size: 0.75em;}
big {font-size: 1.25em;}
.logo :focus, #globalNav :focus, #subNav :focus, #utility :focus {outline: 0;}

.nav, .nav ul, form ul, .cycle {margin: 0; padding: 0; list-style: none;}
.clear {clear: both;}
.clear-l {clear: left;}
.clear-r {clear: right;}
.left {float: left; display: inline;}
.right {float: right; display: inline;}
.center {text-align: center;}
.block {display: block;}

hr {color: #fff; background-color: #fff; height: 1px; border: none; margin: 1.5em 0; background: url(/images/line-dots-pattern.gif) repeat-x center;}

/*------------------------------------------------------------------
B. TYPOGRAPHY  
-------------------------------------------------------------------*/
strong, a, .breadcrumbs, #footer .current a {font-weight: bold;}
h2, #footer a {font-weight: normal;}
a, #globalNav a, #subNav a {text-decoration: none;}
a, #subNav .current a, .breadcrumbs, #globalNav a:hover, #subNav a:hover, #globalNav a:focus, #subNav a:focus {color: #56a1d5;}
a:hover, a:focus {text-decoration: underline;}
h1, h2, h3, h4, h5, h6, .sidebar, #copy {color: #77933c;}
#globalNav a, #subNav a {color: #808080;}
h1 {font-size: 1.7em;}
h2 {font-size: 1.7em;}
h3, #middle, #globalNav, #footer {font-size: 1.3em;}
#subNav {font-size: 1.2em;}
h4, .sidebar h3 {font-size: 1.1em;}
h5 {font-size: 1.0em;}
h6 {font-size: 0.9em;}
.sidebar {line-height: 1.3;}

/*------------------------------------------------------------------
C. LAYOUT 
-------------------------------------------------------------------*/
/* 1. Body */

   /* 1.1. Skip to content / ul#skip */
   #skip {position: absolute; top: -1000px;}
   
/* 2. Layout wrapper / div#wrapper */
#wrapper {margin: 0 auto; padding: 45px 0 35px 35px; width: 925px; position: relative; background: url(/images/arc.gif) no-repeat center 12px;}

   /* 2.1. Logo / h1.logo */
   h1.logo {width: 306px; height: 28px; background: url(/images/logo.gif) no-repeat; text-indent: -9000px; z-index:5; float: left; display: inline; margin-top: 65px; margin-left: -8px;}
   h1.logo a {display: block; width: 306px; height: 28px; background: url(/images/logo.gif) no-repeat;}
       
   /* 2.2. Global navigation / div#globalNav */
   #globalNav {float: right; display: inline; width: 600px; background: url(/images/nav-divide.gif) no-repeat bottom;}
   #globalNav ul {overflow: hidden; text-align: center;}
   #globalNav li {display: inline; text-align: center; padding: 0 24px 0 26px; background: url(/images/vert-dots.gif) no-repeat left 55%;}
   #globalNav li:first-child {background: none;}
   #globalNav a {display: table-cell; display: inline-block; height: 50px; line-height: 50px; width: auto;}
   #globalNav .current a {background: url(/images/nav-indicator.gif) no-repeat top;}
   
   /* 2.3. Local subnavigation / #subNav */
   #subNav {float: right; display: inline;  width: 600px; padding: 14px 0;}
   #subNav ul {text-align: center;}
   #subNav li {display: inline; border-left: 1px solid #d9d9d9;}
   #subNav li:first-child {border: 0;}
   #subNav a {margin: 0 18px;}
   
   /* 2.4. Banner / div#banner */
   #banner {clear: both; margin-bottom: 16px; width: 961px; height: 206px; position: relative; top: 16px; left: -35px; background: url(/images/banner-bg.jpg) no-repeat;}
   #banner img {display: block;}
   #banner-pics {width: 371px; height: 349px; overflow: hidden; position: absolute; right: 0; top: -56px;}
   #banner-text {width: 590px; height:143px; overflow: hidden; position: relative;}
   #banner-button {width: 582px; height: 43px; overflow: hidden; position: relative; background: #84a243 url(/images/banner-btn.gif) no-repeat; }
   #banner-button a {display: block; width: 548px; height: 43px; line-height: 43px; padding-left: 34px; color: #fff; font-size: 15px; font-weight: 600;}
   #banner-button a:hover, #banner-button a:focus {color: #fdbe57; text-decoration: none;}
         
   /* 2.5. Middle section / div#middle */
   #middle {padding-top: 40px; overflow: hidden; width: 925px; clear: both;}
   .home #middle {padding-top: 25px;}
   img.right {margin: 1.5em 0 1.5em 1em;}
   img.left {margin: 1.5em 1em 1.5em 0;}
   
      /* 2.5.1. Primary column / div#primeCol */
      #primeCol {float: left; display: inline; width: 550px;}
               
         /* 2.5.1.1. Main content / div#mainContent */
         .home h2, #mainContent h2 {padding-bottom: 10px; background: url(/images/line-dots-pattern.gif) repeat-x left bottom;}
         .home h2 span {display: block; width: 500px;}
         .breadcrumbs {margin: 14px 0 1.5em;}
         #mainContent ul {list-style: none; padding-left: 20px; margin-left: 0;}
         #mainContent ul li {margin-bottom: 0.3em;}
         .arrow, #mainContent ul li {padding-left: 18px; background: url(/images/arrow-orange.gif) no-repeat left 0.5em;}
         .home #news h3 {float: left; clear: both;}
         .home #news .arrow {width: 460px; float: right; margin-top: 0.25em;}
         .home #mainContent {padding: 0 5px 0 0;}
                        
      /* 2.5.2. Second column / div#secondCol */
      #secondCol {float: right; display: inline; width: 300px; margin-top: 50px;}
      .home #secondCol {margin-top: 1.5em;}
      #action-items {width: 289px; margin: 0 auto; padding-bottom: 15px; background: #e8e8e8 url(/images/action-bottom.gif) no-repeat bottom;}
      #action-items ul {padding-top: 15px; background: url(/images/action-top.gif) no-repeat top;}
      #action-items li {margin-top: 14px; position: relative;}
      #action-items li:first-child {margin: 0;}
      #action-items a {display: block; width: 261px; height: 60px; margin: 0 auto; position: relative;}
      #action-items img {display: block; position: absolute;}
               
         /* 2.5.2.1. Video Sidebar / div#videoplayer */
         #secondCol .sidebar.videoplayer, #secondCol .sidebar.action {padding: 0;}
         .videoplayer h3, .action h3, .image h3 {display: none;}
         
         /* 2.5.2.2 Text Sidebar / div.sidebar */
         #secondCol .sidebar {margin-bottom: 35px; padding: 0 18px;}
         .sidebar h3 {padding-bottom: 20px; margin-bottom: 25px; background: url(/images/line-dots-fade.gif) no-repeat bottom;}
         .newsNotes {margin-bottom: 15px;}
         .newsNotes h3 {padding: 0!important; margin: 0 0 5px 0!important; background: none!important; color: #4c6020!important; font-size: 18px; } 
         .newsNotes .content {padding: 0; color: #000; margin: 0;} 
         .newsNotes p {margin-bottom: 10px!important;} 
         .newsNotes div {display: inline;} 
         
                 
         /* 2.5.2.3 Image Sidebar / div.sidebar.image */
         #secondCol .sidebar.image {padding: 0;}
         #secondCol .frame-container {position: relative;}
         #secondCol #team-photos {width: 289px; height: 287px; overflow: hidden;}
         #secondCol .frame {width: 289px; height: 287px; position: absolute; top: 0; z-index: 10; background: url(/images/frame.gif) no-repeat;}
         
         /* 2.5.2.4 eNews signup form sidebar /div.signup */
         #secondCol .signup {margin-bottom: 35px; padding: 0 18px;}
         .signup h3 {font-size: 1.3em; text-align: center; padding-bottom: 20px; margin-bottom: 25px; background: url(/images/line-dots-fade.gif) no-repeat bottom;}
         .signup .emailBox {border: 1px solid #c4c4c0; color: #808080; width: 180px; padding: 2px;}
         .signup .text {color: #f28d1e; text-align: center;font-weight: bold;}
         .signup .submitBtn {cursor: pointer; font-weight: bold; background: #808080; color: #fff; padding: 2px; margin-left: 4px; border: none;}
         
         
                  
/* 3. Footer / div#footer */
#footer {margin: 0 auto; padding: 35px 0 55px 35px; width: 925px; background: url(/images/foot-divide.jpg) no-repeat top; overflow: hidden;}

   /* 3.1. Copyright information / p#copy */
   #copy {float: right; display: inline; width: 298px; margin: 0;}
   
   /* 3.2. Footer navigation / ul#footNav */
   #footNav {float: left; display: inline; width: 549px; }
   #footNav li {display: inline; padding: 0 20px; border-left: 1px solid #77933c;}
   #footNav li:first-child {border: 0; padding-left: 0;}

/* 4. Forms */

form {margin-top: 1.5em;}

fieldset {margin-bottom: 1em; padding: 1em;}
legend {color:#000; font-size:1.1em; font-weight:bold; margin:0pt; padding:5px; background:#eee; border:1px solid #333;}
fieldset .fieldset-header {margin: 10px 0;}
fieldset .fieldset-footer {margin: 10px 0;}

#validated_form_alert {border: 2px dotted #990000; margin: 15px 4px; padding: 6px 2px; color: #990000; background: #fed4dc; text-align: center;}

.form-field {margin-bottom: 10px; text-align: left; clear: both; position: relative; overflow: hidden;}
.form-field label {float: left; width: 150px; font-weight: bold; text-align: left;}
.form-field label em {font-weight: bold; font-style: normal; color: #f00;}
.form-field input, .form-field textarea {width: 200px; float: left;}
.form-field .radiolist input, .form-field .checklist input, form#Job_Application .form-field input.submitBtn {width: auto;}
.form-field .radiolist input, .form-field .checklist input {float: left; margin-right: 0.5em;}
.form-field span.message {color: #f00; margin-left: 10px; float: right; font-weight: bold; width: 140px;}
.form-field fieldset {border-color:#333; border-style: solid none none; border-width: 1px 0 0; clear: both; margin: 0; padding: 10px; float: left; width: 400px;}

.RadioButtonListWidget label {display: block; float: none; width: 420px; margin-top: 10px;}
.CheckBoxListWidget label {display: block; float: none; width: 420px; margin-top: 10px;}
.form-field .radiolist label {float: left; width: 60px; padding-left: 4px; line-height: 1.4; margin: 0; text-indent: 0;}
.form-field .checklist label {width: 100%; padding-left: 4px; line-height: 1.4; margin: 0; text-indent: 0;}
.form-field .radiolist label span {padding-left: 4px;}
.form-field .checklist label span {padding-left: 4px;}

.form-field input:focus, .form-field textarea:focus {background: #ffc;}
.form-field input[type="text"], .form-field textarea {border-top: 2px solid #999; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 2px solid #999; }