@import "superfish.css";
@import "base.css";

@media screen {

/********************************************************************************/
/** start base style rules (see http://www.ez-css.org/starters/starter-2B.html) */
/********************************************************************************/

/* 2009 - 2010 (c) | ez-css.org
 * ez-start-2B ::  version 1.0 (03142010)
 *
 * Two columns with header and footer, sidebar on the left hand side, main content comes last. 
 *
 *
 * You should replace the following rule with your own reset or base styles sheet
 * visit: http://carsonified.com/blog/design/setting-rather-than-resetting-default-styling
 */

NOT * {
	margin: 0;
	padding: 0;
}

/*
 * To set the width of the main wrapper
 */
 
#wrapper {width: 90%;}

/*
 * You can use this wrapper for the faux-column technique
 * Check http://www.alistapart.com/articles/fauxcolumns/
 */

#body {
	margin-top: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid #555;
	border-top:1px solid #555;
}

/*
 * This element needs a width
 */

#leftcol {
	width: 25%; 
	padding: 15px 15px 15px 0;
}

/*
 * Unlike the first first column, this element does *not* need a width
 */

#main {padding: 15px 0 15px 15px;}



/**********************************************************************************
 Below this comment are the core rules, there should be no need to edit any of them
 **********************************************************************************
 *
 * auto-centering in IE 5
 * we reset this value in the next rule so content is left aligned. 
 */
 
body {text-align: center;}

/* 
 * margin "auto" is to center this element (we set the width in a separate rule near the top of this styles sheet).
 * "text-align" is to reset the declaration from "body".
 * "inline:block" is to create a block-formatting context (the "width" does that in IE).
 */

#wrapper {
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	display: block;
}

/*
 * this is the clearfix method
 * we rely on this to contain floats in these elements 
 */
 
#header:after,
#body:after,
#footer:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}

/*
 * hacks for IE
 * "min-height" triggers "hasLayout" in IE 7, 
 * "height" is the trigger for IE 5 and 6.
 */
/*
#header,
#body,
#main,
#footer {min-height: 0;}    
* html #header,
* html #body,
* html #main,
* html #footer {height: 1%;}  
*/
/*
 * this element must create a new block formatting context.
 * by default, we rely on "overflow:hidden", but if this creates an issue with your design, then apply to this element one of the following rules 
 * ez-oa
 * ez-dt 
 * ez-it
 * ez-tc
 * ez-ib
 */
 
_#main {overflow: hidden;}
#main {margin-left: 25%}
.exercise #main {overflow: auto;}

/*
 * rules to apply to the second column (#main) if the styling above (overflow:hidden) creates issues with your design
 */

.ez-oa {overflow: visible; overflow: auto;}
.ez-dt {overflow: visible; display: table;}
.ez-it {overflow: visible; display: inline-table;}
.ez-tc {overflow: visible; display: table-cell;}
.ez-ib {overflow: visible; display: inline-block;}
 
/* 
 * 1st column
 * the negative margin is to allow the border of the two columns to overlap
 */
 
#leftcol {
	float: left;
	margin-right: -1px;
}

/* 
 * the following fixes the "3px jog bug"
 */

* html #leftcol {margin-right: -4px;}

/**********************************************************************************
 ***   The above are core rules, there should be no need to edit any of them    ***
**********************************************************************************/

/********************************************************************************/
/** end base style rules                                                        */
/********************************************************************************/


/* ***** */
/* menu  */
/* ***** */
#menu {
	background:url("images/clouds2_crop.jpg") no-repeat 30% 50%;
	clear:both;
	z-index: 100;
	margin-top: 1em;
}

#menu:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}

#menulogo {float:left;margin-right: 5em;}

.sf-menu li:first-child a {
	border-left: none;
}

.sf-menu li.currentItem {
	background-color: #CFDEFF;
}

.sf-menu li.currentItem > a {
	font-weight: bold;
}

/* ********* */
/* dashboard */
/* ********* */
.TOC .TOC {margin-left: 1em;}
.subTOC.hidden {display:none;}
.TOCswitch {display:none;}

#dashboard .modeSwitch { margin: 0 0 2em 0; padding: 0.2em;}
#dashboard .current {background-color: #8B96AD; padding: 0.2em;}
#dashboard .current a {color: white;}
div#sponsorlogos a {
	display:block;
	margin-top: 1em;
	margin-bottom: 1em;
}

/* ------------ */
/* TOC controls */
/* ------------ */
#float {
	position: relative;
	z-index:10;
	width: 100%;
}

#float.fixed {
	position: fixed;
	top: 0;
	width: 20%;
}

#float.fixed .sf-sub-indicator {
/*	top: 50px;
*/
}

span.toplink {
	display:none;
}

span.toplink a {
	color: white;
	position:absolute;
}

div.out span.toplink {
	display:inline;
	margin-left:-10%;
	position:absolute;
}

/* ------ */
/* arrows */
/* ------ */
#float.fixed:hover .sf-sub-indicator { background-position:  -10px 0; }
#float.fixed .sf-sub-indicator { background-position:  0 0; }
#float.fixed:hover {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}
#float.out .sf-sub-indicator {  /* give all except IE6 the correct values */
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
#float.out:hover .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* **** */
/* body */
/* **** */
body {font-family: Verdana, Arial, Helvetica, sans-serif;}

/* ****** */
/* footer */
/* ****** */
#footer {font-size: 75%}
#license img {float:left; width: 88px;margin-right: 2em;}

div.egnote {font-size: 75%;}

.style {float:left; width: 20%; margin-left: 1em; margin-bottom: 1em;}

/*                    #content, #TOC, #content > *:first-child, #TOC > *:first-child, #TOC > *:first-child > *:first-child {margin-top: 0;}
*/

/* ************* */
/* page elements */
/* ************* */
div {
	text-align: left;
}

table {
	width: 98%;
}


tr {
	vertical-align:top;
	text-align:left;
}

div.p, p {
	margin-bottom: 0.5em;
	padding:0 30px;
}

.list-head {
	margin-left: -2em;
	font-weight: bold;
}

.highlight {
	background-color: yellow;
}
.pre {white-space: pre;}

div.egXML, .summary, .challenge, .note, .crosslink {margin:1em; padding: 20px;}
.summary {background-color: #C0C0C0;}
.challenge {background-color:  #F0FFB3;}
.note {background:#FFCCFF;}
.crosslink {background:#E7F1F8;}

a[href] {text-decoration:none;color:blue;}

/* -------- */
/* headings */
/* -------- */
h1 { padding: 10px;}
#main h1 {margin-bottom: 1em;}
h1:first-child { margin-top: 0; }
h3 {color: #3764FF;}
div.note h3, div.summary h3, div.challenge h3, div.crosslink h3 {color: black;padding:0;}
.module h1 {color: #E7F1F8; background-color: #8B1210;}
.module h2, .module > h2 a {color: #8B1210;}
.example h1 {color: #E7F1F8; background-color: #97A300;}
.example h2, .example > h2 a {color: #97A300;}
.test h1 {color: #E7F1F8; background-color: #09568A;}
.test h2, .test > h2 a {color: #09568A;}
.exercise h1 {color: #E7F1F8; background-color: #5A810F;}
.exercise h2, .exercise > h2 a {color: #5A810F;}
.extra h1 {color: #E7F1F8; background-color: #54046E;}
.extra h2, .extra > h2 a {color: #54046E;}
.doc h1 {color: #E7F1F8; background-color: #8B96AD;}
.doc h2, .doc > h2 a {color: #8B96AD;}

/* ----- */                    
/* egXML */
/* ----- */                    
.egXML {
	font-family: monospace;
	border: solid 1px black;
	}

table div.egXML {
	padding-left: 0;
}

.xml-pi {
	color: #aa00aa;
}

div.xml-element, .xml-comment {
	margin-left: 20px;
	position:relative;
}

.xml-element-tag {
	color: #01005F;
}

.xml-element-name {
	color: #1818B4;
}

.xml-attr-name {
	color: #189518;
}

.xml-attr-value {
	color: #8B1410;
}

.xml-match {
	color: #0000FF;
}

.xml-comment {
	color: gray;
}

/* ********* */
/* exercises */
/* ********* */
#ex .copylink {float:right;}                    
.exercise #main > h1 { margin-bottom: 0; }
#appFrame {border: none; width:100%; height:100% }
      .left {float:left; text-align: left;}
      .right {float:right; text-align: right;}
.clear {clear:both;}

.italic {font-style:italic;}
.bold {font-weight:bold;}
.correction {background-color: red;}
.incorrect {
	text-decoration: line-through;
	color:red;
}
.req {
	border-bottom: solid 1px red;
	
}
.attval {font-family: monospace;font-size:larger;}
.term {font-style: italic;}
.ident {font-weight: bold;}
.code {font-family: lucida console, courier;}
.bibl {font-family: monospace; font-size: larger;}
                                        
.solution {display:none}
img.inline {display: inline; vertical-align:middle;}
img.block {margin-top: 2em; margin-bottom: 2em;}

}