@charset "utf-8";

* { margin: 0; padding: 0; outline: 0 }
img { border: 0; }

a {
   outline: none;
}

*:focus { outline: 0; }

body {
	background: url(images/bgr.jpg) top center no-repeat #000;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #999;
}

#container {
	width: 1010px;
	height: 60px;
	margin-left: auto;
	margin-right: auto;
}

/* Header */
#navigation {
	width: 840px;
	height: 60px;
	margin-left: auto;
	margin-right: auto;
}
#navigation img { margin-right: 13px; float:left; }

#header {
	margin-top: 30px;
	margin-bottom: 270px;
}

#switch {
	position: absolute; 
	margin-top: 10px; 
	color: #cfaf8c;
}

#switch a { color: #cfaf8c; text-decoration: none; }
#switch a:hover { color: #cfaf8c; text-decoration: underline; }

/* content */
#content {
	clear: both;
}

.left { 
	width: 652px;
	height: auto;
	float:left;
	margin-right: -20px;
}

.title {
	width: 652px;
	height: 36px;
	line-height: 32px;
	color: white;
	font-size: 18px;
	font-family:"Franklin Gothic Medium",Serif;
	background: url(images/news_title.png) no-repeat;
	margin-bottom: -3px;
	z-index: 100;
}
.title span {
	margin-left: 50px;
}

.title a { 
	color: white;
	text-decoration: none;
}

.title a:hover {
	text-decoration: underline;
}

#s3slider {
   width: 620px; /* important to be same as image width */
   height: 360px;
   min-height: 360px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
   margin-left: 12px;
   border: 1px solid #48382a;
   margin-bottom: 10px;
   z-index: 0;
   background: url('images/story_bgr.png') top center no-repeat #000000;
}

#s3slider a {
	color: red;
	text-decoration: none;
}

#s3slider a:hover {
	text-decoration: underline;
}

#contentBox {
   width: 620px; /* important to be same as image width */
   height: auto;
   min-height: 700px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
   margin-left: 12px;
   border: 1px solid #48382a;
   margin-bottom: 10px;
   z-index: 0;
   background: url('images/story_bgr.png') top center no-repeat #000000;
}
.contentBox {
   width: 620px; /* important to be same as image width */
   height: auto;
   position: relative; /* important */
   overflow: hidden; /* important */
   margin-left: 12px;
   border: 1px solid #48382a;
   margin-bottom: 10px;
   z-index: 0;
   background: url('images/story_bgr.png') top center no-repeat #000000;
}
.contentBox p {
	padding: 10px;
}

#s3sliderContent {
   width: 620px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

#s3slider span {
   position: absolute; /* important */
   left: 0;
   padding: 10px 13px;
   width: 600px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   bottom: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
} 

.headline {
	font-size: 22px;
	color: white;
	font-family:"Franklin Gothic Medium",Serif;
}

#userPanel {
	width: 340px;
	height: 325px;
	float:right;
	background: url(images/user_back.png) no-repeat;
	padding-top: 60px;
	padding-left: 20px;
}

#userPanel img {
	border: 3px solid black;
}

#userPanel input {
	width: 303px;
	height: 48px;
	color: white;
	font-weight: bold;
	background: url('images/inputbgr.png') no-repeat;
	border: 0;
	padding-left: 30px;
	margin-left: 10px;
	line-height: 40px;
}

#userPanel input.submit {
	width: 111px;
	height: 38px;
	float:right;
	background: url(images/loginButt.png) no-repeat;
	color: black;
	margin-right: 30px;
}

#userPanel input.check {
	width: 10px;
	height: 10px;
	float:left;
	background-color: black;
	border: 1px solid red;
	margin-right: 5px;
	margin-left: 0px;
	padding-left: 0px;
}

#userPanel a {
	color: white;
	font-weight: bold;
	text-decoration: none;
}

#userPanel a:hover {
	color: #fbaf5d;
}

#afterLogin {
	width: 290px;
	height: 48px;
	color: white;
	font-weight: bold;
	background: url('images/inputbgr.png') no-repeat;
	border: 0;
	padding-right: 10px;
	line-height: 40px;
	margin-left: 10px;
}

#afterLogin span {
	float:left;
	padding-left: 10px;
	text-decoration: underline;
}

#afterLogin a {
	float:right;
	color: #fbaf5d;
	text-decoration: none;
}

#afterLogin a:hover {
	text-decoration: line-through;
}

#reg { float:left; margin-left: 20px; color: white; font-weight: bold; }

#forumLast {
	width: 600px; /* important to be same as image width */
   height: auto;
   position: relative; /* important */
   overflow: hidden; /* important */
   margin-left: 12px;
   border: 1px solid #48382a;
   margin-bottom: 10px;
   z-index: 0;
   background: url('images/story_bgr.png') top center no-repeat #000000;

	padding: 10px;
	font-size: 16px;
	line-height: 25px;
	color: #fbaf5d;
}

#forumLast span.forumLast {
	color: red;
	float: left;
	margin-right: 20px;
}

#forumLast a {
	color: #fbaf5d;
	text-decoration: none;
}

#forumLast a:hover {
	color: #ffffff;
	text-decoration: underline;
}

#footer{
	width: 100%;
	height: auto;
	clear: both;
	margin-top: 20px;
}
#footer div {
	height: auto;
	float:left;	
	margin-left: 10px;
}

#footer a {
	display:block;
	width: 280px;
	height: 32px;
	line-height: 32px;
	padding-left: 27px;
	color: white;
	text-decoration:  none;
	background: url(images/fmenu_bgr.png) no-repeat;
	margin-bottom: -10px;
	border-bottom: 1px solid #3a3a3a;
}

#footer a:hover {
	background-position: 0 -32px;
	color:#ed1c24;
}

#friends { width: 313px; padding-left: 8px; }
#forusers { 	width: 308px; }
#followthePrince { width: 320px; }

#fmenu {
	height: 77px;
	clear:both;
	text-align:center;
	padding-top: 40px;
	background: url(images/footerbgr.png) no-repeat bottom;
}


#fmenu a {
	display:block;
	background:none;
	color: #5a4a4a;
	font-size: 26px;
	font-family:"Franklin Gothic Medium",Serif;
	text-decoration: none;
	border: 0;
	float:left;
	margin:0px;
	padding:0px;
	margin-left: 50px;
}

#fmenu a:hover {
	color: #ed1c24;
}

#copyright {
	color: white;
	text-align:center;
	font-size: 11px;
	width: 980px;
	height: 90px;
	float:left;
	margin-top: 10px;
	padding-bottom: 5px;
}


/* gallery */

.thumbBox { width: 160px; height: auto; float:left; text-align:center; margin: 20px 0 20px 26pt; min-height: 180px; }
.thumbBox a { color: white; text-decoration: none; }
.thumbBox a:hover { color: #fbaf5d;  }
.thumbBox img { border: 2px solid black; }
.thumbBox img:hover { border: 2px solid red; }



#pages { clear: both; text-align:center; margin-bottom: 10px; }
#pages a { display:inline-block; color: #959595; width: 31px; height: 28px; line-height: 28px; text-decoration: none; text-align:center; background: url(images/pages.png); }
#pages a:hover { color: white; background-position: 0 -29px; background-repeat: no-repeat; }
#pages span { display:inline-block; color: white; background: url(images/pages.png); background-position: 0 -29px; background-repeat: no-repeat;  width: 31px; height: 27px; line-height: 26px; text-decoration: none; text-align:center; }

	
	
	
		#stories { padding: 15px; min-height: 400px; color: #cccccc; }
		#stories h2 { margin-bottom: 10px; }
		#stories img { width: 108px; height: 110px; }
		#storyLinks { text-align: center; margin-top: 20px; }
		



.person { background: url(http://princeofpersia-bg.com/images/personajdiv.png) no-repeat;
float: left;
height: 208px;
margin-bottom: 6px;
margin-right: 5px;
padding-top: 4px;
text-align: center;
width: 185px; }

.person a {
color: #bfa138;
font-family: Tahoma;
font-size: 18px;
text-decoration: none;
}

.personInfo { border: 1px solid #1f1f1f; float:left; width: 390px; margin-left: 3px; padding: 5px; background-color: black; margin-bottom: 10px; }

hr { clear: both; margin-top: 15px; border: 1px solid #1f1f1f; }

.icons img { margin: 10px; float:left; }

/* Videos */
div.videoBox {  width: 100%; margin-top: 10px; }
div.thumbVidBox { width: 231px; height: 150px; float:left; margin-bottom: 10px; }
.thumbVidBox img { position: absolute; }
.thumbVidBox img.thumb { left: 20px; border: 1px solid #775827; }
div.infoBox { width: 380px; float:right; margin-right: 5px; }
span.headline { font-size: 18px; color: #e1e1e1; }
div.icons { float:left; margin-bottom: 10px; }
.icons img { margin-right: 30px; } 
.icons a { text-decoration: none; color: white; }
.icons a:hover { text-decoration: underline; }
hr.infoHR { height: 1px; line-height: 1px; border:0; clear:both; background-color:#91874e; color: #91874e; margin:0; padding:0;  }
div.video-adder-info { color: #e1e1e1; margin: 10px; }
div.video-adder { float:left; width: 200px; }
div.video-adder span { font-weight: bold; color: red; }
div.video-date { float:right; width: 120px; }
hr.finalHR { height: 1px; line-height: 1px; border:0; background-color:#4d4d4d; color: #4d4d4d; padding:0; margin:0; }
div.social { margin: 10px; padding: 10px; clear:both; text-align:center; border: 1px solid #1e1e1e;  }
div.social a { color: white; text-decoration: none; }
div.social a:hover { text-decoration: underline; }

div.like { width: 57px; height: 53px; background-image: url('images/like.png'); float:left; margin: 10px; margin-right: 30px; }
div.like div { width: 22px; height: 20px; color: white;  float:right; text-align:center; line-height: 20px; }

div.dislike { width: 58px; height: 49px; background-image: url('images/dislike.png'); float:left; margin: 10px; margin-right: 30px; }
div.dislike div { width: 22px; height: 20px; color: white;  float:right; text-align:center; line-height: 22px; }

div.video {  width: 500px; padding: 10px; margin: 0 auto;  text-align:center; border: 1px solid #1e1e1e; clear:both;   }


/* === Form Elements === */

form {
	margin: 0;
	padding: 0;
	border: 0;
	text-align:center;
}

input {
	color: #FFCC33;
	background-color: #111111;
	border: 1px solid #CCCCCC;
	font-family: Verdana, "Trebuchet MS", "Lucida Grande", Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	padding: 1px;
}

textarea {
	width: 600px;
	height: 400px;
	color: #FFCC33;
	background-color: #111111;
	border: 1px solid #CCCCCC;
	font-family: Verdana, "Trebuchet MS", "Lucida Grande", Helvetica, Arial, sans-serif;
	font-size: 1.3em;
	line-height: 1.4em;
	font-weight: normal;
	padding: 2px;
}

select {
	color: #FFCC33;
	background-color: #111111;
	border: 1px solid #CCCCCC;
	font-family: Verdana, "Trebuchet MS", "Lucida Grande", Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	padding: 1px;
}

input:hover, textarea:hover, select:hover {
	color: #DD2222;
	background-color: #232323;
	border: solid 1px #FFCC33;
}

input:focus, textarea:focus, select:focus {
	color: #FFCC33;
	background-color: #111111;
	border: solid 1px #DD2222;
}

option {
	padding: 0 1em 0 0;
}

option.disabled-option {
	color: #888888;
}

.rtl option {
	padding: 0 0 0 1em;
}

input.radio {
	background-color: transparent;
	border: none;
}

.post {
	background-color: #111111;
	border-style: solid;
	border-width: 1px;
}