/*
================================================================================================================================
Title:				    Style sheet - walden.css
Author:				    Michal Balazi
E-mail:				    michal_balazi@yahoo.com
Website:			    http://www.musenuovo.co.uk
Created:			    26th August 2012
================================================================================================================================
*/

/* Reset Browsers setting
----------------------------------------------------------- */

/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form fieldset, input, p, blocquote, th, td
{margin:0; padding:0;}

/* Normalizes font size for headers */
h1, h2, h3, h4, h5, h6
{font-size: 100%;}

/* Removes list-style from lists */
ol, ul
{list-style: none;}
.italic { font-style: italic; }
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{font-style: normal; font-weight: normal;}
/*

/* Reset tables */
table
{border-collapse: collapse; border-spacing: 0;}

/* Removes border from fieldset and img */
fieldset, img
{border: 0;}

/* Left-aligns text in caption and th */
caption, th
{text-align: left;}

/* Removes quotation marks from q */
q:before, q:after
{content:'';}


.clear {
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
height:0;
width:0;
}


/* Page Layout
----------------------------------------------------------- */
body{font-family: Verdana, Arial, Helvetica, sans-serif;font-size:13px;color:#000;border-top:#c50019 28px solid; background:#fff; }
#container{width:980px; max-width: 100%; position:relative;margin:0 auto;padding:10px 10px 75px 10px;background:#fff url(../img/background.png) no-repeat bottom center;}



/* Navigation
----------------------------------------------------------- */
nav#menu{height:50px;width:100%;background:#000;}
nav#menu ul{width:980px; max-width: 100%; height:50px;margin:0 auto;position:relative;padding:15px 0;}
nav#menu li a{color:#fff;float:left;font-weight:bold;font-size:14px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;padding:2px 19px;border-right:1px solid #fff;}
nav#menu #current a{color:#c50019;}
nav#menu .last a{border:none;}



/* Header
----------------------------------------------------------- */
header { width: 100%;  }
header::after { clear: both; width: 100%; }
header h1 a{float: left; width:241px;height:193px;background-image:url(../img/logo.jpg); background-repeat: no-repeat; background-position: center; background-size:contain; margin:40px 0 60px;text-indent:-9999px;}
header .banner { float: right; height: 193px; margin:40px 0 60px; }
.clr { clear: both; width: 100%; }

/* Content
----------------------------------------------------------- */
h2{font-weight:bold;font-size:20px;color:#c50019;margin-bottom:30px;}
h3{font-weight:bold;font-size:15px;color:#102983;margin-bottom:15px;}
h4{font-weight:bold;font-size:15px;color:#c50019;}
i{font-style:italic;}

article {width:590px;border-right:2px solid #808386;padding-right:15px;float:left;}
aside {float:left;width:330px;padding-left:20px;}
article.w700{width:710px;border-right:2px solid #808386;padding-right:15px;float:left;}
aside.w200{float:left;width:210px;padding-left:20px;}
article, aside, article.w700, aside.w200 { max-width: 100% !important; }
#container p, #container ul, #container ol{margin-bottom:15px;}
.small{font-size:11px;}
#container em{font-weight:bold;}
#container ul li{background:url(../img/list.png) no-repeat 0 7px;padding-left:10px;margin-bottom:10px;}

aside h3{margin-top:20px;}
.contact{font-size:15px;}


.construction .small, .schools .small, .case .small{font-size:12px;}
.links a{margin-right:7px;}

aside img { display: block; margin: 0 auto 5px; }
/* Footer
----------------------------------------------------------- */
footer{height:70px;width:100%;background:url(../img/bg-footer.png) repeat;margin-top:-70px;z-index:100;position:relative;}
footer ul { list-style: none; color: #FFF; text-align: center; width: 100%; margin: 20px 0; }
footer ul li { display: inline-block; padding: 20px 10px 5px; }
footer ul li a { color: #FFF; text-decoration: none; }
#sliiider-toggle, .slider-exit, #mobile-menu { display: none; }


/*responsive styles */
img { max-width: 100% !important; height: auto; }
@media screen and (min-width: 769px) and (max-width: 1024px) {
	article, article.w700, header img { max-width: 65% !important; }
	aside, aside.w200, header h1 a { max-width: 32% ; }
	footer { height: auto; }
}
@media screen and (min-width: 861px) and (max-width: 980px) {
	nav#menu li a { padding: 2px 14px; }
		.banner { height: auto !important; }
}
@media screen and (min-width: 768px) and (max-width: 860px) {
	nav#menu li a { padding: 2px 7px; }
		.banner { height: auto !important; }
	aside { max-width: 30% !important; }
	footer { height: auto; }
}
@media screen and (min-width: 698px) and (max-width: 768px) {
	header h1 a { background-position: center top; }
	article, article.w700 { max-width: 62% !important; }
	header img { max-width: 70% !important; }
	aside, aside.w200 { max-width: 32% !important; }
	header h1 a { max-width: 25% !important; }
	aside, aside.w200 { float: right; }
	nav#menu li a { font-size: 13px; padding: 2px 9px; }
	footer ul li {
    display: inline-block;
    padding: 20px 4px 5px;
		font-size: 11px; }
	.banner { height: auto !important; }
	footer { height: auto; }
}
@media screen and (min-width: 641px) and (max-width: 697px) {
	header h1 a { background-position: center top; }
		article, article.w700 { max-width: 62% !important; }
	header img { max-width: 70% !important; }
	aside, aside.w200 { max-width: 32% !important; }
	header h1 a { max-width: 25% !important; }
	aside, aside.w200 { float: right; }
	nav#menu li a { font-size: 12px; padding: 2px 5px; }
	footer ul li {
    display: inline-block;
    padding: 20px 4px 5px;
		font-size: 11px; }
		.banner { height: auto !important; }
		footer { height: auto; }
}
@media screen and (max-width: 640px) {
	footer { height: auto; }
	.banner { height: auto !important; }
	/* nav */
	#sliiider-toggle { width: 32px; height: 32px; float: right; background-image: url('../img/menu-icon.png'); margin-top:8px;  position: relative; z-index: 999; display: block; margin-right: 5px; }
	#sliiider-toggle span, .slider-exit span { display: none; }
	.slider-exit { height: 32px; width: 100%; display: block; background: url('../img/close.png') no-repeat right bottom; margin-top: 5px; margin-bottom: 10px; margin-right: 5px; }
	#menu ul { display: none; }
	#mobile-menu {display: block; background: #000; width: 100%; }
	#mobile-menu ul { width: 75%; text-align: right; margin-right: 20px; float: right; }
	#mobile-menu li { border-bottom: 1px solid #999; padding: 5px 0; font-size: 16px;  }
	#mobile-menu a { color: #FFF; text-decoration: none; }
	#container { padding-left: 0; padding-right: 0; }
	header h1 a {
		width: 241px;
		height: 193px;
		background: url(../img/logo.jpg) no-repeat 0 0;
		margin: 20px auto 20px;
		text-indent: -9999px;
		display: block;
		text-align: center;
		float: none; }
	article, aside, article.w700, aside.w200 { width: 100% !important; }
	aside img { display: block; margin: 10px auto; }
	article, aside { padding-left: 0;padding-right: 0;}
}