@import url('http://fonts.googleapis.com/css?family=Life+Savers&subset=latin,latin-ext');
@import url('http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,latin-ext');

html, * {padding: 0; margin: 0; } 
body { background: #fff url(../img/body-bg.png) repeat-x left top; font-family: "PT Sans Narrow"; font-size: 1em;}
#page {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	min-height: 200px;
	position: relative;
	background-color: transparent;
}
#header {position:relative;padding-top: 40px; height: auto; }
#header a img { max-width: 90%; }
#header .topmenu {
	position: absolute; right: 0; top: 60px;
}
#header .topmenu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#header .topmenu ul li {
	display: inline;
	margin-left: 20px;
}
#header .topmenu ul li a {
	color: #999;
	font-size: 1.6em;
	text-decoration: none;
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
	-moz-transition: 0.3s ease;

}
#header .topmenu ul li a span.square {
	width: 10px; 
	height: 40px;
	display: inline-block;
	margin-right: 20px;
	position: relative;
	top: 10px;
	background-color: #aaa;
}
#header .topmenu ul li a:hover {
	color: #08f;
}
#header .frametopborder {
	margin-top: 30px;
	position: relative;
	width: 100%; 
	height: 25px;
	background: #f93;
	border-radius: 6px 6px 0 0;
}
#header .frametopborder .secondbar{
	width: 100%; 
	height: 15px;
	background: rgba(0,128,255,0.5);
	position: absolute; bottom: -15px;
	z-index: 10;
}
#slider {
	width: 100%;
	background-color: #aaa;
	border-bottom: 3px solid #08f;
	z-index: 1;
	position: relative;
}
#slider img { width: 100%; height: auto; display:block; position: absolute; top: 0; left: 0; z-index: 1; }
#slider img:first-child { position: relative; }
#slider img.active { z-index: 3; }
#slider img.previous { z-index: 2; }

#page > aside { width: 25%; float: left; margin-top: 60px;}
#mobile-mainmenu { display: none; width: 100%; margin: 10px auto; padding: 0 20px; height: 2em; line-height: 2em; font-size: 1.3em; text-align:-moz-center; box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
    text-align:-webkit-center; text-align: center; }
#mobile-mainmenu select { width: 100%; height: 2em; font-size: 1.3em; }
#mainmenu {
	list-style-type: none;
}
#mainmenu li { 
	height: 40px; margin-bottom: 15px;
}
#mainmenu li a { 
	height: 40px; line-height: 40px;	
	background-color: #08f;
	border-radius: 2px;
	color: #fff;
	display: inline-block;
	width: 80%;
	padding: 0 10px;
	text-decoration: none;	
	font-size: 1.2em;
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
	-moz-transition: 0.3s ease;	
}
#mainmenu li a:hover { 
	/* background-color: #5af; */
	background-color: #f93;
	color: #000;
}
#mainmenu li a span { 
	display: inline-block;
	position: relative;
	top: 5px;
	font-size: 1.6em;
	margin-right: 10px;
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
	-moz-transition: 0.3s ease;	
}
#mainmenu li a:hover span { 
	margin-right: 20px;
}
#legend {
position: relative;
width: 100%;
text-align: center;
top: -15px;
z-index: 10;
}
#legend .item {
	display: inline-block;
	background: #3af;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	border: 3px solid #08f;
	margin: 0 10px;
}
#legend .item.active {
	background: #f93;
}
#content { width: 75%; float: right; margin-top: 60px; }
#content h1 {
	color: #08f;
	font-size: 2em;
	border-top: 2px solid #08f;
	margin-bottom: 1em;
	padding-top: 0.3em;
	display: block;
}
#content p {
	text-align: justify;
	margin-bottom: 0.6em;
}
#footer {
	margin-top: 60px;
	background: #0080ef url(../img/footer-bg.png) repeat-x top left; 
	min-height: 200px;
	border-radius: 6px 6px 0 0;
	padding: 40px 20px 20px;
	color: #fff;
}
#footer .footer-menu { list-style-type: none; margin: 0; padding: 0; margin-top: 1em;}
#footer .footer-menu li { float: left; margin-right: 20px; }
#footer .footer-menu li a { color: white; text-decoration: none; font-size: 1.2em;}
#footer .footer-menu li a:hover { text-decoration: underline; }
#footer .elka {
	position: absolute; right: 20px; bottom: 20px; text-align: right; font-size: 0.8em; color: #3bf;
}
#footer .elka a { color: #3bf; text-decoration: none; }
#footer .elka a:hover { color: #8cf; text-decoration: underline; }

aside > .sidebar-widget { width: 90%; background: #eee; border-radius: 4px; min-height: 70px; box-shadow: inset 0 0 10px #ccc; margin: 10px 0;}


@media screen and (max-width: 1000px) {
     #header .topmenu {
			right: 20px;
	}
	#header > a { margin-left: 20px; }
}
@media screen and (max-width: 730px) {
	#header { text-align: center; }
	#mobile-mainmenu { display: inline-block; }
	#content { width: 100%; padding: 0 20px; margin: 0 auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin-top: 30px !important; }
	#header .topmenu { display: none; }	
	#footer { text-align: center;  }
	#footer .footer-menu { width: center; }
	#footer .footer-menu li { float: none; width: 100%; }
	#footer .elka { position: absolute; left: 0; width: 100%; bottom: 20px; text-align: center; font-size: 0.8em; color: #3bf; }
	#content { }
	
	#page > aside { float: none; clear: both; width: 100%; padding: 20px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
	aside > .sidebar-widget { width: 100%; }
	#mainmenu { display: none; }
	#header .frametopborder { border-radius: 0; }
	#footer { border-radius: 0; }
	#legend { display: none; }
}
@media screen and (min-width: 731px) and (max-width: 1000px) {
	#header .frametopborder { border-radius: 0; }
	#footer { border-radius: 0; }
	aside { padding-left: 20px; width: 22%; }	
	#content { padding-right: 20px; width: 69%; }
}
@keyframes rotate { 
	from { transform: rotate (0deg); } 
	to { transform: rotate(360deg); }
}
@-webkit-keyframes rotate { 
	from { -webkit-transform: rotate (0deg); } 
	to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotate { 
	from { -moz-transform: rotate (0deg); } 
	to { -moz-transform: rotate(360deg); }
}
@-o-keyframes rotate { 
	from { -o-transform: rotate (0deg); } 
	to { -o-transform: rotate(360deg); }
}
@-ms-keyframes rotate { 
	from { -ms-transform: rotate (0deg); } 
	to { -ms-transform: rotate(360deg); }
}