/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html, body {	
	width:100%;
	height:100%;
	background: #b1a29a; /* Old browsers */
	background: -moz-linear-gradient(top,  #b1a29a 0%, #dfd7d2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b1a29a), color-stop(100%,#dfd7d2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #b1a29a 0%,#dfd7d2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #b1a29a 0%,#dfd7d2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #b1a29a 0%,#dfd7d2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #b1a29a 0%,#dfd7d2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1a29a', endColorstr='#dfd7d2',GradientType=0 ); /* IE6-9 */	
	background-repeat: no-repeat;
    background-attachment: fixed;
	min-width:980px;
}

a, a:hover, a:active, a:focus, a img {
	outline: 0;
	border:none;
	border:0;
}


#nav {
	width:100%;
	height:7em;
	margin-left:37%;
	position:fixed;
	overflow:hidden;	
	background: #b3a49c; /* Old browsers */
	z-index:999;
}

#header {
	height:100%;
	width:37%;
	min-width:350px;
	position:fixed;
	/*background:url(../img/kaori_fiorettini.jpg) no-repeat top center #f3edea;*/
	background:url(../img/kaori_fiorettini_2.jpg) no-repeat top center #46251f;
	-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
	-moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
	box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
}

#header h1 {
	visibility:hidden;
	margin:0;
	padding:0;
}

h3 {
	color:#7d6c63;
	font: normal normal normal 1.4em/1em 'Gentium Book Basic', Georgia, "Times New Roman", Times, serif;
	text-transform:uppercase;
	margin-top:3em;
}

#mailme {
	position:absolute;
	left:375px;
	top:1.5em;
	color:#7d6c63;
	text-decoration:none;
	font: italic normal normal 0.9em/1em 'Gentium Book Basic', Georgia, "Times New Roman", Times, serif;
	z-index:999;
}

#mailme a {
	color:#3a2e28;
	text-decoration:none;
}

#mailme a:hover {
	color:#7d6c63;
}

ul#site_menu {
	list-style:none;
	margin:0;
	padding:5em 0 1em 3em;
	width:590px;
}

ul#site_menu li {
	float:left;
	margin-right: 10px;
	font: normal normal normal 1.1em/1em 'Raleway', Verdana, sans-serif;
	text-transform:uppercase;
	letter-spacing: 0.1em;
}

ul#site_menu li:last-child {
	margin-right: 0;
}

ul#site_menu li a {
	color:#f3edea;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
    filter: dropshadow(color=#000, offx=1, offy=1);
	padding: 7px 5px 3px;
	font-size: 16px;
	border:none;
	
}


.a_nosel {
	color:#f3edea;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
    filter: dropshadow(color=#000, offx=1, offy=1);
	padding: 7px 5px 3px;
	font-size: 16px;
	border:1px solid #b3a49c;
}
.a_sel {
	color: #491e09 !important;
	font-size: 16px;
	padding: 7px 5px 3px;
	text-shadow: none !important;
    filter: none !important;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	background: rgb(205, 191, 184);
	background: -moz-linear-gradient(90deg, rgb(205, 191, 184) 30%, rgb(197, 179, 171) 70%);
	background: -webkit-linear-gradient(90deg, rgb(205, 191, 184) 30%, rgb(197, 179, 171) 70%);
	background: -o-linear-gradient(90deg, rgb(205, 191, 184) 30%, rgb(197, 179, 171) 70%);
	background: -ms-linear-gradient(90deg, rgb(205, 191, 184) 30%, rgb(197, 179, 171) 70%);
	background: linear-gradient(0deg, rgb(205, 191, 184) 30%, rgb(197, 179, 171) 70%);
	border:1px solid #cabeb8;
}


#content {
	width:630px;
	margin:0;
	margin-left:37%;	
	height:100%;
	position:absolute;
	font: normal normal normal 1.1em/1.2em 'Gentium Book Basic', Georgia, serif;
	color:#3a2e28;
	z-index:1;
}


#home, #cv, #repertorio, #ascoltami {	
	height:100%;
	padding:7em 2.7em;
	min-height:800px;
}

#home {
	padding-top:8em;
}

p.evid {
	font: normal normal normal 1.5em/1.2em 'Cinzel', Georgia, serif;
	color:#98857b;
	text-transform:uppercase;
}

p.note {
	font: italic normal normal 0.8em/1.2em 'Gentium Book Basic', Georgia, serif;
	color:#98857b;
	border-top:1px solid #98857b;
	padding-top:0.5em;
	margin-top:7em;
}

p.note a {
	color:#3a2e28;
	text-decoration:none;
}

p.note a:hover {
	color:#98857b;
}

.repertorie_list table {
	border-collapse: collapse; 
	text-align: left; 
	width: 100%; 
} 
.repertorie_list {
	font: normal normal normal 1em/1.2em 'Gentium Book Basic', Georgia, serif;
	color:#3a2e28; 
	background: none; 
}
.repertorie_list table td, .repertorie_list table th { 
	padding: 1em 1em 1em 0; 
	vertical-align: top; 
}
.repertorie_list table tbody td { 
	color: #3a2e28; 
	font: normal normal normal 1em/1.2em 'Gentium Book Basic', Georgia, serif; 
}
.repertorie_list table tbody td:first-child { 
	border-left: none; 
}
.repertorie_list table tbody tr:last-child td { 
	border-bottom: none; 
}

.repertorie_list table th {
	font: normal normal normal 1em/1.2em 'Cinzel', Georgia, serif;
	color:#98857b; 
	white-space: nowrap;
	padding: 1.15em 1em 1em 0; 
}


ul.arie {
	list-style:none;
	margin:0;
	padding:0;
}

ul.arie li {
	margin-bottom:2.5em;
}

ul.arie li span {
	margin-bottom:0.2em;
	display:block;
}

ul.arie li span.title {
	font-style:italic;
	margin-bottom:1em;
}

ul.arie li span.auth {
	font: bold normal normal 0.8em/1.2em 'Gentium Book Basic', Georgia, serif;
}
ul.arie li span.opera {
	text-transform:uppercase;
}



.fotogal {
	width:550px;
	height:312px;
	border:5px solid #e4ddd9;
	-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
	-moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
	box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
	background:none repeat scroll 0 0 #f0f0f0;
}


/*
	Slideshow
*/

#slides {
	position:relative;
	z-index:100;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:550px;
	overflow:hidden;
	position:relative;
	display:none;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container a {
	width:550px;
	height:312px;
	display:block;
}

.slides_container a img {
	display:block;
}

/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:136px;
	left:9px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

#slides .next {
	left:530px;
}

/*
	Pagination
*/

.pagination {
	margin:0 auto 0;
	width:100px;
	position:absolute;
	z-index:999;
	bottom:5px;
	left:188px;
}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(../img/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

audio {
	width:530px;
}

.goTop a {
	display:none;
}
.m_cover {
	display:none;
}




/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */






@media only screen and (max-width: 1000px) {
    /* Style adjustments for viewports that meet the condition */
	#nav {
	width:100%;
	height:7em;
	margin-left:350px;
	position:fixed;
	overflow:hidden;	
	background: #b3a49c; 
	z-index:999;
}

#header {
	height:100%;
	width:350px;
	min-width:350px;
	position:fixed;
	/*background:url(../img/kaori_fiorettini.jpg) no-repeat top center #f3edea;*/
	background:url(../img/kaori_fiorettini_2.jpg) no-repeat top center #170c09;
	-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
	-moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
	box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
}

#content {
	width:630px;
	margin:0;
	margin-left:350px;	
	height:100%;
	position:absolute;
	font: normal normal normal 1.1em/1.2em 'Gentium Book Basic', Georgia, serif;
	color:#3a2e28;
	z-index:1;
}




}




@media only screen and (max-width: 800px) {
    /* Style adjustments for viewports that meet the condition */
body, html {
	width:100%;
	height:100%;
	background: #dfd7d2; /* Old browsers */
	background: #dfd7d2; /* FF3.6+ */
	filter: none; /* IE6-9 */	
	background-repeat: no-repeat;
    background-attachment:inherit;
	min-width:100px;
}

#nav {
	width:100%;
	height:auto;
	margin-left:0;
	position:relative;
	overflow:hidden;	
	background: #b3a49c; 
	z-index:999;
}

#header {
	height:400px;
	width:100%;
	min-width:50px;
	position:relative;
	background:url(../img/kaori_fiorettini_m.jpg) no-repeat top center #f3edea;
	-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
	-moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
	box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.3);
	display:none;
}
.m_cover {
	display:block;
	width:100%;
	background:#f3edea;
}
.m_cover img {
	width:100%;
	height:auto;
}

#content {
	width:100%;
	margin:0;
	margin-left:0;	
	height:auto;
	position:relative;
	font: normal normal normal 1.1em/1.2em 'Gentium Book Basic', Georgia, serif;
	color:#3a2e28;
	z-index:1;
}

#home, #cv, #repertorio, #ascoltami {	
	height:auto;
	padding:4em 1.5em;
	min-height:inherit;
	position:relative;
}

#slides {
	display:none;
}

ul#site_menu {
	list-style:none;
	margin:0;
	padding:1em;
	width:100%;
}

ul#site_menu li {
	float:none;
	margin: 2em;
	font: normal normal normal 1.1em/1em 'Raleway', Verdana, sans-serif;
	text-transform:uppercase;
	letter-spacing: 0.1em;
}

.goTop a {
	font: normal normal normal 1.1em/1em 'Raleway', Verdana, sans-serif;
	color:#f3edea;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
    filter: dropshadow(color=#000, offx=1, offy=1);
	padding: 1em;
	margin:3em 0 0;
	font-size: 16px;
	display:block;
	text-align:center;
	text-transform:uppercase;
	background: #b3a49c;
}

audio {
	width:100%;
}

#mailme {
	position:relative;
	left:0;
	top:0;
	padding:1em;
	color:#7d6c63;
	text-decoration:none;
	font: italic normal normal 0.9em/1em 'Gentium Book Basic', Georgia, "Times New Roman", Times, serif;
	z-index:999;
}

.repertorie_list table td, .repertorie_list table th, .repertorie_list table tbody td { 
	padding: 1em 0.5em 0.3em 0; 
	vertical-align: top; 
	font-size:0.8em;
}


}




@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}









/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}