/* ------------------------------------------------------------------------
-   Make browsers more friendly with padding and margin. -
-------------------------------------------------------------------------*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------------
-  Main background colors. -
-------------------------------------------------------------------------*/
.color-1 { background: rgba(0, 0, 50, 0.50); } /* Title background */
.color-2 { background: rgba(0, 0, 50, 0.40); } /* Description background */
.color-3 { background: rgba(0, 0, 50, 0.30); } /* Main menu background */
.color-4 { background: rgba(0, 0, 50, 0.20); } /* recent posts background */
.color-5 { background: rgba(255,255,255,0.6); } /* other blocks (right side) */

/* ------------------------------------------------------------------------
-  The basics. -
-------------------------------------------------------------------------*/
html, body {
	background: #395075;
	font-family: sans-serif;
	font-size: 24px;
	margin: 0;
	height: 100%;
}

#wrapper {
	min-height: 100%;
	margin: 0 auto -25px; /* the bottom margin is the negative value of the footer's height */
}

#footer, #push { height: 25px; } /* .push must be the same height as .footer */

#footer {
	clear: both;
	color: #88A;
	font-size: 0.5em;
	margin: 0em;
	padding: 0.3em;
	text-align: center;
	border-top: 1px dashed #687296;
	background-color: rgba(0, 0, 0, 0.41)
}
	#footer a {
		color: #668;
		text-decoration: underline;
	}

	#footer p { margin-top: 2px; }

a {
	text-decoration: none;
	-webkit-transition: color 0.25s ease-in, background 0.25s ease-in;
	-moz-transition: color 0.25s ease-in, background 0.25s ease-in;
	-o-transition: color 0.25s ease-in, background 0.25s ease-in;
	transition: color 0.25s ease-in, background 0.25s ease-in;
}

p { line-height: 1.4; }

.module {
	color: #212121;
	margin: 0.5em;
	overflow: hidden;
	padding: 1.5em;
	position: relative;
	border: 1px solid black;
	border-radius: 10px;
	box-shadow: 3px 3px 0 0 rgba(0,0,0,0.3);
}

	.main-content .module {
		font-size: 0.8em;
		margin-right: 1em;
	}

	nav.module { padding-top: 1.5em; }

/* ------------------------------------------------------------------------
-  The header (or the left side part of the page). -
-------------------------------------------------------------------------*/
.main-header {
	float: left;
	width: 35%;
}

	.main-header h1 img {
		margin: 0;
		vertical-align: bottom;
		width: 100%;
	}

/* ------------------------------------------------------------------------
-  The navigation. Main menu links. -
-------------------------------------------------------------------------*/
.links {
	color: #49628e;
	text-align: left;
	padding: 0.2em 0 0.3em 1.5em;
	font-size: 80%;
	line-height: 1.4em;
	list-style-type: square;
}
	.links li a {
		margin-left: -8px;
	}

	.links a {
		color: #7f99c5;
	}

	.links a:hover, .links a:focus { color: #e1e1e1; }


	.links a:hover, .links a:active {
		color: #fff !important;
		text-decoration: underline;
	}


/* ------------------------------------------------------------------------
-  Pagination. -
-------------------------------------------------------------------------*/
.pagination { text-align: center; }
	.pagination .page_number { color: #888; }
	.pagination .nolink { color: #666; }

/* ------------------------------------------------------------------------
-  The content. -
-------------------------------------------------------------------------*/
.main-content {
	float: right;
	padding: 0;
	width: 65%;
	margin-bottom: 20px;
}

	.main-content a { color: #526f8c; }
	.main-content a:hover, .main-content a:focus { color: #228cd2; }

	.main-content li { margin-left: 25px; }

.category {
	color: #ccc;
	position: absolute;
	right: 0.75em;
	top: 0.75em;
}

hr {
	border: 0;
	background: #444;
	height: 1px;
	margin: 50px 0;
}

article a {
	border-bottom: 1px solid #679;
	display: inline;
	padding: 0 0 .02em 0;
}

	article a:hover, article p a:active {
		color: #267ab1 !important;
		border-bottom: 1px solid #228cd2;
		background: #98abcc;
	}

	article a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
		border: 0;
	}

	article a[href$=jpg]:hover, a[href$=jpeg]:hover, a[href$=jpe]:hover, a[href$=png]:hover, a[href$=gif]:hover {
		background: 0;
	}

	article img {
		height: auto;
		max-width: 200px;
		padding: 0 10px 10px;
		float: left;
	}

	article li { clear: both; }

/* ------------------------------------------------------------------------
-  Tables -
-------------------------------------------------------------------------*/
table {
	border-collapse: collapse;
	font-size: 0.8em;
	width: 100%;
	box-shadow: 3px 3px 0 0 #9298ab;
}

	table tr { border: none !important; }
	table td,th { border: 1px solid #17386d; padding: 3px; }
	table th { background: #9da8ce; }
	table tr:nth-child(odd) { background: #d1dbec; }
	table tr:nth-child(even)  { background: #b7c5dc; }

/* ------------------------------------------------------------------------
-  comments -
-------------------------------------------------------------------------*/
#gh-comment { border-bottom: 1px solid #88A; margin: 0 10px 15px 0; padding: 0 15px; }
#gh-author { background: rgba(0,0,0,.1); padding: 3px; margin-bottom: -10px; }
#gh-avatar { vertical-align: middle; margin-right: 10px; width: 24px; height: 24px; }
#comments_thread { max-height: 500px; overflow-y: auto; margin-bottom: 10px; display: none; }
#comments_btn { text-align:center; }
#comments_btn button { padding: 5px; border-radius: 6px; border: 1px solid #051733; cursor: pointer; color: #fff; background-color: #395075; box-shadow: 2px 2px 0 0 #9298ab; margin-right: 10px; }
#comments_btn button:hover, #comments_loadbtn input:focus, #comments_loadbtn input:active { background-color: #49628e; }
@media (max-width: 581px) { #comments_thread:after { margin-bottom: -230px } }


/* ------------------------------------------------------------------------
-  Blockquote, code, pre. -
-------------------------------------------------------------------------*/
pre, code {
	padding: 0.1em 0.3em;
	word-wrap: break-word;
	top: -1px;
	position: relative;
	background-color: #C0C0C040;
}

blockquote {
	font-style: italic;
	border-left: 5px solid #ccc;
	margin: 1.5em 10px;
	padding: 0.5em 5px;
	quotes: "\201C""\201D""\2018""\2019";
}

	blockquote:before {
		color: #ccc;
		content: open-quote;
		font-size: 4em;
		line-height: 0.1em;
		margin-right: 0.25em;
		vertical-align: -0.4em;
	}

	blockquote p { display: inline; }

/* ------------------------------------------------------------------------
-  Make things responsive. -
-------------------------------------------------------------------------*/
@media (max-width: 850px) {

	body { font-size: large; }

	.main-header, .main-content {
		padding: 0.5em;
		width: 100%;
	}

	.main-header .description {
		padding: 0.2em;
	}

	.main-header .recent { max-height: 9em; }

	.main-header .module { margin-left: 0; }
	.main-content .module { margin-top: 0; }
}

/* ------------------------------------------------------------------------
-   Source code highlighting -
-------------------------------------------------------------------------*/
.highlight {
	background: #DDDDEA;
	overflow: auto;
	border: 1px solid #669;
	border-radius: 10px;
	box-shadow: 2px 2px 0 0 #99B;
	padding: 0 0.4em;
}
.highlight pre { margin: 0 }
.highlight code { padding: 0 }
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { font-weight: bold } /* Keyword */
.highlight .o { font-weight: bold } /* Operator */
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #999999 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { font-weight: bold } /* Keyword.Constant */
.highlight .kd { font-weight: bold } /* Keyword.Declaration */
.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #009999 } /* Literal.Number */
.highlight .s { color: #d14 } /* Literal.String */
.highlight .na { color: #008080 } /* Name.Attribute */
.highlight .nb { color: #0086B3 } /* Name.Builtin */
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
.highlight .no { color: #008080 } /* Name.Constant */
.highlight .ni { color: #800080 } /* Name.Entity */
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
.highlight .nn { color: #555555 } /* Name.Namespace */
.highlight .nt { color: #000080 } /* Name.Tag */
.highlight .nv { color: #008080 } /* Name.Variable */
.highlight .ow { font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #009999 } /* Literal.Number.Float */
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
.highlight .sb { color: #d14 } /* Literal.String.Backtick */
.highlight .sc { color: #d14 } /* Literal.String.Char */
.highlight .sd { color: #d14 } /* Literal.String.Doc */
.highlight .s2 { color: #d14 } /* Literal.String.Double */
.highlight .se { color: #d14 } /* Literal.String.Escape */
.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
.highlight .si { color: #d14 } /* Literal.String.Interpol */
.highlight .sx { color: #d14 } /* Literal.String.Other */
.highlight .sr { color: #009926 } /* Literal.String.Regex */
.highlight .s1 { color: #d14 } /* Literal.String.Single */
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #008080 } /* Name.Variable.Class */
.highlight .vg { color: #008080 } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

/* ------------------------------------------------------------------------
-  Project Generator Form -
-------------------------------------------------------------------------*/
table.tabheader { border-collapse:collapse; width:800px; margin:0 auto; }
table.tabheader td { text-align:center; border:2px solid black; cursor:pointer; }
td.activetab { border-bottom-color:#ddd!important; background-color:#ddd; }
td.inactivetab { background-color:#888; }
form#zip { width:800px; margin:0 auto; background:#DDD; padding:8px; border:2px solid black; border-top-width:0; font-size:80%; }
form#zip a { color:#666; }
form#zip h2 { font-size:14pt; font-family:sans-serif; text-align:center; background:#333; color:#FFF; margin: 15px 0 5px }
form#zip div { clear:both; margin:3px 0; }
form#zip label { float:left; width:180px; margin-right:10px; }
form#zip span.txt { display:block; padding-left:190px; font-size:80%; color:#666; }
form#zip span.chk { padding-left:10px; }
form#zip label.ta { float:none; width:auto; display:block; margin-right:0; }
form#zip textarea { width:99%; }
form#zip .submit { margin:0 0 10px 0; padding:3px 10px; font-size:150%; }
form#zip sub { display: block; color: #666; text-align: center; }