/* DO NOT CHANGE ITEMS LISTED BELOW:
z-index values
flaot values
display values
positioning values
there are some things like -mozzila .... those are there for compatibility sake with older browsers

*/

/* THERE IS A DIFFERENCE OF FORMATTING IF SOMETHING IS INSIDE THE ARTICLE OR NOT ( <ARTICLE><HEADER> HEADER TEXT </HEADER></ARTICLE> IS NOT FORMATTED THE SAME WAY AS <HEADER> SOME TEXT<HEADER> )*/


body{
	background-color:#C0C0C0;
	height:100%;
	font-family: Calibri, sans-serif;
}
/*definition for top text (TITLE)*/
header#MAINTEXT{
	font-size:32px;
	font-weight:bold;
	text-shadow: 3px 3px 3px #303030;
	/* Changing size and colors is fine , pleaes dont change padding too much it might cause alignment problems.*/
	padding:10px;
	display:block;
	padding-bottom:25px;
}
/*media table*/
.standardTbl{/*main definition for table look*/
	padding:5px;
	border:thin #000000 solid;
	background-color:#3E5D78;
	
}
.standardTbl td{ /*definition for td cells in table*/
	padding:5px;
	border:thin #000000 solid;
	background-color:white;
}

/*main header on top of page (BOOK TITLE)*/
header#TopOfPage{
	font-weight:bold;
	color:white;
	background-color:#3E5D78;
	text-align:left;
	display:block;
	width:100%;
	height:120px;
}
/*cite tag for citing names or other things*/
cite{
font-size:11px;
}

/* defines side bar */
/*###################################*/
#sidebar article /* definition of article in sidebar */
{	width:195px;
	font-size:16px;
	padding-left:5px;
	padding-bottom:5px;
}
#sidebar article header{ /* definiton of articles header in sidebar */
	font-weight:bold;
	font-size:1em;
}
#sidebar img{ /* direct image with no article inside sidebar */
	width:180px;
	margin-top:0px;
	padding:0px;
	display:block;
	border:thin #000000 solid;
}

#sidebar header{ /* header with no article inside sidebar*/
	font-weight:bold;
	font-size:18px;
}
#sidebar section{ /* section without article in sidebar*/
	padding-bottom:15px;
}
#sidebar{ /* please do not change this section it defines the sidebar shape*/
	
	text-align:center;
	width:200px;
	padding:10px;
	float:right;
	display:inline-block;
}
#sidebar article{ /* main container for text */
	text-align:center;
}
#sidebar article section{ /* section inside article (located in sidebar) */
	font-size:14px;
	
}
#sidebar article section img{ /* image tag definition */
	margin-top:0px;
	margin-bottom:0px;
	margin-left: auto;
	margin-right: auto;
	padding:0px; 
	border:none;
	width:80px;
}
/*############################################*/

#navigator a{
display:block;
background-color:#3E5D78;
padding:5px;
color:white!important;
text-decoration:none;
border:thin #000000 solid;
border-radius:5px;
}
#navigator a:hover{
	background-color:white;
	color:black!important;
}
/* THOSE SHOULD BE LEFT ALONE */
#Container{
	box-shadow:0 0 5px 5px #888;
	width:900px;
	background-color:#E8E8E8;
	margin-left:auto;
	margin-right:auto;
	height:100%;
}
#BookCover{
	
	width:200px;
	padding:10px;
	padding-top:0px;
	margin:-60px 0px 0px 0px;
	float:right;
	background-color:inherit;
    position:relative;
    z-index:3;
}
/*##########################################*/
#BookCover p{
	font-size:12px;
}

/* class for enforcing left aligment */
.leftAlign{
	text-align:left;
}

/* for side bar ( the menu links you see (blue background on the side like under "Related Topics")*/
#sidemenu a{
	color:white;
	display:block;
	background-color:#3E5D78;
	padding:5px;
	text-decoration:none;
	border-radius:5px;
	margin-bottom:8px
}
#sidemenu a:hover{
	display:block;
	background-color:#C0C0C0;
	padding:5px;
	text-decoration:none;
	border-radius:5px;
	margin-bottom:8px;
	color:#036;
}

/* Do not alter this section  */
#Midsection{
	text-align:left;
	box-shadow: 0 0 8px 2px #888;
	background-color:#E8E8E8;
	width:900px;
	height:auto;
	display:block;
}

/*footer style */

footer{
	font-size:12px;
	box-shadow: 0 0 8px 2px #888;
	padding-top:10px;
	background-color:#3E5D78;
	text-align:center;
	color:#FFFFFF;
	width: auto;
	clear: both;
	overflow: auto;
}
footer a{ /* defines the footer's links formatting */
	color:#FFFFFF;
	text-decoration:none;
	font-weight:bold;
}
footer p { /* in case you would like to use <p> in footer but i dont think you will need to use it since you can just use sections*/
	font-size: 11px;
	line-height: 14px;
	color: #fff;
	margin: 1px;
	padding: 1px;
}

/* main content (for pages definition (media page not included)*/
/* Feel free to change colors and fonts but i would leave other formatting alone unless you are 100% sure what you are doing */
/*#############################################################################################################################################*/
div#mainContent{
	float:left;
}
div#mainContent article header:nth-child(2){ /* this makes sure to make the header of the page content different then other headers in article */
	color:black!important;
	font-size:2em!important;
}
div#mainContent{
	padding:10px;
	padding-left:20px;
	width:650px;
	float:left;
	min-height:400px; /* sets minimum height for main editable section in template */
	background:white;
/*	box-shadow: 0 0 8px 2px #888; */
}

div#mainContent article header{ /* article header (the blue one) definitions*/
	font-size:22px;
	font-weight:bold;
	color: #469;
	padding:5px;
}
div#mainContent header{ /* defines the headers if you need on outside the article ( not necessery but might come in handy)*/
	color:#000000;
	font-weight:bold;
	font-size:30px;
	padding-top:25px;
	margin-top:10px;
	padding-bottom:25px;
	margin-bottom:10px;
}
div#mainContent a {
                color: #036;
                text-decoration: underline;
}

div#mainContent a:hover {
                color: #808080;
                text-decoration: underline;
}
div#mainContent article section{ /* specifies the main text area */
	text-indent:0px; /* change to cereat first line in section indented */
	padding:5px;
	font-weight:normal;
	font-size:1em;
}
/*#############################################################################################################################################*/

/* The section below define media page Main Area (where the picture and other stuff goes) please do not change the float values or sizes of areas, this will mess up the aligments of items*/
div#mediacontent{/* please dont change this section */
	float:left;
}
div#mediacontent{/*defines the container div tag */
	padding:10px;
	padding-left:40px;
	padding-right:20px;
	width:840px;
	float:left; /*do not change the float values */
	min-height:400px; /* minumu  height makes the page decent in case of no or little content*/
	background:white;
	box-shadow: 0 0 8px 2px #888;
}

div#mediacontent article header{ /* defines the header inside an article tag , you should still use article tags for all content */
	font-size:22px;
	font-weight:bold;
	color: #469;
	padding:5px;
}
div#mediacontent img{ /* defines the images in media pges inside the article tag ( remember to have all content in main areas in article tags)*/
	max-width:820px;
	margin-left:auto;
	margin-right:auto;
	height:auto;
}
div#mediacontent header{ /* defines the header that would be outside of article tag ( like for example header for meida page or some other necessery item that needs separated formatting) */
	color:#000000;
	font-weight:bold;
	font-size:30px;
	padding-top:25px;
	margin-top:10px;
	padding-bottom:25px;
	margin-bottom:10px;
}
div#mediacontent article section{ /* here are definitions for normal text inside of sections ( all text in all pages should be in section tags ) by default each section keeps a distance from the other */
	text-indent:0px; /* make the first line of section indented like in textbooks provide value in pixels of % both should work*/
	padding:5px;
	font-weight:normal;
	font-size:1em;
}
div#mediacontent article section a {
	color: #036;
	text-decoration: underline;
}

div#mediacontent article section a:hover {
	color: #808080;
	text-decoration: underline;
}

/* main level link hover of top menu and also when hovering over it (with dropdown) changing sizes is not a good idea but colors and font type should be fine*/
#nav .selected_nav a, #nav li:hover > a {
	color:white;
	background-color:black;
	text-decoration:none;
	text-transform:capitalize;
	width:100%;
}

/* defines style for ul tags in menu that are nested  do not change the display mod*/
#nav li ul { display: none; }

/*allows the menu to be visible over other contnet do not alter */
#nav li:hover ul, #trans-nav li.over ul {
	z-index:5; display: block;
}

/*defines the main tags (ul or nested li and a tags) in top menu that contains drop down, feel free to change colors and fonts but i suggest to leave other things as they are*/
/*##################################################*/
#nav ul {
	display: block;
	position: absolute;
	width:380px;
	top: 25px;
	margin-left:-50px;
	z-index:5;
}

#nav ul li {
	display:block;
	margin-bottom:0px;
	width:100%;
	position:relative;	
	z-index:5;
}
#nav ul a {
	font-weight: normal;
	text-shadow: 0 1px 0 #fff;
	width:100%;
	z-index:5;
}

nav{
	font-weight:bold;
	width:658px;
	text-align:left;
	margin-top:0px;
	padding:0 0 0 10px;
	display:block;
	text-align:left;
	float:left;
}

nav ul{
	list-style-type:none;
	display:inline;
}
nav form input{
	margin-left:10px;
	background-color:#E8E8E8;
	box-shadow: 0 0 5px 2px #888;
}
nav ul li:hover{ 
	background-color:black;
}
nav ul li{
	float: left;
	position: relative;
	list-style-type:none;
	background-color:#E8E8E8;
	box-shadow: 0 0 5px 2px #888;
	padding:5px;

	
}
nav ul li a{
	position:relative;
	z-index:auto;
	padding:5px;
	text-decoration:none;
	color:black;
	width:100%;
	text-transform:capitalize;
	
}
nav ul li a:visited{
	text-decoration:none;
	color:black;
}
nav ul li a:hover{
	color:white;
	text-decoration:none;
	text-transform:capitalize;
	z-index:4;
}

/*#########################################*/
/* defines the main menu (drop down) formatting of first child of ul means formating the first dropped down section (Table of Contents in this case)*/
#nav ul>:first-child {
	-webkit-border-top-left-radius: 9px;
	-moz-border-radius-topleft: 9px;
	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topright: 9px;
}
/*defienes the end of the drop down menu*/
#nav ul>:last-child {
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomleft: 9px;
	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomright: 9px;
}

/* Please do not alter this section 
This section enables the menu on top to function
##############################################*/
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
/*####################################################*/
/* THIS DEFINES THE ANIMATED MENU FORMATTING YOU CAN CHANGE THIS WITH NO CONSEQUENCES OTHER THEN MESSING UP THE LOOK OF THE ANIMATED MENU IN CONTENTS PAGE */
.accordionNav header
{
	font-weight:bold;
	padding:5px;
	font-size:20px;
	box-shadow:0 0 5px 2px #888;
}
.accordionNav header a{
	text-decoration:none;
}

.accordionNav header a:visited{
	text-decoration:none;
}

.accordionNav div{
	box-shadow: 0 0 5px 2px #888;
	padding:5px;
	padding-bottom:10px;
	font-size:14px;
	font-weight:normal;
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomleft: 9px;
	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomright: 9px;
	
	
}


/*##############################################################################*/

/* DEFINES THE LISTING STYLE FOR <a> TAGS, 1 PER HORIZONTAL LINE (CHECK INSIDE THE ANIMATED MENU TO SEE IT)*/
.listA a{
	display:block;
	color:black;
	padding:5px;
	border-radius:25px;
	margin-bottom:5px;
	background-color:white;
	font-size:18px;
	text-decoration:none;
}
.listA a:hover{
	display:block;
	color:black;
	padding:5px;
	border:thin #000000 solid;
	border-radius:25px;
	margin-bottom:5px;
	background-color:white;
}



/* each chapter page ( that acualt says chapter) has a chapter class in header that could be defined here ( chapter 1 - ......) this allows for specialized changes to those headers if needed but it might be overidden by other css */
header#chapter{
font-size:25px;
}

/* definition of quotations by default it inherits the font size from parent (the tags its located in) */
blockquote{
	font-size:inherit!important;
}

/*Standarization of indentation could be done here*/
.indent
{
	margin-left:50px;
	margin-right:50px;
}
/* defines class for listing things can be used with listings not mandatory left in here in case you might want to use it later on */
.listing{
	list-style-type: circle;
	margin-left:45px;
	margin-right:50px;
}

/* add this class to any author tag it will create default formatting with horizontal line trought page */
.author
{
	font-size:19px!important;
	color: #469;
	padding-bottom:20px;
	margin-bottom:15px;
	border-bottom:thin #000000 solid;
}
/* formatting class for comlum */
.displayColumn{
	-moz-column-count: 3;
	-moz-column-gap: 20px;
	-webkit-column-count: 3;
	-webkit-column-gap: 20px;
	column-count: 3; /* number of collums to be displayed*/
	column-gap: 20px; /* gap size between colums */
}