/*   
Theme Name: Samuel Barber 
Theme URI: http://samuelbarber.fr
Description: Samuel Barber Custom Theme  
Author: Lena Faure
Author URI: http://www.lenafaure.com
Version: 1.0
*/


/* HTML5  Boilerplate
 * ==|== normalize ==========================================================
 */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-family: Lucida Sans Unicode, Lucida Grande; font-size: 80%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { font-family: Lucida Sans Unicode, Lucida Grande; font-size: 80%; margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { ; color: #222; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #281822; }
/*a:visited { color: #551a8b; }*/
a:hover { color: #f16529; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 0; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; padding-left: 1em;}


/* ===================================================
    Initializr styles
    http://verekia.com/initializr/responsive-template
    Author: Jonathan Verrecchia
   =================================================== */

body{
  font-family: Lucida Sans Unicode, Lucida Grande;
  color : #281822;
}

.wrapper{
	width:90%;
	margin:5% 1%;
}

/* ===================
    ALL: Orange Theme
   =================== */
html
{    
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    height: 100%;
    color : #281822;
}

#header-container{ border-bottom: 20px solid #e44d26; }
#footer-container{ border-top:    20px solid #e44d26; }
#main aside      { border-top:    20px solid #e44d26; }

#header-container,
#footer-container,
#main aside{
	background:#f16529;
}

#title{ color:white; }

::-moz-selection { background: #f16529; color: #fff; text-shadow: none; }
::selection      { background: #f16529; color: #fff; text-shadow: none; }

/* ==============
    MOBILE: Menu
   ============== */
a {
	text-decoration : none !important;
}

nav a{
	display:block;
	margin-bottom:10px;
	padding:15px 0;

	background:#e44d26;
	color:white;

	text-align:center;
	text-decoration:none;
	font-weight:bold;
}

nav a:hover, nav a:visited{
	color:white;
}

nav a:hover{
	text-decoration:underline;
}

/* ==============
    MOBILE: Main
   ============== */

#main{
	padding:30px 0;
}

#main article h1{
	font-size:2em;
}

#main aside{
	color:white;
	padding:0px 5% 10px;
}

#footer-container footer{
	color:white;
	padding:20px 0;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 #title{ padding-top:20px; }


/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/* ==|== media queries ====================================================== */

@media only screen and (min-width: 480px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== */
	
	nav a{
		float:left;
		width:27%;
		margin:0 1.7%;
		padding:25px 2%;
		margin-bottom:0;
	}
	
	nav li:first-child a{ margin-left:0;  }
	nav li:last-child  a{ margin-right:0; }
	
/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

	nav ul li{
		display:inline;
	}	
	.oldie nav a{
		margin:0 0.7%;		
	}
}

@media only screen and (min-width: 768px) {

/* ====================
    WIDE: CSS3 Effects
   ==================== */

	#header-container,
	#main aside{
		-webkit-box-shadow:0 5px 10px #aaa;
		   -moz-box-shadow:0 5px 10px #aaa;
		        box-shadow:0 5px 10px #aaa;
	}

/* ============
    WIDE: Menu
   ============ */
	
	#title{
		float:left;
	}

	nav{
		float:right;
		width:38%;
	}

/* ============
    WIDE: Main
   ============ */

	#main article{
		float:left;
		width:57%;
	}
		
	#main aside{
		float:right;
		width:28%;
	}
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

	.wrapper{
		width:1026px; /* 1140px - 10% for margins */
	}
}

/* ==|== print styles ======================================================= */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration:none !important; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/* ===================
    MAXIMAGE SLIDESHOW
   =================== */

#maximage
{
  position : fixed;
}

/* ===================
    ISOTOPE NAVIGATION
   =================== */

/* ==|== Isotope ======================================================= */


/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
  background: orange;
  float: left;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


.element {
  width: 90px;
  height: 90px;
  margin: 5px;
  overflow: hidden;
  position: relative;
  background: rgba(255,251,240, 0.9);
  color: #222;
	font-size : 80%;
	line-height: 5em;
}

.element:hover
{
  background: #C1736F;
}

.element.selected {
  background: #C1736F;
	-webkit-border-radius: 10em;
  -moz-border-radius-topright: 10em;
  border-radius: 10em;
	line-height : 5em;
}


.element a
{
	text-decoration : none;
	color : #281822;
	font-family: Lucida Sans Unicode, Lucida Grande;
}


.element * {
  position: absolute;
  margin: 0;
}

#navigation-wrap {

}

#container {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #006b8d;
}

#navigation-home {
	background: #F37A6B;
	-webkit-border-radius: 7em;
  -moz-border-radius-topright: 7em;
  border-radius: 7em;
}

#navigation-home:hover {
	-webkit-border-radius: 0;
  -moz-border-radius-topright: 0;
  border-radius: 0;
}

.element .symbol {
  left: 0.2em;
  top: 0.4em;
  font-size: 3.8em;
  line-height: 1.0em;
  color: #FFF;
}
.element.large .symbol {
  font-size: 4.5em;
}

.element.fake .symbol {
  color: #000;
}

.element .name {
  left: 0.5em;
  bottom: 1.6em;
  font-size: 1.05em;
}

.element .weight {
  font-size: 0.9em;
  left: 0.5em;
  bottom: 0.5em;
}

.element .number {
  font-size: 1.25em;
  font-weight: bold;
  color: hsla(0,0%,0%,.5);
  right: 0.5em;
  top: 0.5em;
}

.clickable .element:hover {
  cursor: pointer;
}

.clickable .element:hover h3 {
  text-shadow:
    0 0 10px white,
    0 0 10px white
  ;
}

.clickable .element:hover h2 {
  color: white;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* ===================
    Custom
   =================== */
a {
    outline: none !important;
} /*enl�ve dotted border firefox*/

ul {
  list-style : none;
}

h3 {
	margin-top: 0 ;
}

h4 {
	color : #F37A6B;
  font-size: 1.2em;
}

h5 {
	color : #53657d;
  font-size: 1em;
}

iframe {
  margin : 0.5em auto;
}


.content-wrapper {
  background: rgba(255,251,240, 0.8);
	border : 4px double #281822;
  text-align: justify;
	padding-left:50px;
	padding-right: 20px;
  position: absolute;
	top: 20px;
	right : 30px;
  font-size : 0.9em;
	width : 500px;
	line-height : 1.5em;
	letter-spacing: 0.2px;
	font-size : 0.85em;
}

.piece-title {
  font-style: italic;
}

a .piece-title:hover {
  color: #F37A6B !important;
}

.hide
{
  display:none;
}

/* ===================
    Loading
   =================== */

#overlay {
	width : 100%;
	height: 100%;
	background-color: rgba(193,115,111, 0.9);
	position: absolute;
  z-index: 10;
}

#loading {
	position : fixed;
	top : 50%;
	left : 50% ;
	text-align : center;
}


/* ===================
    Gramo-choice
   =================== */

#gramo-choice {
  position : fixed;
  bottom: 5px;
  left : 40px;

}

#gramo-choice i {
	color: #fff;
}

#gramo-choice i:hover {
	color: #f07869;
}

#gramo-choice ul {
	display : inline-block;
	vertical-align : middle;
}

#gramo-choice li {
	margin-left : 0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	text-align : center;

}

/* ===================
    Credit-web-development
   =================== */

#web-credit {
  position : fixed;
  bottom: 10px;
  right : 40px;
}

#web-credit a {
		font-size : 8px;
		color : rgba(255,251,240, 0.6);
}

#web-credit a:hover {
		color : #f07869;
}

/* ===================
    Home
   =================== */

#home {
	background: rgba(255,251,240, 0.8);
	border : 4px double #281822;
  text-align: justify;
  padding : 2em 4em;
  position: absolute;
	top: 20px;
	right : 30px;
  font-size : 0.9em;
	width : 400px;
	line-height : 1.5em;
	letter-spacing: 0.2px;
	font-size : 0.85em;
	text-align : center;
}

/* ===================
    Bibliography
   =================== */

#bibliography {
	padding-left : 3em;
	height : 476px;
	width : 550px;
	display : none;
}

#bibliography h4 {
	text-align : center;
}

#book1-hover, #book2-hover, #book3-hover, #book4-hover, #book5-hover, #book6-hover, #book7-hover, #book8-hover, #book9-hover, #book10-hover, #book11-hover, #book12-hover, #book13-hover, #book14-hover {
	position : absolute;
	top: 320px;
	left : 220px;
	width : 300px;
	text-align : center;
}

/* ===================
    Book
   =================== */

#book {
	background: rgba(255,251,240, 0.8);
	border : 4px double #281822;
  text-align: justify;
  padding : 1em;
  position: absolute;
	height : 500px;
	width : 600px; 
  font-size : 0.9em;
	line-height : 1.5em;
	letter-spacing: 0.2px;
	font-size : 0.85em;
	display: none;
}

#book img {
	box-shadow: 3px 2px 10px 1px rgba(0, 0, 0, 0.7);
	margin-top : 13px;
}

#book-subtitle-wrapper img {
	box-shadow: 3px 2px 5px 1px rgba(0, 0, 0, 0.7);
	margin: 2px;
	
}
#book h4 {
	margin-top : 6px !important;
	margin-bottom : 3px !important;
	font-size : 1.3em;
}

#book h5 {
	margin-top : 0px !important;
	margin-bottom : 0px !important;
	text-align : center;
}

#book-title-wrapper {
	width : 40%;
	display : inline-block;
	text-align : center;

}

#book-subtitle-wrapper {
	vertical-align: top;
	width : 57%;
	display : inline-block;
	text-align : center;

}

#book-image-wrapper {
	width : 35%;
	display : inline-block;

}

#book-content-wrapper {
	vertical-align : top;
	width : 62%;
	display : inline-block;
	text-align : center;
	padding-left: 5px;
	margin-top : -20px;
}

#stores {
	display : inline-block;
	width : 50%;

}

#excerpts {
	display : inline-block;
	width : 45%;
	padding-bottom :1em;;
	 vertical-align: middle;
	 text-align : left;
}

.oldrose {
	color : #c1736f;
	font-size : 1.2em;
}

/* ===================
    Biography
   =================== */

#biography {
	width : 500px;
	display : none;
}


#bio-wrapper {
  background: rgba(255,251,240, 0.8);
	border : 4px double #281822;
  text-align: justify;
	padding : 2em;
	padding-top : 0;
  position: absolute;
	top: 20px;
	right : 30px;
  font-size : 0.9em;
	width : 500px;
	height : 550px;
	line-height : 1.5em;
	letter-spacing: 0.2px;
	font-size : 0.85em;
}

.red
{
	background : red;
	color: red;
}

.copyright
{
	font-size : 0.8em;
	color : #72757e;
}

/* ===================
    Calendar
   =================== */
.page-header {
	text-align : center;
}

.form-inline {
	padding-bottom : 2em;
}

#calendar-archives {
	position : absolute;
	top : 13px;
}

#calendar-archives a{
	color : #72757e !important;
	padding-left: 2em;
	font-size : 1.2em;
}

#calendar-wrapper{
  width : 550px;
	background: rgba(255,251,240, 0.9);
	border : 4px double #281822;
  text-align: justify;
  position: absolute;
	top: 20px;
	right: 30px;
  font-size : 0.9em;
	padding : 1em 3em 1em 1em;
  display: none;
}

#calendar-wrapper h3 {
	color : #f07869;
}

/* ===================
    Discography, Music, Documents, Gallery, Book
   =================== */

#discography, #music, #documents, #gallery {
	height : 550px;
  display : none;
}


#discography a h5, #music a h5, #documents a h5, #gallery a h5 {
  float : left;
  display : block ;
  width : 47%;
  height: 25px;
	background-color : rgba(255,251,240, 1);
  color: #53657d;
  line-height: 25px;
  text-align : center;
  margin : 3px;
}

#discography a, #music a, #documents a, #gallery a, #book a {
	color :  #C1736F;
}

#discography a h5:hover, #music a h5:hover, #documents a h5:hover {
  color : #F37A6B;
}

#discography a h4:hover, #music a h4:hover, #documents a h4:hover {
  color : #281822;
}

#discography-intro, #music-intro, #documents-intro {
margin-top: 150px;
padding-right: 20px;

}

#music-intro, #documents-intro {
	text-align : center;
}

.toggle {
  width: 515px;
  height: 355px;
  padding : 2em;
	background-color: rgba(255,251,240, 1);
  margin-left: -45px;
  position : absolute;
  bottom: 0;
	border-top : 2px solid #c1736f;
  overflow: auto;
}


#toggle-inside {
	display : none;
}


.appear-right {
	margin-top: 1em;
	position: absolute;
	left:150px;
	top: 40px;
}

#music .piece-title,  #music .piece-info {
  margin-bottom : 0.5em;
  margin: 0 auto;
}

#music .piece-title {
  font-size : 1.2em;
  color : #53657d;

}

#music li {
	margin-bottom: 0;
	padding-bottom: 0;
}

#music-intro .media-content, #documents-intro .media-content {

}

/* ===================
    Footer
   =================== */

#footer {
  position : fixed;
  bottom: 20px;
  left : 20px;
  color: #53657d;
}

/* ===================
    Launch page
   =================== */

#launch-page {
	opacity:0;
}

#enter-site {
	width : 300px;
	background-color : rgba(255,251,240, 1);
	padding : 1em;
	text-align : center;
	position : fixed;
	top : 300px;
	right: 135px;
	border : 4px double #281822;
}

#enter-site li {
	display : inline-block;
	padding : 0 1em ;
	color : #C1736F;
}

#enter-site li a {
	color : #C1736F;
}

#enter-site li a:hover{
	color : #F37A6B;
}

#english {
	border-right : 1px solid #C1736F;
}

#french {
	border-left : 1px solid #C1736F;
}

#signature {
	position : fixed;
	top : 190px;
	right: 120px;
	margin-bottom : 2em;
	z-index : 1;
}

/* ===================
    Discography items
   =================== */

#discography-item {
  text-align: justify;
	line-height : 1.5em;
	letter-spacing: 0.2px;
	font-size : 0.9em;
	padding-right: 2em;
	margin-left : -40px;
}

#disc-img
{
	width : 45%;
	display : inline-block;
	margin-top: 3px;
}

#disc-title {
	width : 50%;
	display : inline-block;
	vertical-align : top;
}

#disc-title h5 {
		font-style : italic;
		margin-top: 0px;
}

#discography-item a {
	color :  #C1736F;
}



.disc6, .disc105 {
	top: 386px;
}

.disc7 {
	top: 386px;
}

.disc8 {
	top: 386px;
}

.disc9 {
	top: 386px;
}

.disc10 {
	top: 730px;
}

.disc11 {
	top: 730px;
}

.disc14 {
	top: 1073px;
}

.disc18 {
	top: 1419px;
}

.disc22 {
	top: 1762px;
}

.disc26 {
	top: 2105px;
}

.disc30 {
	top: 2448px;
}

.disc34 {
	top: 2791px;
}

.disc38 {
	top: 3140px;
}

.disc42 {
	top: 3482px;
}