@charset "utf-8";

/* CSS Document 
---------------------------------------------------------------------
project : Patch'Passion
author : Sandrine Prousteau
---------------------------------------------------------------------

/***** [ Reset css ] ************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;padding: 0;border: 0;outline: 0;
    font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;
    vertical-align: baseline;
    }
:focus {outline: 0;}
ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

/***** [ init ] *****/

a, a:link, a:visited, a:active {text-decoration:none; color:#000;cursor: pointer;}
a:hover, a:focus {text-decoration:none; color:#999;}
p a {color:#000;}
p a:hover, p a:focus {color:#a3cb10;}
body {background: #fff; color:#000; font:70% Arial, sans-serif; line-height:normal;}
input, select, option {font-family:Arial, sans-serif; }
textarea {font-family:Arial, sans-serif;}
h1 {font-size:1em; font-family:verdana, arial, serif; font-weight:bold; line-height:normal;}
small {font-size:0.8em;}
::-moz-selection{background:#DE564B;color:#fff;}
::selection{background:#DE564B;color:#fff;}
.clear{	clear:both;}	
img{max-width:100%;}
.ie7 img, .ie8 img{width:100%;}



/***** [ Body ] *****/
/* violet #9F9CBB */
/* rose #F8C0E9 */


body{ background: #9F9CBB;font-family: verdana,  arial, sans serif;font-size: 14px;margin: 2em;color: #9F9CBB; }
#page{ background: #fff url(photo-blanchie2.jpg) no-repeat bottom left;background-size: 50% auto;padding: 2em;border:2px solid #000;-webkit-border-radius: 2em;-moz-border-radius: 2m;border-radius: 2em;	}

.nothome #page{ background: #fff url(photo-blanchie2.jpg) no-repeat bottom left;background-size: 30% auto;}
	
	@media screen and (max-width: 960px) {
	  body{ font-size: 12px; }
	  #page{padding: 2em 2em;}
	}
	
	@media screen and (max-width: 880px) {
	  
	}
	
	@media screen and (max-width: 650px) {
	  
	}

	@media screen and (max-width: 480px) {
	  body{ margin: 0.5em;}
	  #page{ background: #fff ;}
	}

/***** [ Logo ] *****/
#header{margin: 0 auto;margin-bottom: 0;width: 100%;text-align: left;}
#header a{display: inline-block;vertical-align: bottom;font-size: 3.5em;line-height:1.5em;font-weight:bold;color: #9F9CBB;font-family: 'Capriola', verdana, arial, sans serif;}
#header a:hover{color: #F8C0E9;}
#header a#logo{}
#header a img{display: block;}
#header a#sitetitle, #header a.menuitem{border-bottom: 0.3em solid #9F9CBB;margin-left: 0.7em;}

.nothome #header a{font-size: 2em;}
.nothome #header a img{max-width: 100px;}

#header #pagetitle{display: inline-block;margin-left: 0.7em;vertical-align: bottom;font-size: 2em;line-height:1.5em;font-weight:bold;color: #F8C0E9;font-family: 'Capriola', verdana, arial, sans serif;}
#header #pagetitle h1, #header  a.menuitemactive{margin: 0;text-align: left;line-height: 1.5em;color: #F8C0E9;font-weight: bold;font-family: 'Capriola', verdana, arial, sans serif;border-bottom: 0.3em solid #F8C0E9;}	
#header  a.menuitemactive{margin: 0;margin-left: 0.7em;}

    @media screen and (max-width: 960px) {
	  
	}
	
	@media screen and (max-width: 700px) {
	  #header a{font-size: 3em;}
	  #header a img{max-width: 100px;}
	}

	@media screen and (max-width: 480px) {
	  #header a, #header #pagetitle{display: block;font-size: 2em;text-align: center;margin: 0 auto;}
	  #header a img{max-width: 30%;margin: 0 auto;}
	  .nothome #header a{display: block;font-size: 2em;text-align: center;}
	  .nothome #header a img{max-width: 30%;margin: 0 auto;}
	  #header a#sitetitle, #header a.menuitem{margin-left: 0em;}
	  #header a#sitetitle br{display: none;}
	  #header #pagetitle h1, #header  a.menuitemactive{margin: 0;text-align: center;font-size: 1em;border-bottom: 0;}
	  #header a.menuitem{border: 1px solid #9F9CBB;font-size: 1.5em;}
	  #header  a.menuitemactive{margin: 0;border: 0;font-size: 2em;}	  
	}
	
/***** [ Center ] *****/
#center{margin: 0 auto;padding: 2em 0;width: 100%;min-height: 400px;}
#center-wrapper{margin: 0 auto;width: 70%;padding-left: 30%;height: auto;}

.nothome #center-wrapper{width: 80%;padding-left: 20%;}

	@media screen and (max-width: 960px) {
	  
	}
	
	@media screen and (max-width: 650px) {
	  #center-wrapper{padding: 0;width: 100%;}
	}
	
	@media screen and (max-width: 480px) {
	  #center{min-height: 10px;padding: 0;}
	  #center-wrapper{padding: 0;width: 100%;}
	  .nothome #center-wrapper{padding: 0;width: 100%;}
	}
	


/***** [ Texts ] *****/	
.block{margin: 4%;float: left;width: 40%;text-align: left;color: #9F9CBB;}
.blocklong{margin: 4%;float: none;width: 90%;text-align: left;color: #9F9CBB;}
.block h1,.block h2{font-size: 2em;font-weight:bold;color: #9F9CBB;font-family: 'Capriola', verdana, arial, sans serif;border-bottom: 0.3em solid #9F9CBB;}
.block .contents{font-size: 1.5em;font-weight:normal;color: #9F9CBB;font-family: 'Annie Use Your Telescope', cursive, arial, sans serif;}
.block table{width: 90%;float: right;}
.block table td{text-align: let;padding: 0.2em 0.3em;border-bottom: 1px solid #9F9CBB;}
.block table .last td{border-bottom: 0;}
.block p.alignright{text-align: right;}
.block p.aligncenter{text-align: center;}
.block p a{color: #9F9CBB;font-size: 1em;text-decoration: underline;}
.block p a:hover{color: #F8C0E9;text-decoration: underline;}
.block .date{ font-weight: bold;font-style: italic;}
.block .text{ line-height: 1.2em;}

	@media screen and (max-width: 480px) {
	  .block{float: none;width: 100%;text-align: center;margin: 1em 0;}
	  .block h1,.block h2{font-size: 1.2em;border-bottom: 0.2em solid #9F9CBB;}
	}	

h3{font-size: 1.5em;font-weight:bold;color: #9F9CBB;text-align: center;}
.button{text-align: center;}
a.load{text-align: center;color: #9F9CBB;}
.loading{text-align: center;}
.loading .loading-item{display: inline-block;width: 20px;}

/***** [ Galadh ] *****/
.mygalery{font-family: 'Annie Use Your Telescope', cursive, arial, sans serif;}
.mygalery .filters{text-align: center;}
.mygalery .filters a{display:inline-block;color: #9F9CBB;line-height: 1em;font-size: 2em;font-weight: bold;margin: 0.1em 0.5em;padding: 0 1em;}
.mygalery .filters a:hover,.mygalery .filters a.active{color: #F8C0E9;}
.mygalery .source{text-align: center;margin-top:1em;}
.mygalery .source li{display: inline-block;font-size: 1.5em;margin: 1em;}
.mygalery .source li.hidden{display: none;}
	
/***** [ Menu ] *****/
#homemenu{margin: 0 auto;margin-bottom: 1em;margin-top: 3em;padding-left:30%;text-align: center;}
#homemenu a{display: inline-block;vertical-align: bottom;font-size: 2em;font-weight:bold;color: #9F9CBB;
	font-family: 'Capriola', arial, sans serif;padding-left: 2em;}
#homemenu a:hover,#homemenu a.selected{color: #F8C0E9;font-weight:bold;}

    @media screen and (max-width: 960px) {
	  #homemenu{width: 100%;}
	  #homemenu a{font-size: 1.7em;}
	}
	
	@media screen and (max-width: 650px) {
	  #homemenu{text-align: center;}
	  #homemenu a{font-size: 1.5em;padding:0;}
	}

	@media screen and (max-width: 480px) {
	  #homemenu{margin-top: 2em;padding-left:0;}
	  #homemenu a{display: block;font-size: 1.2em;}
	}

/***** [ GMap ] *****/	
#gmap{margin: 2em 0;width: 100%;height:50em;}

	@media screen and (max-width: 480px) {
	  #gmap{height:20em;}
	}	

/***** [ Footer ] *****/
#footer{ margin: 0 auto;margin-bottom: 1em;}
#footer-wrapper{margin: 0 auto;width: 100%;height: auto;text-align: center;color: #9F9CBB;}

#legals {padding: 0.5em 0;text-align: right;
	color: #9F9CBB;font-size: 1.35em;line-height:1.1em;font-weight: normal;font-family: 'Annie Use Your Telescope', cursive, arial, sans serif;}
#legals a{color: #9F9CBB;font-weight: normal;text-decoration:none;}
#legals a:hover{color: #F8C0E9;font-weight: normal;text-decoration:none;}


	@media screen and (max-width: 960px) {
	  #footer-wrapper{width: 100%;}
	}

	@media screen and (max-width: 480px) {
	  #legals{text-align: center;}
	}





.clear{clear: both;float:none;}
.padding{padding:1em;}
.hidden{display:none;}