/********************************************
    Stylesheet for BinaryPlex

    -===== INTRODUCTION  =============

    Use Yahoo's YUI library as base. Refer to
    YUI css related tutorials for a start. 

    -====== FILE STRUCTURE ===============
    * General: general font, heading, link styles. 
    * Layout: layout structure, borders,
    * Header, Content, Footer 
    * Misc
    * Hacks 

    -====== CODING STANDARD ===============
    1. Use `camelCase` for class and id naming.
    2. Group related concepts together
    3. Use comment notation to indicate sections
        1) `=UPPERCASE` for style categories
        2) `-lowercase` for each style group
    4. Annotate 'magic numbers'
    5. Use 'em' for width and heights that might change
        when user changes the font-size; but use 'px'
        for padding/margin. When 'em' is used, always
        gives out the corresponding 'px' value as reference.

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

/**************************************
=GENERAL 
***************************************/

/* GLOBALS *****************************/

html {
  background:#eee;
  font-family:Georgia,"Century Schoolbook L",serif;
  line-height:1.5em;
  font-size:1em;
  color:#1D1D1D;
}

#global {
  width:53em;
  margin:0 auto;
  background:#FFF;
  padding:0 4em 1em;
  overflow:hidden;
}

.hidden {
  display:none;
}

em {
  font-style:italic;
}

a {
  outline: none;
}

:focus {
  -moz-outline-style: none;
}


/* -fonts */
body { color:#333; }
strong { font-weight:bold; }

/* -layout */
#hd, #bd, #ft { width:100%; background-color:white; }
#bd { padding:7em 1em 0 3em; min-height:622px; background-color: white; }

/* -links */
a { text-decoration:none; color:#0058a6; outline:none; }
a:hover { text-decoration:underline; }
a:focus { outline:none; border:none; }
a.offsite { background: transparent url(/static/icon_offsite_red.gif) no-repeat scroll 1px 0.5em; padding-left: 18px; text-indent:0pt }

/* -shortcuts */
.clear { clear:both; }
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.hide { display:none; }
.note { color:#666; }

/* -buttons */
.btn { cursor:pointer; background-color: #4384f0; color: #fff; font-weight:bold; font-size:90%; padding: 1px 4px; margin-top: 0.5em; }

/**************************************
=HEADER
***************************************/
h1 { float:left; height:85px; width:75px; margin:1.5em 0 0 20px; background:transparent url(/images/logo.png) no-repeat scroll 0 0; text-indent:-10000px; }
#content { float:right; margin:0 8em 0 0; width:70%; }
#sidebar { float:left; margin:0 8em 0 0; width:30%; }
h2#binaryplex { height:60px; background:transparent url(/images/slogan.png) no-repeat scroll 0 0; text-indent:-10000px; }


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

#navigation {
  width:35em;
  margin:2em 0 1em 150px;
  /* text-transform: uppercase; */
  float:left;
  font-size:1.25em;
  border-bottom:1px solid #999;
}

#navigation li {
  float:left;
  margin:0 0.4em 0 0;
}

#navigation li a {
  padding:0.2em 0.7em;
  /*-moz-border-radius: 0.8em;
	-webkit-border-radius: 0.8em;*/
	border-radius: 0.8em;
	background:#fff;
  color:#999;
	text-decoration:none;
	display:block;
}

#navigation li a:hover {
  background:#DDD;
  color:#000;
  text-decoration:none;
}



/*******************************************
=CONTENT
*******************************************/

/* Textintro *****************************/

#intro {
  font-size:1.4em;
  line-height:1.3em;
  margin:0 0 1.6em 0;
}

#intro a {
  color:#1D1D1D;
}

#intro a:hover {
  color:#FF8215;
}

#content table { font-family: Georgia,"Century Schoolbook L",serif; font-size:120%; line-height:125%; }
#content td {padding:1em; vertical-align: top}

#content { overflow:hidden; }
#content h2 { font-family: sans-serif; font-size:140%;font-weight:bold; color:#999; margin:1em 0 0.3em 0; }
#content p { font-family: Georgia,"Century Schoolbook L",serif; font-size:120%; line-height:125%; }
#content li { font-family: Georgia,"Century Schoolbook L",serif; font-size:120%; line-height:125%; list-style-type:disc; list-style-position:inside;}

/*******************************************
=FOOTER
*******************************************/
#ft { text-align:center; font-size:85%; color:#666; border-top:1px #ccc solid;
padding-top:1em; width:802px; margin-bottom:2em;}


#footerlinks {
  width:35em;
  margin:0.6em 0 0 0;
  float:left;
  font-size:1em;
}

#footerlinks li {
  float:left;
  margin:0 0.4em 0 0;
}

#footerlinks li a {
  padding:0.2em 0.7em;
  /*-moz-border-radius: 0.8em;
	-webkit-border-radius: 0.8em;*/
	border-radius: 0.8em;
	background:#fff;
  color:#999;
	text-decoration:none;
	display:block;
}

#footerlinks li a:hover {
  background:#DDD;
  color:#000;
  text-decoration:none;
}