/* See http://webdesign.tutsplus.com/tutorials/site-elements/create-your-own-sexy-background-patterns-part-4-synthetic-fiber/
	for background pattern
*/

h1 {
	background: #333399 url(../img/background-header.png) bottom right repeat;
	color: #FFFFFF;
	padding: 10px;
	font-size: 230%;
	counter-reset: section;
}

h1 a {
	color: #FFFFFF;
	text-decoration: none;
	padding: 4px;
}

h1 a:hover {
	text-decoration: underline;
}

h1:before {
	/*content: "Chapter " counter(chapter) ". ";*/
	counter-increment: chapter;  /* Add 1 to chapter */
}

h2 {
	counter-reset: subsection;
}
h2:before {
	/*content: counter(chapter) "." counter(section) ")  ";*/
	content: counter(section) " - ";
	counter-increment: section;
}

h3:before {
	content: counter(section) "."counter(subsection) " - ";
	counter-increment: subsection;
}

body {
	font: small Helvetica, Arial, sans-serif;
	background: #333366 url(../img/background.png);
	color: #ffffff;
	text-align: justify;
	counter-reset: chapter;      /* Create a chapter counter scope */
}

p {margin: 0 0 2.0em 0; line-height: 1.5em}

a:link  {color: #B8B8B8;}

a:visited {color: #B8B8B8;}

a {text-decoration:none;}

a:hover {color: #B80000;}

img {border: 2px solid #b3b3b3; vertical-align: top;}

/* ---------------------------------------------
	
	header
	
--------------------------------------------- */
/*#header {
	background: #333399 url(../img/background-header.png) bottom right repeat;
}

h1 {
	color: #FFFFFF;
	padding: 10px;
	font-size: 230%;
}

h1 a {
	color: #FFFFFF;
	text-decoration: none;
	padding: 4px;
}

h1 a:hover {
	text-decoration: underline;
}
*/

/* ---------------------------------------------
	
	navigation
	
--------------------------------------------- */
#nav {
	background: #666666 url(../img/background-footer.png) top left repeat;
}

#nav ul li {
	list-style: none;
	float: left;
}

#nav ul li a {
	display: block;
	float: left;
	padding: 12px;
	text-decoration: none;
	color: #333333;
	font-weight: bold;
	border-right: 2px solid #B8B8B8;
}

#nav ul li a:hover {
	background-color: #666666;
	color: #B80000;
}

#nav a:link, #nav a:visited {color: #B8B8B8;}

#nav a:hover {color: #660000;}

td {
	vertical-align: top;
}
/*
table{
	margin: auto;
	border: 1px solid black;
	table-layout: auto;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
}

#illustration {
	font-style:italic;
}
*/

/* ---------------------------------------------
	
	main column
	
--------------------------------------------- */
#main_big, #main_big_big, #main, #main-inner {
	font-size: 110%;
}

#main_big {
	margin-left: 20%;
	max-width:60%;
	float: left;
}

#main_big_big {
	margin-left: 10%;
	max-width:80%;
	float: left;
}

#main_big_big_fix_width {
	margin-left: 10%;
	width:80%;
	float: left;
}

#main {
	margin-left: 20%;
	max-width:40%;
	float: left;
}

#main-inner {
	padding: 25px;
}

#main h2 {
	color: #BFBFBF;
	font-size: 150%;
	margin: 0 0 6px 0;
}

#feedControl h3:before
{
	content: "";
}

#feedControl h3
{
	background: #333399 url(../img/background-header.png) bottom right repeat;
	color: #FFFFFF;
	padding: 10px;
}

#feedContent
{
	background: #666666
}

/* ---------------------------------------------
	
	side column
	
--------------------------------------------- */
#side {
	width: 20%;
	margin-right: 0%;
	float: left;
	background: #666666 url(../img/background-side.png) repeat;
}

#side-inner {
	padding: 15px;
}

#side h3 {
	margin: 0 0 6px 0;
	color: #B8B8B8;
}

#side a:link, #side a:visited {color: #333333;}

#side a:hover {color: #660000;}

.img-right-no-border, .img-right, .img-left-no-border, .img-left {
	margin: 0 0 10px 10px;
}

.img-right-no-border, .img-right {
	float: right;
}

.img-left-no-border, .img-left {
	float: left;
}

div.container {
	border: 1px solid #000000;
}

div.demo_left {
	width: 30%;
	float: left;
}

div.demo_right {
	height: 25%;
	float: right;
   	max-width: 80%;
}


.img-right, .img-left {
	border: 2px solid #94b0c0;
	margin:10px 10px 10px 10px; 
}

.img-right-no-border, .img-left-no-border {
	border: 0px;
	max-width: 20%;
}

.img-full-size {
    max-width: 100%
}

.img-half-size {
    max-width: 50%;
}

div.half-size {
    width: 50%;
}


#containingBlock1 {
    width: 100%;
}
#containingBlock2 {
    width: 100%;
}
.svg_0, .svg_1 {
    position: relative;
    padding-top: 0px;      /* the height of the chrome - we use padding vs. height to avoid issues with the box model */
    height: 0;
	margin:10px 10px 10px 10px;
}
.svg_0 {
    padding-bottom: 23.81%; /* the ratio: 100*height/width */
}
.svg_1 {
    padding-bottom: 120.34%; /* the ratio: 100*height/width */
}
/* FF needs "embed" here */
.svg_0 object,
.svg_1 object,
.svg_0 embed,
.svg_1 embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/* ---------------------------------------------
	
	footer
	
--------------------------------------------- */
#footer {
	clear: both;
	color: #5b5b5b;
	background: #666666 url(../img/background-footer.png) top left repeat;
}

#footer p {
	text-align: center;
}

#footer p a {
	color: #5b5b5b;
}


/* ---------------------------------------------
	
	misc.
	
--------------------------------------------- */
div.figure { padding: 0.5em; text-align: center; }

.math { font-family:"Times New Roman", Times, serif; font-style:italic; } 

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

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* @end */