/* WebCodo Header Stylesheet */

@import url(//fonts.googleapis.com/css?family=Varela+Round);

h1, h2, h3, h4, h5{font-family: 'Segoe UI', 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;  margin: 0; font-weight: lighter;}
a{ color: #000000; text-decoration: none;   }
a img{ border: none;}
a:hover{ text-decoration: underline;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wcd{width:33%; height:40px; float:left;}
.wcd-logo{font-size: 36px; color: #fff;text-align: center; float:left; cursor: pointer;  color:#fff; font-size: 32px; font-family: 'Varela Round', sans-serif;
-webkit-transition:color 0.3s ease-in;  -moz-transition:color 0.3s ease-in; x²-o-transition:color 0.3s ease-in; transition:color 0.3s ease-in;
   }
   .wcd-logo:hover{color:#3facff;}
.wcd-tuto{ font-family: 'Varela Round', sans-serif; color: #fff; font-size: 16px; line-height: 36px;}
.webcodo-top{width:100%; height:40px; background-color:#232323}





/* Css Shadow Effect for the prod-box and prod-box-list div */
 .shadow{
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.31);
    -moz-box-shadow:    0px 0px 10px rgba(50, 50, 50, 0.31);
    box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.31);
}



/******example.css***************/



.clear{clear: both;}
.tuto-cnt{width: 195px; background-color: #fff; border:#ccc 1px solid; height:auto;  margin: 6px 10px; padding: 12px; overflow: auto; }

hr{ margin: 10px 0; border:none; border-top: #ccc 1px dotted;}

/*  First Example with big stars */
.rate-ex1-cnt{
	width:227px; height: 40px;
	border:#e9e9e9 1px solid;
	background-color:  #f6f6f6;
}
.rate-ex1-cnt .rate-btn{
	width: 45px; height:40px;
	float: left;
	background: url(../img/rate-btn.png) no-repeat;
	cursor: pointer;
}
.rate-ex1-cnt .rate-btn:hover, .rate-ex1-cnt  .rate-btn-hover, .rate-ex1-cnt  .rate-btn-active{
	background: url(../img/rate-btn-hover.png) no-repeat;
}
/* End first Example with big stars */


/*  Second Example with big stars */
.rate-ex2-cnt{
	width:155px; height: 30px;
	border:#e9e9e9 1px solid;
	background-color:  #f6f6f6;
}
.rate-ex2-cnt .rate-btn_new{
	width: 30px; height:30px;
	float: left;
	background: url(../img/rate-btn2.png) no-repeat;
	cursor: pointer;
}
.rate-ex2-cnt .rate-btn:hover, .rate-ex2-cnt  .rate-btn-hover, .rate-ex2-cnt  .rate-btn-active{
	background: url(../img/rate-btn2-hover.png) no-repeat;
}
/* End second Example with big stars */

/*  Third Example with big stars */
.rate-ex3-cnt{
	width:85px; height: 17px;
	border:#e9e9e9 1px solid;
	background-color:  #f6f6f6;
}
.rate-ex3-cnt .rate-btn{
	width: 17px; height:17px;
	float: left;
	background: url(../img/rate-btn3.png) no-repeat;
	cursor: pointer;
}
.rate-ex3-cnt .rate-btn:hover, .rate-ex3-cnt  .rate-btn-hover, .rate-ex3-cnt  .rate-btn-active{
	background: url(../img/rate-btn3-hover.png) no-repeat;
}
/* End third Example with big stars */


/* rate result */
.rate-result-cnt{
	width: 82px; height: 18px;
	position: relative;
	background-color: #ccc;
	border: #ccc 1px solid;
}
.rate-stars{
	width: 82px; height: 18px;
	background: url(../img/rate-stars.png) no-repeat;
	position: absolute;
}
.rate-bg{
	height: 18px;
	background-color: #ffbe10;
	position: absolute;
}


/*****************************like ***************************/


.tab-cnt{width: 600px; height:auto; min-height: 400px; margin: 40px auto; padding: 40px; background-color: #fafafa; border: #ccc 1px dotted; overflow: auto; }
.bg-green{ background-color: #559900;}
.bg-red{background-color: #c9231a;}
.tab-cnt h1{font-size: 22px; font-family: arial; margin-bottom: 15px;}
.tab-tr{
	width: 100%; height: 55px; 
/*	border-bottom: #e6e6e6 1px solid; 
	border-top: #e6e6e6 1px solid;	*/
}
.like-btn, .dislike-btn{
	width: auto; height: 30px; padding: 0 15px 0 30px; 
	float: left; margin-left: 10px; margin-top: 15px;
	cursor: pointer; color: #333333; font-size: 13px; line-height: 30px;
	border:#fff 1px solid;
	-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; /* border radius */
}
.like-btn{background: url(../img/like-ico.png) 5px 50% no-repeat; }
.like-btn:hover, .like-h{
	background: url(../img/like-ico-h.png) 5px 50% no-repeat; color: #0c6502;
	background-color: #f0f0f0;	border: #c6c6c6 1px solid; 
}
.dislike-btn{background: url(../img/dislike-ico.png) 50% 50% no-repeat; }
.dislike-btn:hover, .dislike-h{
	background: url(../img/dislike-ico-h.png) 50% 50% no-repeat;
	background-color: #f0f0f0;	border: #c6c6c6 1px solid; 
}

.stat-cnt{ 	width: 108px; height: 60px; float: right;}
.stat-bar{	width: 108px; height: 3px;	margin-bottom: 5px;}
.rate-count{ font-size: 20px; color: #333; text-align: right; font-weight: bold; }
.stat-bar div{height: 3px; float: left;}
.like-count{background: url(../img/like-ico2.png) 0% 50% no-repeat;}
.dislike-count{background: url(../img/dislike-ico2.png) 0% 50% no-repeat; margin-left: 15px;}
.like-count, .dislike-count{
	width: auto; height: 18px; 
	float: right; 
	font-size: 12px; line-height: 18px; color: #666;
	padding-left: 15px;
}

.share-btn{
	height: 52px; display: inline-block; 
	float: left;  font-size: 13px; line-height: 55px; 
	padding: 0 10px; margin-left: 30px;
	border-bottom: #fff 3px solid;
	cursor: pointer; 
}
.share-btn:hover{ border-bottom: #c9231a 3px solid; }
.share-cnt{
	height: 30px; padding: 20px 10px 10px 10px;
	border-bottom: #e6e6e6 1px solid; display: none;
}

/******************commenting system***************************/


.comment,
#addCommentContainer{
	
	/* Syling the comments and the comment form container */
	
	padding:12px;
	width:400px;
	position:relative;
	background-color:#fcfcfc;
	border:1px solid white;
	color:#888;
	margin-bottom:25px;
	
	/* CSS3 rounded corners and drop shadows */
	
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	-moz-box-shadow:2px 2px 0 #c2c2c2;
	-webkit-box-shadow:2px 2px 0 #c2c2c2;
	box-shadow:2px 2px 0 #c2c2c2;
}

.comment .avatar{

	/*
	/	The avatar is positioned absolutely, 
	/	and offset outside the comment div
	/*/

	height:50px;
	left:-70px;
	position:absolute;
	width:50px;
	background:url('img/default_avatar.gif') no-repeat #fcfcfc;
	
	/* Centering it vertically: */
	
	margin-top:-25px;
	top:50%;

	-moz-box-shadow:1px 1px 0 #c2c2c2;
	-webkit-box-shadow:1px 1px 0 #c2c2c2;
	box-shadow:1px 1px 0 #c2c2c2;
}

.comment .avatar img{
	display:block;
}

.comment .name{
	font-size:20px;
	padding-bottom:10px;
	color:#ccc;
}

.comment .date{
	font-size:10px;
	padding:6px 0;
	position:absolute;
	right:15px;
	top:10px;
	color:#bbb;
}

.comment p,
#addCommentContainer p{
	font-size:18px;
	line-height:1.5;
	overflow-x:hidden;
}

#addCommentContainer input[type=text],
#addCommentContainer textarea{

	/* Styling the inputs */

	display:block;
	border:1px solid #ccc;
	margin:5px 0 5px;
	padding:3px;
	font-size:12px;
	color:#555;
	font-family:Arial, Helvetica, sans-serif;
}

#addCommentContainer textarea{
	width:300px;
}

/*label{
	font-size:10px;
}
*/
label span.error{
	color:red;
	position:relative;
	right:-10px;
}

#submit{
	
	/* The submit button */
	
	background-color:#58B9EB;
	border:1px solid #40A2D4;
	color:#FFFFFF;
	cursor:pointer;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
	font-size:14px;
	font-weight:bold;
	padding:4px;
	margin-top:5px;

	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

#submit:hover{
	background-color:#80cdf5;
	border-color:#52b1e2;
}

/* The styles below are only necessary for the styling of the demo page: */

#main{
	position:relative;
	margin:0 auto;
	width:427px;
}

h1{
	color:#7E94A2;
	font-size:30px;
	margin:50px 0 20px;
}

h2{
	font-size:18px;
	margin-bottom:50px;
}

h1,h2{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	text-align:center;
	font-weight:normal;
	text-shadow:0 1px 1px #FFFFFF;
}

a, a:visited {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

a img{
	border:none;
}