* {
margin:0px;
padding:0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
background-color:grey;
}
h1{
position:relative;
left:25px;
}
.container{
margin:auto;
width:970px;
position:relative;
}
.upper-nav{
height:57px;
width:100%;
background-color:#ed1c24;
position:relative;
top:0px;
}
.content-holder{
width:100%;
height:670px;
position:relative;
}
.bottom{
width:100%;
position:absolute;
height:18px;
bottom:0px;
background-image:url(../images/stripes.png);
background-repeat:repeat-x;
opacity:0.8;
filter:alpha(opacity=80);
}
.content{
float:left;
height:670px;
}
.content-left{
background:url(../images/badmadback.jpg);
background-size:cover;
background-repeat:no-repeat;
width:220px;
}
.content-right{
background-size:cover;
background-repeat:no-repeat;
width:750px;
}
.b1{
background:url(../images/b1.jpg);
}
.b2{
background:url(../images/b2.jpg);
}
.b3{
background:url(../images/b3.jpg);
}
.b4{
background:url(../images/b4.jpg);
}
.b5{
background:url(../images/b5.jpg);
}
.b6{
background:url(../images/b6.jpg);
}
.b7{
background:url(../images/b7.jpg);
}
.b8{
background:url(../images/b8.jpg);
}
.b9{
background:url(../images/b9.jpg);
}
.content-logo{
position:relative;
left:30px;
top:30px;
background:url(../images/badmad_s.png);
background-size:cover;
background-repeat:no-repeat;
width:150px;
height:219px;
}
.nav-logo-bg{
position:absolute;
top:290px;
right:0px;
width:840px;
height:140px;
background-color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
z-index:1;
opacity:0.8;
filter:alpha(opacity=80);
}
.nav-logo{
position:absolute;
background:url(../images/badmad_logo.png);
background-size:cover;
background-repeat:no-repeat;
width:830px;
height:112px;
z-index:2;
top:305px;
right:0px;
}
.next-gen{
position:absolute;
background:url(../images/black_b.png);
background-size:cover;
background-repeat:no-repeat;
width:523px;
height:63px;
z-index:3;
top:420px;
left:130px;
}
.line{
position:absolute;
background-color:black;
width:400px;
height:3px;
z-index:2;
top:421px;
right:0px;
}
.menu-holder{
position:absolute;
width:830px;
height:35px;
z-index:2;
top:250px;
right:0px;
}
li{
float:left;
display:inline;
background-color:black;
width:130px;
height:25px;
behavior: url('../assets/PIE.htc');
opacity:0.8;
filter:alpha(opacity=80);
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
padding:2px;
margin:2px;
}
li:hover{
background-color:#ed1c24;
}
.red-r-container{
position:absolute;
bottom:18px;
right:0px;
width:720px;
height:222px;
background-image:url('../images/bg-r.png');
background-repeat:repeat-x repeat-y;
padding-top:60px;
padding-left:20px;
padding-right:20px;
}
.red-r-container-center{
position:absolute;
bottom:18px;
right:300px;
width:220px;
height:222px;
background-image:url('../images/bg-r.png');
background-repeat:repeat-x repeat-y;
padding-top:50px;
padding-left:20px;
}
.red-r-container-right{
position:absolute;
bottom:18px;
right:0px;
width:400px;
height:222px;
background-image:url('../images/bg-r.png');
background-repeat:repeat-x repeat-y;
padding:20px;
padding-top:30px;
}
.red-r-container-right-w{
position:absolute;
bottom:18px;
right:0px;
width:100%;
height:222px;
background-image:url('../images/bg-r.png');
background-repeat:repeat-x repeat-y;
}
.content-left-caption{
position:absolute;
bottom:18px;
width:220px;
height:170px;
text-align:right;
padding-right:10px;
padding-top:10px;
}
.inline{
display:inline;
}
.bg-w{
position:absolute;
padding:0px;
bottom:18px;
right:20px;
width:240px;
height:222px;
background-image:url('../images/bg-w.png');
background-repeat:repeat-x repeat-y;
}
.center-r{
position:relative;
top:5px;
left:5px;
width:230px;
height:212px;
padding-top:20px;
background-image:url('../images/bg-r.png');
background-repeat:repeat-x repeat-y;
}
.center-w{
position:absolute;
width:340px;
height:167px;
padding:10px;
background-image:url('../images/bg-w.png');
background-repeat:repeat-x repeat-y;
border-style:solid;
border-color:#ea686d;
border-width:5px;
}
.table1-1{
top:80px;
left:250px;
}
.table1-2{
top:80px;
left:600px;
}
.table1-3{
bottom:20px;
left:250px;
}
.table1-4{
bottom:20px;
left:600px;
}
.girl-news{
position:absolute;
bottom:18px;
right:265px;
width:125px;
height:222px;
background-image:url('../images/girl_news.jpg');
background-repeat:no-repeat;
}
.girl-col:hover a{
color:black;
}
.boy-col:hover a{
color:black;
}
.girl1,.girl2,.girl3,.girl4,.boy1,.boy2,.boy3,.boy4{
float:left;
width:137px;
height:222px;
margin-right:3px;
}
.boy1{
background-image:url('../images/boy1.jpg');
}
.boy2{
background-image:url('../images/boy2.jpg');
}
.boy3{
background-image:url('../images/boy3.jpg');
}
.boy4{
background-image:url('../images/boy4.jpg');
}
.girl1{
background-image:url('../images/girl1.jpg');
}
.girl2{
background-image:url('../images/girl2.jpg');
}
.girl3{
background-image:url('../images/girl3.jpg');
}
.girl4{
background-image:url('../images/girl4.jpg');
}
.caption{
float:left;
height:222px;
width:130px;
padding-top:50px;
}
.arrow-l{
position:relative;
top:60px;
left:106px;
width:36px;	
height:22px;
background-image:url('../images/arrow-l.png');
}
.arrow-r{
position:relative;
top:88px;
left:-5px;
width:36px;	
height:22px;
background-image:url('../images/arrow-r.png');
}
.nav-arrow-l{
float:left;
margin:15px 5px 0px 20px;
width:35px;
height:24px;
background-image:url('../images/nav-arrow-l-w.png');
}
.nav-arrow-r{
float:left;
margin:15px 0px 0px 0px;
width:35px;
height:24px;
background-image:url('../images/nav-arrow-r-w.png');
}
.nav-arrow-l:hover{
background-image:url('../images/nav-arrow-l-b.png');
}
.nav-arrow-r:hover{
background-image:url('../images/nav-arrow-r-b.png');
}