@import url(sf-menu.css);
/*------------------------------------------------------------------
[Screen Stylesheet]

Project:       Gray Institute
Version:       1.0
Last change:   05/21/09 [product listing and details]
Assigned to:   Karl Kasischke
Primary use:   Page Layouts - 3 & 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
      1.2. Top Shadow / div#shadowTop
   2. Layout Wrapper / div#wrapper
      2.1. Masthead / div#masthead
         2.1.1. Logo / h1.logo
         2.1.2. Utility Navigation / ul#utility
         2.1.3. Global Navigation / div#globalNav ul.sf-menu
         2.1.4. Banner / div#banner
      2.2. Middle Section / div#middle
         2.2.1. Primary Column / div#primeCol
            2.2.1.1. Main Content / div#mainContent
               2.2.1.1.1 Content Box / div.contentBox
               2.2.1.1.2 Content Table / table
               2.2.1.1.3 Product List / ul#productList
               2.2.1.1.4 Product Details / div#productDetail
               2.2.1.1.5 Member Login / div.member
         2.2.2. Second Column / div#secondCol
            2.2.2.1. Local Subnavigation / ul#subNav
            2.2.2.2. Sidebar Container / div#sidebarBox
               2.2.2.2.1. Sidebars / div.sidebar
         2.2.3. Third Column / div#thirdCol
            2.2.3.1. Featured Items / div.item
   3. Footer / div#footer
      3.1. Copyright Information / p#copy
      3.2. Footer Navigation / ul#footNav
   4. Video Players

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



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

#fff        white          masthead, middle background
#000        black          text
#ccc        gray #1        solid borders
#999        gray #2        dotted borders
#333        gray #3        footer text
#eee        gray #4        content box background
#f3ab12     yellow #1      global nav background
#fff1d5     yellow #2      sidebar background
#fac24c     yellow #3      subnavigation borders
#ffd478     yellow #4      subnavigation h3
#ffdaa2     orange #1      third column background
#edca81     orange #2      second column h3 border
#eeab66     orange #3      third column h3 border
#d5650b     orange #4      utility navigation, global nav dropdowns
#d08e02     orange #5      homepage second column h3
#c99f46     tan            global navigation dropdown border
#a81b00     red #1         subnavigation background
#cf2201     red #2         subnavigation hover
#c30        red #3         third column h3
#069        blue           links

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



/*------------------------------------------------------------------
A. GLOBAL RESET 
-------------------------------------------------------------------*/
body {font: 62.5%/1.3 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;}
.logo :focus, #globalNav :focus, #subNav :focus, #utility :focus {outline: 0;}

.nav, .nav ul, .sf-menu, .sf-menu *, /*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: #999; background-color: #999; height: 1px; border: none; margin: 1.5em -7px;}

/*------------------------------------------------------------------
B. TYPOGRAPHY  
-------------------------------------------------------------------*/
strong, a, .breadcrumbs, #footer .current a {font-weight: bold;}
a, .breadcrumbs, #utility .current a {color: #069;}
#footer a {font-weight: normal;}
a, #subNav a, #utility .current a, #globalNav a, #footNav .current a {text-decoration: none;}
a:hover, a:focus, .current a {text-decoration: underline;}
a.button {text-decoration: none;}
#utility a {color: #d5650b;}
a.button {color: #000;}
#subNav a {color: #fff;}
#copy {color: #333;}
#subNav h3 a {color: #ffd478;}
#thirdCol h3 {color: #c30;}
.home #secondCol h3 {color: #d08e02;}
#globalNav {font-size: 1.45em;; letter-spacing: -1px;}
h1 {font-size: 1.7em;}
h2, #thirdCol h3 {font-size: 1.4em;} 
#footer {font-size: 1.3em;}
h3 {font-size: 1.25em;}
#middle, #utility {font-size: 1.2em;}
h4, #subNav li a {font-size: 1.1em;}
h5 {font-size: 1.0em;}
h6, a.button {font-size: 0.9em;}
.urgency {color: #ff0000;}

/*------------------------------------------------------------------
C. LAYOUT 
-------------------------------------------------------------------*/
/* 1. Body */
body {background: #9eabab url(../images/layout/body-bg.png) repeat-x; margin-top: 15px;}

   /* 1.1. Skip to content / ul#skip */
   #skip {position: absolute; top: -1000px;}

   /* 1.2. Top Shadow / div#shadowTop */
   #shadowTop {width: 1003px; height: 11px; margin: 0 auto; background: url(../images/layout/shadow-top-bg.png) no-repeat;}
   * html #shadowTop {background: #fff; border: 1px solid #000; border-width: 1px 1px 0;}
   
/* 2. Layout Wrapper / div#wrapper */
#wrapper {margin: 0 auto; width: 1003px; position: relative; background: url(../images/layout/shadow-bg.png) repeat-y top;}
* html #wrapper {background: #fff; border: 1px solid #000; border-width: 0 1px;}

   /* 2.1. Masthead / div#masthead */
   #masthead {width: 959px; margin: 0 auto; position: relative; background: #fff; z-index: 999;}

      /* 2.1.1. Logo / h1.logo */
      h1.logo {position: absolute; left: 33px; top: 14px; width: 203px; height: 45px; background: url(../images/layout/logo.gif) no-repeat; text-indent: -9000px; z-index:99; }
      h1.logo a {display: block; width: 203px; height: 45px; background: url(../images/layout/logo.gif) no-repeat;}
      
      /* 2.1.2. Utility Navigation / ul#utility */
      #utility {position: absolute; right: 0; top: 23px; text-align: center;}
      #utility li {display: inline; border-left: 1px solid #ccc;}
      #utility li:first-child {border: 0;}
      #utility li a {display: inline-block; width: auto; padding: 3px 14px;}
      
      /* 2.1.3. Global Navigation / div#globalNav ul.sf-menu */
      #globalNav {padding-top: 65px; width: 959px; z-index: 999; height: 2em; line-height: 2em;}
      #nav_area {z-index: 1;}
      * html #globalNav {overflow: hidden;}
      .sf-menu {text-align: center; background: #f3ab12 url(../images/layout/nav-bg.gif) repeat-x; float: left; width: 959px; z-index: 999;}
      .sf-menu li {display: inline-block; float: left; background: url(../images/layout/nav-divide.gif) no-repeat left; z-index: 999;}
      .sf-menu li:first-child {background-image: none;}
      .sf-menu li a {display: inline-block; width: auto; padding: 0.5em 5px; color: #000;}
      .sf-menu li li {background: #b8570a; border-top: 1px solid #c99f46; text-align: left;}
      .sf-menu li li a {display: block; font-weight: normal; letter-spacing: normal; font-size: 0.9em;}
      .sf-menu li li li {border-left: 1px solid #fff;}
      .sf-menu li:hover, .sf-menu li.sfHover,
      .sf-menu a:hover, .sf-menu a:focus,
      .sf-menu li.current  {background: #d5650b;}
      .sf-menu li:hover a, .sf-menu li.sfHover a,
      .sf-menu a:hover, .sf-menu a:focus,
      .sf-menu li.current a {color: #fff;}
      
      /* 2.1.4. Banner / div#banner */
      #banner {width: 959px; height: 267px; overflow: hidden; margin-top: 12px;}
      #banner img {display: block;}
      #banner div {position: relative; height: 267px; float: left; display: inline; overflow: hidden;}
      #banner1 {width: 483px;}
      #banner2 {width: 238px;}
      #banner3 {width: 238px;}
      #banner a span {width: 24px; height: 24px; background: url(../images/layout/go-hover.png) no-repeat -25px; position: absolute;}
      * html #banner a span {background-image: url(../images/layout/go-hover.gif);}
      #banner a:hover span {background-position: 0 0;}
      #banner1 a span {top: 238px; left: 222px;}
      #banner2 a span {top: 238px; left: 207px;}
      #banner3 a span {top: 238px; left: 208px;}
      
   /* 2.2. Middle Section / div#middle */
   #middle {padding: 12px 0 15px; overflow: hidden; width: 959px; margin: 0 auto; clear: both; border-bottom: 12px solid #656d6d;}
   img.right {margin: 1.5em 0 1.5em 1em;}
   img.left {margin: 1.5em 1em 1.5em 0;}
   #middle li {margin-bottom: 0.5em;}
   a.button, a.button span {display: inline-block; height: 26px; line-height: 26px; text-align: center; width: 100%;}
   .homeContent a.button, .homeContent a.button span {width: auto;}
   .homeContent a.button {margin-left: 5em; margin-bottom: 1.5em;}
   .homeContent a.button span {padding: 0 2em;}
   a.button {background: url(../images/layout/button-bg-left.gif) no-repeat left; cursor: pointer;}
   a.button span {background: url(../images/layout/button-bg-right.gif) no-repeat right;}
   
      /* 2.2.1. Primary Column / div#primeCol */
      #primeCol {float: left; display: inline; width: 473px; margin: 0 10px 0 242px; border: 1px solid #ccc;}
      .twoCol #primeCol {width: 715px; margin-right: 0;}
      .home #primeCol {margin: 0 10px 0 0; border: 0;}
      
         /* 2.2.1.1. Main Content / div#mainContent */
         #mainContent, .homeContent {background: #fff url(../images/layout/content-bg.gif) repeat-x; padding: 10px 15px 20px; overflow: hidden;}
         .home #mainContent {background-image: none; padding: 0;}
         .homeContent {margin-bottom: 10px; border: 1px solid #ccc;}
         .homeContent h2 {border: 0;}
         .homeContent p {margin-top: 0;}
         .homeContent img {margin-top: 0;}
         .homeContent .vidText {width: 250px; float: right;}

         h2 {margin: 0 -7px 10px; border-bottom: 1px solid #ccc; padding: 0 7px 10px;}
         .breadcrumbs {padding-bottom: 5px;}
         div.login_cart {float:right; margin: 0 0 10px 20px; width: 208px;}
         #masthead div.login_cart {margin: 0;}
         #masthead div.login {margin: 10px 0 0; font-size: 1.2em;}
         div.login {font-size: 1.2em;}
         #masthead div.cart {margin: 10px 0 0;}
         .login .welcome_text {font-weight: bold;}
         .login .member_text {}
         div.cart {width: 208px; float: right;}
         .cart button {background: #eee url(../images/layout/cart.gif) no-repeat 95%; border: 1px solid #ccc; color: #069; text-align: left; cursor: pointer; width: 100%; padding: 0.5em 0;}
         .cart button:hover {border-color: #069;}
         
            /* 2.2.1.1.1 Content Box / div.contentBox */
            .contentBox {border: 1px solid #ccc; background: #eee; padding: 15px 0; overflow: hidden; width: 100%}
            .box {width: 187px; float: left; display: inline; border-left: 1px solid #ccc; margin: 0 0px; padding: 0 20px; min-height: 230px;}
            * html .box {height: 230px;}
            .box img {display: block; margin: 0 auto;}
            #box1 {border: 0;}
            .box h3 {border-bottom: 1px dotted #a81b00; margin: 0 -10px 15px; padding: 0 10px 5px; font-size: 1.17em; color: #a81b00;}
            
            /* 2.2.1.1.2 Content Table / table */
            table {border: 1px solid #ccc; background: #eee; width: 100%}
            th, td {vertical-align: top; padding: 1em 0 1em 1em;}
            th, .vevent-header td {text-align: left; color: #a81b00; font-weight: bold;}
            td {border-top: 1px dotted #a81b00;}
            .Public {font-weight: bold; }
            .Private {font-weight: bold; color: #999;}
            .download {text-align: right; padding-right: 1em;}
            td input {vertical-align: top; position: relative; top: -5px;}
            
            /* 2.2.1.1.3 Product List / ul#productList */
            #productList, #productList ul, #productDetail #productInfo {margin: 0; padding: 0; list-style: none;}
            #productList {width: 100%;}
            #productList .product {width: 208px; height: 350px; float: left; display: inline; margin: 0 10px 20px;}
            #productList .product li {padding: 0 10px;}
            #productList .product .productImg {padding: 0;}
            .productImg a {display: block; text-align: center; height: 208px; line-height: 208px; border: 1px solid #ccc; position: relative;}
            .productImg a:hover {border-color: #333;}
            .productImg a img {vertical-align: middle;}
            .productName, .productPrice {font-weight: bold; font-size: 1.25em;}
            #productList .productName {margin-bottom: 0;}
            .productPrice {float: left;}
            .addBtn {float: right;}
            td.addBtn {float: none;}
            /*.addBtn input {position: relative; top: -5px;}*/
            .product_list_table {width:460px; margin:10px 0; border: 1px solid #666666;}
            .product_list_table td, .product_list_table th {padding:3px; border: none;}
            
            #productDetail {overflow: hidden; margin-top: 10px; width: 100%;}
            #productDetail .productImg {width: 208px; float: left; display: inline; margin-right: 29px; margin-bottom: 10px;}
            #productDetail .productImg {text-align: center; height: 208px; line-height: 208px; border: 1px solid #ccc; position: relative;}
            #productDetail .productImg img {vertical-align: middle; margin: auto;}
            #productDetail #productInfo {width: 182px; border: 1px solid #ccc; float: right; padding: 1em 12px;}
            #productDetail .productPrice, #productDetail .addBtn {float: none; display: block; text-align: center; margin: 0.5em 0 1em;}
            #productDetail .addBtn input {top: 0;}
            #productDetail p {margin-top: 0;}
            .move50 {position: absolute; top: 50%; left: 50%; display: block;}
			#productDetail .group {float: left; display: inline; width: 476px;}
			#productDetail #productDescription {margin-right: 29px;} 

            /* 2.2.1.1.5 Product Checkout / div#productCheckout */
            .cart-header {padding: 10px 0;}
            
            /* 2.2.1.1.6 Member Login / div.member */
            .member #webcasts {border-left: 0;}
            .member #discussions {clear: both; float: none; display: none;}
            
      /* 2.2.2. Second Column / div#secondCol */
      #secondCol {float: left; display: inline; width: 232px; margin-left: -727px;}
      .home #subNav {display: none;}
      .twoCol #secondCol {margin-left: -959px;}
      .home #secondCol {float: right; margin: 0;}
      
         /* 2.2.2.1. Local Subnavigation / ul#subNav */
         #subNav {background: #a81b00; margin-bottom: 10px; padding-bottom: 10px;}
         #subNav a {display: block;}
         #subNav h3 {border-bottom: 1px dotted #fac24c;}
         #subNav h3 a {padding: 13px 15px 10px; }
         #subNav li {margin: 0; border-bottom: 1px dotted #fac24c;}
         #subNav li a {padding: 5px 5px 5px 15px;}
         #subNav li a:hover, #subNav li a:focus, #subNav li.current a {background: #cf2201;}
         * html #subNav li a {height: 1%;} /* fix for list item spacing and clickable area IE 6*/
                  
         /* 2.2.2.2. Sidebar Container / div#sidebarBox */
         #sidebarBox {background: #fff1d5; border: 1px solid #ccc; padding: 10px 15px;}
         #sidebarBox img {display: block;}
         #sidebarBox h3 {margin: 0 -7px 10px; border-bottom: 1px solid #edca81; padding: 0 7px 10px;}
         
            /* 2.2.2.2.1. Sidebars / div.sidebar */
            .sidebar {margin-bottom: 10px;}
            
            #newsletter img {margin-top: 0;}
            #newsletter {border-bottom: 1px dotted #999; margin-bottom: 1.5em; padding-bottom: 1.5em;}
            
            #secondCol .newsItem {margin-bottom: 1.5em; padding: 0 15px 1.5em; border-bottom: 1px dotted #999; background: url(../images/layout/double-arrow.gif) no-repeat left 0.3em;}
            .newsItem .title {font-weight: bold;}
            .home #secondCol p {padding: 0 15px 1.5em; background: url(../images/layout/double-arrow.gif) no-repeat left 0.3em;}
         
      /* 2.2.3. Third Column / div#thirdCol */
      #thirdCol {float: right; display: inline; width: 200px; background: #ffdaa2; border: 1px solid #ccc; padding: 10px 15px;}
      .twoCol #thirdCol {display: none;}
      .home #thirdCol {float: left; }
      #thirdCol h3 {margin: 0 -7px 10px; border-bottom: 1px solid #eeab66; padding: 0 7px 10px;}
      
         /* 2.2.3.1. Featured Items / div.item */
         .item {border-top: 1px dotted #999; margin: 1.5em 0; padding-top: 1.5em;}
         #thirdCol h3 + div {padding: 0; border: 0;}
         .item img {display: block; margin: 0 auto 15px;}
                                   
/* 3. Footer / div#footer */
#footer {margin: 0 auto; padding: 50px 0 25px; width: 1003px; overflow: hidden; background: url(../images/layout/shadow-foot-bg.png) no-repeat top;}
* html #footer {background: none; border-top: 1px solid #000;}
#footer p {margin: 0;}

   /* 3.1. Copyright Information / p#copy */
   p#copy {float: left; display: inline; margin-left: 22px;}

   /* 3.2. Footer Navigation / ul#footNav */
   #footNav {float: right; display: inline; text-align: center; position: relative;}
   #footNav li {display: inline; padding: 0 15px; border-left: 1px solid #069;}
   #footNav li:first-child {border: 0;}
   
/* 4. Video Players */
a#player, a#mainPlayer {display: block; width: 160px; height: 90px; text-align: center; margin: 0 auto; border: 1px solid #999;} 
.homeContent a#player {margin: 0;}
a#player img {display: inline; margin-top: 25px;}
a#mainPlayer img {margin-top: 220px;}
a#player:hover, a#mainPlayer:hover {border: 1px solid #000;}
div.overlay {background: url(../images/layout/white.png) no-repeat; padding: 40px; width: 600px; display: none;}
div.overlay div.close {background: url(../images/layout/close.png) no-repeat; position: absolute;	top: 2px;	right: 5px; width: 35px; height: 35px; cursor: pointer;}
a.player {display: block; height: 360px;}
#bigOverlay {width: 640px;}
#bigOverlay a.player {height: 500px;}

/* 5. Form Inputs */
.formInputs table {background: transparent; border: 0; width: auto;}
.formInputs table td, .formInputs table th {border: 0; padding: 0.5em;}
.formInputs table td input {position: static;}
.formInputs table td h2, .formInputs table td h1, .form_item h2 {font-size: 1em; margin: 0; padding: 0; border: 0;}
input.imagebutton {height: auto; width: auto;}
.form_item h2 {width: 8em; float: left;}
.form_item {margin-bottom: 1em;}
.formInputs .form_item h2 {width: 100%; float: none;}

#live_events_form {float: left; display: inline; width: 100px;}
#live_events_form_right {float: right; display: inline; width: 100px;}

/* 6. GIFT Pages */
.memnav {font-size:1em;}