/*----------------------------------------------- Donkey Kong Full Site (c)2010 Deep Focus M. Stellato ----------------------------------------------- */ @import url("reset.css"); @import url("globalnav.css"); /* Structure ----------------------------------------------- */ body {background: #071500 url(../images/bg-repeat.jpg) repeat-y center 508px; font-family: Arial, serif; font-size: 14px; line-height: 120%; text-align:center; } .wrap {margin:0 auto; width: 960px; position: relative; text-align: left; height: 100%;} #container {background: url(../images/bg-html.jpg) no-repeat top center;} #sidebar {float: left;} #main {margin:0 0 0 320px; padding:90px 0 0 0; color: #ffffbe;} a {text-decoration: none; color:#FFF;} a:hover {color: #ffffbe;} h5, #footer a, h1 {text-indent: -9000em;} #content {height: auto;} #content p {color:#FFF; text-shadow: 1px 1px 1px #000; font-size: 13px; padding: 0 0 15px 0} /* Content ----------------------------------------------- */ h1 {width: 300px; height: 190px; margin:10px 0; background: url(../images/logo.png) no-repeat top left;} h1 a {display: block; height: 218px;} h2 {font-size: 30px; margin-bottom: 20px; color: #30840A; background: url(../images/headers.png) no-repeat 80px 0; height: 60px; text-indent: -9999em;} .french h2 {background: url(../images/headers-fr.png) no-repeat 80px 0;} .spanish h2 {background: url(../images/headers-sp.png) no-repeat 80px 0;} h2.characters {background-position: 80px -60px} h2.gameplay {background-position: 80px -120px} h2.abilities {background-position: 80px -180px} h2.gallery {background-position: 80px -240px} h2.downloads {background-position: 80px -300px} #nav {width: 250px; margin-left:20px} #nav h4 {margin-bottom:10px} #nav h4, #nav h4 a {display: block; height: 45px; text-indent: -9999em} .enter, .enter a {background: url(../images/nav-enter.png) no-repeat top left;} .around, .around a {background: url(../images/nav-monkeyaround.png) no-repeat top left;} .see, .see a {background: url(../images/nav-monkeysee.png) no-repeat top left;} .hoard a {background: url(../images/nav-hoard.png) no-repeat top left; display: block; height: 45px; padding: 0;} .french .enter, .french .enter a {background: url(../images/nav-explore-fr.png) no-repeat top left;} .french .around, .french .around a {background: url(../images/nav-monkeyaround-fr.png) no-repeat top left;} .french .see, .french .see a {background: url(../images/nav-monkeysee-fr.png) no-repeat top left;} .spanish .enter, .spanish .enter a {background: url(../images/nav-explore-sp.png) no-repeat top left;} .spanish .around, .spanish .around a {background: url(../images/nav-monkeyaround-sp.png) no-repeat top left;} .spanish .see, .spanish .see a {background: url(../images/nav-monkeysee-sp.png) no-repeat top left;} #nav h4.active {margin-bottom: 0; } #nav h4.active, #nav h4 a:hover {background-position: 0 -50px;} #nav ul a {display: block; padding:8px 20px; color: #1C1711;} #nav ul a:hover {background: #E9DE99; color: #000;} #nav ul {background: url(../images/bg-nav.png) repeat-y top left; padding:0 29px 5px 25px} #nav #current a {text-shadow:1px 1px 1px #BEB47A; color: #8F0105; font-weight: bold;} .navbottom {background: url(../images/bg-nav-btm.png) no-repeat top left; height: 25px; display: block;} #buy {background: url(../images/btn-buy.png) no-repeat top left; text-indent: -9999em; display: block; height: 140px; margin:10px 0 0 20px} #buy:hover, .french #buy:hover {background-position: 0 -140px} .french #buy {background: url(../images/btn-buy-fr.png) no-repeat top left;} #content .frame .story-text p {padding-bottom: 15px} #content .frame .story-text img {margin-bottom: 15px} #content .frame .story-text a strong {text-decoration: underline; color: #AA3822} #content .frame .story-text a:hover strong {color: #000;} .link {padding-top:20px; display: block;} .link a {color: #AA3822; text-decoration: underline;} .link a:hover {color: #000;} /* Frame ----------------------------------------------- */ h3 {color: #AA3822; font-size: 15px; text-transform: uppercase; padding-bottom:5px;} h3.ability {font-size:20px; padding:20px 0 10px 20px; letter-spacing: -1px; text-shadow: 1px 1px 1px #000; color: #FFF;} #homepage {background: url(../images/home.png) no-repeat top left; height: 350px; text-indent: -99999em; margin-top: 0px } .french #homepage {background: url(../images/home-fr.png) no-repeat top left;} .spanish #homepage {background: url(../images/home-sp.png) no-repeat top left;} .frame div {padding: 0 60px; background: url(../images/frame-middle.png) repeat-y top left; overflow: hidden;} #content .frame p {padding: 0; margin: 0; color: #000; text-shadow: none;} .frame .top {display: block; background: url(../images/frame-top.png) no-repeat top left; height: 55px;} .frame .btm {display: block; background: url(../images/frame-btm.png) no-repeat top left; height: 55px; margin-bottom: 20px} .frame img {border: 1px solid #190D01;} .frame .right img {float: right; margin-left:15px} #content .frame .right p, #content .frame .right h3 {margin-right:315px} .frame .left img {float: left; margin-right:15px} #content .frame .left p, #content .frame .left h3 {margin-left:315px} /*Characters*/ #characters .frame {position: relative;} #characters img {position: absolute; border: 0; z-index: 10} /*Gallery*/ #content #gallery-thumbs p {float: left; width: 172px; text-align: center; margin-bottom: 20px; font-size:12px} .spanish #content #gallery-thumbs p, .french #content #gallery-thumbs p {line-height: normal; height: 100px} /*WP*/ #content #wp-thumbs p {overflow: hidden; padding-bottom: 15px} #content #wp-thumbs strong, #content #wp-thumbs a {display: block;} #content #wp-thumbs img {float: left; margin:0 20px 0 60px} #content #wp-thumbs span {display:block;} #content #wp-thumbs a {color: #AA3822; text-decoration: underline;} #content #wp-thumbs a:hover {color: #000} /* Footer ----------------------------------------------- */ #footer {color: #FFF; font-size: 12px; overflow: hidden; padding:200px 0 50px 0; background: url(../images/bg-footer.jpg) no-repeat top center;} #footer .wrap {text-align: center} #footer ul {padding:20px 0 30px 220px; overflow: hidden; } .spanish #footer ul {padding:20px 0 30px 180px; } #footer li {float: left;} #footer li a {display: block; color: #FFF;} #footer li a.privacy {text-indent: 0; width: 150px; text-transform: uppercase; font-size: 8px; text-align: center; margin: 0px 0 0 20px} #gamestop {width: 375px; text-align: left; background: url(../images/banana.png) no-repeat 20px 0; color: #feffc0; line-height: normal } #gamestop p, #gamestop h5 {padding: 0 0 5px 90px;} #gamestop h5 {background: url(../images/exclusive.png) no-repeat 90px 0; height: 23px;} #gamestop a {display:inline !important; width:auto; text-indent: 0; height: inherit;} #gamestop a:hover {color: #ffffbe;} #footer ul.cta {padding:0 0 0 100px;} .spanish #footer ul.cta {padding:0 0 0 280px;} .cta a {height: 50px;} .cta a:hover {background-position: 0 -50px;} .news, .strategy, .twitter, .iwata {padding:20px 10px 0 0;} .iwata a {background: url(../images/btn-iwata.jpg) no-repeat top left; width: 177px;} .news a {background: url(../images/btn-news.jpg) no-repeat top left; width: 190px;} .strategy a {background: url(../images/btn-strategy.jpg) no-repeat top left; width: 200px;} .twitter a {background: url(../images/btn-twitter.jpg) no-repeat top left; width: 187px; height: 50px } .spanish .twitter a {background: url(../images/btn-twitter-sp.jpg) no-repeat top left; width: 187px; height: 50px} .spanish .twitter {padding:10px 0 0 20px;} .spanish .twitter a:hover {background-position: 0 -50px;} .wii {padding:18px 0 0 0} .club {padding:0 0 0 20px} .esrb {padding:8px 0 0 20px} .wii a {background: url(../images/icon-wii.jpg) no-repeat top left; width: 92px; height: 41px;} .club a {background: url(../images/icon-club.jpg) no-repeat top left; width: 70px; height: 74px;} .esrb a {background: url(../images/icon-esrb.jpg) no-repeat top left; width: 130px; height: 60px;} /* Help IE ----------------------------------------------- */ * html .copyright {clear: left; margin-top: 25px;} * html #main ul {clear:left;} * html #footer {border: 1px solid #000; height: 400px;}