/*
 * unipi-blue.css
 * Copyright 2013-2017 Federico Stra
 * 
 */

/*
 * Google fonts
 * http://www.google.com/fonts
 */

@import url(http://fonts.googleapis.com/css?family=Abel|Playfair+Display+SC|Open+Sans:700);

/*
 * Personal fonts
 */

@font-face {
	font-family: BrockScript;
	src: url("../fonts/BrockScript.ttf") format("truetype");
}

/*
 * Basic layout
 */

body {
	width: 840px;
	margin: auto;
	padding: 8px;
	font-family: Abel, sans-serif;
	font-size: 12pt;
	line-height: normal;
	background-color: #f9fbff;
	background-image: url("../img/cherubino_white.png");
	background-image: url("../img/cherubino_white.svg"), linear-gradient(to right, white, #f0f4ff);
	background-repeat: no-repeat;
	background-position: right center;
	background-origin: content-box;
	background-size: contain;
	background-attachment: fixed;
}

header,
nav,
footer {
	background-color: #104f8c; /* pantone 541 */
	box-shadow: 4px 4px 8px gray;
	/*font-family: Biolinum;*/
	color: white;
}

/*
 * header
 */

header {
	background-image: url("../img/cherubino_white.png");
	background-image: linear-gradient(transparent, transparent), url("../img/cherubino_white.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-origin: content-box;
	background-size: contain;
	padding: 16px;
	-webkit-border-radius: 20px 120px 120px 20px;
	-moz-border-radius: 20px 120px 120px 20px;
	border-radius: 20px 120px 120px 20px;
}
header h1 {
	font-family: BrockScript, serif;
	font-size: 56pt;
	font-weight: normal;
	/*text-shadow: 0px 0px 1px white;*/
	margin: 0px;
}
header p {
	margin: 0px;
}
header #unipi {
	display: inline;
	font-family: "Playfair Display SC", serif;
	font-size: large;
}
header #dm {
	display: inline;
}
header #dm::before {
	content: "- ";
}

/*
 * nav
 */

nav {
	padding: 8px;
	margin: 8px 16px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
nav h1 {
	display: none;
}
nav ul {
	margin: 0px;
	padding: 0px;
}
nav li {
	display: inline-block;
	margin: 4px 8px;
}
nav a {
	text-decoration: none;
	background-color: white;
	color: #104f8c;
	font-family: "Open Sans", sans-serif;
	font-size: 16pt;
	font-weight: bold;
	text-align: center;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	box-shadow: 2px 2px 4px gray inset;
	padding: 4px;
	/*padding-left: 40px;
	background-position: 4px center;
	background-size: 32px;
	background-repeat: no-repeat;*/
}

/*
 * footer
 */

footer {
	padding: 4px 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	margin-top: 120px;
	font-size: small;
	clear: both;
}
footer #contact {
	float: left;
}
footer #validation {
	float: right;
}
footer #copyright {
	clear: both;
	font-size: x-small;
}
footer h1 {
	font-family: "Open Sans", sans;
	font-size: large;
	margin: 12px 0px;
}
footer #contact address dt {
	display: inline;
	float: left;
	margin-right: .5ex;
}
footer #contact address dd {
	display: block;
	margin: 0px;
	margin-left: 4.5em;
}
footer #validation a {
	display: block;
	margin: 12px 0px;
}
footer #validation a img {
	width: 32px;
	height: 32px;
}
footer a {
	color: white;
}
footer p {
	text-align: center;
	font-size: small;
}

/*
 * main
 */

article {
	margin: 0px 20px;
	text-align: justify;
}
article h1, article h2, article h3 {
	font-family: "Open Sans", serif;
}
article h2 {
	margin-left: 1em;
}
article h3 {
	margin-left: 2em;
}
article time {
	display: block;
	margin-top: 1em;
	margin-left: 2em;
	margin-bottom: .6ex;
	color: gray;
}
article p {
	margin: 0px 0px .6ex 2em;
	padding: 1px 6px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-indent: 1em;
	box-shadow: 2px 2px 4px #BFBFBF, -2px -2px 8px #F2F2F2;
	box-shadow: 2px 2px 4px rgba(0,0,0,.25), -2px -2px 8px rgba(0,0,0,.05);
	background-color: white;
	background-color: rgba(255,255,255,.65);
}
article figure {
	display: block;
	text-align: center;
	font-size: small;
	margin-left: auto;
	margin-right: auto;
	width: 500px;
	margin-top: .6em;
	margin-bottom: 1em;
	padding: 0.7em;
	border-radius: 5px;
	box-shadow: 2px 2px 4px #BFBFBF, -2px -2px 8px #F2F2F2;
	box-shadow: 2px 2px 4px rgba(0,0,0,.25), -2px -2px 8px rgba(0,0,0,.05);
	background-color: white;
	background-color: rgba(255,255,255,.65);
}
article figure figcaption {
	text-align: center;
	font-style: italic;
}

/*
 * collapsible divs
 */

.toggle-box {
	display: none;
}

.toggle-box + label {
	cursor: pointer;
	display: block;
	margin-left: 2em;
	margin-bottom: 5px;
}

.collapsible-wrapper {
	height: 0px;
	overflow: hidden;
}

/*.toggle-box:checked + label + div {
	display: block;
}*/

.toggle-box + label:before {
	background-color: #4F5150;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	color: #FFFFFF;
	content: "+";
	display: block;
	float: left;
	font-weight: bold;
	height: 20px;
	line-height: 20px;
	margin-right: 5px;
	text-align: center;
	width: 20px;
}

.toggle-box:checked + label:before {
	content: "\2212";
}

/*
 * animations
 */

header h1 {
	transition: text-shadow 1s ease .25s;
}
header:hover h1 {
	text-shadow: 2px 2px 12px rgba(255,255,255,.4);
}
/*nav {
	transition-property: -webkit-transform, transform;
	transition-duration: .25s;
	transition-delay: .1s;
	transition-timing-function: ease;
}
nav:hover {
	-webkit-transform: rotate(-.25deg) scale(1.015);
	transform: rotate(-.25deg) scale(1.015);
}*/
nav a{
	transition-property: box-shadow, -webkit-transform, transform;
	transition-duration: .5s;
	transition-delay: .1s;
	transition-timing-function: ease;
	display: inline-block;
}
nav a:hover {
	box-shadow: 4px 4px 12px gray inset;
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
	transition-timing-function: ease;
}
article h1, article h2, article h3 {
	transition-property: text-shadow;
	transition-duration: .75s;
	transition-delay: .2s;
}
article h1:hover, article h2:hover, article h3:hover {
	text-shadow: 1px 1px 4px white;
}

.collapsible-wrapper {
	transition-property: height;
	transition-duration: .75s;
	transition-timing-function: ease;
}

/*
 * mobile optimization
 */

@media handheld {
	body {
		width: 94%;
		padding: 12px 3%;
		margin: 0px;
	}
	header {
		background-image: url("../img/cherubino_white.png");
		background-image: linear-gradient(transparent, transparent), url("../img/cherubino_white.svg");
		background-repeat: no-repeat;
		background-position: right top;
		background-size: 48px;
		padding: 16px;
		border-radius: 12px;
	}
	header h1 {
		font-size: 32pt;
		margin-right: 48px;
	}
	nav {
		margin: 8px 0px;
	}
	footer {
		margin-top: 3em;
	}
	article {
		text-align: left;
		margin: 0px;
	}
	article h1, article h2, article h3, article time, article p {
		margin-left: 0px;
	}
	article time {
		text-align: right;
	}
} /* End of @media handheld */

@media handheld and (max-width: 400px) {
	header #unipi {
		display: block;
		font-size: large;
	}
	header #dm {
		display: block;
	}
	header #dm::before {
		content: "";
	}
	footer #contact, footer #validation {
		float: none;
	}
	footer #validation {
		text-align: center;
	}
	footer #validation a {
		display: inline;
		margin: 0px 12px;
	}
}

/*
 * fonts
 */

/*
@font-face {
	font-family: Biolinum;
	src: url("../fonts/LinBiolinum_Re-0.6.4.ttf") format("truetype");
}
@font-face {
	font-family: Biolinum;
	font-weight: bold;
	src: url("../fonts/LinBiolinum_Bd-0.5.5.ttf") format("truetype");
}
@font-face {
	font-family: Libertine;
	src: url("../fonts/LinLibertine_Re-4.7.5.ttf") format("truetype");
}
@font-face {
	font-family: LibertineSC;
	src: url("../fonts/LinLibertine_C-4.0.4.ttf") format("truetype");
}
*/