/* NOTICE : This CSS file is the core CSS for francoisjosephgraf.com website. Please keep space between each parameters and before opening tag! */

/* Development area */
.devalert { position: absolute; left:23%; top:35%; color: white; font-size: 25px; background-color: red; z-index: 1000;}
.footer-project { float: left; font-size: 15px; padding-top: 3px; margin-top: 16px; line-height: 20px; text-align: center; width: 780px; font-variant: small-caps; margin-top: 50px; position: relative; z-index: 99;}
.wrapper { float: left;}
#preload { position:absolute;top:0;left:3000px; display: none;}

/* We load the font used for the website */
@font-face {
	font-family: "Calluna";
	src: url("../fonts/Calluna-Regular.otf");
	}


/* The basics */
html, body { height: 100%}
body { font-family: Calluna, Georgia, serif; font-size: 12px; margin: 0 auto; padding: 0; unicode-bidi: embed; }
:focus { outline: none;}
a { color: #878787; text-decoration: none;}
a:hover { color: #000}
ul { margin: 0; padding: 0;}
img { border: 0;}
#ajax {height: 100%; position: relative;}
.container, .heavy { clear: left; width: 780px; margin: 0 auto; position: relative;}
.distance { position: relative; width: 1px; float: left; height: 50%; margin-bottom: -340px;}
.heavy { height: 780px; overflow: hidden; margin-top: 8px}
.ajaxbuffer { display: none;}
.left {float: left;}
.right {float: right;}
.clearer {clear: both;}
.footer { float: left; border-top: 1px solid #b5b5b5; font-size: 15px; padding-top: 3px; margin-top: 16px; line-height: 20px; text-align: center; width: 780px; font-variant: small-caps; letter-spacing: 0.5px}
.footer p { padding: 0; margin: 0;}

em{font-family: Georgia; font-style: italic;}

/* Elements using jQuery */
#ajaxcontainer li, #bigimg, #preload, .index .container, .index .container img, .index .container a, .home .container, .presentation .container { opacity: 0; filter: alpha(opacity=1); zoom: 1;}
#imgs-container { overflow: hidden;}


/* We use a unique sprite image to reduce considerably load times (see http://developer.yahoo.com/yslow/). Any html elements using an image has to be announced here and have a specific background-position parameter in its section */
.core, .big-logo, .logo, .arrow, .col2-layout .col-right, .submenu-container .menu-wrapper .span, .creations .ulimgs.album li { background: url(../css_imgs/core.jpg) no-repeat; float: left;}


/* Everything about logo parameters is here */
.big-logo { background-position: -742px top; width: 750px; height: 267px; margin-left: 12px}
.logo { background-position: -413px top; width: 300px; height: 91px; margin-left: 240px; margin-bottom: 14px;}
.home .logo, .presentation .logo, .credits .logo, .mentions .logo { margin-top: 25px;}


/* Navigation */
.menu-container {float: left; width:780px; height: 17px; margin-bottom: 5px; border-bottom: 1px solid #B5B5B5; padding-bottom: 3px; }
.menu-wrapper { padding: 0; margin: 0 0 5px 2px; float: left; height: 20px; overflow: hidden; width: 776px;}
.menu-wrapper .center { float: left; margin: auto;}
.menu-wrapper .left { text-align: left;}
.menu-wrapper a { font-size: 14px; text-align: center; width: auto; padding: 0; float: left;}
.menu-wrapper a.right { float: right;}
.menu-wrapper a.on { color: #000;}
.menu-wrapper a.clearmargin { margin-right: 0;}
.submenu-container { color:#878787; width: 780px; float:left; height: 20px; margin-bottom: 5px; overflow: hidden;}
.submenu-container .menu-wrapper .span { font-size: 14px; float: left;  background-position: left -405px; height: 7px; width: 7px; margin-top: 5px;}
.go { width: 780px; margin: auto; clear: both; position: relative; top: 635px; margin-bottom: -15px; height: 15px; text-align: center; direction: ltr; z-index: 100;}
.go-project { width: 40px; margin: auto; clear: both; position: absolute; top: 647px; margin-bottom: -15px;  height: 15px;}
.accueil { margin: auto; }


/* Navigation tools */
.arrow { float: left; width: 28px; height: 16px; text-indent: -9999px; position: absolute; cursor: pointer;}
.arrow.left { background-position: left top; left: 0; top: 220px; display: none;}
.arrow.left:hover { background-position: left -28px;}
.arrow.right { background-position: -40px top; right: 0; top: 220px; display: none;}
.arrow.right:hover { background-position: -40px -28px;}
.arrow.top, .arrow.bottom { text-indent: 0; width: 140px; text-align: center; position: absolute; text-transform: uppercase; font-size: 13px; left: 323px; }
.arrow.top { background-position: -85px -85px; padding-top: 24px; top: -19px;}
.arrow.top:hover { background-position: -187px -85px;}
.arrow.bottom { background-position: -85px 20px; padding-bottom: 20px; top: 430px}
.arrow.bottom:hover { background-position: -187px 20px;}
.arrow.back { background-position: left -56px; left: 0; width: 29px; height: 16px; display: none;}
.arrow.back:hover { background-position: left -84px;}
.arrow.album { top: 428px;}
.arrow.right.show, .arrow.left.show { display: block;}


/* Specific parameters for page : INDEX */
.index .go { top: 17px;}
.index a { font-size: 14px; margin-top: 27px; margin-right: 33px}
.index a.fr { margin-left: 33px;}
.index .distance { margin-bottom: -160px;}
.index .container  { height: 350px; }
.col2-layout .col { float: left;}
.col2-layout .col-left { width: 315px; text-transform: uppercase; font-size: 14px;}
.col2-layout .col-right { width: 314px; height: 412px; background-position: -1585px top; float: right;}
.col2-layout .col-left span { float: left; clear: both; width: 314px; text-align: right; font-size: 12px;}
.col2-layout .col-left span.first-line { margin-bottom: 10px; font-size: 13px; letter-spacing: 1.1px}
.col2-layout .col-left span.first-line strong { font-size: 17px;}
.col2-layout .col-left span.second-line { margin-bottom: 4px; letter-spacing: 1.4px}
.col2-layout .col-left span.third-line { margin-top: 8px; font-size: 13px; letter-spacing: 1.1px}
.col2-layout .col-left span.third-line strong { font-size: 17px;}
.col2-layout .col-left span.signature { text-transform: capitalize; font-style: italic; font-size: 16px; margin-top: 10px;}
.col2-layout .col-left p { font-size: 12px; text-align: justify; float: left; padding: 0; margin: 0; line-height: 20px; letter-spacing: 0.2px; #line-height: 18px}
.col2-layout .col-left p strong, .col2-layout .col-left span strong { font-size: 16px; width: inherit; font-weight: 100;}


/* Slideshow parameters */
.line { float: left; width: 780px; text-align: center;}
.slider { width: 580px; overflow: hidden; height: 120px; margin: auto; text-align: center; display: block;}
.slider img { cursor: pointer;}
#line1 { margin-bottom: 13px;}
#ajaxcontainer { float:left; text-align: center; width: 780px; margin: auto; position: relative; margin-left: 3px;}
#ajaxcontainer ul { list-style-type: none;}
#ajaxcontainer li { float: left; text-align: center;}
#ajaxcontainer ul.album, #ajaxcontainer ul.coupures { margin: auto; position: relative;width:3000px;}
#ajaxcontainer ul.coupures li, #ajaxcontainer ul.coupures { position:absolute;}
#ajaxcontainer ul.coupures { width: 780px; }
#ajaxcontainer ul.dynamic { width: 720px; margin: auto; position: relative;}
#ajaxcontainer img { margin: 0 15px;}
#ajaxcontainer .coupures img { margin: 0 ;}
#ajaxcontainer .dynname2 img { margin: 0 15px;}
#ajaxcontainer .dynname { width:130px; margin: auto; position: relative; color:#484848; font-size: 15px;}
#ajaxcontainer .dynname2 { width:250px; margin: auto; position:relative; color:#484848; font-size: 15px;}
#ajaxcontainer .dynname3 { margin: auto; position: relative; color: #484848; font-size: 15px; margin-top: 15px;}
#endslider { float: left;}


/* Specific parameters for page : PRESENTATION */
.presentation .logo { margin-bottom: 39px;}
.presentation .col1-layout { width: 780px; text-align: center; position: relative; font-size: 13px;}
.presentation h1 { font-size: 13px; margin: 0 0 60px 0; font-weight: normal; width: 100%; float: left;}
.presentation h2 { font-variant: small-caps; font-size: 16px; clear: both; font-weight: normal; margin: 17px 0 0 0}
.presentation h2.margin { margin-top: 29px;float: left; width: 100%; text-align: center}
.presentation h2.margin-top { margin-top: 4px}
.presentation .col1-layout .part { clear: both; float: left; font-size: 13px;}
.presentation .col1-layout .part1 { width: 636px; margin-left: 75px;  }
.presentation .col1-layout .part1 h2 { margin-top: 14px;}
.presentation .col1-layout .part2 { width: 470px; margin: 38px 0 0 158px}
.presentation .col1-layout .part3 { width: 780px; margin:  20px 0 50px 0;}
.presentation .col1-layout ul { list-style-type: none; font-size: 14px;}
.presentation .col1-layout p { font-size: 14px;}
.presentation .col1-layout ul li { line-height: 13px;}
.presentation .col1-layout ul.galeries { float: left; text-align: left; width: 230px;}
.presentation .col1-layout ul.galeries li { line-height: 16px; font-size: 14px}
.presentation .col1-layout ul.galeries.right { float: right; text-align: right}
.presentation .col1-layout ul.galeries.biennales { width: auto}
.presentation .col1-layout ul.galeries.biennales.center { margin-left: 49px}
.presentation .col1-layout ul.hotels li { line-height: 15px;}
.presentation .col1-layout .quote { float: left; width: 100%; text-align: center; font-style: italic; font-size: 13px; line-height: 18px; padding: 0; margin: 13px 0 0 0;}
.presentation .col1-layout .part3 ul { margin: 15px 0 45px 0;}
.presentation .col1-layout .part3 ul li { line-height: 16px;}


/* Specific parameters for page : PROJETS */
.projets .arrow.back { display: block;}
.projets .arrow.album.left { left: 40px;}


/* Specific parameters for page : CREATIONS */
.creations .container, .creations .heavy, .creations #ajaxcontainer, .creations .line { width: 980px;}
.creations .header { margin-left: 100px;}
.creations #ajaxcontainer .slider { width: 980px;}
.creations #ajaxcontainer .dynname3 { display: none;}
.creations #ajaxcontainer li#endslide {display: none; }
.creations #imgs-container { position: relative; top: 78px}
.creations .ulimgs.album li { width: 6px; height: 6px; float: left; margin-right: 31px; background-position: left -127px;}
.creations .ulimgs.album li.on { background-position: left -149px;}
.creations .ulimgs.album li.last { margin-right: 0;}
.creations .ulimgs.album li img { display: none;}
.creations .slider { top: 78px; margin: auto;}
.creations .arrow.left { left: 453px; top: 363px}
.creations .arrow.right { right: 456px; top: 363px}
.creations .go { margin-left: 0}

/* Specific parameters for page : PRESSE */
.presse .logo { margin-left: 240px; margin-top: 25px;}
.presse #ajaxcontainer ul.dynamic { width: 720px}
.presse .dynamic img { border: 2px solid #000; width: 146px; height: 204px;}
.presse .coupures #line1 { display: none;}
.presse .coupures img { border: 7px solid #000; width: 326px; height: 458px;}
.presse .slider { height: 470px; overflow: visible;}
.presse #ajaxcontainer .coupures .dynname3 { position: relative; top: 460px; text-align: left; font-size: 16px; float: left; margin-bottom: -15px; clear: both; width: auto;}
.presse .arrow.album { top: 228px;}
.presse .arrow.back { display: block; }
.presse .arrow.album.left { left: 40px;}

/* Specific parameters for page : CONTACT */
.contact .container { text-align: center; margin-top: 32px;}
.contact .contact-container { width: 780px; clear: both; float: left; text-align: center;}
.contact .accueil { width: auto; margin-right: 8px;}
.contact .accueil.last { margin-right: 0;}
.contact .go { display: none;}
.contact .go.links { display: block;}
.contact .logo { margin-bottom: 0}
.contact h1, .contact h2 { font-variant: small-caps; font-weight: normal; font-size: 15px; margin: 0;}
.contact .contact-container a { text-decoration: underline; color: #000; font-size: 14px;}
.contact .contact-container { margin: 20px 0 55px 0}
.contact .slider { display: none;}
.contact .arrow { top: 152px;}
.contact .arrow.left { left: -10px;}
.contact .arrow.right { right: 30px;}


/* Specific parameters for page : MENTIONS LEGALES */
.mentions h1 { font-size: 16px; padding-top: 64px;}
.mentions p { font-size: 14px; text-align: left; line-height: 24px; width: 729px; margin-left: 40px;}


/* Specific parameters for page : CREDITS */
.credits h1 { font-size: 16px; padding-top: 64px;}
.credits p { font-size: 14px; }

/* Specific parameters for RU lang : */
.RU .footer { font-size: 12px;}
.RU .go { top: 730px;}
.RU.index .go { top: 17px;}
.RU .distance { margin-bottom: -365px}
.RU.index .distance { margin-bottom: -160px;}
.RU .subli { font-size: 10px;}
.RU.home .col2-layout .col-left p { font-size: 11px; line-height: 19px;}


/* Specific parameters for CN lang : */
.CN.presentation .col1-layout .part2 { width: 640px; margin-left: 70px }
.CN.presentation .col1-layout ul.galeries { width: 310px;}
.CN.presentation .col1-layout .part3 ul { margin: 15px 0 30px 0;}

/* Specific parameters for EN lang : */
.EN .col2-layout .col-left p br { font-size: 3px;}


/* Specific parameters for AR lang : */
.AR { font-size: 22px; font-family: Times}
.AR { font-size: 14px}
.AR.home .col2-layout .col-left { float: right}
.AR.home .col2-layout .col-right { float: left;}
.AR .col2-layout .col-left { text-transform: inherit;}
.AR .col2-layout .col-left p, .AR.presentation .col1-layout ul { font-size: 16px; line-height: 24px;}

.AR.presentation .col1-layout ul.right {}
.AR .col2-layout .col-left span.third-line { font-size: 16px;}
.AR .col2-layout .col-left span.signature { font-size: 20px;}
.AR.presentation .col1-layout .part3 ul li, .AR.presentation .col1-layout ul li { line-height: 18px; font-size: 16px;}
.AR.presentation h2.margin { margin: 0; margin-top: 20px;}
.AR #imgs-container, .AR.presse { direction: ltr;}


/* Specific parameters for JP lang : */
.JP.presentation .col1-layout .part2 { width: 640px; margin-left: 70px }
.JP.presentation .col1-layout ul.galeries { width: 310px;}
.JP.presentation .col1-layout .part3 ul { margin: 15px 0 30px 0;}