@charset utf-8;
/*
by Raphael Bastide
*/

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}

body{
	font:28px Inconsolata, times, serif;
	font-weight:normal;
	letter-spacing:0.00em;
	background-repeat:no-repeat;
	height:100%;
	overflow:auto;
}
.bopen{
	background-position:0 -1000px;
	background-repeat:no-repeat;
}

/*  COLORS
Yellow        #FEF6B1
Green	      #839DC4
BGray         #839DC4
LightBGray    #CBDBF2
*/

/*  STRUCTURE  */
#left, #right{padding:0 3% 3% 3%;}
#right{ width:28%; float:right;} 
#left{ width:55.8%; float:left;}

/*  LEFT, SECTIONS  */
section{
	display:none;
	margin:0 auto 40px auto;
	text-align:center;
	padding:40px 3%;
    background:transparent;
	-webkit-transition: background .3s linear;
    -moz-transition: background .3s linear;
    transition: background .3s linear;
    background:transparent;
}

section .showbox{position:relative;}
section .video{margin:0 auto;width:65%; max-width:600px;}
section button.next{
    border: 1px solid black;
    font-size: 14px;
    padding: 0 2px 1px 4px;
    position: absolute;
    right: 2%;
    text-align: center;
    top: 34%;
    vertical-align: text-top;
    z-index: 100;
}
section button.next:hover{
	background:none;
	border-color:grey;
	color:black;
}
section button.next:active{
	color:grey;
}
section .desc{
	font-family:georgia, times, serif;
	margin:15px auto 0 auto;
	font-size:19px;
	letter-spacing:0.04em;
	text-align:left;
	overflow:auto;
	clear:both;
	max-width:700px;
}

section .desc p a, section li .legende a{border-bottom:2px solid #FEF6B1;}
section.about .desc img{
	width:100px;
	margin:0 auto;
	position:relative;
	top:0;
	left:-100px;
}
section li .legende{
	position:absolute;
	top:-27px;
	right:0px;
	line-height:13px;
}
section li .legende a{
	font-family:inherit;
}

section p{padding:0 5%;}
section a.link{float:right; display:block; width:auto; padding:2px 5px;margin:8px 20px 5px 0; overflow:hidden;}
section a.link:before{content:"↳"; padding:0 6px 0 0; font-family:courier new;}

.fresh{background:#FEF6B1;}

p{margin:0 0 10px 0; line-height:22px;}
time{font-family:OCRB, courier new, monospace; margin:-10px 0 15px 0; font-size:12px; display:block; padding-left:5%;}
p time{display:inline; padding:0;}
h2{margin:0px 0 30px 0;}
h3{margin:25px 0 10px 0;}

/*  RIGHT, MENU  */

#topmenu li{display:inline;}
#topmenu li a{padding:15px 3px 3px 3px;}

h1{display:block; cursor:pointer; margin:20px 0 28px 0;}
h1:hover{text-decoration:underline;}
.bopen h1{cursor:default;}
.bopen h1:hover{text-decoration:none;}
button{
	background:none;
	border:0px lightgray solid;
	border-left:1px lightgray solid;
	display:block;
	margin:25px 0 25px 0;
	padding:2px 4px;
	cursor:pointer;
}
button:hover, section a.link:hover{background:black; color:white;}

#menu ul{margin:20px 0 0 -31px;}
#menu li{
	margin:0 0 3px 0;
	font-size:25px;
}

html.js #menu{display:none;}
html.js #topmenu{visibility:hidden;}
body.bopen #topmenu{visibility:visible;}

#menu a:visited{background:#EEE;}

i, button, #topmenu a, .legende{
	font-family:verdana;
	font-size:10px;
	font-style:normal;
}
i{color:#000;vertical-align:4px; padding:0 10px 0 3px;}
#getrandom i{font-size:20px; padding:0 15px 0 5px; font-weight:normal; vertical-align: 2px;}

/*  HTML  */
a{text-decoration:none;color:black; font-family:"Inconsolata"; letter-spacing:0;}
a:hover{background:#FEF6B1; color:black;}
a:active{
	text-decoration:none;
	background:#FEF6B1;
}
a:focus {background:#FEF6B1;}
:-moz-any-link:focus {background:#FEF6B1;}
::selection {background:#FEF6B1;}
::-moz-selection {background:#FEF6B1;}


/*  MEDIA QUERIES  */
@media only screen and (min-width: 1800px) {
/*body{background:magenta;}*/
	section img, .desc{width:800px;}
}
@media only screen and (max-width: 1800px) and (min-width: 1100px) {
/*body{background:cyan;}*/
	section img, .desc{width:600px;}
}
@media only screen and (max-width: 1100px) and (min-width: 800px)  {
/*body{background:red;}*/
	section img, .desc{width:400px;}
	#menu li{font-size:20px;}
}
@media only screen and (max-width: 800px){
	/*body{background:yellow;}*/
	#left, #right{clear:both; padding:3% 1%;}
	#left{ width:94%;}
	#right{ margin:0 auto 0 auto;  width:250px; float:none; padding:;}
	#menu *{display:none;}
	section{padding:20 0; display:block;}
	section img, .desc{width:300px;}
	section p{font-size:15px; line-height:18px;}
}

@font-face {
    font-family: 'Inconsolata';
    src: url('../font/inconsolata-webfont.eot');
    src: url('../font/inconsolata-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/inconsolata-webfont.woff') format('woff'),
         url('../font/inconsolata-webfont.ttf') format('truetype'),
         url('../font/inconsolata-webfont.svg#InconsolataMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'OCRB';
    src: url('../font/ocrb-webfont.eot');
    src: url('../font/ocrb-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/ocrb-webfont.woff') format('woff'),
         url('../font/ocrb-webfont.ttf') format('truetype'),
         url('../font/ocrb-webfont.svg#OCRBRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}