/* This file: socs_layout.css
Creates the basic layout for the Central Services pages. Contains CSS 1.0
and 2.0 styles and is hidden from 4.0 and older browsers. */

/* Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding
   it when the page doesn't reach below the fold, thus creating an undesireable "jump".
   This "fixes" the jump by keeping the scroll bar displayed at all times. */
html {
  overflow-y: scroll;
}

a:link,
#networkMag a:link {
 color: #fff;
}

a:visited,
#networkMag a:visited {
 color: #CCC;
}

a:active,
a:hover,
a:focus,
#networkMag a:active,
#networkMag a:hover,
#networkMag a:focus {
 color: #fff;
}

abbr {
 border: 0;
 text-decoration: none;
}

#archivesHead {
 background-color: #000;
 color: #fff;
 font-size: 1em;
 line-height: 2em;
 margin: 0 0 1em 0;
 text-align: center;
}

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 80%;
 margin: .5em 0;
 padding: 0;
 text-align: center; /* Centers layout for IE5-Win */
}

html>body {
 font-size: .8em;
}

#footer {
 background-color: #CCC;
 border: 1px solid #000;
 border-left: 0;
 border-right: 0;
 clear: both;
 padding-bottom: .65em;
}

#footer a:link,
#footer a:visited {
 color: #666;
 text-decoration: none;
}

#footer a:active,
#footer a:hover,
#footer a:focus {
 color: #000;
 text-decoration: underline;
}

#footer p {
 color: #666;
 font-size: .85em;
 margin: .75em 0 0 0;
 text-align: center;
}

form {
  margin: 0;
}

/* IE-Win incorrectly inherits the font size for these elements */
h4,
table {
 font-size: 1em;
}

#headerSmall {
 background-color: #4E8ABE;
 height: 65px;
 position: relative;
}

#helpList li {
 background-position: 0 50%;
 line-height: 20px;
 margin: .2em 0;
 padding-left: 23px;
}

.hiddenNav {
 display: none;
}

#hlpFAQs {
 background-image: url(/vimages/backend/socs/icon_faq.gif);
}

#hlpGuides, #helpList .hlpTutorials {
  background-image: url(/vimages/backend/socs/icon_pdf.gif);
}

#hlpOrientation {
 background-image: url(/vimages/backend/socs/icon_quicktime.gif);
}

#hlpOver {
 background-image: url(/vimages/backend/socs/icon_help_overview.gif);
}

#hlpSearch {
 background-image: url(/vimages/backend/socs/icon_search.gif);
}

#hlpTicket {
 background-image: url(/vimages/backend/socs/icon_ticket.gif);
}

#hlpLive {
 background-image: url(/vimages/backend/socs/icon_live.gif);
}

#hlpSocschool {
 background-image: url(/vimages/backend/socs/icon_socschool.gif);
}

.homeLink {
 background: transparent url(/vimages/backend/socs/icon_home.gif) no-repeat scroll 8px 50%;
 left: 0;
 line-height: 13px;
 position: absolute;
 top: 0;
 width: 151px;
 voice-family: "\"}\"";
 voice-family: inherit;
 width: 118px;
}

.fixIE501 {}

img {
 border: none;
}

/* IE-Win needs the width set or the help button is mispositioned. */
#infobar {
 background: #000 url(/vimages/backend/socs/bg_contentTopBar.gif) repeat-y scroll 0 0;
 position: relative;
 width: 100%;
}

#infobar h1 {
 color: #fff;
 font-size: 1em;
 margin: 0 131px 0 151px;
 padding: .3em 0 .4em 0;
 text-align: center;
}

#infobar .homeLink {
 font-size: 1em;
 margin: 0;
 padding-left: 33px;
 text-align: left;
}

#infobar p {
 left: 100%;
 margin: 0 0 0 -60px;
 position: absolute;
 top: .35em;
}

#infoButtons {
 text-align: center;
}

#left {
 float: left;
 position: relative;
 width: 151px;
}

#left a:link,
#left a:visited {
 text-decoration: none;
}

#left a:active,
#left a:hover,
#left a:focus {
 text-decoration: underline;
}

#leftANDmiddle {
 float: left;
 width: 631px;
}

#logo {
  height: 51px;
  left: 50%;
  margin: -52px 0 0 -210px;
  position: absolute;
  top: 100%;
  width: 420px;
}

.mainNav {
  font-size: 11px;
  list-style-type: none;
  margin: 5px 7px;
  padding: 0;
}

.mainNav li {
  margin: 2px 0;
  padding: 0;
}

#left .mainNav li a:link, #left .mainNav li a:visited {
  background: #fafafa url(/vimages/backend/socs/mainNavButton.jpg) no-repeat 0 -24px;
  color: #000;
  display: block;
  font-weight: bold;
  height: 24px; /* Height of the button graphic */
  line-height: 24px;
  padding: 0 0 0 8px;
  text-decoration: none;
}

#left .mainNav li a:hover {
  background-color: #d2e9f9;
  background-position: 0 0;
}

.mainNav .homeLink {
 display: none;
}

#middle {
 float: right;
 width: 480px;
}

body#middle {
 float: none;
 width: auto;
}

#middle a:link,
#paycap a:link,
.rightBoxContent a:link,
.rightBoxContentInfo a:link {
 color: #c60;
}

#middle a:visited,
#paycap a:visited,
.rightBoxContent a:visited,
.rightBoxContentInfo a:visited {
 color: #c63;
}

#middle a:focus,
#middle a:hover,
#paycap a:focus,
#paycap a:hover,
.rightBoxContent a:focus,
.rightBoxContent a:hover,
.rightBoxContentInfo a:focus,
.rightBoxContentInfo a:hover {
 color: #f60;
}

#middle a:active,
#paycap a:active,
.rightBoxContent a:active,
.rightBoxContentInfo a:active {
 color: #f60;
}

.navHead {
 background: transparent url(/vimages/backend/socs/bullet_large.gif) no-repeat scroll 0 50%;
 border: 1px solid #FFF;
 border-left: 0;
 border-right: 0;
 font-size: 1em;
 line-height: 1.5em;
 margin: .75em 7px .3em 7px;
 padding-left: 15px;
}

#networkMag {
 background: transparent none;
 border: none;
 padding: 0;
}

#networkMag dl {
 margin: 0;
}

#networkMag dd {
 margin: 0;
 padding: 0;
 text-align: center;
}

#networkMag dt {
 border: 1px solid #000;
}

#networkMag img {
 border: 1px solid #fff;
 display: block;
}

.otherNav {
 font-size: .9em;
 list-style-type: none;
 margin: 0 7px;
 padding: 0;
}

.otherNav li {
 background: transparent url(/vimages/backend/socs/bullet_small.gif) no-repeat scroll 10px .6em;
 margin: .5em 0;
 padding-left: 18px;
 position: relative;
}

code {
 font-size: 1em;
}

html>body code {
 font-size: 1.2em;
}

.pageTitleDesc {
 margin-top: 0;
}

.pageTitle {
 margin-bottom: 0;
}

#right {
 float: right;
 width: 139px;
}

.rightBoxContent,
.rightBoxContentInfo {
 background-color: #CCC;
 border: 1px solid #000;
 font-size: .85em;
 margin: 0 3px 10px 3px;
 padding: 0 3px;
}

/* IE-Win doesn't size the margins proportionately to the font size. */
.rightBoxContent p,
.rightBoxContentInfo p {
 margin: .75em 0;
}

.rightBoxContentInfo {
 background: #CCC url(/vimages/backend/socs/bg_checkered_medium.gif) repeat scroll 0 0;
}

.rightBoxFirstSub,
.rightBoxSubHead {
 border: 1px solid #000;
 border-left: 0;
 border-right: 0;
 font-size: 1.2em;
 margin: .75em 0 0 0;
 padding: .2em 0;
}

.rightBoxFirstSub {
 border-top: 0;
 margin-top: .3em;
}

.rightBoxHead,
.rightBoxHeadInfo {
 background-color: #000;
 color: #fff;
 font-size: .85em;
 margin: 5px 3px 0 3px;
 padding: .2em 3px;
 text-align: center;
 text-transform: uppercase;
}

.rightBoxList {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

.rightBoxList li {
 margin: .6em 0;
}

.rightBoxTable {
 margin-bottom: 1em;
 position: relative; /* So IE6-Win will display it outside #right */
}

.rightBoxTable caption {
 margin-bottom: .25em;
 text-align: left;
}

.rightBoxTable td {
 vertical-align: top;
}

.spacer,
.tabSpacer {
 clear: both;
 display: block;
 overflow: hidden;
}

#updateReport {
 background: transparent url(/vimages/backend/socs/icon_newsupdate.gif) no-repeat scroll 0 .2em;
 padding-left: 18px;
}

#updateReport strong {
 font-size: .9em;
}

#userOptions {
 font-size: .85em;
 list-style-type: none;
 margin: 0 12px 0 520px;
 padding: 0 0 .3em 0;
 text-align: right;
}

#userLinks {
 color: #fff;
}

#userOptions li {
 padding: .3em 0;
}

#vbWrapper {
 text-align: left;
}

#wrapper {
 background: #4E8ABE url(/vimages/backend/socs/columns_interior.gif) repeat-y scroll 0 0;
 border: 1px solid #000;
 border-bottom: none;
 margin: 0 auto; /* Centers layout for IE6 and Standards browsers */
 text-align: left; /* Reset text alignment for Western languages */ 
 width: 772px; /* For IE5-Win and it's incorrect box model */
 voice-family: "\"}\"";
 voice-family: inherit;
 width: 770px; /* For IE6-Win and Standards browsers */
}

.fixIE501 { /* IE 5.01-Win often ignores the rule after a voice-family hack */ }

/* The following elements must have the overflow hidden in IE-Win so the
layout doesn't break. \*/
* html #left,
* html #mainContent,
* html #right {
 overflow: hidden;
} /* End IE5-Mac hiding */

/* The following elements need false heights or minor to major display
problems occur in IE-Win \*/
* html #footer {
 height: 1px;
} /* End IE5-Mac hiding */

/**************************** VLIST STYLES *********************************/
#vlist {
  font-size: .85em;
  background-color: #002c6a;
  border-bottom: 1px solid #000;
  padding: 0 4px 3px 4px;
  color: #FFF;
}

#vlist a:link, #vlist a:active, #vlist a:visited, #vlist span {
  color: #FFF;
  font-weight: normal;
  position: relative; /* Allows IE-Win to render the links clickable. */
}

#vlist #email { width: 80px; }

#vlist form { margin: 0; }

#vlist h4 {
  background: transparent url(/vimages/L2/skin1/vlist_envelope.gif) no-repeat scroll 86px 50%;
  color: #fff;
  margin: 0 0 .5em 0;
  padding: 3px 0;
  text-transform: uppercase;
}

#vlist input { vertical-align: middle; }

#vlist li {
  color: #FFF;
  text-decoration: underline;
  font-weight: 500;
}

#vlist p { margin: 0 0 .5em 0; }

#vlist ul {
  margin: 0 0 0 .6em;
  padding-left: .6em;
}

/***************************************************************************/






/********************* STYLES FOR ACCESSIBLE FORMS *************************/
.errorBox {
 background-color: #fcc;
 border: 1px solid #f00;
 padding: 5px;
}

.errors {
 color: #900;
}

.errorsNew {
  background-color: #faeae6;
  border: 1px solid #9e2a3f;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #5d0f12;
  font-weight: normal;
  padding: 8px 10px;
}

fieldset {
 margin: 1.5em 0;
 padding: 5px;
 border: 1px solid #666;
}

.fixIEfloatBug { margin-left: -3px; }

html>body .fixIEfloatBug { margin-left: 0; }

.formButtons {
 margin: 1em 0;
 text-align: center;
}

.formButtons input ~ input {
  margin-left: 1em;
}

.formItems {
 margin: .75em 0;
}

.formItems label {
 display: block;
 text-align: right;
 float: left;
 width: 30%;
}

.formItems span.spacer {
 display: block;
 clear: both;
 height: 1px;
 overflow: hidden;
}

p.formItems span {
 margin-left: 30%;
 padding-left: 10px;
 display: block;
}

p.formItems span label {
 display: inline;
 float: none;
 padding: 0;
 margin: 0;
 width: auto;
}

p.formItems label span {
 display: inline;
 margin: 0;
 padding: 0;
 width: auto;
}

.formRows {
 margin: 0;
}

.formRows br {
 display: none;
}

.formTable td {
 vertical-align: top;
}

/* Force images to be "responsive" when inside of a table - usually user profile images */
.formTable td > img {
  display: block;
  max-width: 50%;
  height: auto;
}

.formTable th label {
 display: block;
}

.formTable th {
 font-weight: normal;
 text-align: right;
 vertical-align: top;
}

.formTable thead th {
 font-weight: bold;
 text-align: center;
 vertical-align: bottom;
}

/* Use this class on any input element that you want to have a border. */
.inputBorder {
 border: 1px solid #000;
}

.itemRow {
 display: block;
 margin: .25em 0;
}

label {
 cursor: pointer;
}

legend {
 color: #666;
 font-weight: 900;
}

optgroup {
 font-style: normal;
}

span.required {
 color: #900;
 font-size: 1.2em;
 font-weight: bold;
 line-height: .9em;
 vertical-align: middle;
}

.textInput {
 border: 1px solid #000;
}

/******************* END STYLES FOR ACCESSIBLE FORMS ***********************/


/**
  Overlib fix for IE6 and selectboxes

  http://www.morgan-systems.com/tools/Dev_OverLib.asp
 **/
.select-free
{
   position:absolute;
   z-index:102;
   overflow:hidden;
}

.select-free iframe
{
   display:none;/*sorry for IE5*/
   display/**/:block;/*sorry for IE5*/
   position:absolute;/*must have*/
   top:0;/*must have*/
   left:0;/*must have*/
   z-index:-1;/*must have*/
   width:3000px;/*must have for any big value*/
   height:3000px/*must have for any big value*/;
   filter:mask();/*must have*/
}