/* GLOBAL STYLES */
body,h1,h2,h3,h4,h5,h6,p,form,img,ul{border:0;margin:0;padding:0}
body{padding:0;background:#f0e4cd;text-align:center;color:#111;font: 0.9em Arial;line-height:150%;}

/* PAGE ELEMENTS */
h1{font:normal 29px arial,sans-serif;padding:15px 0px 10px;}
h2, h3, h4{padding:40px 0 20px;}
h2 {font-size:23px;}
h3 {font-size:20px;}
#page p,#page ul, #page li, #page ul li{font-size:1.1em;line-height:150%;}
#content ul{margin-right:15px;}

table{font-size:1em;}
.input,select,textarea{border:1px solid #999;}

a{color:#0000ee;text-decoration:none;}
a:visited{color: #800080;text-decoration:none;}
a:hover{text-decoration:underline;}

.clear{clear:both;height:0;font-size:0;line-height:0}
.left{text-align:left}
.right{text-align:right}
.submit{font-size:1em;}

/* MAIN */
#container{max-width:970px;margin:0 auto;background:#fff;text-align:right;border:1px solid #ccc; box-shadow: 0 0 5px rgba(204, 204, 204, 204);}
#header{max-width:970px;margin:0 auto;height:70px;border-bottom:1px solid #eee;background:#ffffff url('http://www.maamario.com/templates/img/1.jpg') no-repeat top left ;}
#logo {float:right;margin:10px 15px;}
#logo a{font:normal 40px arial,sans-serif;color:#000;text-decoration:none;}
#logo a:visited{color:#000;}
.search {float:right;margin:22px 60px;}


#page{float:left;max-width:730px;margin:0px 15px;padding:0 0 7px;background-color:#fff;text-align:right; }
#content{padding: 0;margin: 0;}
blockquote {background:#f2e6d7;padding:10px;border-right:1px solid #d3ab7a;border-bottom:1px solid #e3cbac;}
#content ul {margin-top:15px;margin-bottom:15px;}
#content a {text-decoration:underline;}


/* TOP MENU */
.nav {margin:5px 0 0;padding:5px 15px 5px 0;background:#fff;}
.nav a {margin:5px 0;font-size: 16px;}
#navipath {margin:5px 0;}
#navipath a{text-decoration:underline;}


/* MENU COLUMN */
#column{float:right;width:199px;background:#eee;}


/* MENU */
#menu, #menu4{margin:0 0 10px;text-align:right;}
#menu ul, #menu4 ul{margin:0;padding:0px 10px 2px;list-style:none;}
#menu a, #menu4 a{text-decoration:none;display:block;display:inline-block;width:89%;padding:6px 0;border-top:1px dotted #ccc;font-size:14px;}
#menu .l1 a, #menu4 .l1 a{border-top:0;}
#menu a:hover, #menu4 a:hover{text-decoration:underline;color:#0000ff;}

#menu .sub1, #menu4 .sub1{margin:0;padding:0 10px;border:0;}
#menu .sub1 a, #menu4 .sub1 a{display:block;width:75%;border:0;padding:5px 0;font-size:12px;}
#menu .sub2 a, #menu4 .sub2 a{padding-left:12%;font-size:11px;}
#menu .sub3 a, #menu4 .sub3 a{padding-left:15%;}
* html #menu a, * html #menu4 a, * html #menu .sub1 a, * html #menu4 .sub1 a{width:100%;}
#menu .selected, #menu4 .selected{text-decoration:underline;font-weight:bold;}
#menu .bottom, #menu4 .bottom{height: 5px;}


/* SUB PAGES LIST STYLES */
.subpagesList li{list-style:none;clear:right;float:right;width:96%;background:#eee;border-right:1px solid #999;border-bottom:1px solid #ccc;margin:3px 0;padding:5px 2%}
.subpagesList li .photo{float:right;margin:0 0 5px 6px}


* html .subpagesList li{width:100%;}
.subpagesList li .photo{float:right;margin:0 6px 5px 0;}
.subpagesList li img{border:2px solid #dcdac9;}
.subpagesList li strong{padding-bottom:2px;}
.subpagesList li ul, .subpagesList li ol{float:left;margin:0 0 0 30px;padding:0;}
.subpagesList li li{padding:0;border-left:0;}
.subpagesList li ul{list-style:disc;}
.subpagesList li ol{list-style:decimal;}

/* IMAGES STYLES */
.imagesList{list-style:none;width:350px !important;margin:0 10px;}
.imagesList li{margin:0 0 10px 0;background:inherit;}
.imagesList li img{border:0;width:350px !important;}

#imagesList1{float:left;}
#imagesList2{clear:right;float:right;}

.pages{text-align:right;padding:8px 0}
.page{float:left;border:1px solid #E4DFD8;margin:10px}
.pagecenter{text-align:center;border:1px solid #5b5b5b;margin:10px}


/* FILES LIST STYLES */
#filesList{padding:5px 0;font-size:0.917em;list-style:none;vertical-align:middle;}
#filesList li{margin:0 0 4px;}
#filesList img{margin:0 8px 0 0;vertical-align:middle;}
#filesList em{background:inherit;color:#5b5b5b;}

.topad {clear:both;display:block;}

/* FOOTER */
#foot{background:#fff;border-top:1px dotted #ccc; clear:both;margin:0;width:100%;padding:0;font-size:0.917em;color:#444; /*background:#eee;border-right:1px solid #ccc;*/}
#copy{text-align:center;padding:5px 0;font-size:11px;}
.flink{text-align:center;padding-right:10px;margin:5px 0;}
.foot{float:left;padding-left:10px;}

#menu1{float:right;list-style:none;margin:12px 0 12px 15px}
#menu1 li{float:left;padding:0 10px}
#menu1 li a{font-weight:bold;font-size: 1.08em;}
#menu1 li a:hover,#menu1 .selected{text-decoration:underline;}

#page .tS{float:left;margin:0 0 3px;}
#page .tS a{padding:0 1px;font-weight:normal;text-decoration:none;}
#page .tS0{font-size:0.917em;}
#page .tS1{font-size:1.08em;}
#page .tS2{font-size:1.333em;}



/*-----------------------------------------------------------------------------------*/
/*	RESPONSIVE
/*-----------------------------------------------------------------------------------*/

@media (max-width: 400px) { 
#page .tS a {
    padding: 0 14px;
}
#container, * html #main, #main, #head2, #foot, #head3, #menu2, #content, #column {
box-sizing:border-box;
}
body {
    padding: 5px;
   
}
#container{
width:100%;
margin:0 auto;
padding:0;
}
#navipath {
    padding: 4px 10px 8px 0;
}
#main, * html #main {
width:100%;
margin:0 auto;
padding:4px; 
}
#page .tS {
    margin: 10px 0 3px;
}
#content {
    float: none;
    display: block;
	width: 100%;
       padding: 10px 10px 60px 10px;
    text-align: right;
}

#column {
    clear: both;
    float: none;
    display: block;
	width: 100% !important;
    padding: 20px;
	
}

#foot {
    clear: both;
    float: right;
    display: block;
    max-width: 100%;
	height: auto;
    padding: 20px 10px;
   
    font-size: 1.08em;
    line-height: 1.5em;
}
.rfoot {
	float:none;
    padding-right:0;
}
.lfoot {
    padding-left: 0;
}


#head2 {
width:100%;
height:auto;
display:block;
float:right;
}
#head3 {
    float: right;
    width:100%;
    border: none;
}
#menu2 {
    width:100%;
	padding:0;
	margin-right: 0; 
	   
}
#menu3, #menu4 {
    padding: 0; width:100%;
}
	nav ul {
		  width:100%;
	}
.subpagesList {
    float: none;
    width: 100%;
}
.subpagesList li {
    float: none;
    width: 100%;
    margin: 10px 0;
    padding: 8px 0 10px 0;
}
.subpagesList li a, .subpagesList li p {
    padding: 0 10px;
}
#page div.content {
    clear:both;
}
#head3 label {
  	display: block;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    left: 40px;
    top: 40px;
	}
  
#head3 label:after{
    content: '';
    display: block;
    width: 30px;
    height: 5px;
    margin: 7px 5px;
    box-shadow: 0px 10px 0px #fff, 0px 20px 0px #fff;
}

	#head3 [type="checkbox"]:checked ~ ul {
  		display: block;
  		z-index: 9999;
		  left: 0;
	}

	#menu2 a {
    display: block;
    float: right;
    height: 40px;
	 width: -moz-calc(100% - 32px);
    width: -webkit-calc(100% - 32px);
    width: calc(100% - 32px);
    padding: 0 16px;
    font-weight: normal;
    line-height: 40px;
    text-decoration: none;
}

	
#menu3 a, #menu4 a {
    padding: 12px 6% 12px 0;
    font-size: 1.2em;
}
#menu3 .sub1 a, #menu4 .sub1 a {
    display: block;
    width: 86%;
    padding: 12px 6% 12px 0;
    margin-right: 10%;
    font-size: 1em;
}


.fl-left , .fl-right {float:none;}

#menu, #menu4{width:100% !important;}
#menu ul, #menu4 ul{width:100% !important;}




h1 {padding-right:10px;}
#header, #container, #page, #column {max-width:100%;}
.content img {max-width:99% !important; height:auto !important;}
#logo{}
.search {margin:10px auto;padding:5px;clear:both;}

}