@charset "UTF-8";

/* Layout (global rules for all sizes) */
body {
	margin:0;
	padding:0;
}
header a.logo {
	display: block;
	position: absolute;
	background-position: 0px 0px;
	background-repeat: no-repeat;	
}

/* Layout Large Screens (default for older browsers) */
header {
	margin-top:1px;	
	height: 275px;	
	background: url('../images/banner-aoel_large.png') no-repeat right 0px;
}

header a.logo {
	width: 277px;
	height: 127px;
	top: 10px;
	left: 15px;
	background-image: url("../images/aoel-title.png");
}

.page-width  {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        width: 96%;
}

.media { padding: 22px 18px 0px; position: absolute; z-index: 1; }

.rotator { width:950px; height: 275px; }

article {padding: 60px 20px 10px 20px;}

@media screen and (max-width:990px){
	footer { padding: 20px;}
}

#gamebox {
    display: inline;
    float: right;
    margin: -2em 7px;
    position: relative;
    text-align: center;
    width:150px;
    z-index: 2;
}

#gamebox1 {
    display: inline;
    float: left;
    margin: -1em 2em;*/
    margin-top: 0.5em;
    margin-bottom:0.5em;
    position: relative;
    text-align: center;*/
    width:100px;
    z-index: 2;
}

#gamebox2 {
    display: inline;
    float: left;
    margin: 0.5em;
    /*margin-top: 0.5em;
    margin-bottom:0.5em;*/
    position: relative;
    text-align: center;
    width:100px;
    z-index: 2;
}


#gameboxdesc {
	width:680px;
	/*float:left;*/
	margin:0 0 10px 0;
	position:relative;
	display:inline;
	color:#FFF;
}

.headertitle{height:25px;font-size:14px;font-weight:bold;overflow:hidden;padding-right:2em;color:#FFF;}

body {font-family:'PT Sans', Helvetica, Arial, sans-serif;font-size:12px;color:#222;padding:0;margin:0;overflow-x:hidden; }
p,div,table,tr,td,form,input { padding:0; margin:0; font-weight:normal; text-decoration:none; }
p { padding:8px 0; }


/* -----------------------------------
basic layout
----------------------------------- */

.row {
	clear: left;
	overflow: hidden;
	zoom: 1;
	_overflow: visible;	
}

.w-4col, .w-3col, .w-2col, .w-1col, .m-2col, .m-1col {
	paddin: 10px 0;
	background: #aaa;
	margin-bottom: 1em;
}

/* -----------------------------------
wide
----------------------------------- */

@media (min-width: 700px) {
	.container {
		max-width: 1100px;
		margin: 0 auto;
	}
	
	.w-4col, .w-3col, .w-2col, .w-1col {
		float: left;
		margin-right: 2%;
		background-color: yellow;
	}
	
	.w-4col {width:100%;}
	.w-3col {width:74.5%;}
	.w-2col {width:49%;}
	.w-1col {width:23.5%;}
	.w-4col, .w-last { margin-right: 0; }
}

/* -----------------------------------
medium
----------------------------------- */

@media (min-width: 500px) and (max-width: 699px) {
	.m-2col, .m-1col {
		float: left;
		margin-right: 4%;
		background-color: lime;
	}
	
	.m-2col {width:100%;}
	.m-1col {width:48%;}
	.m-4col, .m-last, .w-last { margin-right: 0; }
}