/* ############################### */
/* ########## PAGE LAYOUT ######### */
/* ############################### */

body {
	background-color: #fffdda;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	margin: 1%;
}

h1 {
	font-size: 1.40em;
	color: #930c1b;
}

h2 {
	font-size: 1.25em;
	color: #930c1b;
}

h3 {
	font-size: 1.10em; 
	color: #930c1b;
}

h4 {
	font-size: 1.00em; 
	color: #930c1b;
}

.mylogo {
	display:block;
	position: relative;
	width:100%;
    border-top: 8pt solid #55648b;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;

}

/* ########## background-image ######### */

.mylogo:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.25;
    background-image: url('logo_bg.png');
	background-position: 50% 50%;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

.mylogo img {
	max-width: 96%;
	max-height: 4em;
}

iframe {
  max-width: 96%;
}

/* ########## /background-image ######## */

.mybox_left, .mybox_right, .mybox_center {
    border-bottom: 2pt solid #2b887c;
	margin: 2em 1.15% 0.5em 1.15%;
}

.mybox_left {
	width: 100%;
	max-width: 47.65%;
    float: left;
}

.mybox_right {
	width: 100%;
	max-width: 47.65%;
    float: right;
}

.mybox_center {;
	max-width: 100%;
    float: initial;
}

.mybox_left a, .mybox_right a, .mybox_center a {
	font-weight: bold;
	color: #354783;
	text-decoration: none;
}

.mybox_left a:hover, .mybox_right a:hover, .mybox_center a:hover {
	font-weight: bold;
	text-decoration: none;
	color: #cc0000;
}

.mybox_left img, .mybox_right img, .mybox_center img {
	max-width: 96%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.myboxtitle {
	display:block;
    text-align: center;
	text-transform: uppercase;
	font-weight: bold;
    background-color: #E1DE5E;
	line-height: 2em;
}

.mybox_center .myboxtitle {
	color: #930C1B;
	font-size: large;
	font-weight: bold;
	background-color: #E4E4E4;
}

.myboxcontent {
	padding:1% 1% 2% 1%;
}

.mybox_center .myboxcontent {
	padding: 1.5em 0.5% 1em 0.5%
}

.myboxcontent form {
	padding:0.5em 0.5em 0.5em 0.5em;
}

.mysrctext {
    width: 100%;
	max-width: 60%;
	border: 1px solid rgb(204, 204, 204);
	padding: 0.5em;
	background: rgb(248, 248, 248) none repeat scroll 0% 0%;
	height: 1.5em;
	margin-right: 2em;
	margin: 0.5em 2em 0.5em 0;
}

.mysrcbutton {
	border: 1px solid rgb(204, 204, 204);
	background: rgb(226, 232, 229) none repeat scroll 0% 0%;
	height: 2.6em;
	width: 6em;
	margin: 0.5em 0 0 0;
}

.myiconlabel{
	float: left;
	width: 80%;
	padding: 1.5em 0;
}

img.myicon  {
	width: 4em;
	height: auto;
	float: right;
	opacity: .6;
}

a:hover img.myicon {
    opacity: 1;
}

/* ################################## */
/* ########## Sociable Extension ########## */
/* ################################## */


.social {
	padding: 0.5em 0.5em 0.5em 0.5em;
}

.mybox_center .social {
	padding: 0em;
}

.social span {
	max-width: 35%;
	display: inline;
	vertical-align: middle;
}

.social ul {
	padding-left: 0em;
	display: inline-block;
}

.social li {
    padding: 0.5em;
	vertical-align: middle;
	list-style-type: none;
	display: inline-block;
}

.social img {
	opacity: .4;
	float: none;
	width: 32px;
	height: 32px;
}

.social a:hover img {
    opacity: 1;
}



/* ############################# */
/* ########## MENU BAR ########## */
/* ############################# */

/*First of all, some basic styling to the ul and li elements to remove bullet points and other list styles. The inline-block and float:left attributes make the list display horizontally.*/

/*Strip the ul of padding and list styling*/
ul#menu, 
ul.hidden {
	z-index: 1;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
	background-color: #55648B;
}

/*Create a horizontal list with spacing*/
ul#menu li {
    display: inline-block;
    float: left;
	min-width: 14%;
}

/*The following attributes are almost exclusively for aesthetic appeal. If you intend to style this menu to your liking then this is the section of code to fiddle about with.*/

/*Style for menu links*/
ul#menu li a {
    display: block;
    height: 3em;
	margin-right: 0.5em;
    text-align: center;
    line-height: 3em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: rgb(255, 255, 255);
    text-decoration: none;
}

/*Hover state for top level links*/
ul#menu li:hover a {
    background: #7491DD none repeat scroll 0% 0%;
}

/*Style for dropdown links*/
ul#menu li:hover ul.hidden a {
    background: #D8E1E6 none repeat scroll 0% 0%;
    color: rgb(47, 48, 54);
    height: 3em;
    line-height: 3em;
	text-align: left;
	overflow: hidden;
}

/* --------  LASTCHILD ULTIMO ELEMENTO DEL MENU -------- */
/*Style for dropdown links*/

ul#menu li:last-child  ul.hidden {
	margin-left: -15.5em;
}
/* --------  /LASTCHILD-------------------------------------------------- */

/*Hover state for dropdown links*/
ul#menu li:hover ul.hidden a:hover {
    background: #7491DD none repeat scroll 0% 0%;
    color: rgb(255, 255, 255);
}

/*Next up, some styling for the dropdown links. The first class defines that the dropdown will not be visible by default. And the final class says that the dropdown element will become visible on top level link hover.*/

/*Hide dropdown links until they are needed*/
ul#menu li ul.hidden {
    display: none;
}

/*Make dropdown links vertical*/
ul#menu li ul.hidden li {
    display: block;
    float: none;
}

/*Prevent text wrapping*/
ul#menu li ul.hidden li a {
    width: auto;
    padding: 0px 20px;
}

/*Display the dropdown on hover*/
ul#menu li a:hover + ul.hidden,
ul#menu li a + ul.hidden:hover {
    display: block;
	position: absolute;
}

/*To create button prompting mobile users to click a button before displaying the whole menu*/

/*Style 'show menu' label button and hide it by default*/
/*MIO show-submenu*/
.show-menu { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: rgb(255, 255, 255);
    background: rgb(44, 64, 116) none repeat scroll 0% 0%;
    text-align: center;
    padding: 10px 0px;
    display: none;
}

.show-submenu { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 10px 0px;
    display: none;
}

/*Hide checkbox*/
input[id^=show-menu][type="checkbox"], 
input[id^=show-submenu][type="checkbox"]
{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[id^=show-menu][type="checkbox"]:checked ~ #menu {
    display: block;
}




/* ################################################################### */
/* ########################### Responsive Styles ########################### */
/* ################################################################### */

/* Diminuisco il font del menu  */

@media screen and (max-width: 885px) {
	ul#menu li a  {
		font-size: 0.95em;
	}
}

/* Using a media query I target devices with a max width of 760px and make a few changes to the code. */

@media screen and (max-width: 760px) {

	/* Resetto il font del menu  */
	ul#menu li a {
		font-size: 1em;
		margin-right: 0em;
	}

	/*Make dropdown links appear inline*/
    ul#menu {
        position: static;
        display: none;
    }
	
	/*Create vertical spacing*/
    ul#menu > li {
        margin-bottom: 0px;
    }
	
	/*Make all menu links full width*/
    ul#menu > li,
	ul#menu > li a {
        width: 100%;
		text-align: left;

    }

	/*Make all menu links full width*/
    ul#menu > li a {
		padding-left: 5px;
    }

	/* --------  LASTCHILD ULTIMO ELEMENTO DEL MENU ##RESET## -------- */
	/*Style for dropdown links*/
	
	ul#menu li:last-child  ul.hidden {
		margin-left: 0;
	}

	/* --------  /LASTCHILD------------------------------------------------------------------ */

	/*MIO Display Dropdown when clicked on Parent Lable --  [id^=show-submenu]:checked*/
	ul#menu li [id^=show-submenu] + a, 
	ul#menu li [id^=show-submenu] + a:hover {
		display: none;
	}

	/*MIO Display Dropdown when clicked on Parent Lable --  [id^=show-submenu]:checked*/
	ul#menu li [id^=show-submenu]:checked ~ ul.hidden, 
	ul#menu li [id^=show-submenu]:checked ~ ul.hidden:hover {
		display: block;
		position: inherit;
		background: #D8E1E6 none repeat scroll 0% 0%;
	}

	ul#menu li [id^=show-submenu]:checked ~ ul.hidden li a {
		color: rgb(0, 0, 0);
		overflow: hidden;
		line-height: 3em;
		height: 3em;
	}
	
	ul#menu li [id^=show-submenu]:checked ~ ul.hidden li a:hover {
		color: rgb(255, 255, 255);
		line-height: 3em;
		height: 3em;
	}

	/*MIO*/
	ul#menu li:hover ul.hidden a:hover {
		background: #7491DD none repeat scroll 0% 0%;
		color: rgb(255, 255, 255);
	}

	/*To create button prompting mobile users to click a button before displaying the whole menu*/
	
	/*Display 'show menu' link*/
    .show-menu, 
	.show-submenu {
        display: block;
		text-align: left;
		padding-left: 5px;
		line-height: 30px;
		height: 30px;
    }
	
    .show-submenu:hover {
        background: #55648B none repeat scroll 0%
    }	

    .mybox_left, .mybox_right {
        max-width: 99%;
		float: left;
        margin: 1em 1% -1em 1.3%;
        border-bottom: 0px none;
    }

    .mybox_center .myboxcontent {
        padding: 1.5em 0.5% 1.5em 0.5%;
    }

}