/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

/*
 * Layout Style Sheet - Provides a fluid grid and helper classes to create any layout and some layout defaults
 */


/* Grid and Clearing Tools
----------------------------------------------------------------------------------------------------*/

.clearfix:before,
.clearfix:after,
.grid-block:before,
.grid-block:after,
.deepest:before,
.deepest:after {
	content: "";
    display: table;
}
.clearfix:after,
.grid-block:after,
.deepest:after { clear: both; }

.grid-box { float: left; }

/* Grid Units */
.width16 { width: 16.666%; }
.width20 { width: 20%; }
.width25 { width: 25%; }
.width33 { width: 33.333%; }
.width40 { width: 40%; }
.width50 { width: 50%; }
.width60 { width: 60%; }
.width66 { width: 66.666%; }
.width75 { width: 75%; }
.width80 { width: 80%; }
.width100 { width: 100%; }

[class*='width'] {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Create new Block Formatting Contexts */
.bfc-o { overflow: hidden; }
.bfc-f {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	float: left;
}

/* Align Boxes */
.float-left { float: left; }
.float-right { float: right; }

/* Grid Gutter */
.grid-gutter.grid-block { margin: 0 -15px; }
.grid-gutter > .grid-box > * { margin: 0 15px; }

.grid-gutter > .grid-box > * > :first-child { margin-top: 0; }
.grid-gutter > .grid-box > * > :last-child { margin-bottom: 0; }


/* Layout Defaults
----------------------------------------------------------------------------------------------------*/

/* Center Page */
.wrapper {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
}

/* Header */
#header { position: relative; }
#toolbar .float-left .module,
#toolbar .float-left > time {
	margin: 0 15px 0 0;
	float: left;
}

#toolbar .float-right .module {
	margin: 0 0 0 15px;
	float: right;
}

#headerbar .module {
	max-width: 300px;
	margin-right: 0;
	float: right;
}

#logo, #logo > img,
#menu { float: left; }
#menumobile ul {padding-left:15px;}
#menumobile ul li {list-style:none;float:left;font-size:1.2em;}
#menumobile ul li:nth-child(2) {padding-left:20px;}
#menumobile ul li:last-child {float:right;margin-right:20px;}
#search { float: right; }

#banner {
	position: absolute;
	top: 0;
	right: -200px;
}

/* Footer */
#footer {
	position: relative;
	text-align: center;
	padding-bottom:30px;
}

#footer a:hover {color:white;}
#footer span.footer-menu-item {text-align:left;display:inline-block;margin-right:10px;}

/* Absolute */
#absolute {
	position: absolute;
	z-index: 15;
	width: 100%;
}

/* Spacing
----------------------------------------------------------------------------------------------------*/

.module,
#header,
#breadcrumbs,
#content,
#footer { margin: 15px; }

#menu .module { margin: 10px 5px; }

#footer .module { margin: 0; }
.module ul {list-style:none;}
#toolbar,
#headerbar { margin-bottom: 15px; }

/* Layout
----------------------------------------------------------------------------------------------------*/

#totop-scroller {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 20px;
	height: 20px;
	background: url(../images/totop_scroller.png) 50% 50% no-repeat;
	text-decoration: none;
}

.tinynav { display: none }

.wrapper { max-width: 1170px; }
#sidebar-a { width: 25%; }
#sidebar-a .featured-posts.module span.thumbnail-img, #sidebar-a .popular-articles.module span.thumbnail-img {padding:4px;}
#sidebar-a .featured-posts.module span.thumbnail-img img, #sidebar-a .popular-articles.module span.thumbnail-img img {-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
#sidebar-a .featured-posts.module a, #sidebar-a .popular-articles.module a {width:75%;}
#sidebar-a .article-box {width:100%;height:150px;}
#maininner { width: 75%; }
#menu .dropdown { width: 250px; }
#menu .columns2 { width: 500px; }
#menu .columns3 { width: 750px; }
#menu .columns4 { width: 1000px; }

/*
.pager {float:right;}
.pager ul {float:right;padding-left:10px;margin:5px 0;}
.pager ul li {list-style:none;float:left;padding:3px;border:1px solid #ccc;
background: #ffffff; /* Old browsers
background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%); /* FF3.6+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+
background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Chrome10+,Safari5.1+
background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Opera 11.10+
background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* IE10+
background: linear-gradient(to bottom,  #ffffff 0%,#f2f2f2 100%); /* W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9
}
.pager ul li a {font-size:14pt;}*/
.pager {font-size:14pt;text-align:center;}
.pager span {position:relative; bottom:15px;}
.pager svg:hover {fill:#666;}


#login-form, #register-form {position:absolute;z-index:100;background:white;padding:5px;border:1px solid #ccc;margin-top:10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
#login-form, button, #register-form button {margin-top:5px;}
#login-form input, #register-form input {margin-top:3px;}

#system .title { margin-top: 0; }
#system .title a { text-decoration: none; }

#system .title + .title { margin-top: 20px; }

ul.blank,
ul.space,
ul.line,
ul.check,
ul.zebra {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Space */
ul.space li { margin-top: 15px; }
ul.space li:first-child { margin-top: 0; }

/* Line */
ul.line > li {
	margin-top: 5px;
	padding-top: 5px;
}

ul.line > li:first-child {
	margin-top: 0;
	padding-top: 0;
}

/* Check */
ul.check > li { margin-top: 5px; }
ul.check > li:first-child { margin-top: 0; }

/* Zebra */
ul.zebra > li { padding: 5px; }

ul.line > li > a:first-child,
ul.check > li > a:first-child { display: block; }

/* Line */
ul.line > li { border-top: 1px solid #ddd; }
ul.line > li:first-child { border: none; }

/* Check */
ul.check > li {
    padding: 4px 0 0 30px;
    background: url(../images/tools/list_check.png) 0 0 no-repeat;
}

/* Zebra List and Table */
ul.zebra > li,
table.zebra tbody td { border-bottom: 1px solid #ddd; }
ul.zebra > li:first-child,
table.zebra tbody tr:first-child td { border-top: 1px solid #ddd; }

ul.zebra > li.odd,
table.zebra tbody tr.odd { background: #fafafa; }
ul.zebra > li:nth-of-type(odd),
table.zebra tbody tr:nth-of-type(odd) { background: #fafafa; }

table.zebra caption { color: #999; }

.system-message {border:1px solid #ccc;padding:5px;margin:5px;font-weight:bold;}
.error {background-color:#ffbaba;border-color:#d8000c;}
.system-message.error {color:#d8000c;}
.system-message.warning {background-color:#feefb3;border-color:#9f6000;color:#9f6000;}
.system-message.notice {background-color:#bde5f8;border-color:#00529b;color:#00529b;}
.system-message.success {background-color:#dff2bf;border-color:#4f8a10;color:#4f8a10;}

.left {float:left;}
.right {float:right;}

span#admin-tools {position:fixed;margin-left:-200px;z-index:50;width:200px;background:#666;padding:3px;border:1px solid #f8f8f8;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
span#admin-tools:hover {background-color:#777;}
span#admin-tools-body {padding:3px;display:block;width:194px;}
span#admin-tools-body a {color:white;}
span#admin-tools-body a:hover {color:#ccc;}
span#admin-tools-title {display:block;width:192px;background:#444;padding:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;text-align:center;border:1px solid #333;}
span#admin-tools-title:hover {background-color:#555;}

.breadcrumbs {list-style:none;padding-left:10px;}
.breadcrumbs li {float:left;}
article .title {line-height:27px;}

#footer .rrssb-buttons {position:fixed;bottom:5px;left:0;}

#admin-top-bar {position:fixed;left:0;top:0;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333333+0,555555+100 */
background: #333333; /* Old browsers */
background: -moz-linear-gradient(top,  #333333 0%, #555555 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #333333 0%,#555555 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #333333 0%,#555555 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#555555',GradientType=0 ); /* IE6-9 */
padding:10px;
border-bottom:1px solid #333;
width:100%;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
z-index:999;
}
#admin-top-bar:hover {opacity: 1.0;filter: alpha(opacity=100); /* For IE8 and earlier */}
#admin-top-bar-menu li {float:left;margin-right:9px;border-right:1px solid lightblue;padding-right:7px;position:relative;display:inline-block;}
#admin-top-bar-menu li:last-child {border:none;float:right;margin-right:20px;}
#admin-top-bar-menu li:nth-last-child(2) {border:none;}
#admin-top-bar-menu li a {color:white;}
#admin-top-bar-menu li a:hover {color:lightblue;}
#admin-top-bar-menu .dropdown {background:#666;top:30px;border:1px solid #333;}
#admin-top-bar-menu .dropdown li {padding:3px;border-bottom:1px dotted #666;}

#edit-footer-link {position:absolute;top:-30px;width:100%;text-align:center;background:white;padding:5px 0;}

.article-grid .article-box {cursor:pointer;position:relative;width:265px;height:240px;text-align:center;float:left;border:1px solid #8bd2e6;margin:3px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-size:cover;}
.article-grid .article-box.primary {width:405px;height:280px;margin-bottom:20px;}
.article-grid .article-box.small .article-image {height:160px;overflow:hidden;}
.article-grid .article-box:hover {border-color:black;background-color:#E8F9FF;}
.article-grid .article-box img {max-height:250px;max-width:98%;}
.article-grid .article-box a.article-link {width:98%;}
.article-grid .article-box .article-image {height:230px;overflow:hidden;position:absolute;bottom:5px;}
.article-grid .article-box .article-box-title {background-color:rgba(255,255,255,0.9);padding:3px;border-bottom:1px solid #8bd2e6;}