/*
Theme Name: db prods Mars Edition

Description: Transition by Damia Bouic.
Version: 4.0
Author: Damia Bouic
Author URL: http://db-prods.net/blog/
	
	Please, while using this Wordpress Theme, if you find any bugs, contact me:
	dabouic@gmail.com

*/

/*- Page Structure */

/*@import url('https://fonts.googleapis.com/css?family=Play');
@import url('https://fonts.googleapis.com/css?family=Poiret+One');*/

@font-face {
 font-family: "Poiret One";
 src: url("theme/PoiretOne-Regular.ttf") format("truetype");
}

@font-face {
 font-family: "Play";
 src: url("theme/Play-Regular.ttf") format("truetype");
}


body {
	font-family: 'Play', 'Lucida Grande', Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
	background:url('theme/Banniere_V6_MSL_Sol2375.jpg') repeat-x right top,url('theme/footer_bg2.jpg') repeat-x right bottom;
    background-color:#ad925d;
	text-align: center;
	margin: 0 0 30px;
	}

header {
	text-align:left;
	max-width: 1000px;
	position: relative;
	height: 257px;
	padding: 10px;
    margin:30px 30px 0 30px;
	}

#page {
	width: 100%;
    max-width:1920px;
    background:rgba(30, 10, 05, 0.6);
    box-shadow: 0 0 100px #000;
    color: white;
    margin: 0;
	padding: 5px 0 15px;
	position: relative;
	font-size: 1em;
	text-align: justify;
    text-shadow: 0px 1px 2px #000;
	}

#table {
    float: right;
    width: 300px;
    margin-left:20px;
    padding-left:5px;
    padding-bottom:20px;
    background:rgba(0, 0, 0, 0.3);
}

#texte {padding: 0 30px 0 30px;}
#texte img {/*padding:0 30px 0 30px;*/ max-width:100%;}

#footer {
	font-size: 1em;
    text-shadow: 0 1px 2px #000;
    color: white;
	line-height: 1em;
	width:100%;
	height:120px;
	text-align: center;
	}

#footer p:first-letter {font-size: 1.1em;}

#footer a {
	color: #FFF;
	font-weight: bold;
	}

#footer a:hover {
	border: none;
	font-weight: bold;
	}

#dossiers {
    font-family: 'Poiret One', Helvetica;
}

#dossiers li {
    display:inline-block;
    font-size:1.5em;
	margin:0px;
	padding:5px 10px;
    text-align:center;
    text-shadow: 0px 1px 0px #666, 0px 2px 2px #000, 0px 4px 5px #000, 0px 6px 8px #000, 0 -3px 8px #aaa;
	border-radius:2px;
    background:rgba(200, 120, 250, 0.2);
    transition-property: height, width, background, box-shadow;
    transition-duration: 1s;
    -webkit-transition-property: height, width, background, box-shadow;
    -webkit-transition-duration: 1s;
    overflow:hidden;
    border-top:0px solid #ccc;
    box-shadow:0px 2px 15px #000;
    }
    
#dossiers li.dossier_courant {
    background:rgba(220,180,150,1);
    }
    
#dossiers li.dossier_courant:hover {
    background:rgba(30,5,5,0.4);
    box-shadow:2px 0 20px #000 inset;
    }
    
#dossiers li img {
    border:5px solid #fff;
    box-shadow:2px 0 5px #000;
    margin:5px;
    }

#dossiers li:hover {
    background:rgba(30,5,5,0.6);
    box-shadow:2px 0 20px #000 inset;
    /*height:250px;*/
    }    
    
#galerie_archive {
	text-align:center;
    display:inline-block;
	}

#galerie_archive img {
    border:1px solid #111;
    border-top:1px solid #333;
    box-shadow: 0 2px 5px #000;
    transition-property:box-shadow;
    transition-duration:0.5s;
    -webkit-transition-property:box-shadow;
    -webkit-transition-duration:0.5s;
    }
#lastpic {text-align: center;}

#lastpic img {
    vertical-align: middle;
    margin:5px;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px #000;
    max-width: 100%;
    height: auto;
    transition-property:box-shadow;
    transition-duration:0.5s;
    -webkit-transition-property:box-shadow;
    -webkit-transition-duration:0.5s;
    }

#lastpic img:hover {
    box-shadow: 0 5px 20px #000;
    }
    
.tiroirmenu {
    display: block;
    }

.tiroirmenu a {
    color:#ccc;
    }

.tiroirmenu a:hover{
    color:#333;
    }
    
.tiroirmenu img {
    margin: -2px;
    }

.tiroir {
    padding: 5px;
    border: 1px solid #666;
	border-top: 1px solid #333;
	border-bottom: 1px solid #999;
	border-radius: 5px;
    box-shadow: 0 2px 5px #000 inset;
    }

.tiroir_all {

    border: 1px solid #666;
	border-top: 1px solid #333;
	border-bottom: 1px solid #999;
	border-radius: 5px;
    }

#cntdc​9​3​4​f​c​1​2 {
	color: white;
    text-shadow: 0px 3px 3px #000;
	font-size: 3em;
	font-weight: bold;
	letter-spacing: -1px;
	padding-top: 75px;
	margin: 0 0 0 40px;
	width: 100%;
    }

#perseverance {
    width: 100%;
    height: 250px;
    text-align: center;
    background:url('theme/icones_dossiers/PerseveranceBackground_map.jpg') no-repeat center;  
    box-shadow: 0 0 100px #000 inset;
}

#curiosity {
    width: 100%;
    height: 250px;
    text-align: center;
    background:url('theme/icones_dossiers/CuriosityBackground.jpg') no-repeat center;  
    box-shadow: 0 0 100px #000 inset;
}


#opportunity {
    width: 100%;
    height: 250px;
    text-align: center;
    background: url('theme/icones_dossiers/Sol3927_pancam_postcard_bg.jpg') no-repeat center;
    box-shadow: 0 0 100px #000 inset;
}


#spirit {
    width: 100%;
    height: 250px;
    text-align: center;
    background: url('theme/icones_dossiers/Sol1326_1327_pancam_pds_postcard_web_bg.jpg') no-repeat center;
    box-shadow: 0 0 100px #000 inset;
}


#phoenix {
    width: 100%;
    height: 250px;
    text-align: center;
    background: url('theme/icones_dossiers/sol83-webpostcard_phoenix_bg.jpg') no-repeat center;
    box-shadow: 0 0 100px #000 inset;
}

#insight {
    width: 100%;
    height: 250px;
    text-align: center;
    background: url('theme/icones_dossiers/InSightBackground.jpg') no-repeat center;
    box-shadow: 0 0 100px #000 inset;
}


/*- Menubar */

#menubar {
	position: fixed;
    top:0px;
	left: 0px;
	width: 100%;
    height:auto;
    text-align:center;
    background-color:rgba(30, 10, 05, 0.6);
    box-shadow: 0 0 100px #000;
    z-index:1000;
    -webkit-backdrop-filter: blur(20px);
    }
         
ul.menu {
    margin: -4px 30px;
	}

ul.menu li {
	display: inline-block;
	margin: 0;
	}

ul.menu,
ul.menu li a {
	padding: 5px 12px 5px;
    display:inline-block;
	}

ul.menu li a {
	font-size: 1.2em;
	text-shadow: 0px 2px 2px #000;
	color: #fff;
	margin: 0;
	transition-property:background, text-shadow, color, box-shadow;
	transition-duration:0.5s;
    }

ul.menu li a:hover {
	background:#330000;
	color: white !important;
	text-decoration: none;
    text-shadow:  0px 0px 5px #eee;
    box-shadow: inset 0 0 5px #000;
    border-radius: 2px;
	}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
	color: white !important;
    background:#330000;
	text-decoration: none;
    text-shadow: 0px 0px 5px #eee;
	border-radius: 2px;
    box-shadow: inset 0 0 5px #000;
	}

/*- Headings */

h1, h2 {
	font-family: 'Poiret One', Lucida Grande, 'Trebuchet MS', Verdana, Sans-Serif;
    text-shadow: 0px 1px 0px #666, 0px 2px 2px #000, 0px 4px 5px #000, 0px 6px 8px #000, 0 -3px 8px #aaa;
    color: white;
	}

h1 {
	font-size: 2em;
	letter-spacing: 5px;
	padding-top: 15px;
	margin: 0px;
	width: 100%;
	}

h1:first-letter {
    font-size:2.5em;
    vertical-align: middle;
    }

h2 {
    display:block;
    background-image: url(theme/h2_fond.png);
    background-repeat: no-repeat;
    padding:5px 5px 5px 50px;
    margin-left: -30px;
    }

h3 {
	font-size: 1.2em;
	padding-left: 20px;
	text-shadow: 0px 1px 0px #666, 0px 2px 2px #000, 0px 4px 5px #000, 0px 6px 8px #000, 0 -3px 8px #aaa;
}

h3:first-letter {
	font-size:1.5em;
}

/*- Primary Contents */

p:first-letter { 
	font-size:1.5em;
	color: #fff;
    text-shadow: 0px 1px 1px #000, 0px 1px 3px #000, 0px -2px 3px #999;
    margin-left:10px;
}

#page li {
    margin-left:5px;
    }

.HL {
    font-weight:bold;
    color:#ffff33;
    text-shadow:0 0 4px #cccc33;
    }

/*- Links */

a:hover, a:visited:hover {
        text-decoration: none;
        color:#ffff88;
        text-shadow: 0px 0px 5px #ffff88;
	}

h2 a:hover, h2 span a:hover {
	color: #ffff88 !important;
	}

a {
	color: #ffff00;
	text-decoration: none;
    transition-property:text-shadow, color;
	transition-duration:0.5s;
    }

a img { border:0; }

a:visited {
	color: #cccc88;
	}


/*Mobile*/

@media screen and (max-width: 720px) {

    body {
        background:url('theme/footer_bg.jpg') repeat-x right bottom;
        background-color:#ad925d;
    }
    
    ul.menu, ul.menu li a {
        padding: 15px 12px 25px;
    }

    ul.menu li a {
        font-size: 1,5em;
    }
}

/*LIGHTBOX 2 <<<<<<<<<<<<<<<<*/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-image: url(theme/gris-semitransp.png); width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(lightbox2/images/prev.png) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(lightbox2/images/next.png) right 15% no-repeat; }

#imageDataContainer{ font: 16px 'Play', Lucida Grande, Verdana, Helvetica, sans-serif; background-image: url(theme/gris-semitransp.png); margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #ccc; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000;}