/* 1. =Global Styles
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */


/* 1.1 =Reset
---------------------------------------------------------------------- */
html, body { background: #dedede; }
body { font: 12px/16px Arial; color: #333; margin: 0px 0px; text-align:center; display:block; }
div { position: relative;display:block; margin:0px; padding:0px; border:none; text-align:left; font-style:normal; outline:none; } 
span, hr, ul, li, input, ul, li, p, tr, td, img { margin:0px; padding:0px; border:none; text-align:left; font-style:normal; outline:none; list-style: none; }
em { font-style:normal; }
p, dl, multicol { display:block; margin:0em 0; }
form {display:inline; margin:0px; padding:0px; }
table { width:100%; padding:0px; margin:0px; border-collapse:collapse; }
td { padding:2px 5px; }
th { padding:2px 5px; border-bottom:1px solid #ffffff;}

h1, h2, h3, h4, h5, h6 {
	font-family:Verdana, Arial;
	font-weight:normal;
	line-height:1;
	margin:0;
	padding:0;
}

h1 { font-size:22px; }
 
.clearfix:after, .clear:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.clearfix, .clear {display:block;}
.clear {clear:both;}

html[xmlns] .clearfix,
html[xmlns] .clear { display: block; }

* html .clearfix,
* html .clear { height: 1%; }

*|*:-moz-any-link:focus {
  outline: none;
}



/* 2. =Viewport
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
body { overflow: hidden; }
#wrapper { overflow: hidden; }
#wrapper .listItems { overflow: hidden; }
#wrapper ul { margin-top: 0px; }

#wrapper li {
	visibility: hidden;
	background: #efefef url(/img/default/contrib_item_bg.png) repeat left top; /* fallback image */
	background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#efefef));
	background-image: -moz-linear-gradient(#ffffff, #efefef);
}

#wrapper li.hover {
	background: #f2f9fe url(/img/default/contrib_item_bg_hover.png) repeat left top; /* fallback image */
	background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#f2f9fe), to(#abd8e3));
	background-image: -moz-linear-gradient(#f2f9fe, #abd8e3);	
	cursor: pointer;
}

#wrapper li img.thumb {
	float: left;
	margin: 5px 10px;
	padding: 1px;
	border: 2px solid #ccc;
}
#wrapper li.hover img.thumb { border-color: #262626; }

#wrapper li div.infos {
	display:block;
	height:90px;
	/*vertical-align:middle;*/
	font: bold 14px/18px Arial;
	padding: 0 60px 0 0;
}

#wrapper li div.infos span.duration {
	color: #999;
}

#wrapper li div.infos span.note {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -8px;
	font-size: 24px;
	color: #ccc;
	
}

#wrapper li.hover div.infos span.note {
	color: #F09;
}

/* 4=Message Placeholder
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
#wrapper .message{ font: bold 18px/32px Arial; color: #F09; } 
#wrapper .message p { text-align: center; font: bold 16px/32px Arial; color: #F09; }


#wrapper .message p.ask-advice { display: none; background-color: #F09; color: #FFF; }
#wrapper .message p.ask-advice span.button {
	background: #FFF;
	color: #000;
	padding: 0 5px;
	margin: 0 10px 0 0;
	background: #fff;
}
#wrapper .message p.ask-advice span.button.hover {
	cursor: pointer;
	color: #fff;
	background: #3F4C6B;
}

#wrapper .message span#comeBack {
	font-size:12px;
	/*line-height:17px;
	position:absolute;
	right:5px;
	top:0;
	display: block;*/
	color: #3F4C6B;
	margin-left:5px;
	
}
#wrapper .message span#comeBack.hover { cursor: pointer; color: #333; }

#wrapper .message p.given-advice { display: none; background-color: #F09; color: #FFF; }

/* 3= Video PLayer & elements 
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
#wrapper .code_embed { display: none; }
#wrapper .videoPlayer {
	position: absolute;
	z-index: 10000;
}


/* 4= Dynamic police size 
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

#wrapper.font-little .message p { font: bold 12px/18px Arial; }
#wrapper.font-little li div.infos { font: bold 11px/15px Arial; }
#wrapper.font-little li div.infos span.note { font-size: 16px; }
#wrapper.font-little .message p span.button { font-size: 11px; padding: 0 4px; margin: 0 0px 0 5px;}