/*
Theme Name: Tiana Rafidy
Theme URI: http://wordpress.org/
Description: Theme du site de Tiana Rafidy
Author: Kryzalid team
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: tiana rafidy
*/


/*******************************************************************************************************************************************************************************************************
  ___  ___  __  __ __  __   _   ___ ___ ___
 / __|/ _ \|  \/  |  \/  | /_\ |_ _| _ \ __|
 \__ \ (_) | |\/| | |\/| |/ _ \ | ||   / _|
 |___/\___/|_|  |_|_|  |_/_/ \_\___|_|_\___|

-- 1) COULEURS
-- 2) STYLES DES ÉLÉMENT DE CONTENU
----- 2.1 - Varia
----- 2.2 - Hyperliens
----- 2.3 - Titres
----- 2.4 - Listes
----- 2.5 - Formulaires
----- 2.6 - Tableaux
-- 3) SÉRIES DE CLASSES RÉUTILISABLES
---- 3.1 - Affichage
---- 3.2 - Positionnement
------ 3.2.1 - Type block
------ 3.2.2 - Type ligne
---- 3.3 - Design du texte
-- 4) DESIGN DES BLOCS STRUCTUREL
-- 5) CLASSES DU SITE ACTUEL

Pour plus de détails, consultez le fichier README.txt qui se trouve dans ./css.
À faire : Intégrer les balises HTML5
*******************************************************************************************************************************************************************************************************/

/* 0) FONTFACE */



/******************************************************************************************************************************************************************************************************/

/* 1) COULEURS { */
body { background: #000 url(images/bg-body.png) no-repeat top; margin: 0}
a {color:blue;}
a:visited, a:active {color:blueviolet;}
del {color:#ccc;}
hr {background:transparent;border-color:#555;}
table {background:rgba(0,255,255,0.3);}
th {background:rgba(0,255,255,0.3);}
/* } */

/******************************************************************************************************************************************************************************************************/

/* 2) STYLES DES ÉLÉMENT DE CONTENU (TYPOGRAPHIE, HAUTEUR DE LIGNE, MARGES, ETC.) { */
body {font: 81.3% Arial, Helvetica, sans-serif;/*81.3% de 16px = 13px*/}
html>body {font-size:13px;}

/* 2.1 - Varia*/
cite, p, ul, ol, dl, hr, fieldset {line-height:1.2em;margin:1.538em 0;}
address {font-style:normal;}
big {font-size:1.1em;}
cite {display:block;}
del {text-decoration:line-through;}
em {font-style:italic;}
hr {border-width:.083em 0 0 0;border-style:dotted;height:.083em;}
img {border:none;vertical-align:top;}
small {font-size:.846em;line-height:1;vertical-align:top;}
strong {font-weight:bold;}
sup {font-size:x-small;line-height:1;vertical-align:super;}

/* 2.2 - Hyperliens*/
a {text-decoration:none;}
a:hover, a:focus {text-decoration:underline;}

/* 2.3 - Titres*/
h1 {font-size:2.308em/*30px*/;line-height:1.667em;margin-bottom:1em;}
h2{font-size: 15px; margin: 0; line-height: 15px; color:#cd0238; font-family: arial}
h3 {font-size:18px; font-family: arial}
h4, h5, h6 {}

/* 2.4 - Listes*/
ul, ol {list-style-position:outside;margin-left:20px;}
ul {list-style-type:square;}
ol {list-style-type:decimal;}
dl, dt, dd {}

/* 2.5 - Formulaires*/
input[type="password"], input[type="text"], textarea {}
input[type="submit"], input[type="image"] {cursor:pointer;}
input[type="checkbox"], input[type="radio"] {}
fieldset, form, label, select {}
textarea {font-size:1em;font-family:Arial, Helvetica, sans-serif;}

/* 2.6 - Tableaux*/
caption, td, tr, tbody, tfoot, thead {}
td, th {border:.083em solid;padding:0 5px;text-align:left;}
table {font-size:.923em;line-height:2.833em;margin:3em 20px 3em;}
/* } */


/******************************************************************************************************************************************************************************************************/

/* 3) SÉRIES DE CLASSES RÉUTILISABLES*/

/* 3.1 - AFFICHAGE { */
.alert-ie6 {display:none;}
.block {display:block;}
.flat {line-height:0;height:0;}
.flowHidden {overflow:hidden;}
.flowScroll {overflow:scroll;}
.flowVisible {overflow:visible;}
.fullWidth {width:100%;}
.hidden {visibility:hidden;}
.hide {display:none;}
.inline {display:inline;}
.inlineBloc {display:inline-block;}
.listStyleNone {list-style:none;}
.tableCell {display:table-cell;}
/* } */

/* 3.2 - POSITIONNEMENT { */
/* 3.2.1 - Type block*/
.absolute {position:absolute;}
.clear {clear:both;}
.clearLeft {clear:left;}
.clearRight {clear:right;}
.fixed {position:fixed;}
.floatLeft {float:left;}
.floatRight {float:right;}
.relative {position:relative;}
.satic {position:static;}

/* 3.2.2 - Type ligne*/
.txtAlignLeft {text-align:left;}
.txtAlignRight {text-align:right;}
.txtJustify {text-align:justify;}
.verticalTop {vertical-align:top;}
.verticalMiddle {vertical-align:middle;}
/* } */

/* 3.3 - DESIGN DU TEXTE { */
.bold {font-weight:bold;}
.error, .warning {color:#ff0000;}
.italic {font-style:italic;}
.lighter {font-weight:lighter;}
.lowercase {text-transform:lowercase;}
.noBold {font-weight:normal;}
.noItalic {font-style:normal;}
.noTransform {text-transform:none;}
.notice {color:#ccc;}
.success {color:#00ff00;}
.uppercase {text-transform:uppercase;}
.underline {text-decoration:underline;}
/* { */

/*CLASSES POUR LES MENUS DE NAVIGATION { */
.nav ul, .nav ol {list-style:none inside;margin:0;}
.nav a, .nav a:hover {text-decoration:none;}
.nav_x li {display:inline;}
.nav_x a {display:inline;}
.nav_y a {display:block;}
.nav_y li {display:block;}
/* } */

/******************************************************************************************************************************************************************************************************/

/* 4) DESIGN DES BLOCS STRUCTUREL { */
.canvas { background: url("images/bg-canvas.jpg") no-repeat top}
#container {margin:0 auto; width: 1000px}
#content{padding-bottom: 100px}
.container .push {clear:both;height:200px;}

/*Header ============== */
#header {overflow: hidden; position: relative}
#logo{height: 180px; width: 343px; float: left; text-indent: -9999px}
#menu{float: left; width: 627px; height: 40px; background: url("images/bg-menu.png") repeat-x top; margin: 0; padding:10px 0 0 30px; margin-top: 60px;  list-style: none;}
#menu li{display: inline; margin: 0 17px}
.en #menu li{margin: 0 26px}
#menu li a{color:#333; text-transform: uppercase; font-size: 14px; font-family: "Times New Roman",serif;}
#menu li a:hover, #menu li a.active{text-decoration: none}
#menuTop{position: absolute; top: 16px; right: 0; margin: 0; padding: 0; list-style: none; width: 100%}
#menuTop li{display: inline; margin-left: 22px; font-size: 12px; font-weight: bold}
#menuTop > a{font-weight: bold; font-size: 12px;float: right}
#qtranslate-chooser{margin:0; padding: 0; float: right}
#qtranslate-chooser li.active{display: none}
/* == */

.content {background: url("images/bg-content.png") no-repeat top left; border-top: 1px solid #464646;}
.aSide, .bSide {}
#footer {}
/* } */

/******************************************************************************************************************************************************************************************************/

/* 5) CLASSES DU SITE ACTUEL { */
/*Rose général*/
.rose #logo{background: url("images/logo-tiana-rafidy-rose.png") no-repeat top;}
.rose #menu li a:hover, .rose #menu li a.active, .rose #menuTop a{color:#e5089f}
.rose #menuFooter a{color:#e5089f}
.rose #logoFooter{background: url("images/logo-footer-rose.png") no-repeat top;}
/*Argent général*/
.argent #logo{background: url("images/logo-tiana-rafidy-argent.png") no-repeat top;}
.argent #menu li a:hover, .argent #menu li a.active, .argent #menuTop a{color:#999}
.argent #menuFooter a{color:#999}
.argent #logoFooter{background: url("images/logo-footer-argent.png") no-repeat top;}
#container.argent {background: url("images/bg-argent.jpg") no-repeat top;}
/*Or général*/
.or #logo{background: url("images/logo-tiana-rafidy-or.png") no-repeat top;}
.or #menu li a:hover, .or #menu li a.active, .or #menuTop a{color:#9a8134}
.or #menuFooter a{color:#9a8134}
.or #logoFooter{background: url("images/logo-footer-or.png") no-repeat top;}
#container.or {background: url("images/bg-or.jpg") no-repeat top;}


/*Accueil*/
#accueil #container{background: #000 url(images/bg-accueil.jpg) no-repeat top;}
#accueil.en #container{background: #000 url(images/bg-accueil-en.jpg) no-repeat top;}
#accueil #content{padding-top: 300px; padding-bottom: 50px}
#accueilPhotos, #accueilVideos{float: left; width: 307px; height: 260px; margin-right: 30px; font-family: "Times New Roman", serif; }
#accueilPhotos h2, #accueilVideos h2, #accueilActualites h2{margin:0; height: 25px; color:#fff; font-weight: normal; font-size: 18px; font-family: "Times New Roman", serif; font-style: italic; text-transform: uppercase}
#accueilPhotos h2 span, #accueilVideos h2 span, #accueilActualites h2 span{background-color: #e5089f; padding: 4px 25px 4px 6px; height: 17px; line-height: 25px}
#accueilPhotos a, #accueilVideos a{display: block; padding-top: 200px; margin-top: 20px; text-transform: uppercase; color: #e5089f}
#accueilPhotos a:hover, #accueilVideos a:hover{text-decoration: none; color: #fff}
#accueilPhotos a{background: url("images/btn-photos-accueil.jpg") no-repeat top;}
#accueilVideos a{background: url("images/btn-videos-accueil.jpg") no-repeat top;}
#accueilActualites{margin-top: 80px; overflow: hidden}
#accueilActualites .post{width: 460px; margin: 20px 40px 0 0; float:left;}
#accueilActualites .date{color: #fff; font-size: 11px; font-family: "Times New Roman", serif;text-transform: uppercase}
#accueilActualites h3{margin: 3px 0 5px 0}
#accueilActualites h3 a{font-size: 20px; color:#e5089f; font-style: italic; font-weight: normal;font-family: "Times New Roman", serif;}
#accueilActualites a{color:#e5089f}
#accueilActualites .entry{color: #aaa}

/*Boutique*/
#boutique #container{background: #000 url(images/bg-boutique.jpg) no-repeat top;}
#boutique #content{width: 705px; margin-left: 343px; background: url("images/bg-noir-transparent.png") repeat; padding: 20px 0 0 52px; overflow: hidden}
#boutique h2{margin:0 0 20px 0; height: 25px; color:#fff; font-weight: normal; font-size: 18px; font-family: "Times New Roman", serif; font-style: italic; text-transform: uppercase}
#boutique h2 span{background-color: #e5089f; padding: 4px 25px 4px 6px; height: 17px; line-height: 25px}
#boutique .media{overflow: hidden; padding-bottom: 100px}
#boutique .media img{float: left; width: 200px; margin-right: 52px}
#boutique .media .mediaDetail{float: left; width: 335px; color: #fff}
#boutique .media h3{color:#e5089f; font-size: 40px; font-style: italic; font-family: "Times New Roman", serif; font-weight: normal; margin:0 0 20px 0; line-height: 30px}
#boutique .media h3 span{display: block; color: #fff; font-size: 25px; margin-top: 5px}
#boutique .mediaDesc{border-top: 1px solid #555; border-bottom: 1px solid #555}
#boutique .mediaPrix{font-size: 40px; font-family: "Times New Roman", serif; border-bottom: 1px solid #555}
.btnCommander{display: block; width: 252px; height: 30px; margin-top: 15px; padding: 9px 0 0 18px; background: #000 url(images/btn-commander.png) no-repeat top; color: #333; font-size: 18px; font-family: "Times New Roman", serif;text-transform: uppercase}
.btnCommander:hover{text-decoration: none; color: #e5089f}

/*Actulités*/
#subMenuActu{float: left; margin: 0; list-style: none; padding: 0; width: 343px; margin-top: 10px}
#subMenuActu li{margin-bottom: 5px}
#subMenuActu a{line-height: 25px; color: #fff; font-size: 18px; font-style: italic; text-transform: uppercase; font-family: "Times New Roman", serif; padding: 3px 20px 3px 5px;}
#subMenuActu a:hover, #subMenuActu a.active{background-color: #e5089f; text-decoration: none}
#actualites #container{background: #000 url(images/bg-actualites.jpg) no-repeat top;}
#actualites #content{min-height: 800px; width: 605px; float: left; margin: 0; background: url("images/bg-noir-transparent.png") repeat; padding: 40px 0 0 52px; overflow: hidden}
#actualites .post{/*width: 460px;*/  padding-bottom: 10px; border-bottom: 1px solid #555; margin: 0 40px 30px 0; /*float:left;*/}
#actualites .post a{color:#e5089f}
#actualites .date{color: #fff; font-size: 11px; font-family: "Times New Roman", serif;text-transform: uppercase}
#actualites h3{margin: 3px 0 5px 0}
#actualites h3 a, #actualites .post h3{font-size: 20px; color:#e5089f; font-style: italic; font-weight: normal;font-family: "Times New Roman", serif;}
#actualites .entry{color: #fff}
.coupurePress a{font-size: 20px; color:#e5089f; font-style: italic; font-weight: normal;font-family: "Times New Roman", serif;}
.coupurePress p{margin: 8px 0 5px 0}
.nextPrev{float: left}
.nextPrev a, .backActu a{color:#e5089f; font-size: 12px; font-family: "Times New Roman", serif;text-transform: uppercase; padding-right: 32px}
.nextPrev a:hover, .backActu a:hover{text-decoration: none; color:#fff}
.nextPrev a[rel=next]{border-left: 1px solid #545454; padding-left: 32px}
.backActu{float: right}
.intro{color: #fff;font-family: "Times New Roman", serif; font-size: 20px; font-style: italic; padding-bottom: 30px}

/*Biographie*/
#biographie #content{min-height: 700px; width: 590px; padding: 70px 10px 60px 10px; float: left; background: url("images/bg-noir-transparent.png") repeat; color:#aaa;}
.imgBio{float: right}
#biographie h2{color: #b7b7b7; font-size: 40px; font-family: "Times New Roman"; font-style: italic; font-weight: normal; margin: 0 0 40px 0; line-height: 30px}
#biographie #content big{color: #f0f0f0; font-size: 18px; line-height: 1.3em}

/*Portfolio*/
#subMenuPortfolio{margin: 0; list-style: none; padding: 0; width: 343px; margin-top: 10px; float:left;}
#subMenuPortfolio li{margin-bottom: 5px}
#subMenuPortfolio a{line-height: 25px; color: #bdaa6e; font-size: 18px; font-style: italic; text-transform: uppercase; font-family: "Times New Roman", serif; padding: 3px 20px 3px 5px;}
#subMenuPortfolio a:hover, #subMenuPortfolio a.active{background: transparent url(images/bg-sub-menu-portfolio.png) repeat-x top; text-decoration: none; color: #2a2208}
#portfolio #content{float: right; width: 640px; color:#bdaa6e}
#portfolio #content h2{ color:#bdaa6e; font-size: 40px; font-family: "Times New Roman"; font-style: italic; font-weight: normal; margin: 30px 0 30px 0}
.postMultimedia{margin-top: 40px; padding-bottom: 5px; border-bottom: 1px solid #555; overflow: hidden}
.postMultimedia img{float: left; width: 144px; margin-right: 40px; }
.detailMultimedia{float: left; width: 456px; color: #9a8134}
#portfolio #content .detailMultimedia h2{margin: 0 0 20px 0; font-size: 30px;line-height: 20px}
#menuPhotos{ width: 450px; margin: 50px 0 65px 0; padding:0; list-style: none;}
#menuPhotos li{display: block; float: left; margin:0 25px 20px 0; height: 42px; width: 77px; border: 4px solid #fff}
#menuPhotos li:hover,#menuPhotos li.selected{border: 4px solid #9a8134}
#photoLeft{float: left; margin: 0; list-style: none; padding: 0; width: 450px; margin-top: 10px}
#thumbs{width: 450px;; margin-top: 40px}
.photoFolio img{float: right}
#portfolio #content.photoFolio{width: 540px}
#slideshow{height: 770px; overflow: hidden}
#loading{background-image: url("images/loader.gif");background-position: center center;background-repeat: no-repeat;height: 770px;width: 520px;}
.borderImgWhite{border:#ffffff solid 1px}
.thumbsVideo{margin:20px 0 5px 0;padding:0 0 0 0;width:700px}
.thumbsVideo li{margin-right:7px; margin-bottom: 7px;}

#ulTitreVideo{padding:0;margin:0}
#ulTitreVideo{padding:0;margin:0}
#ulTitreVideo #portfolio{margin-left:20px}
#ulTitreVideo #lorety{margin-left:40px}
/*Contact*/
#contact #container {background: url("images/bg-rose.jpg") no-repeat top;}
#contact #content{width: 640px; float: right; margin: 0;}
#introContact{color:#fff; padding:20px 30px 5px 52px; margin-bottom: 30px; background: url("images/bg-noir-transparent.png") repeat; font-size: 20px; font-family: "Times New Roman", serif; font-style: italic}
#introContact p{margin-top: 0}
#contactInfo{width: 320px; float: left; margin-bottom: 100px}
#contactInfo p{color: #fff; font-size: 20px; font-family: "Times New Roman", serif;}
#contactInfo p span{color:#e5089f; font-size: 25px;}
#confirmContact{color:#fff; font-size: 16px}
/*Formulaire*/
#fContact input{font-size:13px; width:265px; height:40px; padding:0 30px 0 15px; line-height:40px; margin:0 0 20px 0; color:#fff; background: #1b1e21 url(images/form-star.png) no-repeat top right; border:none; font-family: Georgia,'Times New Roman',times,serif;outline-color:#249eca}
#fContact #telephone{background-image: none}
#fContact input.marge{margin-right:15px}
#fContact .noir{background:#1b1e21; width:640px; text-align: right}
#fContact textarea{font-size:13px; margin:0; height:115px; width:595px; padding:15px 30px 15px 15px; border:none; background: #1b1e21 url(images/form-star.png) no-repeat top right; color:#fff; font-family: Georgia,'Times New Roman',times,serif; overflow: auto;outline:none}
#fContact input.btnEnvoyer{width:96px; height:15px; padding:0; margin:0 10px 0 0; background: none;}
#fContact input.error, #fContact textarea.error{background: #cd486b url(images/form-star-error.png) no-repeat top right;}
#confirmContact{border:none}

/*PAGE 404*/
#page404 #container{background: #000 url(images/bg-boutique.jpg) no-repeat top;color:#ffffff;}
#page404 #wrapper{height:700px}
#page404 #content{width: 705px; margin-left: 343px; background: url("images/bg-noir-transparent.png") repeat; padding: 20px 0 0 52px; overflow: hidden}
#page404 h1{font-size:48px;font-weight:normal}
#page404 h2{margin:0 0 20px 0; height: 25px; color:#ffffff; font-weight: normal; font-size: 36px;}
#page404 p{font-size:20px;font-weight:lighter}
#page404 p a, #page404 p a:hover, #page404 p a:visited{color:#e5089f;}

/*FOOTER ###############*/
#footer{position: relative; clear: both}
#logoFooter{position: absolute; top: 0; left: 65px; width: 76px; height: 95px; text-indent: -9999px}
#menuFooter{margin: 0; padding: 30px 0; background: #f2f2f2; width: 820px; padding-left: 180px;}
#menuFooter li{display: inline; margin-right: 28px}
#menuFooter li.last{margin-right: 0}
#menuFooter a{font-family: "Times New Roman", serif; text-transform: uppercase}
#menuFooter #qtranslate-chooser{float:none; display: inline}
#footerFoot{text-align: center; padding: 40px 0 30px 0}
#footerFoot ul{margin: 0; padding: 0; list-style: none}
#footerFoot ul li{display: inline}
#footerFoot ul li a{display: inline-block; padding: 0 5px}
#footerFoot a, #footerFoot p{color: #777; font-size: 11px; margin: 0}
#copy{float:left}
#kryzalid{float: right}

#facebook-link{ display:block; width:20px; height:20px; margin-right: 10px;text-indent: -9999em; background: url('images/facebook-rose.png') left top no-repeat; background-size: 100%; margin-top: -5px;}
#boutique-home{position:relative; top: -45px;}

.page9 #boutique .media .mediaDetail{float: left; width: 200px; color: #fff}
.page9 #boutique .media img{float: left; width: 150px; height:auto; margin-right: 10px}
.page9 #boutique .media { padding-bottom: 0; }