* {
    box-sizing: border-box;
}

html, body{
margin:0px;
padding:0px;
height:100%;
}

[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 1080px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
[class*="col-"] {
    float: left;
    padding: 10px;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

.left {
	float:left;
}

.right {
	float:right;
}

#main {
}

#container {
	min-height:100%;
	position:relative;
	padding-bottom:90px;
}

#header {
	height:70px;
	background-color:#F9F9F9;
	background-image: linear-gradient(rgba(255,255,255,0.05), rgba(127,127,127,0.05)80%, rgba(0,0,0,0.05));
	box-shadow:0px 0px 5px;
}

#footer {
	background-color:#F9F9F9;
	background-image: linear-gradient(rgba(0,0,0,0.1), rgba(127,127,127,0.05)20%, rgba(255,255,255,0.05));
	box-shadow:0px 0px 5px;
	
	position:absolute;
	bottom:0px;
	height:70px;
	left:0px;
	width:100%;
}

#text {
	font-family: Arial, Helvetica, sans-serif;
	text-shadow:1px 1px 0px rgba(0,0,0,0.25);
	text-align: center;
    /*border: 1px solid red;*/
}

#info {
	padding: 8px;
}

#info > div {
	/*background-color:blue;
	background-image: linear-gradient(rgba(255,255,255,0.15), rgba(0,0,0,0.15));*/
	
	box-shadow:2px 2px 3px rgba(0,0,0,0.5);
	border: 2px solid red;
	border-radius:5px;
	color:red;
	font-family: "Lucida Console", Monaco, monospace;
	text-shadow:1px 1px 0px black;
	padding:2px;
}

#info ul {
	margin-top:10px;
	margin-bottom:10px;
	padding-left:20px;
}

#info a {
	color:#FF0000;
}
#info a:hover {
	color:#FF0000;
	text-shadow:1px 1px 0px blue;
}
#info a:active {
	color:#8800FF;
}

#manu a {
	display:block;
	padding-top:10px;
	padding-bottom:10px;
	margin:10px;
	margin-left:0px;
	margin-right:10px;
	background-color:blue;
	color:white;
	transition:0.2s;
	box-shadow:2px 2px 3px rgba(0,0,0,0.5);
	border-radius:3px;
	text-decoration:none;
	text-align:center;
	font-family: "Lucida Console", Monaco, monospace;
	text-shadow:1px 1px 2px rgba(0,0,0,0.8);
	background-image: linear-gradient(rgba(255,255,255,0.15), rgba(0,0,0,0.15));
}

#manu a:hover {
	background-color:red;
	margin-right:0px;
	color:black;
	padding-left:10px;
}

#manu a:active {
	background-color:darkRed;
	background-image: linear-gradient(rgba(0,0,0,0.15), rgba(255,255,255,0.15));
}

#manu .dropdown-content {
	display: none;
}

#manu .dropdown:hover .dropdown-content {
	display: block;
}

#manu .dropdown:hover > a {
	background-color:green;
	margin-right:0px;
}

#manu .dropdown .dropdown-content a {
	margin-left:10%;
}

#text a {
    transition:0.1s;
}

#text a:hover {
    text-shadow:0px 0px 5px red;
}

#optionsButton {
	float:right;
	margin:8px;
	width:36px;
	margin-top:25px;
	cursor:pointer;
}

.optionsStripe {
	float:right;
	border-radius:3px;
	background-color:#222;
	width:6px;
	height:6px;
	margin:3px;
	margin-left:20px;
	transition:0.2s;
	border:1px outset #888;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

#optionsContainer:hover .optionsStripe {
	width:100%;
	margin-left:6px;
}

#options {
	display:none;
	position:absolute;
	right:2px;
	z-index:2;
	border:2px solid black;
	background-color:#F9F9F9;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.8);
	border-radius:5px;
	min-width:350px;
	max-height:500px;
}

#optionsContainer {
	display:inline;
}

.code {
	font: 100%/1.5 Arial;
	font-size:16px;
	padding:0px;
	border:3px solid rgba(0,0,0,0);
	outline:3px solid gray;
	min-width:350px;
	margin:3px 10%;
	text-align:left;
	counter-reset: section;
	background-color:#eee;
}

.code div::before {
	counter-increment: section;
	content:counter(section);
	display:inline-block;
	margin-left:-38px;
	padding-right:6px;
	width:30px;
	text-align:right;
	outline: 1px solid #f7f7f7;
	border-left:2px solid #eee;
}

.code > div:nth-child(odd) {
    background-color: white;
}

#text div, #text p {
    margin: 0px;
    padding: 0px;
}