body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #999;
	color: #333;
	/* font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px; */
	font-family: 'Josefin Slab', Geneva, Helvetica;
	font-size: 20px;
	line-height: 1.7em;
}

#main,#container,#logo,#site_content,footer {
	margin-left: auto;
	margin-right: auto;
	min-width: 1000px;
}

#main {
	margin: 0px auto; /* margin: 50px auto; */
	background: #CCC;
	padding: 10px 10px;
}

header {
	/* background: #444; */
	/* background: linear-gradient(#444, #111); */
	/* background: url(../images/black_textured_background_seamless.jpg) repeat; */
	height: 250px;
	margin: 0 0 16px 16px;
}

p {
	padding: 10px 10px 10px 10px;
	line-height: 1.7em;
	/* font-size: 100% */
}

p#first_paragraph {
	/* background: #C2F670; */
	color: FFF;
	margin: 10px;
	border: 2px solid gray;
	padding: 20px;
}

p#last_paragraph {
	/* background: #D098D4; */
	margin: 10px;
	border: 2px solid darkslateblue;
	border-radius: 20px/20px;
	padding: 20px;
}

p#first_paragraph:first-letter {
	font-size: 300%;
	color: royalblue;
}

p#last_paragraph:first-letter {
	font-size: 300%;
	color: orangered;
}

#logo {
	/* width: 1500px; */
	height: 50px;
	background: transparent;
	padding: 10px;
	text-align: center;
}

#logo #logo_text {
	margin-left: auto;
	margin-right: auto;
	width: 600px;
	height: 60px;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border: 7px;
	/* background: rgba(0, 0, 0, 0.4); */
	background: #444;
	background: linear-gradient(#444, #111);
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	left: 0;
	padding: 25px 20px;
}

#logo h1,#logo h2 {
	border-bottom: 0;
	text-transform: none;
	margin: 0;
}

#logo_text h1,#logo_text h1 a {
	padding: 0;
	color: #000;
	text-decoration: none;
}

#logo_text h1 a:hover {
	padding: 0;
	color: #999;
	text-decoration: none;
}

#logo_text h1 a .middle_initial {
	color: mediumpurple; /* #4D8D01; */
	/* text-shadow: 1px 1px #294701; */
}

#logo_text a:hover .middle_initial {
	color: #FFF;
}

#logo_text h4 {
	/* font-size: 120%; */
	padding: 0 0 0 0;
	color: #FFF;
}

#logo_text a:link {
	color: gray;
	text-decoration: none;
}

#logo_text a:visited {
	color: gray;
	text-decoration: none;
}

#logo_text a:focus {
	color: gray;
	text-decoration: none;
}

#logo_text a:hover {
	color: #fff;
	text-decoration: none;
}

#logo_text a:active {
	color: gray;
	text-decoration: none;
}

#site_content a:link {
	color: #937393;
	text-decoration: none;
}

#site_content a:visited {
	color: gray;
	text-decoration: none;
}

#site_content a:focus {
	color: lightbrown;
	text-decoration: none;
}

#site_content a:hover {
	color: royalblue;
	text-decoration: none;
}

#site_content a:active {
	color: maroon;
	text-decoration: none;
}

footer a:link {
	color: gray;
	text-decoration: none;
}

footer a:visited {
	color: darkgray;
	text-decoration: none;
}

footer a:focus {
	color: #fff;
	text-decoration: none;
}

footer a:hover {
	color: #fff;
	text-decoration: none;
}

footer a:active {
	color: #ddd;
	text-decoration: none;
}

nav {
	margin: 75px auto;
	text-align: center;
	text-transform: lowercase;
}

nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}


nav ul {
	background: #efefef;
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;
	list-style: none;
	position: relative;
	display: inline-table;
	font-weight: bold;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

	nav ul li {
		float: left;
	}
		nav ul li:hover {
			background: #4b545f;
			background: linear-gradient(#444, #111);
			box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
			box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		}
			nav ul li:hover a {
				color: #fff;
			}

		nav ul li a {
			display: block; padding: 25px 40px;
			color: #757575; text-decoration: none;
		}

	nav ul ul {
		background: #4b545f;
		background: linear-gradient(#444, #111);
		box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
		border-radius: 0px; padding: 0;
		position: absolute; top: 100%;
	}
		nav ul ul li {
			float: none;
			border-top: 1px solid #6b727c;
			border-bottom: 1px solid #575f6a;
			position: relative;
		}
			nav ul ul li a {
				padding: 15px 40px;
				color: #fff;
			}
				nav ul ul li a:hover {
					background: #4b545f;
					background: linear-gradient(#666, #222);
				}

	nav ul ul ul {
		position: absolute; left: 100%; top:0;
		width: 300px;
	}

footer {
	font-family: 'Josefin Slab', Geneva, Helvetica;
	font-weight: bold;
	height: 200px;
	padding: 25px 0 5px 0;
	text-align: center;
	background: #444;
	background: linear-gradient(#444, #111);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	color: #DDD;
	margin: 16px 0 0 0;
	border-top: 6px solid mediumpurple;
}

blockquote {
	margin: 20px 0;
	padding: 10px 20px 0 20px;
	border: 1px solid #E5E5DB;
	background: #FFF;
}

#site_content ul {
	margin: 2px 0 22px 17px;
}

#site_content ul li {
	list-style-type: circle;
	margin: 0 0 6px 10px;
	padding: 0 0 4px 5px;
	line-height: 1.5em;
}

#site_content ol {
	margin: 8px 0 22px 20px;
}

#site_content ol li {
	margin: 0 0 11px 20px;
}

/* center all images within chapters and in slideshows */
.chapter_figure {
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid #333;
	border-radius: 25px;
	box-shadow: 5px 5px 5px #333;
}

.chapter_figure_title,.chapter_table_title {
	text-align: center;
}

/* begin: Styles for slideshow */
#slideshowContainer {
	height: 75%;
	width: 75%;
	position: relative;
	margin: 0 auto;
}

.slideshow {
	display:block;
    margin:auto;
	width: 100%;
	height: 100%;
}

.slideshow img {
	padding: 10px;
	border: 1px solid #ccc;
	background-color: #777;
	width: 90%;
}

#slideshow_nav {
	text-align: center;
}

#slideshow_nav li {
	list-style-type: none;
	display: table;
	float: center;
	font-size: 500%; /* for large symbols */
	font-weight: bold;
	line-height: 25%;
	/* margin-left:auto;  */
    /* margin-right:auto; */
}
/* end: Styles for slideshow */

/* collapsing divs */
#site_content .collapsible {
	padding: 10px 30px;
	border-radius: 10px;
	margin: 10px;
	height: 60px;
	line-height: 60px;
	color: #fff;
	font-weight: bold;
	font-size: 30px;
}

#site_content .collapsible:focus {
	background: lightbrown;
	/* border: outset 1px #CC3300; */
}

#site_content .collapsible:hover {
	/* text-shadow: 4px 4px 4px #000; */
	background: #777; /* #4DB84D; */ /* #CC3300; */
	background: linear-gradient(#777, #333);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	/* border: outset 1px #CC3300; */
}

#site_content .collapsible:active {
	background: maroon;
	background: linear-gradient(maroon, #111);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	/* border: outset 1px #CC3300; */
}

#site_content .collapse-open {
	color: #333;
	background: #bbb;
	background: linear-gradient(#bbb, #888);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}

#site_content .collapse-close {
	/* color: #fff; */
	background: #444;
	background: linear-gradient(#888, #111);
	/* box-shadow: 0 -1px 0 rgba(255, 255, 255, .3); */
	/* box-shadow: 0px 0px 9px rgba(0,0,0,0.15); */
	border: solid 1px #888; /* same color as main backcolor */
}

#site_content .collapse-open span {
	display: block;
	float: right;
	padding:30px 20px 30px 20px;
	background:url(../images/collapsible_headers/collapse_minus_neutral.png) center center no-repeat;
	background-size: 40px 40px;
}

#site_content .collapse-close span {
	display: block;
	float: right;
	padding:30px 20px 30px 20px;
	background:url(../images/collapsible_headers/expand_plus_neutral.png) center center no-repeat;
	background-size: 40px 40px;
}
/* end of style for collapsing divs */

/* begin: Styles for slideshow */
#slideshowContainer {
	height: 75%;
	width: 75%;
	position: relative;
	margin: 0 auto;
}

.slideshow {
	display:block;
    margin:auto;
	width: 100%;
	height: 100%;
}

.slideshow img {
	padding: 10px;
	border: 1px solid #ccc;
	background-color: #777;
	width: 90%;
}

#slideshow_nav {
	text-align: center;
}

#slideshow_nav li {
	list-style-type: none;
	display: table;
	float: center;
	font-size: 500%; /* for large symbols */
	font-weight: bold;
	line-height: 25%;
	/* margin-left:auto;  */
    /* margin-right:auto; */
}
/* end: Styles for slideshow */

p#evolution_navigation_buttons {
	text-align: center;
}

table {
	margin: 10px 0;
	padding: 0 0 0 0;
	line-height: 1.7em;
	/* font-size: 100% */
}

table tr th {
	background: #444; /* #47476B; */ /* royalblue == #4169e1*/
	color: #FFF;
	padding: 7px 4px;
	/* font-size: 1em; */
	font-weight: normal;
	text-align: center;
	text-shadow: none;
}

table tr td {
	background: #777;
	color: #FFF;
	padding: 7px 4px;
	/* font-size: 1em; */
	text-align: left;
	text-shadow: none;
}

table tr.alt td {
	color: #000;
	background-color: #AAA;
}

table#evolution_info,table#network_info,.table_equilibria {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}

table#evolution_info td,table#network_info td,.table_equilibria td {
	text-align: center;
}

.table_equilibria_header_1,.table_equilibria_header_4 {
	width: 10%;
}

.table_equilibria_header_2,.table_equilibria_header_3 {
	width: 20%;
}

.table_equilibria_header_5 {
	width: 40%;
}

#start_time,#stop_time {
	width: 15%;
}

#chart_title {
	width: 70%;
}

#table_help_and_setup {
	background: transparent;
	border: none;
	/* border: 1px solid #444; */
	text-align: center;
	padding: 3px;
}

#table_help_and_setup td {
	background: transparent;
}

#table_help_row td {
	height: 120px;
}

#table_setup td {
	height: 60px;
}

#canvas_reload_button,#canvas_copy_to_clipboard_button,#canvas_load_network_button,#canvas_create_network_button,#canvas_set_coupling_button,#canvas_compute_time_steps_button,#canvas_select_frames_to_show_button,#canvas_build_evolution_frames_button {
	margin: 0 auto;
	border: 1px solid #444;
	border-radius: 15px;
	/* padding: 0 5px 0 5px; */
	width: 100%;
	height: auto;
}

#canvas_reload_button {
	background: firebrick;
}
#canvas_copy_to_clipboard_button {
	background: orange;
}
#canvas_load_network_button {
	background: yellow;
}
#canvas_create_network_button {
	background: green;
}
#canvas_set_coupling_button {
	background: dodgerblue;
}
#canvas_compute_time_steps_button {
	background: blue;
}
#canvas_select_frames_to_show_button {
	background: purple;
}
#canvas_build_evolution_frames_button {
	background: violet;
}

/* begin CSS for image on tooltip*/
.help_tooltip
{
	text-decoration:none;
	position:relative;
}

.help_tooltip span
{
	display:none;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	color:black;
	background:#CC6699;
}

.help_tooltip span img
{
	margin:0;
	width:50%;
}

.help_tooltip:hover span
{
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:1000;
	min-width:200px;
	width:250px;
	max-width:300px;
	min-height:100px;
	border:1px solid black;
	margin-top:12px;
	margin-left:15px;
	overflow:hidden;
	padding:10px;
	font-size:18px;
}
/* end CSS for image on tooltip*/

p#initial_network_dropdown_title,p#initial_network_dropdown_par,p#coupling_number_dropdown_title,p#coupling_number_dropdown_par,p#evolution_status
	{
	text-align: center;
}

#initial_network_dropdown,#coupling_number_dropdown {
	font-family: 'Josefin Slab', Geneva, Helvetica;
	font-size: 16px;
}

.button-link {
	font-family: 'Josefin Slab', Geneva, Helvetica;
	height: 100px;
	text-decoration: none;
	color: #DDD;
	background: #444;
	border: solid 1px #444;
	border-radius: 15px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px
		rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px
		rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px
		rgba(0, 0, 0, 0.2);
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	vertical-align: center;
	text-align: center;
}

.button-link:hover {
	background: olivedrab;
	border: solid 1px darkgray;
}

.button-link:active {
	background: maroon;
	border: solid 1px maroon;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

.button-link:disabled {
	background: #BBB;
	border: solid 1px #BBB; /* #8585C2; */
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

#reload_button,#copy_to_clipboard_button,#load_network_button,#create_network_button,#set_coupling_button,#compute_time_steps_button,#select_frames_to_show_button,#build_evolution_frames_button {
	margin: 0 auto;
	width: 100%;
}

#play_button,#first_frame_button,#reverse_button,#forward_button,#last_frame_button,#pause_button {
	margin: 0 auto;
	width: 15%;
}

#reload_button,#copy_to_clipboard_button,#load_network_button,#create_network_button,#set_coupling_button,#compute_time_steps_button,#select_frames_to_show_button,#build_evolution_frames_button,#contact_send,#contact_reset {
	font-size: 150%; /* for large letters */
	font-weight: normal;
}

#play_button,#first_frame_button,#reverse_button,#forward_button,#last_frame_button,#pause_button {
	font-size: 300%; /* for large symbols */
	font-weight: bold;
}

#reload_button.button-link:hover {
	border: solid 1px darkgray; /* #356094; */
	color: black;
	font-weight: normal;
	letter-spacing: 2px;
}
#copy_to_clipboard_button.button-link:hover {
	border: solid 1px darkgray; /* #356094; */
	color: black;
	font-weight: normal;
	letter-spacing: 2px;
}
#load_network_button.button-link:hover {
	border: solid 1px darkgray; /* #356094; */
	color: black;
	font-weight: normal;
	letter-spacing: 2px;
}
#create_network_button.button-link:hover {
	border: solid 1px darkgray; /* #356094; */
	color: black;
	font-weight: normal;
	letter-spacing: 2px;
}
#set_coupling_button.button-link:hover {
	border: solid 1px darkgray; /* #356094; */
	color: black;
	font-weight: normal;
	letter-spacing: 2px;
}
#compute_time_steps_button.button-link:hover {
	border: solid 1px darkgray; /* #356094; */
	color: black;
	font-weight: normal;
	letter-spacing: 2px;
}
#select_frames_to_show_button.button-link:hover {
	border: solid 1px darkgray; /* #356094; */
	color: black;
	font-weight: normal;
	letter-spacing: 2px;
}
#build_evolution_frames_button.button-link:hover {
	border: solid 1px darkgray; /* #356094; */
	color: black;
	font-weight: normal;
	letter-spacing: 2px;
}

#email_form {
	margin-left: 15%;
    margin-right: 15%;
    width: 70%;
	/* border: 2px dotted darkgray; */
	padding: 10px;
}

.contact_info {
	font-family: 'Josefin Slab', Geneva, Helvetica;
	font-size: 24px;
	width: 97%;
	padding: 10px 10px;
}

#contact_send, #contact_reset {
	width: 48%;
}

/* .name_and_email {
	background-color: #bbb;
	color: red;
}
 */

textarea {
  /* background: url(images/benice.png) center center no-repeat; */ /* This ruins default border */
	background: #bbb;
	height: 150px;
	border: 1px solid #aaa;
}

/* remove Firefox's dotted outline on buttons as well as links */
:focus {
	outline: none;
}

::-moz-focus-inner {
	border: 0;
}

output {
	border: 2px solid royalblue;
	padding: 5px 5px 10px 5px;
	width: 75%;
}

#div_fieldsets {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	text-align: center;
}

.fieldsets_mode_and_charts_and_coupling {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border: 1px solid darkgray;
	border-radius: 8px;
	padding: 10px 20px 0px 20px;
	margin: 0px 2px;
	text-align: center;
	width: 28%;
	display: inline-block;
}

.legend_mode_and_charts_and_coupling {
	background: #444; /* #47476B; */
	color: #EEE;
	border: 1px solid darkgray;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	padding: 8px;
	font-weight: normal;
}

.legend_mode_and_charts_and_coupling span {
	/* display: block;
    margin: -20px;
    padding: 0px 100px; */

}

#energy_chart,#winding_number_chart,#order_parameter_chart {
	border: 1px solid #777;
	width: 95%;
	/* height: 20%; */ /*has no effect*/
	display: block;
	margin: 0 auto;
}

#canvas_wrapper {
	position: relative;
	width: auto; /*width: 80%*/ /* ratio of chart width to content area */
	/* border: 1px solid chocolate; */
	margin-left: auto;
	margin-right: auto;
	/* just for image */
	background:
		url(../images/chart_background/background_neutral.png)
		no-repeat center;
	background-size: cover; /* background-size: 100%; */
	/* background-size: contain; */
}

#canvas_wrapper canvas {
	position: absolute;
	/* top: 0; left: 0; */ /*has no effect*/
	z-index: 0;
	/* border: 1px solid yellow; */
	margin-left: auto;
	margin-right: auto;
}

/* collapsing divs */
.collapsible {
	padding: 10px 30px;
	border-radius: 10px;
	margin: 10px;
	height: 60px;
	line-height: 60px;
	color: #fff;
	font-weight: bold;
	font-size: 30px;
}

.collapsible:focus {
	background: lightbrown;
	/* border: outset 1px #CC3300; */
}

.collapsible:hover {
	/* text-shadow: 4px 4px 4px #000; */
	background: #777; /* #4DB84D; */ /* #CC3300; */
	/* border: outset 1px #CC3300; */
}

.collapsible:active {
	background: maroon;
	/* border: outset 1px #CC3300; */
}

.collapse-open {
	color: #333;
	background: #BBB; /* chocolate */
}

.collapse-close {
	/* color: #fff; */
	background: #444; /* chocolate */
	border: solid 1px #CCC; /* same color as main backcolor */
}

.collapse-open span {
	display: block;
	float: right;
	padding:30px 20px 30px 20px;
    background:url(../images/collapsible_headers/collapse_minus_neutral.png) center center no-repeat;
	background-size: 40px 40px;
}

.collapse-close span {
	display: block;
	float: right;
	padding:30px 20px 30px 20px;
	background:url(../images/collapsible_headers/expand_plus_neutral.png) center center no-repeat;
	background-size: 40px 40px;
}
/* end of style for collapsing divs */

.styled-select_network_list select {
	padding: 5px;
	line-height: 1;
	border-radius: 0;
	-webkit-appearance: none;
	width: 300px;
	height: 34px;
	overflow: hidden;
	background: url(../images/down_arrow_select.jpg) no-repeat right #999;
	color: #000;
	border: 1px solid #ccc;
}

.styled-select_coupling_list select {
	padding: 5px;
	/* font-size: 16px; */
	line-height: 1;
	border-radius: 0;
	-webkit-appearance: none;
	width: 60px;
	height: 34px;
	overflow: hidden;
	background: url(../images/down_arrow_select.jpg) no-repeat right #999;
	color: #000;
	border: 1px solid #ccc;
}

cite {
	font-weight: bold;
}

/**
 * Start by hiding the checkboxes
 */
input[type=checkbox] {
	visibility: hidden;
}

/**
 * Checkbox Three
 */
.coupling_number_switch {
	width: 102px;
	height: 32px;
	background: #333;
	margin: 20px 60px;
	border-radius: 50px;
	position: relative;
}

/**
 * Create the text for the On position
 */
.coupling_number_switch:before {
	content: 'on';
	position: absolute;
	top: 8px;
	left: 18px;
	height: 2px;
	color: #26ca28;
	font-size: 16px;
}

/**
 * Create the label for the off position
 */
.coupling_number_switch:after {
	content: 'off';
	position: absolute;
	top: 8px;
	left: 84px;
	height: 2px;
	color: #111;
	font-size: 16px;
}

/**
 * Create the pill to click
 */
.coupling_number_switch label {
	display: block;
	width: 50px;
	height: 32px;
	border-radius: 50px;

	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: 9px;
	z-index: 1;
	left: 12px;
	background: #bbb;
}

/**
 * Create the checkbox event for the label
 */
.coupling_number_switch input[type=checkbox]:checked + label {
	left: 60px;
	background: #26ca28;
}

/**
 * Checkbox Four
 */
.container_cbx_show_hide {
	width: 40px;
	height: 40px;
	background: #ddd;
	margin: 20px 90px;

	border-radius: 100%;
	position: relative;
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

/**
 * Create the checkbox button
 */
.container_cbx_show_hide label {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 100px;

	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 1;

	background: #333;

	-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}

/**
 * Create the checked state
 */
.container_cbx_show_hide input[type=checkbox]:checked + label {
	background: #26ca28;
}

.coupling_number_switch, .container_cbx_show_hide {
	margin-left: auto;
	margin-right: auto;
}

.myThemes {
	text-align: center;
}

/* method 2: Better because of class name definition it ignores lists that do not need 1.1, 1.2, 1.3 formatting */
ul.chapter_number {
	counter-reset: section;
	list-style-type: none;
}

ul.chapter_number li.section_number {
	list-style-type: none;
}

ul.chapter_number li.section_number ul {
	counter-reset: subsection;
}

ul.chapter_number li.section_number:before {
	counter-increment: section;
	content: "Chapter " counter(section) ". ";
	/*content: "Section " counter(section) ". ";*/
}

ul.chapter_number li.section_number ul li.section_number:before {
	counter-increment: subsection;
	content: "\00a7 \0020" counter(section) "." counter(subsection) " ";
}
/* end Styles for numbering */

.divContentFirst, .divContentSecond, .divContentThird, .divContentForth {
	text-align: center;
	float:left;
	width:25%;
}

.divContentFirst img, .divContentSecond img, .divContentThird img, .divContentForth img
{
	margin:0;
	width:20%;
}