/*	Project: Rage of Storms
	Author:	Meow Project
	URL: 	www.meow-project.com
*/


/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html  */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{background:transparent;border:0;margin:0;padding:0;vertical-align:baseline}
body{line-height:1}
h1,h2,h3,h4,h5,h6{font-weight:normal}
ol,ul{list-style:none}
blockquote{quotes:none}
blockquote:before,blockquote:after{content:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}
a img{border:none}
:focus{outline:0}

/*  Typography  */
h1,h2,h3,h4,h5,h6{font-weight:normal;margin-bottom:1.2em;}
h1{font-size:1.5em;line-height:1em;}
h2{font-size:1.5em;line-height:1.0909em;margin-bottom:.75em;}
h3{font-size:1.1em;font-weight:bold;line-height:1.2em;}
h4{font-size:1.125em;line-height:1.333em;}
h5,h6{font-size:1em;line-height:1.5em;}
p,blockquote{margin-bottom:1.5em;}


/* RoS Styling */

body {background:#171717 url(img/bg-army.jpg) no-repeat 50% top; color:#ccc; font:13px/1.4em Helvetica, Arial, Sans-serif;}
input, textarea {padding:3px; font-family:Helvetica, Arial, sans-serif; color:#fff; font-size:12px;}
input[type=text], input[type=password] {-moz-box-shadow:inset -1px -1px 2px #333; -webkit-box-shadow:inset -1px -1px 2px #333; box-shadow:inset -1px -1px 2px #333;}

/*	Header & Menu	*/

#header {height:104px; background:url(img/header-bg.png) no-repeat 50% top; color:#bbb;}
#header .inner {position:relative; width:918px; margin:auto; padding:16px 21px 0; z-index:10;}
#logo {position:absolute; top:17px; z-index:11; width:390px; height:260px; margin:0; padding:0; background:url(http://abtal-alwatan.yahoo.net/_assets/img/website/rage-of-storms-logo.png) no-repeat; text-indent:-9999em;}
#logo a {display:block; width:270px; height:160px; margin:40px 0 0 10px;}

.subline {position:absolute; top:125px; left:380px; color:#fff1d3; font-weight:bold; width:570px;}
.subline h2.teaser {margin-bottom:10px; font-size:2em; font-weight:normal; line-height:1em; background:none; width:auto; padding:auto; text-transform:none; float:none; color:#fff1d3; padding:0; overflow:visible;}
.subline p {font-size:14px; line-height:1.4em; margin-bottom:0;}

#share-widget {position:absolute; z-index:20;}
.share {float:left; margin-right:5px; font-size:.9em; line-height:16px;}

.menu li {display:inline;}
.menu li a {float:left; display:block; text-decoration:none;}

.nav {position:absolute; top:61px; left:460px; z-index:0;}
.nav li a {padding:0 16px 0 14px; font-size:1.1em; text-transform:uppercase; color:#d5ceb0; background:url(img/menu-hr.png) top right repeat-y;}
.nav li.last a {background:none;}
.nav li.active a, .nav li a:hover {color:#fff;}

.header-login {position:absolute; right:130px; font-size:.9em; z-index:800;}
.header-login li {position:relative; float:left; margin-left:30px;}
.header-login li a {color:#bbb;}
.header-login span.pipe {float:left; padding:0 7px; color:#aaa;}
.header-login li a:hover {color:#fff;}


/*	Language Selector	*/

.lang-select:hover .lang {display:block;}

.lang-select a {padding:0 5px 0 28px; padding-bottom:10px; background-position:5px 3px; background-repeat:no-repeat;}
.lang-select .ae {background-image:url(img/flag-ae.png);}
.lang-select .ar {background-image:url(img/flag-ar.png);}
.lang-select .de {background-image:url(img/flag-de.png);}
.lang-select .en {background-image:url(img/flag-us.png);}
.lang-select .pl {background-image:url(img/flag-pl.png);}

.lang {position:absolute; top:22px; left:-5px; display:none; margin:0; padding:0 5px; background:url(img/dropdown-bg.png) -10px -20px no-repeat; width:150px; z-index:800; font-size:11px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:1px 1px 2px #000; -moz-box-shadow:1px 1px 2px #000; box-shadow:1px 1px 2px #000;}
.lang li {display:block; float:none; overflow:auto; margin:0; padding:0; border-bottom:1px solid #666;}
.lang li a {display:block; padding:5px 5px 5px 28px; background-position:5px 8px;}
.lang li.last {border:none;}


/* Sliding Panel	*/

.tab-wrapper {margin:auto; width:960px; position:relative; z-index:1000;}
.tab {position:absolute; top:8px; right:10px; z-index:1000;}
.tab a.reg {font-weight:bold;}
.tab a.login-bt {display:block; padding-right:15px; font-weight:bold; color:#69AF00; background:url(img/arrow.png) right -30px no-repeat;}
.tab a.login-bt:hover {color:#7DD002;}

#toppanel {position:absolute; width:100%; z-index:500;}
#panel {display:none; position:relative; width:960px; height:270px; margin:auto; z-index:0;}
#close {background-position:right 2px;}

#login-dd {position:absolute; right:0; top:0; width:270px; padding:18px 21px 21px; font-size:.9em; background:url(img/user-bg.png) bottom left no-repeat; overflow:auto; z-index:900;}
#login-dd .connect {font-size:.9em;}
#login-dd h3 {margin-bottom:1em; font-size:1.3em; color:#70BB00; line-height:1em;}


/*	Login Form & Validation	*/

.loginform label {display:block; font-weight:normal; line-height:1.7em;}
.loginform input {width:262px; height:18px; margin-bottom:10px; border:1px solid #639813; background:#474747; opacity:.7; filter: alpha(opacity=70);}
.loginform select {width:268px; margin-bottom:20px;}
.loginform input[type=text]:focus, .loginform input[type=password]:focus {border-color:#70BB00; background:#4f4f4f;}

.loginform label.error {display:none;}
.signin label.error {display:none;}
.loginform input.error {border-color:#F00;}
.loginform select.error {border-color:#F00;}
.loginform input[type=text].error:focus, .loginform input[type=password].error:focus {border-color:#F00; background:#4f4f4f;}

.forgot-pw a {clear:both; font-size:11px; float:right; color:#ccc;}
.forgot-pw a:hover {color:#fff;}
.forgot-pw {float:right; line-height:24px; padding-right:10px;}

.submit-bt {float:right; margin-bottom:7px; overflow:auto;}
#login-dd .submit-bt:hover input, .submit-bt:hover input, .submit-bt:hover .bt-left, .submit-bt:hover .bt-right {background-position:left -24px;}
#login-dd input.submit, input.submit, .regform .submit-hex {float:left; display:block; width:auto; height:24px; margin:0; background:transparent url(img/bt-center.png) top left repeat-x; border:0; font-weight:bold; cursor:pointer; opacity:1; filter: alpha(opacity=100);}
.bt-left {float:left; display:block; width:9px; height:24px; background:url(img/bt-left.png) repeat-x;}
.bt-right {float:left; display:block; width:9px; height:24px; background:url(img/bt-right.png) repeat-x;}


/* Connect */

.connect {display:none; position:absolute; bottom:21px; right:21px; font-size:.9em;}
.connect .text {padding-right:5px;}
.connect ul {margin-bottom:0;}
.connect li {float:left; display:inline; margin-right:5px;}
.connect li.last {margin:0;}
.icon {display:block; width:16px; height:16px; text-indent:-9999em;}
.fb {background:url(img/login.png) bottom left no-repeat;}
.openid {background:url(img/login.png) top left no-repeat;}
.icon:hover {opacity:.8; filter: alpha(opacity=80);}


/*	Partner Logo	*/

.partnerlogo {margin-bottom:15px; text-align:center;}
.partnerlogo.top {position:absolute; top:202px; right:21px;}


/*	Register Page	*/

#register #container, #helper #container {margin-top:0;}
#register .subline {display:none;}

.regform label.error {
	display:none;
	position: absolute;
	text-align:left;
	top:1px; left:475px; line-height:1em;
}

a.tip {display:block; width:32px; padding:0; height:24px; line-height:24px;}
a.tip img {float:left;}

.register {position:relative; z-index:30x; top:77px; z-index:0; width:716px; height:448px; margin:auto; padding:21px; background:url(img/register-bg.png) no-repeat;}
.helper {position:relative; z-index:30x; top:65px; z-index:0; width:662px; height:314px; margin:auto; padding:41px 21px 21px 21px; background:url(img/helper-bg.png) no-repeat;}


.officer-wrapper {position:relative; width:1000px; margin:auto;}
.officer {position:absolute; z-index:5; right:0; top:40px; width:359px; height:559px; background:url(img/officer.png) no-repeat;}
.rrregister h2 {float:right; width:auto; margin:0; padding:0; text-align:right; background:none;}
.register h2 {float:left; width:400px; margin:0 auto 0 186px; padding:0; text-align:left; background:none;}
.rrrregister h2 .icn {float:right; margin-bottom:1em;}
.register h2 .icn {float:left; margin-bottom:1em;}

.regform .connect {position:static; float:right; margin-bottom:22px;}

.regform {position:relative; width:500px;}
.regform .formrow {clear:both; position:relative;}
.regform .formfield {float:left; width:230px;}
.regform label {float:left; width:219px; padding-right:19px; text-align:right; font-weight:bold; line-height:26px;}
.regform input {width:222px;}
.regform select {width:230px; margin:3px 0 7px;}

.regform .select {float:left;}
.regform .selectday, .regform .selectyear {width:60px;}
.regform .selectmonth {width:100px;}

.captcha img {float:left; width:114px; height:21px; margin-top:3px;}
#input_captcha {float:right; width:95px;}

.regform input.checkbox {width:auto; height:auto; padding:0; margin:0}
.checklabel {width:230px; display:block; float:left; line-height:26px; font-size:.85em;}
.checkbox {border:0 !important; background:transparent !important;}
.regform .submit {margin:20px 31px auto auto; float:right; width:233px; height:48px; border:0; background:transparent url(img/play-now-en.png) no-repeat; border:0;}
.regform .submit:hover {background-position:bottom left;}
.regform .submit_box.de .submit {background: url(img/play-now-de.png);}
.regform .submit_box.en .submit {background: url(img/play-now-en.png);}
.regform .submit_box.pl .submit {background: url(img/play-now-pl.png);}
.regform .submit_box.ae .submit {background: url(img/play-now-ae.png);}
.regform .hexbt {margin-right:30px;}
.regform .hexbt .submit-bt {margin-top:20px;}

.regform .accountinfo {margin:0 auto 20px 238px; width:300px; height:120px; }
.regform .accountinfo .userimg {margin-right:10px; float:left;}

/*	PHP Validation	*/

.error-container {position:absolute; top:250px; right:35px; width:280px; padding:10px 8px 0 8px; font-size:11px; line-height:1.2em; background:#000; opacity: 0.8; filter: alpha(opacity=80); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:1px 1px 2px #000; -moz-box-shadow:1px 1px 2px #000; box-shadow:1px 1px 2px #000; z-index:10;}
#helper .error-container {top:155px;}
.error-container li {background:url(img/error-sm.png) top left no-repeat; padding:0 0 10px 22px;}
.error-container strong, .error-login strong {color:#f00;}

.error-login {margin:5px 5px 10px 5px; padding:10px 8px 10px 28px; font-size:11px; line-height:1.2em;  opacity: 0.8; filter: alpha(opacity=80); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:1px 1px 2px #000; -moz-box-shadow:1px 1px 2px #000; box-shadow:1px 1px 2px #000; z-index:10; overflow:auto; background:#000 url(img/error-sm.png) 8px center no-repeat;}
.error-login li {display:inline; float:left; margin-right:10px;}

#register .error-login {position:absolute; right:0; margin:0 35px 0 0; width:460px;}
#helper .error-login {position:absolute; right:0; margin:0 18px 0 0; width:460px;}


/*	Main Content */

#container {position:relative; width:960px; min-height:750px; margin:170px auto 0; overflow:auto;}

.box {margin-bottom:5px;}
#teaser {float:left; width:600px; height:403px; margin-bottom:5px; padding:21px; background:url(img/teaser-bg.png) no-repeat; overflow:hidden;}
#user {position:relative; float:right; height:300px; width:270px; margin-bottom:7px; padding:21px; background:url(img/user-login-bg.png) no-repeat;}

.regbutton {display:block; width:312px; height:94px; background:url(img/regbutton.png) no-repeat; text-indent:-9999em;}
.regbutton:hover {background-position:left -96px;}
.regbutton.pl {display:block; width:312px; height:94px; background:url(img/regbutton_pl.png) no-repeat; text-indent:-9999em;}
.regbutton.pl:hover {background-position:left -96px;}
.regbutton.en {display:block; width:312px; height:94px; background:url(img/regbutton_en.png) no-repeat; text-indent:-9999em;}
.regbutton.en:hover {background-position:left -96px;}

.content {clear:both; padding:21px; overflow:auto; background:url(img/content-bg.png) no-repeat;}
#main {float:left; width:600px; line-height:1.6em;}
.block {margin-bottom:40px; overflow:auto;}
.block.last {margin-bottom:0;}

.content ul {margin:0 0 1.5em 2.5em; list-style:disc;}

.entry {margin-bottom:20px; padding-bottom:1px; background:url(img/hr.png) bottom left no-repeat;}
.entry .meta {margin-bottom:.5em; font-size:.85em; color:#7e7d7d;}

.centered {text-align:center;}

.leftcol {width:45%; float:left;}
.rightcol {width:45%; float:right;}

.printfloater {float:right; margin-top:-20px; font-size:.85em;}
.credits p {margin-bottom:1em;}
.credits strong {color:#fff;}
.credits h3 {color:#70BB00}

/*	Single Page	*/

#single .content {min-height:700px;}

#single-sm .content {width:716px; height:448px; margin:auto; padding:21px; background:url(img/register-bg.png) no-repeat;}





/* Gameinfo Page */

.game-info .features h3 {margin-bottom:.5em; color:#FFF1D3;}

.game-info .features div {margin-bottom:2em; background:url(img/hr-915px.png) bottom left no-repeat; overflow:auto;}
.game-info .features div img {margin-bottom:2em;}
.game-info .features div img.alignleft {margin-top:2px; margin-right:30px;}
.game-info .features div img.alignright {margin-left:50px;}


/* Media Page */

.mediarow {width:860px; margin:auto; clear:both; margin-bottom:30px;}
.mediarow.last {margin-bottom:0;}

.mediarow img{border:3px solid #333;}
.mediarow img:hover {border-color:#fff1d3;}

.mediarow a.thumblink {margin:0 26px 0 0; }
.mediarow a.last{margin:0;}

.mediablock {
    overflow: auto;
    margin:auto auto 40px auto;
}

.mediarow .wpthumb {float:left; width:266px; margin-right:30px;}
.mediarow .wpthumb.last {margin-right:0;}

.mediarow .wpthumb {text-align:center; font-size:0.8em}


/* Legal Pages */
.legal .content, .support .content {padding:40px;}
.legal hr {margin:2em 50px;}

/*	Sidebar	*/

#sidebar {float:right; width:270px;}
#sidebar h3 {margin-bottom:.5em; font-size:1.1em; color:#70bb00;}
#sidebar a {color:#ccc;}
#sidebar a:hover {color:#70bb00;}
#sidebar a.more {font-weight:bold; color:#fff;}
#sidebar a.more:hover {color:#ccc;}

.feature {position:relative; float:left; width:250px; height:80px; margin-bottom:16px; padding:10px 8px 10px 10px; border-right:1px solid #333; border-bottom:1px solid #333; overflow:hidden;}
.feature:hover h3 {color:#7DD002;}
.feature.last {margin-right:0;}
.feature a.link {position:absolute; top:0; left:0; z-index:5; display:block; width:291px; height:100px; text-indent:-9999em; background:none;}
.feature h3 {position:relative; z-index:3; margin-bottom:.5em; font-size:1.2em; color:#70bb00;}
.feature p {position:relative; z-index:3; font-size:.9em; line-height:1.5em;}
.feature .bg {position:absolute; top:0; left:0; display:block; width:291px; height:100px; text-indent:-9999em; z-index:1; opacity: 0.6; filter:alpha(opacity=60); -moz-transition:opacity 1s ease 0; -webkit-transition:opacity 1s ease 0; -o-transition:opacity 1s ease 0; transition: opacity 1s ease 0;}
.feature:hover .bg {opacity:1; filter:alpha(opacity=100);}
.bg span {display:block; width:291px; height:100px;}

#sidebar .downloads .link {font-size:.85em;}
#sidebar .downloads .link a {color:#ccc;}
#sidebar .downloads .link a:hover {color:#fff;}
#sidebar .downloads {overflow:visible}
.downloads .pipe {color:#888; padding:0 5px;}


/* fb like box */

.fbbox { background-color:#fff; }


/*	Footer	*/

#footer {position:relative; width:960px; min-height:155px; margin:auto; padding-top:100px; font-size:.85em; line-height:1.3em; text-align:center; color:#636363; background:url(img/female-officer.png) 90% bottom no-repeat;}
.nd {background:url(img/female-officer-n.png) 90% bottom no-repeat !important;}
#footer .inner {position:absolute; left:0; bottom:0; width:960px; padding-bottom:30px;}
#footer p {margin:0;}
#footer .pipe {padding:0 5px;}
#footer .dev {margin:15px 0;}
#footer a {color:#999;}
#footer a:hover {color:#888;}

#footer #logos {vertical-align:middle; margin:10px auto;}
#footer #logos img {margin:0 10px;}


/*	Heading Styling	*/

h2 {color:#70bb00; text-transform:uppercase; font-size:22px;}
#main h2, #user h2, #sidebar h2, .game-info h2, .media h2, .legal h2 {float:left; width:260px; padding:6px 0 6px 10px; color:#70bb00; text-transform:uppercase; font-size:22px; background:url(http://abtal-alwatan.yahoo.net/_assets/img/website/h2.png) bottom right no-repeat; overflow:auto;}
#main h2, #teaser h2 {width:590px; background:url(http://abtal-alwatan.yahoo.net/_assets/img/website/h2.png) bottom left no-repeat;}
.game-info h2, .media h2, .legal h2 {width:870px; background:url(img/h2-915px.png) bottom left no-repeat;}
#sidebar h2 {font-size:18px;}
.support h2 {clear:both;}

.legal h2.none {float:none; width:auto; padding:0; background:none; overflow:inherit;}
h2 span.loginbt {background:url(img/icon-login.png) top left;}
h2 span.featurebt {background:url(img/icon-features.png) top left;}
h2 span.storybt {background:url(img/icon-story.png) top left;}
h2 span.newsbt {background:url(img/icon-news.png) top left;}
h2 span.forumbt {background:url(img/icon-forum.png) top left;}
h2 span.thumbbt {background:url(img/icon-thumb.png) top left;}
h2 span.technikbt {background:url(http://abtal-alwatan.yahoo.net/_assets/img/website/icon-technik.png) top left;}
h2 span.dlbt {background:url(img/icon-dl.png) top left;}
h2 span.infobt {background:url(img/icon-info.png) top left;}
h2 span.helpbt {background:url(img/icon-help.png) top left;}
h2 span.icn {display:block; float:left; padding-left:50px; margin:0; line-height:1.1em; padding-top:5px; padding-bottom:0; min-height:27px; background-repeat:no-repeat;}


/*	Slider	*/

.coda-slider-no-js .coda-slider {height:404px; overflow:auto !important;}
.coda-slider, .coda-slider .panel {width:600px;} 

/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel {width:600px;}
.coda-slider-wrapper.arrows .coda-slider {margin: 0 10px;}

/* Arrow styling */
.coda-nav-left a, .coda-nav-right a {background:#171717; color:#fff; padding:5px; width:100px;}

/* Tab nav */
.coda-nav ul li a.current {background:#70bb00;}
.coda-nav ul li a:hover {background:#fff1d3;}

/* Panel padding */
.coda-slider .panel-wrapper {width:600px; height:340px;}

/* Panel styling */
.panel-wrapper h2 {display:none;}

/* Preloader */
.coda-slider p.loading {padding: 20px; text-align: center}

/* Nav */
.coda-nav {position:absolute; bottom:0; left:0;}
.coda-nav ul li a img {width:90px; height:51px;}

/* Don't change anything below here unless you know what you're doing */

/* Tabbed nav */
.coda-nav ul {clear: both; display: block; margin:auto; overflow: hidden; width:600px;}
.coda-nav ul li {display: inline }
.coda-nav ul li a {background: #000; color: #fff; display: block; float: left; margin:0; margin-right: 12px; padding:0 0 0 0; text-decoration: none; height:54px;}
.coda-nav ul li.last a {margin-right:0}

/* Miscellaneous */
.coda-slider-wrapper {clear:both; position:relative; height:405px; overflow:hidden; width:600px;}
.coda-slider {float: left; overflow: hidden; position: relative}
.coda-slider .panel {display: block; float: left}
.coda-slider .panel-container {position:relative; overflow:hidden;}
.coda-nav-left, .coda-nav-right {float: left}
.coda-nav-left a, .coda-nav-right a {display: block; text-align: center; text-decoration: none}





.top0 {margin-top:0 !important;}
.bottom0 {margin-bottom:0 !important;}
.left0 {margin-left:0 !important;}
.right0 {margin-right:0 !important;}

.right {text-align:right;}
.clear {clear:both;}
.small {font-size:.9em;}
.alignright {float:right;}
.alignleft {float:left;}
img.alignright {margin:5px 0 15px 24px}
img.alignleft {margin:5px 24px 15px 0;}
img.aligncenter {margin:auto;}

blockquote {margin-left:30px;}
hr {border:0; height:1px; color:#333; background:#333; margin:2em 0;}

a {color:#69af00; text-decoration:none;}
a:hover {color:#7dd002;}

.tipsy { padding: 5px; font-size: 11px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; background-image: url(img/tipsy.gif); }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align:left; }
.tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }