/*------------------------------------------ 
  Global and Common Styles
  ------------------------------------------*/

  /* Text and links */ 
  html, body { font-size: 11px; color: #333; line-height: 1.6em; background: #ececec; border-top: 3px solid #021521; }
  html.wf-active, html.wf-active body { font-size: 13px; }
  p { margin: 0 0 10px; }

  /* Links and input buttons */
  a { text-decoration: none; color: #008ae8; }
  a:hover, #nav-top a:hover, #nav-top #login #action-link:hover, #breadcrumbs a:hover { color: #0060ac; }
  a.button, input[type="button"], input[type="reset"], input[type="submit"], button { font-size: 0.9em; background: #008ae8; padding: 5px 9px; color: #fff; text-align: center; border: none; border-radius: 5px; }
  input[type="reset"] { background: #5e8dbd; }
  a.button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, button:hover { background: #0060ac; } 
  a.button:hover, a.button:focus { text-decoration: none; }

  /* Font: Arial */
  html, body, .home #sidebar h2, .home #sidebar .more, .internal .callout h1, input, textarea, select, input[type="button"], input[type="reset"], input[type="submit"] { font-family: Arial, Tahoma, sans-serif; } 
  
  /* Font: Futura */
  .directions h1, #nav-main ul li, .caption h1, .logged-in .heading { font-family: 'futura-pt-n4', 'futura-pt', Arial, sans-serif; font-weight: normal; font-size: 16px; }

  /* Font: Medium-bold Futura */
  h1, .internal #sidebar h2 { font-weight: 500; font-family: 'futura-pt-n5', 'futura-pt', Arial, sans-serif; }

  /* Font: Bold Futura */
  h2, h3, #who-are-you .question, .logged-out #login .heading, a.button { font-weight: 700; font-family: 'futura-pt-n7', 'futura-pt', Arial, sans-serif; }

  /* Font: Caps */
  #nav-main ul li, #sidebar h2, .home #sidebar .content#magazine h3,
  a.button { text-transform: uppercase; }
  button.button { text-transform: uppercase; }

  /* Blue headings */
  h2, .directions h1 { color: #0060ac; line-height: 1.3em; }
  .directions h1 { font-style: italic; font-family: 'futura-pt-i4', 'futura-pt', Arial, sans-serif; font-weight: normal; font-size: 1.5em; margin: 0 0 3px; } 
  a:hover h2 { color: #008ae8; }
  
  /* Active list items bold style */
  #nav-top ul li.active > a, #breadcrumbs .active, #sidebar li.active a { font-weight: bold; }

  /* Grey text */
  #nav-top ul li a, #nav-top ul li > a, #footer, .directions, .home #sidebar h2, #breadcrumbs, #breadcrumbs a, .internal #sidebar h2, .page form .msg { color: #6a7077;  }
  
  /* Smaller text */
  #nav-top ul li > a, #footer, #breadcrumbs, .internal #sidebar ul li, .internal .callout, .internal .callout h1 { font-size: 11px; line-height: 1.3em; } 
  
  /* Grey borders */
  .home .page .content, .home .page .top,
  .internal #main .top, .big-list ul li { border-bottom: 1px solid #d2d2d2; }
  #intro, #footer, .big-list ul li:first-child, .internal #sidebar > .content, .internal .callout ul.secondary { border-top: 1px solid #d2d2d2; }
  /*.page form fieldset { border: 1px solid #d2d2d2; } Removed form parent requirement [BTP] */
  .page fieldset { border: 1px solid #d2d2d2; }

  /* Inputs */
  input, textarea { font-size: 11px; }
  input[type="button"] { text-transform: uppercase; }
  input[type="text"], input[type="password"], textarea, select, .field { color: #333; padding: 5px 7px; border: 1px solid #a6a6a6; background: #fff url('../img/bg_field_tile.png') left top repeat-x; overflow: hidden; } 
     
  .placeholder { color: #aaa !important; }
  .page form .full { display: block; width: 400px !important; margin-left: 0; margin-top: 3px !important; } 
  .page form input, .page form textarea { font-size: 13px; }
  .page form input, .page form textarea, .page form select, .page form .msg { margin: 3px; }
  .page form input[type="button"], .page form input[type="reset"], .page form input[type="submit"], button { font-weight: bold; font-size: 12px; font-family: 'futura-pt-n7', 'futura-pt', Arial, sans-serif }
  .page form input[type="checkbox"], .page form input[type="radio"] { float: none; }
  .page form input[type="text"], .page form input[type="password"], .page form textarea { width: 250px; margin-top: -3px; }
  .page form select { padding: 3px; background: #fff; width: 266px; margin-top: -3px; }
   
  .page form { max-width: 660px; } /* Made this wider [BTP] */
  .page form .section, .page fieldset.section { clear: both; padding: 15px 20px 20px; margin: 15px 0; } /* Applied this to fieldsets not within forms [BTP] */
  /*.page form fieldset legend { padding: 0 5px; font-weight: bold; margin-left: -5px; } Removed form parent requirement [BTP] */
  .page fieldset legend { padding: 0 5px; font-weight: bold; margin-left: -5px; }
  .page form .item { padding: 7px 0; clear: both; }
  .page form .left { clear: both; float: left; width: 48%; } 
  .page form .right { display: inline-block; }
  .page form .msg { font-size: 11px; clear: both; }
  .page form .msg.error { background: #ee390d; border: 1px solid #c72d00; color: #fff; padding: 2px 7px; } 
  .page form .highlight { background: #ececec; color: black; outline: dotted black 1px; padding: 5px 0 2px 0; }
  
  .page form textarea { min-height: 6em; }  
  .page form .controls { float: right; margin: 10px 20px 15px; }  

  /* Lists */
  ul li { list-style-type: none; }   
  #main .content > ol, #main .content > ul, ul ul, ol ol { padding: 0 0 0 40px; margin: 1em 0; } 
  ul ul, ol ol { margin: 0; }
  #main .content > ul li { list-style-type: square; }
  #main .content > ol ol li { list-style-type: lower-alpha; }
  #main .content > ul ul li { list-style-type: circle; }
  
  /* Tables */
  table { width: 100%; border: none; }
  table thead td { font-weight: bold; border-bottom: 3px solid #d2d2d2; background: #f2f2f2; }
  table td { padding: 5px 8px; border-bottom: 1px solid #d2d2d2; }
  table thead th { padding: 5px 8px; } /* Added padding for th to match td [BTP] */
  
   /* Icons */
  .icon { display: inline-block; width: 13px; height: 13px; background-repeat: no-repeat; background-image: url('../img/sprite_global.png'); }
  .icon.inline { position: relative; top: 1px; }
  .icon.login { background-position: 0 0; margin-right: 5px; }
  a:hover .icon.login { background-position: -20px 0; }
  .icon.search { cursor: pointer; width: 17px; height: 17px; background-position: 0 -20px; margin-left: 8px; position: relative; top: 4px; }
  .icon.search:hover { background-position: -20px -20px; }   

  /* Generic styles */
  .clear { clear: both; }
  .float-right { float: right; }
  .clear-fix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/*-------------------------------------------------------- 
  Layout Elements: Structure, Navigation, Header/Footer
  --------------------------------------------------------*/ 
  
  /* Structure */
  html, body { margin: 0; padding: 0; }
  .container { width: 960px; margin: 0 auto; }
  .container > .inner, .page > .inner { margin: 0 10px; }

  .page { background: url('../img/bg_page.png'); padding-bottom: 1px; }
  .page > .inner { background: #fff; }
  
  #body { margin-top: -12px; } 
  
  /* Navigation */
  #logo { display: block; width: 320px; height: 50px; background: url('../img/logo.png') left top no-repeat; float: left; }
  #header { padding: 5px 0; }
  #header ul li, #nav-main ul li { display: inline-block; } 
  #logo, #nav-top ul li > a { margin-top: 21px; }

  #nav-top { float: right; }
  #nav-top ul { float: left; }
  #nav-top ul li { vertical-align: top; padding: 5px; height: 76px; }
  #nav-top ul li > a { display: block; }
   
  #nav-top ul li#login > a { display: inline; } 

  #nav-top #login { border-left: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2; margin-left: 10px; max-width: 190px; }
  .logged-in #nav-top #login { padding: 5px 15px; }
  #nav-top #login .inner { width: 160px; overflow: hidden; }
  #nav-top #login .inner a { font-size: 10px; }
  #nav-top #login .inner div { width: 160px; }
  #nav-top #login .inner input { width: 144px; margin-bottom: 4px; }
  #nav-top #login .inner input[type="submit"] { margin-top: -1px; height: 20px; width: 32px; font-size: 11px; color: #0060ac; padding: 3px 30px 3px 3px; font-weight: bold; background: url('../img/button_go.png') right 3px no-repeat; float: right; border: none; }
  #nav-top #login .inner input[type="submit"]:hover { color: #000; }
  #nav-top #login .heading { color: #333; font-size: 14px; margin-left: 5px; margin-right: 5px; margin-top: 18px; display: block; }
  .logged-in #nav-top #login .heading { margin-left: 0; margin-right: 0; overflow: hidden; word-wrap: break-word; line-height: 1.2em; }

  #nav-main { height: 62px; padding: 3px 0 0 0; position: relative; z-index: 99; margin-top: -3px; }
  #nav-main, #nav-main ul { background: url('../img/bg_nav.png') center top repeat-x; }
  #nav-main ul, #nav-main #search { display: inline-block; }
  #nav-main ul { background-position: center -3px; }
  #nav-main .container { background: #010c13; }
  #nav-main ul li { height: 50px; border-left: 1px solid #153951; }
  #nav-main ul li a { display: block; padding: 15px 22px; font-size: 13px; color: #9bbbd1; }  
  #nav-main ul li.active { background-image: url('../img/bg_nav_hover.png'); }
  #nav-main ul li.active a, #nav-main ul li a:hover { color: #fff; }
  #nav-main #search { padding: 12px 20px; width: 236px; position: absolute; }
  #nav-main #search input { width: 190px; border-color: #000; background: #fff url('../img/bg_field_who-are-you.png') left top no-repeat; } 
  
  .no-js #nav-main ul li a, .no-js #nav-top #login .heading { font-size: 11px; }
  
  /* Footer */
  #footer { margin: 30px 0 0 0; padding: 25px 0; text-align: center; }
  

/*------------------------------------------ 
  Homepage Intro and Slideshow Area
  ------------------------------------------*/ 

  .no-js #intro { display: none; }
  #intro > .container > .inner { padding-top: 10px; }
  #intro > .container { background: #dcdcdc; border-left: 5px solid #ececec; border-right: 5px solid #ececec; margin-top: -1px; }  
  
  /* Slideshow */
  #slides { height: 240px; z-index: 100; }
  .slides_container { width: 940px; overflow: hidden; position: relative; display: none; }
  .slides_container div.slide { width: 940px; height: 240px; display: block; }

  #slides .next, #slides .prev { position: absolute; top: 107px; left: -39px; width: 24px; height: 43px; display: block; z-index: 101; }
  #slides .next { left: 585px; }

  .pagination { left: 568px; width: 100px; position: relative; z-index: 99; margin-top: -45px; }
  .pagination li { float: left; margin: 0 4px; list-style: none; }
  .pagination li a { display: block; height: 0; width: 7px; padding-top: 7px; background:  #6a7077; float: left; overflow: hidden; }
  .pagination li.current a { background:  #fff; }

  .caption { position: absolute; left: 0; bottom: 25px; width: 560px; height: 100px; padding: 10px 20px 20px 60px; background: url('../img/bg_slides.png'); }
  .caption h1, .caption p { margin: 0; padding: 10px 10px 10px 0; }
  .caption h1 { float: left; font-size: 20px; line-height: 1.4em; width: 300px; color: #2eaaff; margin-top: -0.25em; }
  .caption p { display: table-cell; border-left: 1px solid #31495b; padding-left: 15px; color: #fff; font-size: 11px; line-height: 1.8em; }


/*------------------------------------------ 
  Home page
  ------------------------------------------*/  
  
  .home .page { width: 560px; float: left; position: relative; }
  .home .page > .inner { padding: 73px 0 0; background: #fff url('../img/bg_page_inner_home.png') left top repeat-y; min-height: 900px;} 
  .no-js.home .page > .inner { padding-top: 0; }
  
  .home .page .directions h1 { float: left; }

  .home .page .top { position: relative; z-index: 1; background: url('../img/arrow_who-are-you.png') 22px 0 no-repeat; height: 90px; margin-top: -15px; }
  .no-js.home .page .top { background: transparent; }
  .home .page .top .directions { margin-top: 27px; margin-left: -5px; padding-top: 6px; }
  .home .page .top .directions h1 { padding: 0 5px; background: #fff; }
  .home .page .top .directions p { clear: both; padding: 0 5px; }

  .home .page .content, .home .page .bottom, .home .page .top { padding: 15px 30px 20px 80px; }  
  .home .page .content h2 { margin: 0 0 5px; margin-left: -64px; padding: 5px 0 5px 64px; background: url('../img/icon_checkbox.png') left 5px no-repeat; line-height: 23px; }
  .home .page .content h2:hover { background-image: url('../img/icon_checkbox_hover.png'); }
  .home .page .content a.button { min-width: 150px; display: block; float: right; }

  .home .page .bottom .directions { padding: 10px 0; }
  .home .page .bottom .directions input { width: 170px; margin-left: 20px; }
  .home .page .bottom .directions h1 { display: inline; font-size: 1.4em; margin-top: 1px; }
  
 
  /* Who Are You */
  .no-js #who-are-you { display: none; }
  #who-are-you { width: 498px; padding: 20px 20px 20px 42px; background: url('../img/bg_who-are-you.png') left top no-repeat; position: absolute; }
  #who-are-you .question { font-size: 17px; color: #fff; float: left; position: relative; top: 2px; }
  #who-are-you .choose { float: right; position: relative; z-index: 5; }		
  #who-are-you .choose .field { cursor: pointer; width: 325px; padding: 5px 9px 4px; min-height: 22px; border-color: #004c8b; background: #fff url('../img/bg_field_who-are-you.png') left top no-repeat; }
  #who-are-you .choose .field .input { max-width: 304px; overflow: hidden; float: left; font-size: 14px; }
  #who-are-you .choose .field .button { width: 24px; height: 27px; float: right; background: #021627 url('../img/button_dropdown.png') center no-repeat; margin: -3px -7px -6px; }
  #who-are-you .choose.active .field .button { background-color: #0074d6; background-image:  url('../img/button_dropdown_hover.png'); }
  #who-are-you .choose.active .field .input { color: #888; }

  /* Dropdown */
  .dropdown { width: 322px; background: url('../img/bg_dropdown.png') left bottom no-repeat; position: absolute; }
  .dropdown ul { margin: 0; padding: 1px 5px 4px 1px; }
  .dropdown ul li { display: block; padding: 5px 9px; }
  .dropdown ul li:hover { cursor: pointer; background-color: #dbf0fd; } 

  /* Home page sidebar */  
  .home #sidebar { background: #d6d9db; width: 410px; float: left; margin-left: -10px; font-size: 0.85em; line-height: 1.5em; } 
  .home #sidebar h2 { background: #ececec; font-size: 1em; line-height: 20px; }
  .home #sidebar .more { background: url('../img/bg_sidebar-slash.png') left top no-repeat; padding: 0 0 0 25px; line-height: 20px; float: right; text-transform: none; font-size: 0.9em; }
  .home #sidebar h2, .home #sidebar .content .inner { padding-left: 30px; padding-right: 10px; }
  .home #sidebar .content .inner { padding-right: 30px; }
  .home #sidebar .content { margin: 30px 0; }
  .home #sidebar h3 { margin-bottom: 5px; color: #0060ac; }
  .home #sidebar ul li { margin: 15px 0; }

  .home #sidebar .content#magazine .inner { font-size: 0.9em; line-height: 1.5em; }
  .home #sidebar .content#magazine h3 { font-size: 1.3em; }
  .home #sidebar .content#magazine h3 #issue { font-size: 0.85em; text-transform: none; }
  .home #sidebar .content#magazine #magazine-preview { display: block; float: left; margin: -13px 10px 0 23px; }
  .home #sidebar .content#magazine #magazine-preview #shadow { background: url('../img/bg_magazine-shadow.png') left top no-repeat; padding:8px; } 
  .home #sidebar .content#magazine #magazine-preview #cover { background: url('../media/magazine.jpg') left top no-repeat; width: 108px; height: 140px; }
  
  
/*------------------------------------------ 
  Internal Page
  ------------------------------------------*/
  
  .internal #main > .content { margin: 25px 40px 40px; }
  .internal .top .content { padding: 20px 40px; margin: 0; height: 50px; }
  
  .internal.has-sidebar .inner { background: #fff url('../img/bg_sidebar.png') left top repeat-y; }
  .internal.has-sidebar .inner #main { float: left; width: 720px; }
   
  .internal #main .top h1 { font-size: 2.1em; margin: 0; color: #032542; } 
  #breadcrumbs { margin: 0 0 13px; }
   
  .internal #sidebar .content { padding: 20px 0; } 
  .internal #sidebar .content.first { padding-top: 25px; } 
  .internal .callout { background: #f2f2f2; color: #4c5056; border: 5px solid #fff; border-right: none; width: 150px; padding: 5px 20px; float: right; margin: -10px -40px 0 20px; }
  .internal .callout h1 { font-weight: bold; margin: 0 0 2px; } 
  .internal .callout ul li { margin: 10px 0; }
  .internal .callout ul.secondary { padding: 3px 0; }
  .internal .callout ul.secondary li { margin: 7px 0; }
  
  .internal #sidebar { width: 220px; float: left; }    
  .internal #sidebar h2 { font-size: 13px; margin: 0 0 2px; }  
  .internal #sidebar ul li > * { display: block; padding: 4px 18px; }
  .internal #sidebar ul li.active { background: #fff; }
  .internal #sidebar ul li.active a { color: #333; }
  
  .internal #sidebar .directions h1 { margin: 0; font-size: 1.2em; }
  .internal #sidebar .directions { text-align: center; background: url('../img/arrow_sidebar.png') center bottom no-repeat; padding-bottom: 37px; position: relative; top: 31px; z-index: 3; }
  
  .big-list { padding: 15px 0; }
  .big-list .directions { background: url('../img/arrow_actions.png') 27px bottom no-repeat; padding: 0 0 0 80px; height: 68px; margin-bottom: 10px; }
  .big-list ul li { padding: 13px 0 10px; }
  .big-list ul li h2 { margin: 2px 0; font-size: 1.2em; }
  
  .big-list .icon { width: 50px; height: 50px; margin: 0 15px; background-image: none; display: block; float: left; }
  .big-list .icon.apply { background-position: 0 0; }
  .big-list .icon.study { background-position: 0 -50px; }
  .big-list .icon.calendar { background-position: 0 -100px; }
  .big-list .icon.transcript { background-position: 0 -150px; }
  
  
/*------------------------------------------
  Ads (Temporary)
  ------------------------------------------*/
  
  #ads { margin: 10px 0; overflow: hidden; }
  .home #ads { float: left; padding: 10px 0 0 16px; width: 384px; }
  
  .ad { margin: 3px; float: left; }
  
  /* Ad sizes */
  .ad.rect { width: 180px; height: 150px; }
  .ad.large { width: 336px; height: 280px; }
  
  .ad.half { width: 234px; height: 60px; }
  .ad.full { width: 468px; height: 60px; }
  .ad.leaderboard { width: 728px; height: 90px; }
  

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}