/*                                                    */
/* Styling for everything outside of the page content */
/*                                                    */

/* Page is 850px wide, with 10px margins and 5px scrollbar for a 'full width' of 825px.
   Further margins of 115px (left) and 50px (right) give a normal text width of 660px. */

body{
    background: #d2d2d2;
    padding-left:80px;
}

#container{
	margin:0px auto 0px auto;
	padding:0;
	width:1130px;
}

#container:after { 
	content: "\0020"; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
}

#main{
	float:left;
	margin:0;
	width:850px; 
}

/* HEADER
------------------------------------------------*/
#header{
	background:#32383f url(Images/header-bg.png) bottom no-repeat;
	bottom:0;
	left:0;
	position:fixed;
	text-align:center;
	top:0;
	width:80px;
}
#header > div{
	background:url(Images/header-top-bg.png) bottom center no-repeat;
	padding:15px 0 70px;
}
#header h2 {
	color:#fff;
	font-size:14px;
	letter-spacing:1px;
	line-height:16px;
	margin:0 0 13px;
	text-transform:uppercase;
}

#chapter-marker{
	background-color:#ccd0d9;
	height:5px;
	margin:0 auto;
	width:50px;
}

/* MAIN	
------------------------------------------------*/
.container{
	padding-top:30px;
}

/* page */

#page{
	background:#fff;
    padding:130px 10px 30px 10px;
}

#page-top {
    background:#d2d2d2;
    margin:0 !important;
    position:fixed;
    width:850px;
    z-index: 100;
}

#page-header {
    background:#fff;
    height:80px;
    margin-top:20px;
    text-align:center;
    padding:0 40px 0px 40px;    
}

#page-header > div {
    border-bottom:1px solid #ddd;
    text-align:center;
    padding-top:35px;
    padding-bottom:15px;
}

#chapter-running {
    position:relative;
}

/* SIMPLE PAGE LAYOUT */
/* Used for front cover, table of contents. 
   The side bar and page header are switched off.*/

body.simplepage #container, body.simplepage #container { width:850px; }

body.simplepage #page{
    padding:80px 10px 30px 10px;
}

body.simplepage #page-header > div, body.simplepage #side-bar, body.simplepage #mobile-navigation {
    display:none;
}
body.simplepage #page-header {
    height:0px;
}


/* MOBILE NAVIGATION
------------------------------------------------*/

#mobile-navigation{
    display:none;
	list-style:none;
	margin:0;
	padding:0;
	position:absolute;
	right:10px;
	top:30px;
}
.clicker img:hover {
    background-color:#f0f0f0;
}

.clicker img{
	border:none;
	display:block;
	height:14px;
	width:20px;
    padding:8px 5px;
}

.clicker > ul, .clicker > div, #chapter-nav{
    background-color:#f0f0f0;
	border:1px solid #ccc;
	border-bottom:none;
	display:none;
	list-style:none;
	padding:5px 10px;
	box-shadow:#999 0px 3px 8px;
    z-index:100;
}

.clicker > ul, .clicker > div {
	margin:0px -10px 0 -292px;
	width:300px;
}

#chapter-nav { text-align: left; position:absolute; width:350px; margin: 2px 0px 0px 200px;  }


/* SIDE-BAR	
------------------------------------------------*/

/* in chapter navigation */

#side-bar{
    color:#656D78;
	margin:45px 0 0 30px;
    width:250px;
    float:left;
}

#floating-side{
	position:fixed;
	top:40px;
	width:250px;
}

#sub-nav{
	margin-bottom:40px;
}
#sub-nav ul, #chapter-nav ul{
	list-style:none; 
    margin:0;
    padding:0px;
}
#sub-nav ul li, #chapter-nav ul li {
    border-bottom:1px solid #656D78;
	margin:0;
}
#sub-nav ul li a, #chapter-nav ul li a{
    color:#656D78;
	text-decoration:none;	
    padding:10px 10px 10px 12px;
    display:block;
    border-left: 4px solid transparent;
}
#sub-nav ul li a.selected, #chapter-nav ul li a.selected{
	font-weight:bold;
}
#sub-nav ul li a:hover, #chapter-nav ul li a:hover{
	font-weight:bold;
    color:black;
    background-color: #d8d8d8;
}

 #chapter-nav ul li a:hover{
    border-left: 4px solid #CCCCEE;
}

#chapter-nav ul li:last-child { border-bottom:none; }

#mobile-navigation #sub-nav a:hover, #chapter-nav ul li a:hover { background-color: #f8f8f8 }

/* FOOTER
------------------------------------------------*/
#copyright{
	padding:10px 0;
	color:#6d747d;
    text-align:center;
}

/* #Media Queries
================================================== */

    @media only screen and (max-width: 1260px){
        #side-bar{
            display:none;
        }
        #mobile-navigation {
            display:block;
        }
        #container {
            width:850px;
        }

    }

    @media only screen and (max-width: 970px){
        #header{
            display:none;
        }
        body { padding-left: 0px;}

    }