/* ===== BASIC - main areas ===== */

#outer-wrap {font: 80% Arial, Helvetica, Verdana, Arial, sans-serif;}

body {
    margin: 0;
    padding: 0; 
    }

/* ==== CLEARING AND CSS OFF-SCREEN BITS ==== */

.cl {clear: both;}
br.cl, div.cl {height: 0; font-size: 0.1px; line-height: .0; }
.rm {position: absolute; left: -999em;}

/* ==== LAYOUT === */

body {padding: 0 45px 15px 45px; min-width:650px;}
#outer-wrap {max-width:1600px; padding:0}

#header{min-height: 138px; margin: 30px 0 15px 0; padding-top:0.1px;}
#outer-wrap {padding-top:0.1px;} /*padding gets rid of a gap above the header, invoked by the margin-top on the header */

#navigation, #content, #related {float:left;}
#signin {text-align: center;}

#navigation {width: 178px; margin: 0}

#content-wrapper {margin: 0 227px 0 193px;} /* right-margin has to take box model into consideration so need to add the padding given to the #content div. Borders too. */
#content {width:100%; padding: 0 15px 15px 15px}

#related {width: 145px; margin-left: -180px; position:relative; left:195px; padding:15px}/* left:195px gives a 15px gap to the left of the related column */

#footer {text-align:center; padding: 15px 0 0 0; margin: 15px 0 15px 0}
#footer ul {margin:0}
#footer li {display: inline; padding:0; background:none}

/* ==== BASE ELEMENT SETTINGS ==== */

h1, h2, h3, h4, h5, p, ol, ul, li {
    margin: 0.5em 0 0 0;
    padding: 0;
    line-height: 1.5em;
    
    }
    
h1 { font-family: Calvert; }

h1, h2, h3, h4, h5 {margin: 0.7em 0 0.5em 0; font-weight:bold; letter-spacing: -1px}
h1 {font-size: 2.31em; margin: 0.2em 0 -0.2em 0;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.1em;}
h5 {font-size: 1em;}

h1 .text-small {font-size: 0.535em}

img {vertical-align: bottom; border:0; margin:0; padding:0; }
hr {height: 1px; margin: 1em 0; padding:0; border:0;}

ul {list-style-type: none; padding: 0;}
ul ul, ol ul { padding: 0 0 0 15px; margin-top:0;}
ul li, ul ul li, ul ul ul li {margin: 0.3em 0 0 0; padding: 0 0 0 15px;}


/* ==== LINKS ==== */

a, a:link, a:visited, a:active {text-decoration: underline;}
a:active, a:focus, a:hover {text-decoration: none;}

    /*= Skip Links =*/
a.rm:active, a.rm:focus {
    top: 45px;
    left: 269px;
    padding:5px;
    }

/*======== HEADER =======*/

#header {position:relative}

  /* Print and link logos */
#infinitefocus-logo {width: 300px; position:absolute;}
#infinitefocus-logo {height: 120px; left:14px; bottom:6px;}
#header img {position:absolute; left:-999em} /*Moves the print logos off screen but in the code for accessibility and no CSS support.*/


  /*= Switcher controls */
#switcher {position:absolute; top: 6px; right: 6px; padding:6px 6px 6px 28px}
#switcher p, #switcher ul, #switcher li {float:left; margin: 0; padding:0}
#switcher p {font-weight:bold; font-size: 1.31em; padding:2px 24px 0 0; letter-spacing: -1px}
#switcher li {background:none}

#switcher li a, #switcher li strong {
    margin: 0 1px 0 0;
    display: block;
    float: left;
    width:50px;
    height:30px;
    text-indent:-999em;
    background-repeat: no-repeat;
    }

#header #switcher li a {outline:none; border:none}

#header a:focus, #header a:active {border-color: #FF0084; outline:none}

  /*= Switcher button images */ 
.default a, .default strong {background-image: url(../images/common/style-switcher_default.gif);}
.relaxed-light a, .relaxed-light strong {background-image: url(../images/common/style-switcher_default-relaxed.gif);}
.dark a, .dark strong {background-image: url(../images/common/style-switcher_dark.gif);}
.relaxed-dark a, .relaxed-dark strong {background-image: url(../images/common/style-switcher_dark-relaxed.gif);}

  /*= Switcher button image generic positioning */ 
#switcher a {background-position: 0 0}
#switcher li a:focus {background-position: 0 -60px}
#switcher li a:active
#switcher a:hover {background-position: 0 -30px}

/*======== NAVIGATION =======*/

#navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    padding: 8px 15px 15px 15px;
    font-size:131%;
    letter-spacing: -1px;
    }

#navigation ul ul {font-size:100%; margin:0}
#navigation li {padding: 0; margin: 0; font-weight: bold; background:none}

#navigation li a, #navigation li strong {
    padding: 3px 0 3px 10px;
    text-decoration: none;
    display: block;
    }

  /* ==== Level 2 - Add more levels as required====== */
#navigation ul ul li {}
#navigation ul ul a, #navigation ul ul strong {padding-left: 27px;}
#navigation ul ul a:hover {}

/*======== RELATED COLUMN =======*/
#infinitefocus-profile {width: 150px;}
#infinitefocus-profile {height: 200px; left:14px; bottom:6px;}


#related img {}
#related span {font-size: 0.8em}

  /*= For the benefit of IE7, hasLayout should be no longer in IE8 if that makes you feel better, probably not though */
#outer-wrap, #navigation, #content-wrapper, #content, #related {height:1%}


/*= Javascrip menu style =*/
.menuheader{ color: #cc0066;
width: 215px;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: pointer;
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #000000;
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
/*border-bottom: 1px solid #dadada;*/
font-size: 90%;
}