/*============================================================================
[Screen Stylesheet]
==============================================================================
Project: New England Association of Schools and Colleges (NEASC)
Version: 1.0
Last Modified: 09/14/2009 
Assigned to:   Meili Chen - 09/14/2009
Primary use:  One column on portal site
==============================================================================*/

/*=============================================================================
[Table of Contents]
===============================================================================

A. Global Reset

B. Global Formatting

C. Layout
    1. Body 
        1.1. Skip to content / a#skip
    2. Layout wrapper / div#wrapper
        2.1. Header / div#header
               2.1.1 NEASC logo / h1
               2.1.2 NEASC text / h2
         2.2. Main Content/ div#mainContent     
           2.2.1  page title /h2#title
           2.2.2 content /#content
             2.2.2.1   commission boxes / #commissions
   2.4 Footer / div#footer 
   
===============================================================================*/

/*==============================================================================
[Color codes]
================================================================================
#000     black {body text}
#fff        white {content background}
#b2b2b2     grey {body background}
#666666     grey {go link}
#0066cc     light blue {default link}
#003366     blue {footer bar & text}
#990100     dark red {logo background}

Commissions boxes:

#990100     red {CIHE}
#b58c01     yellow (CPSS)
#003366     dark blue {CIS}
#0066cc     light blue {CTCI}
#043668     blue {Executive Office}
#000     black {CPEMS}
#cc0000     red {CAISA}
==================================================================================*/

/*=================================================================================
A. GLOBAL RESET
===================================================================================*/

body {font: 62.5%/1.4 Verdana,Arial,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: Verdana,Arial,sans-serif;}
textarea {overflow: auto;}
table {border-collapse: collapse;   margin-bottom: 2em;}
td, th {padding: 0.1em 1em;   border: 1px solid #999; }

img {border: 0;}
acronym, abbr {border-bottom: 1px dotted; cursor: help;}
cite {font-style: normal;}
:focus {outline: 0;}

/*====================================================================================
B. GLOBAL FORMATTING  
=====================================================================================*/
.clear {clear: both; height: .001em; font-size: .001em;}

a {color: #0066cc; text-decoration: none; font-weight: bold;}
a:hover {text-decoration: underline;}

h1 {font-size: 1.3em;line-height: 120%;}
h2 {font-size: 1.2em;line-height: 120%;}
h3 {font-size: 1.1em; }
h4 {font-size: 1em;}
h5 {font-size: 0.9em;}
h6 {font-size: 0.8em;}
h1, h2, h3, h4, h5, h6 {margin-bottom: 1em;}

/*======================================================================================
C. LAYOUT                                                                   *
=======================================================================================*/

/*--------------------------------------------------------------------------------------------
 1. Body / body                                                                                                                                                             
----------------------------------------------------------------------------------------------*/
body {background: #b2b2b2 url(/images/portal/body_bg.jpg) repeat-x 0 0; }

   /* 1.1. Skip to content / a#skip */
   #skip {position: absolute; top: -1000px;} 
    
/*------------------------------------------------------------------------------------------
2. Layout Wrapper                                                                                                                                                     
---------------------------------------------------------------------------------------------*/
#wrapper {color: #000; font-size: 1.2em; margin: 0 auto; padding: 15px; width: 914px; background:#ffffff; overflow: hidden; line-height: 150%;}
#wrapper p {margin-bottom: 1em!important;}
   /*.........................................................................
    2.1. Header / div#header 
   ...........................................................................*/
   #header {width: 100%; height: auto; margin-bottom: 15px; overflow: hidden;}
      /* 2.1.1 NEASC logo / h1 */
      #header h1 {border-right: 1px solid #fff; height: 104px; width: 140px; margin: 0; padding:0px; background: #990100 url(/images/portal/neasc_logo.jpg) 50% 50% no-repeat;  text-indent: -9000px; float: left; }
      #header h1 a {display: block; height: 104px; width: 140px; background: #990100 url(/images/portal/neasc_logo.jpg) 50% 50% no-repeat;}
      #header h1 a:hover {border-bottom: none;}

      /* 2.1.2 NEASC text / h2*/
      #header h2 {height: 104px; width: 773px; margin: 0; padding:0px; background: #003366 url(/images/portal/neasc_text.jpg) 50% 50% no-repeat;  text-indent: -9000px; float: right; }
      #header h2 a {display: block; height: 104px; width: 773px; background: #003366 url(/images/portal/neasc_text.jpg) 50% 50% no-repeat;}
      #header h2 a:hover {border-bottom: none;}

   /*................................................................................................
      2.2. Main Content /#mainContent
    ..................................................................................................*/
   #mainContent {margin: 0px; padding: 10px 10px 10px 20px;}   
   
      /*  2.2.1 title / h2#title */
      #mainContent h2#title {font-weight: bold; font-size: 14px; background: url(/images/portal/title_dot.gif) repeat-x 0 100%; margin: 0 0 0 10px; padding: 0 0 10px 5px;}
   
      /* 2.2.2 content /#content */
      #content {margin: 15px;}
      
         /* 2.2.2.1 commission boxes */
         #commissions {margin:25px auto 10px auto; width: 100%; text-align: center; overflow: hidden;}
         #commissions ul {margin: 15px auto; width: 100%;}
         #commissions #boxTop, #commissions #boxBottom {list-style: none; margin: 10px 0; padding: 0; overflow: hidden;}
         #commissions #boxTop li {list-style: none; float: left; display: inline; width: 204px; margin: 0 8px 0 0;}
         #commissions #boxTop li .noMarginRight {margin-right: 0;}
         
         #boxTop .greyBox{margin: 0px 0 15px 0;background: url(/images/portal/grey_box_top.jpg) no-repeat 0 0;text-align: left;display: block;padding: 15px 0px 0px 0px;}
         #boxTop .greyBox .content {text-align: center; margin: 0;background: url(/images/portal/grey_box_bottom.jpg) no-repeat 0 100%;padding: 0 8px 20px 8px; overflow: hidden; line-height: 140%; }
         
         #boxBottom .greyBox{margin: 0px 0 15px 0;background: url(/images/portal/grey_box_stripe_top.jpg) no-repeat 0 0;text-align: left;display: block;padding: 15px 0px 0px 0px;}
         #boxBottom .greyBox .content {text-align: center; margin: 0;background: url(/images/portal/grey_box_stripe_bottom.jpg) no-repeat 0 100%;padding: 0 8px 20px 8px; overflow: hidden; line-height: 140%; }
         
         #commissions #boxBottom {text-align: center!important; margin:15px 25px 10px 25px; display: block; width: 100%; overflow: hidden;}
         #commissions #boxBottom li {list-style: none; text-align: center; float: left; margin: 0 auto; padding: 0 10px; display: block; width: 239px;}
         
         .greyBox h2.subtitle {height: 30px; vertical-align: middle; background: url(/images/portal/subtitle_dot.gif) repeat-x 0 100%;margin: 0 0 10px 0; text-align: center; padding: 7px 3px 7px 3px; font-size: 1.1em;line-height: 13px;}
         .greyBox h2.cihe, .greyBox h2.cihe a{color: #990100;}
         .greyBox h2.cpss, .greyBox h2.cpss a{color: #b58c01;}
         .greyBox h2.cis, .greyBox h2.cis a {color: #003366;}
         .greyBox h2.ctci, .greyBox h2.ctci a {color: #0066cc;}
         .greyBox h2.neasc, .greyBox h2.neasc a{color: #043668;}
         .greyBox h2.cpems, .greyBox h2.cpems a {color: #000;}
         .greyBox h2.caisa, .greyBox h2.caisa a {color: #cc0000;}
         .greyBox .go {float: right; margin: 0; width: 30px; padding-right: 10px; color: #666; font-weight: bold;  }
         .greyBox .go a {color: #666; font-weight: bold; padding: 0 10px; background: url(/images/portal/arrow_grey.gif) no-repeat 0 50%;}
         .greyBox .go a:hover {color: #0066cc; background: url(/images/portal/arrow_blue.gif) no-repeat 0 50%;}
      
   /*..................................................................................
     2.3 Footer / div#footer  
     .................................................................................*/
   #footer {color: #003366; overflow: hidden; font-size: .9em;  margin: 0; padding: 15px 15px 10px 15px; border-top: 8px solid #003366; }