/*
GLOBAL
*/

@font-face {
    font-family: Rockwell-Regular;
    src: url('../fonts/Rockwell.ttf');
}

@font-face {
    font-family: RosewoodStd-Fill;
    src: url('../fonts/RosewoodStd-Fill.otf');
}

* {
	padding: 0;
	margin: 0;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: #000a37;

}

a {
	color:#238DA1;
	text-decoration:none;
}

a:hover {
	color: #113b43;
	cursor: pointer; 
}

h3 {
	margin-top: 15px ;
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

strong, b {
    font-weight: bold;
}


div
{
    position: relative;
}

body, html {
    min-height: 1270px;
}

div, body {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
}

body {

    z-index: 1;
    background: url('../img/ow_bg_gradient.jpg');
    background-repeat: repeat-x;
    background-size: auto 1270px;

    font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: center ;

}

.accelerated {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

/* GENERIC TITLES */

.game_title {
    z-index: 4;
    border: 9px solid #005a84;
    border-radius: 35px;
    background-color: #ffffff;
    margin: auto;
    padding: 0;
    height: 65px ;
    width: 500px;
}

.game_title p {

    position: absolute;
    left: 50%;
    width: 500px;
    margin-left: -250px;
    height: 65px;
    margin-top: 6px;

    color: #005a84;
    font-size: 40px ;
    font-family: RosewoodStd-Fill;
}

/*
MAIN
*/

#bg {
    z-index: 0;
    background: url('../img/ow_bg.jpg');
    background-repeat: no-repeat;
    display: inline;
    width: 1400px;
    height: 1270px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -700px;
}

#char_left {
    z-index: 1;
    background: url('../img/ow_bg_character_01.png');
    background-repeat: no-repeat;
    display: inline;
    width: 183px;
    height: 246px;
    position: absolute;
    bottom: 100px;
    left: 125px;
    margin-left: -91.5px;
}

#char_right {
    z-index: 1;
    background: url('../img/ow_bg_character_02.png');
    background-repeat: no-repeat;
    display: inline;
    width: 101px;
    height: 189px;
    position: absolute;
    bottom: 100px;
    right: 35px;
    margin-left: -94.5px;
}

#mainColumn {
    z-index: 2;
    position: relative;
    width: 100%;
    margin: auto;
    padding: 10px 0 10px 0 ;
    background-repeat: no-repeat;
}

/*
LOGO
*/

#titleBlock {
    z-index: 2;
    width: 100%;
    margin: auto;
    margin-bottom: 50px;
    padding-top: 10px ;
}

/*
MENU BOX
*/
#menuBoxWrapper {
    margin: auto;
    width: 968px;
    height: 530px ;
}

.menu_left_panel {
    z-index: 2;
    height: 530px ;
    width: 137px ;
    position: absolute;
    left: 0;
    background: url('../img/ow_main_menu_lpanel.png') no-repeat;
}

.menu_center_panel {
    z-index: 1;
    height: 530px ;
    width: 700px ;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -350px;
    background: url('../img/ow_main_menu_bg.png') repeat-x;
}

#carousel {
    position: absolute;
    left: 50%;
    top: 18px ;
    margin: auto;
    margin-left: -330px;
    width: 660px;
    height: 495px;
    border: 15px solid #1fa4b5;
    border-radius: 45px;
    overflow: hidden ;
}

.menu_right_panel {
    z-index: 2;
    height: 530px ;
    width: 137px ;
    position: absolute;
    right: 0;
    background: url('../img/ow_main_menu_rpanel.png') no-repeat;
}

/*
SOCIAL PROMO CONTENT
*/

#lowerContentWrapper {
    text-align: center;
	margin: auto;
    margin-top: 45px ;
    width: 968px ;
    text-align: center ;
}

#lowerContentWrapper .box {
    margin: auto;
    width: 33.3% ;
    float: left;
    text-align: center;
}

.social_feed_wrapper {
    margin: auto ;
    background-color: #9bdaed;
    background-image: url('../img/ow_twit_face_bg.jpg');
    background-repeat: repeat;
    width: 270px;
    height: 300px;
    border: 10px solid rgb(131, 198, 212);
    border-radius: 25px;
    box-shadow: 0px 15px 20px -7px rgba(0,0,0,0.5);
    -mox-box-shadow: 0px 15px 20px -7px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 15px 20px -7px rgba(0,0,0,0.5);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#twitter_widget {
    padding: 10px;
    margin: auto
}

#facebook_widget {
    padding: 10px;
    margin: auto ;
}

.fb-like-box span, .fb-like-box iframe {
    border: 1px solid #e8e8e8 !important;
    background-color: #ffffff !important;
    border-radius: 5px;
    width: 220px !important;
    height: 255px !important;
}

.promo_wrapper {
    background-color: #ffffff;
    display: table;
    margin: auto ;
    width: 300px;
    height: 175px;
    border: 10px solid rgb(145, 147, 145);
    border-radius: 25px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.promo_content {
    padding: 3px 10px 3px 10px;
    font-size: 14px ;
	line-height: 20px ;
    height: 150px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    overflow-y: scroll;
    overflow-x: hidden;
}

.promo_wrapper.top {
    box-shadow: 0px 15px 20px -7px rgba(0,0,0,0.5);
    -mox-box-shadow: 0px 15px 20px -7px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 15px 20px -7px rgba(0,0,0,0.5);
    margin-bottom: 15px ;
}

.promo_wrapper.top > .promo_content {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}

.promo_wrapper.bottom > .promo_content {
    display: table-cell;
    vertical-align: middle;
}

.social_feed_wrapper img.logo {
    z-index: 3;
    position: absolute;
    top: -40px ;
    left: 50%;
    margin-left: -32px ;
}

#lowerContentWrapper .left_col {
    width: 32% ;
}

#lowerContentWrapper .center_col {
    width: 36% ;
    margin-top: -20px;
}

#lowerContentWrapper .right_col {
    width: 32% ;
}

/*
FOOTER
*/

#footer {
    position: absolute;
    width: 968px ;
    bottom: 0;
    left: 50%;
    padding-bottom: 3px ;
    margin-left: -484px;
	color: #ffffff ;
	font-size: 10px ;
    line-height: 14px ;
}

#footer p {
    margin-top: 5px;
}

#linkblock {
    margin-top: 10px;
	color: #ffffff ;
    font-weight: bold;
}

#footer a {
	color:#ffffff;
}

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