﻿/*
Theme Name:  Shine on you crazy diamond
Theme URI:  http://www.laurent-lumieres.com/
Description:  Designed for Laurent Lumieres SARL
Version:  1.0
Author:  Axel Chanfrault ID MENEO
Author URI:  http://www.id-meneo.com/
*/
@font-face {
    font-family: 'TheanoDidotRegular';
    src: url('TheanoDidot-Regular-webfont.eot') format('eot');
src:	url('TheanoDidot-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('TheanoDidot-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, #bandeau, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 1em;
	vertical-align: middle;
	background: transparent;
}									

article, aside, figure, footer, header, #bandeau, nav, section {display: block;}

img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;	overflow-x:hidden;}

ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; vertical-align: baseline; background: transparent; color: #111;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

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

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none; text-decoration: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: middle;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 5px;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  

body {font: 1em TheanoDidotRegular, Helmet, Freesans, sans-serif;}

body {
color: #333;
background-color: black;
}

select, input, textarea {
color: #333;
}

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #790007; color: #fff; text-shadow: none;}
::selection {background: #790007; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #790007;} 

ins {background-color: #790007; color: #000; text-decoration: none;}
mark {background-color: #790007; color: #000; font-style: italic; font-weight: bold;}

/*********************** REAL CSS STARTS ******************************/
.wrapper {
  margin: 0 auto;
    width: 1000px;
}
li {list-style:none;
}
p {
text-align:justify;
font-size: 0.95em;
margin-bottom: 10px;
}
h2 { 
text-align:justify;
} 
h3 {
margin-top:10px;
line-height: 20px;
margin-bottom: 5px;
font-size: 0.95em;
}
form {
margin-top: 5px;
}

/* -- Header & Nav ---------- */
#logo, address {
	background-image: -moz-linear-gradient(#630000, #790007);
	background-image:-webkit-gradient(linear,left top,left bottom,from(#630000),to(#790007));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#630000',endColorstr='#790007');
	}
#logo a {
    display: block;
    height: 80px;
	background: url("images/logo-laurent-lumieres.png") no-repeat scroll center center transparent; 
	}	
nav, #bandeau h1, #bandeau h2 {
	position:absolute;
	z-index:10;
}
nav {
background : black;
}
nav ul {
width: 1000px;
}
nav ul li {
/* background-image: url('images/black-transparent'); width:100px;*/
background-color: black;
display: inline-block;
text-transform: uppercase;

height:24px;
float:left;
text-align: center;
}
nav ul li a {
color: white;
height:24px;
display:block;
padding: 2px 15px;
font-size: 0.8em;
text-decoration: none;
vertical-align:top;
}
nav ul li a:hover, .current_page_item a, .current-cat a {
background: white;
color: black;
color: #333;
height: 20px;
}
#breadcrumb {
padding: 10px 0;
}

.wide {
position:relative;
width:1000px;
height:400px;
}

.medium {
float: left;
width: 370px;
height: 278px;
margin-bottom: 30px;
margin-right:20px;
}
.medium a {
float: left;
width: 370px;
height: 278px;
display: block;
}


/*--------------- Homepage----------- */
#circle {
position:absolute;
top:80px;
width:460px;
height: 400px;
margin-left: 130px;
z-index:5;
background: url("images/circle.png") no-repeat scroll 0 0 transparent;
/* -moz-animation: appear 2s 1 linear */
}
/*
@-moz-keyframes appear {
0% {-moz-transform: translate(1400px,0)  rotate(0deg);}
100% {-moz-transform: rotate(360deg) translate(0,0);}
}
@-moz-keyframes turn {
0% {-moz-transform: rotate(0deg)  scale(0.8,0.8);}
100% {-moz-transform: rotate(359deg)  scale(0.8,0.8);}
}
@-moz-keyframes appearright {
0% {opacity:0 ;}
75% {opacity:0;}
100% {opacity:1};}
}
@-moz-keyframes appearleft {
0% {-moz-transform:translate(-2000px,0);}
75% {-moz-transform:translate(-2000px,0);}
100% {-moz-transform:translate(0,0);}
}*/
#bandeau h1, #bandeau h2 {
background-image: url('images/red-transparent.png');
color: white;
padding: 0 15px;
max-height: 50px;
}
#bandeau h1 {
font-size: 2em;
top: 230px;
margin-left:60px;
/* -moz-animation: appearleft 6s 1 linear; */
}

#bandeau h2 {
font-size: 1.6em;
top: 330px;
margin-left: 280px;
/* -moz-animation: appearright 8s 1 linear; */ 
}

#seperator {
background-image: url('images/black-transparent.png');
width: 1000px;
height:20px;
display: block;
position:absolute;
top:460px;
z-index:100;
}

/*-----Base articles-------------*/
section {
float:left;
background-color: white;
padding: 25px 30px;
width: 940px;
z-index:100;
}
article {
float: left;
width: 760px;
}

/* --------------- Sidebar --*/
aside {
float: right;
padding-bottom: 10px;
}
#sidebar {
width: 160px;
}
aside ul {
padding: 5px;
font-size: 0.8em;
}
address {
background-color: #790007;
padding: 15px;
font-size: 0.8em;
color:white;
line-height:1.4em;
font-style: normal;
}
address a {
color: white;
}

/*----------- CALL form ------- */
#call {
width: 360px;
background-color:lightgrey;
background-image:-webkit-gradient(radial, from (lightgrey), to (darkgrey));
background-image:-moz-radial-gradient(lightgrey,darkgrey);
display: block;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
border: solid thin #333333;
margin-left: 20px;
}
#call img {
float: left;
margin: 10px;
vertical-align: top;
}
#send {
background-image: -moz-linear-gradient(white,lightgrey);
background-image: -webkit-gradient(linear,from(white),to(lightgrey));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='white',endColorstr='lightgrey'); 
}
/*------------------------Page, article, categorie -------------*/
#page {
float: left;
width: 550px;
height: 225px;
}
#page h1 {
 font-size: 1.5em;
    margin: 0 20px 0 0;
	}
#page h2, #category h2 {
color: #790007;
line-height: 20px;
}
#content {
  -moz-column-count: 2;
    -moz-column-gap: 20px;
	  -webkit-column-count: 2;
    -webkit-column-gap: 20px;
	column-count: 2;
    column-gap: 20px;
	text-align: justify;
	line-height: 20px;
	}
#content li {
	font-size: 0.95em;
    list-style: square inside url('images/puce.gif');
    padding: 5px;
}
#content span {
	color: #790007;
	font-weight: bold;
/*	text-transform: uppercase; */
	}	
#category {
padding: 20px;
}
#category h1 {
font-size: 2em;
}
ol li {
    float: left;
    padding: 0 20px 20px 0;
    width: 320px;
}	
.exergue {
    background-color: lightgrey;
    background-image: -moz-radial-gradient(lightgrey, darkgrey);
    border: solid thin #333333;
    display: block;
    margin: 10px auto 0 auto;
    padding: 10px;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
    width: 150px;
}	
/*-------------Teaser AREA-----*/
#teaser {
height: 300px;
padding: 20px 0 20px 30px;
}
#teaser h2 {
font-size: 1.6em;
margin-bottom:10px;
}
#teaser figure {
width: 305px;
height: 230px;
display:inline-block;
}
.marginleft {
margin-left:7px; 
}
figcaption {
    -moz-transition: all 200ms linear 0s;
	-webkit-transition: all 200ms linear 0s;
	-o-transition: all 200ms linear 0s;
    background: url("images/white-transparent.png") repeat scroll 0 0 transparent;
    font-size: 0.8em;
    height: 80px;
    line-height: 14px;
    margin-top: -35px;
    padding: 0 5px;
    position: absolute;
    width: 296px;
	display: block;
}
#teaser figure:hover figcaption {
margin-top:-80px;
} 
.slide {
width:940px;
height:230px;
}
/*-------------------Footer------------------*/
footer {
background: white;
padding: 10px;
text-align: center;
}
/* --------------- Facebook trick ----------
.fsl, .uiLinkSubtle, .connect_widget_connected_text {
display: none;
}
 */
 
/*-----------Effets d'ombrage ----------
address, #call, #teaser figure {
-moz-box-shadow: 4px 4px 4px #111111;
-webkit-box-shadow: 4px 4px 4px #111111;
-o-box-shadow: 4px 4px 4px #111111;
box-shadow: 4px 4px 4px #111111;
}
*/

 
/* Print styles!
-------------------------------------------------------------------------------*/
@media print {



}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold */
@media screen and (max-device-width: 480px) {
	
		
}

@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}

/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}

/* Page Atelier */
.half {
    float: left;
    min-width: 400px;
    width: 50%;
}
.gallery dl {
    display: inline-block;
    float: left;
    margin: 5px;
}
@media (max-width:480px) {
	.half { 
		min-width: auto;
		width: 100%;
	}
}