@import url(fonts.css);
/* Reset to make all browsers behave the same; above is the font-face imported font - must be first item */
*, html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
img { border:0; }
ol, ul, li { list-style:none; }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }

/* html 5 specific for older browsers */
nav, aside, header, footer, section, article, figure, figcaption {display:block; position:relative;}
hgroup { }
/* colours used 
#F3F3EB  - header, nav bar
#DFDFDF - footer
*/
/* utility section :  general purpose styling and float clearing techniques */
br.clear {clear:both;}
div {position:relative;}
strong { font-weight:bold; }
em { font-style:italic; }
a img { border:none; } /* Gets rid of IE's blue borders */
a {text-decoration:underline; } /* change of policy */
nav a {text-decoration: none;}
a.text {color: blue; text-decoration: none;}
a.text:hover {color: gray;}
/* general headings and typography for all pages */
p {margin:0.25rem 2px; padding:2px; }
h1 {font-size: 3rem; text-align:center; padding: 0.5rem; margin-bottom: 1rem; margin-top: 2rem; letter-spacing: 8px;}
h2 {font-size: 1.5rem; text-align: left; padding: 0.2rem; margin-bottom: 1.5rem;}
h3 {font-size: 1.2rem;text-align: center; padding: 0.1rem; margin-bottom: 0.2rem;}
/* changes for php version */
aside#details1 h3 {text-align: center; font-family: Georgia; }

h4 {font-size: 1rem; color: white;}
h4 a:hover {color:green;}
h5 {font-size: 0.9rem; }
h6 {font-size: 0.8rem; }
.hilite {font-size:1.8em;
	padding: 0.25rem 0px;
    position: relative;
    text-shadow: 1px 0px 0px #AAAAAA;
	margin-bottom:1rem;
	}
	
	.roman {font-family: 'QuattrocentoRomanRegular';  text-transform:uppercase;}
	.white {color:white;}
	.red {color:#800000;}
	.redhead {color: #ff0000;}
	.blue {color:#008097;}
	.yellow {color:#FFF89B;}
	.bold { font-weight:bold; }
	.italic {font-style: italic;}
	.minicaps {text-transform: capitalize; font-size:0.9rem;}
	.small {font-size: 0.8rem;}
	
	
/* more specific style details for whole site : font used, size and  (not imported ones see above), background for body outside the site. Wrapper holds all elements inside site (header, footer), and main-contents holds the material inbetween. */
html {width: 100%;  }
body { font-family: open_sans_light, sans-serif; font-size:16px; line-height:1.5em; background:#F8F8FF; color: black;} /* 455845*/
body {width: 90%; margin: auto;}
body.accueil {background: url(../images/cpgioux.jpg) no-repeat center center fixed; background-size: cover;}
header {width:100%; height:10rem; background: url(../images/logo.jpg) white no-repeat 0px 0px; background-size: contain; top: -1.5rem;}
	header h1 {color:black; width:81%; height:7rem; padding-top: 2rem; text-align: center;  position: relative; 
	font:3.5rem 'QuattrocentoRomanRegular', Georgia, serif; letter-spacing: 0; text-transform:uppercase;
	margin-top: 1.6rem; color: black;}
	section {width: 95%; padding-bottom: 2rem; padding-left: 3.25rem; margin-top: 3rem;}
	body.motifs section {margin-top: 0; padding-left: 0;}
div.contact {width: 30%; }
section.looms div {width: 47%; float: left; margin-right: 1rem; margin-top: 1rem; min-height: 400px;}
div.images img { max-width: 100%; overflow: hidden;}
div.half img {min-width: 400px; display: inline-block;}
div.half {width: 48%; float: left; min-height: 750px;}
div.featured {background-color: rgba(0,0,0, 0.6); padding: 2rem; }
div.book {background-color: rgba(0,0,0, 0.6); width: 50%; float: left; color: white; padding: 2rem; min-height: 307px; margin-right: 0.5rem; margin-bottom: 0.2rem;}
div.bookimage {width: 40%; float: left; margin-bottom: 0.2rem;}
nav {width:100%; height: 85px; left: 5%;}
ul {display: block; width:1000px; height:50px; margin:  auto; color: black;}
    ul li { min-width:150px; text-align: center;}
    ul li:hover {background-color: white; }
    ul li:hover a {color: red; }
    
    ul.dropdown li.current a, ul.dropdown li.current {font-variant: small-caps; color: white; background-color: black;}
    ul li a {display: inline-block; width:100%; text-align: center; line-height: 2em;}
ul li {display: inline-block;}

/* multilevel menu from advitam*/
/* 
From CSS-tricks.com ** multi-level drop down menu used on individual artist pages**
	LEVEL ONE
*/
ul.dropdown                        { position: relative; z-index:10; height: auto }
ul.dropdown li                      { font-weight: bold; float: left;  background: #ddd; padding: 4px 8px; line-height: 2rem; height: 2rem;}
ul.dropdown a:hover		      { color: #999999; text-decoration:underline; }
ul.dropdown a:active             { color:white; }
ul.dropdown li a                    { display: block; width: 100%; height: 100%;  color: black; } 
ul.dropdown li:hover                { opacity:0.95; color: red; position: relative;  }
/* 
	LEVEL TWO
	has changes for new dynamic menus
*/
ul.dropdown ul 						{ max-width: 250px; visibility: hidden; position: absolute; top: 32px; left: 0; height: 60px; }
ul.dropdown ul li 					{ font-weight: normal; background: #f6f6f6; color: #000; font-size: 0.8rem;
									  border-bottom: 1px solid #ccc; float: none; width:100%;}
ul.dropdown li:hover > ul 		{ visibility: visible; min-height: 300px; transition-delay: 0.1s; z-index: 30;}
ul.second			{ }					  
/* end */
ul.pre {width: 50%; display: block; height: 100px; margin-bottom: 1rem;}
ul.pre li {max-width: 300px; color: white; padding: 0.3rem;}
ul.pre li:hover {background-color: black;}
ul.wlist {width: 98%; }
ul.wlist li { border: 1px solid black; border-radius: 3px; background-color: white; min-width: 220px;}
ul.wlist li a {color: red; text-decoration: none; padding: 0.2rem;}
ul.wlist li a:hover {color: white; background-color: red;}
/* contact page */
div.contactform { padding: 0rem 2rem 0.6875rem; margin: auto; width: 16rem;}
div.contactform input {color: black;}
div.contactform input:focus{background:#f4f3dc;}
#check {display: none;}
#response {color: red; padding: 0.3rem; font-size: 2rem;}
/* mac type buttons etc */
.mac { 
  background-image:-webkit-linear-gradient(#FFF,#E0EAEB,#E4E7EC,#FFF);
  background-image:-moz-linear-gradient(top,#FFF,#E0EAEB,#E4E7EC,#FFF);
  background-image: -ms-linear-gradient(#FFF,#E0EAEB,#E4E7EC,#FFF);
  background-image: -o-linear-gradient(r#FFF,#E0EAEB,#E4E7EC,#FFF);
  background-image: linear-gradient(#FFF,#E0EAEB,#E4E7EC,#FFF);
  display: inline-block; padding:1px 11px; margin:0 5px; 
  text-decoration: none; border: 1px solid #999; border-radius:10px; color:#526E72; 
  }

  /* section added for motifs and shop*/
 div.shopwindows {width: 850px; margin: auto;}
div.shopimages {display: block;  padding: 0.25rem; width: 93%;}
div.shopimages img {width: 400px; margin: auto;}
div.shopitems {width: 350px; padding: 0.25rem; margin: 0.5rem 0.5rem 0; }
div.shopitems p {margin-top: 0; margin-bottom: 0.25rem; padding: 0; font-size: 0.8rem;}
div.grids {width: 408px; float: left; background: white; color: black; padding-bottom: 1rem; margin-left: 0.1rem; margin-bottom: 0.2rem; min-height: 600px; border: solid 1px #563405;}


.stagedetails {width:42%; height:20rem; float:left; margin:1.25rem 0.8rem; padding:0.8rem 1rem; border-bottom:1px solid #AAA;}
	.stagedetailsinfo {text-align: justify;}
	.stagedetails p, .four h5 {font-family: arial, sans-serif; font-size:0.8em;}
	.stagedetails h4,  .latest h4 {margin-bottom: 15px; padding: 5px 0; position: relative; text-shadow: 1px 0 0 #aaaaaa; font-size: 1.1rem;}
	.stageimage {width:300px; min-height:200px; border: solid 1px #FFF; box-shadow:1px 3px 3px #FFF;}
	.titles {width: 98%; min-height: 4rem; float: left;}
	/* responsive from AV to modify*/
	/* very small maybe telephone too */

	@media only screen and (min-width : 901px) and (max-width : 1100px) {
  		header {width: 92%; height: 12rem;}
  		nav {height: 80px; width: 98%; margin-left: 1%;}
  		nav ul { width: 90%;}
  		ul.dropdown li {font-size: 0.8rem; min-width: 110px;}
  		ul.dropdown ul li { width: 95%; height: 20px;}
  		ul.dropdown li a {font-size: 0.8rem;}
  		ul.dropdown ul.second li a {font-size: 0.7rem;}
  		h1 {font-size: 2rem;}
  		h2 {font-size: 1.3rem; margin-bottom: 1rem;}
  		section.news img {max-width: 98%;}
  		iframe {width: 800px;}
  		section.looms div {width: 47%; float: left;  margin-top: 0.5rem; min-height: 340px;}
  		.stagedetails {height:18rem;}
  		div.grids { }
    div.shopimages img {width: 100%;}
    div.shopimages {width: 98%;}
    div.shopitems {width: 98%;}
    div.boutique {width: 100%;}
    div.footerbit {width: 90%;}
    div.shopwindows {width: 100%;}
    div.topbit {width: 90%; }
    div.middlebit {width: 90%; }
    div.bottombit { width: 90%;}
    div.half img {max-width: 98%;}
    div.half {width: 98%; float: left; min-height: 5rem;}
  }

 @media only screen and (min-width : 400px) and (max-width : 900px) {
   header {width: 92%; height: 9rem; margin-top: 2rem;}
  		nav {min-height: 80px; width: 93%; margin-left: 4%;}
  		nav ul { width: 90%;}
  		ul.dropdown li {font-size: 0.8rem; min-width: 110px;}
  		ul.dropdown ul li { width: 95%; height: 20px;}
  		ul.dropdown li a {font-size: 0.8rem;}
  		ul.dropdown ul.second li a {font-size: 0.7rem;}
  		h1 {font-size: 1.5rem;}
  		section.news img {max-width: 92%;}
  		h2 {font-size: 1.2rem; margin-bottom: 1rem;}
  		h3 {font-size: 1rem;}
  		p {font-size: 0.8rem;}
  		iframe {width: 600px;}
  		body.lanavette section {width: auto; padding-bottom: 0.2rem; padding-left: 0.1rem;}
  		body.lanavette div.blist {width: 98%; min-height: 4rem; margin-top: 2.5rem;}
  		section.looms div {width: 96%; float: left;  margin-top: 0.5rem; min-height: 340px;}
  		.stagedetails {height:18rem;}
  		div.grids {width: 82%; min-height: 300px; padding-bottom: 0.1rem;}
    div.shopimages img {width: 100%;}
    div.shopimages {max-width: 400px; margin: auto;}
    div.shopitems {width: 50%; margin: auto;}
    div.boutique {width: 100%;}
    div.footerbit {width: 90%;}
    div.shopwindows {width: 100%;}
    div.topbit {width: 90%; }
    div.middlebit {width: 90%; }
    div.bottombit { width: 90%;}
    div.half img {max-width: 4rem;}
    div.half {width: 98%; float: left; min-height: 4rem;}
}