/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* =============================================================================
HTML5 element display
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* http://clagnut.com/blog/348/#c790
* 2. Force vertical scrollbar in non-IE
* 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
* www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
* 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
*/
html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 12px; line-height: 1.231; }
body, button, input, select, textarea { font-family: Verdana, 'Trebuchet MS', Arial, sans-serif; color: #222; }
h2,h3 {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/*
* These selection declarations have to be separate
* No text-shadow: twitter.com/miketaylr/status/12228805301
* Also: hot pink!
*/
::-moz-selection { background: #f7d122; color: #000; text-shadow: none; }
::selection { background: #f7d122; color: #000; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
@font-face{
font-family: 'MoolBoran';
src: url('../fonts/moolboran.eot');
src: url('../fonts/moolboran.eot?#iefix') format('embedded-opentype'),
url('../fonts/moolboran.woff') format('woff'),
url('../fonts/moolboran.ttf') format('truetype'),
url('../fonts/moolboran.svg#webfont') format('svg');
}
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 0; padding: 0; list-style:none; }
dd { margin: 0; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* Improve image quality when scaled in IE7
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
*/
img { border: 0; -ms-interpolation-mode: bicubic; }
/*
* Correct overflow displayed oddly in IE9
*/
svg:not(:root) {
overflow: hidden;
}
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
*/
button, input { line-height: normal; *overflow: visible; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
/*
* Remove inner padding and border in FF3/4
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/* Remove default vertical scrollbar in IE6/7/8/9 */
textarea { overflow: auto; vertical-align: top; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
/* =============================================================================
Primary styles
Author: alex
========================================================================== */
html, html > body{height:100%;width:100%;}
html{background: #000 url("../img/bg/main.jpg") no-repeat center top;}
#container{width:992px;height:100%;margin:0 auto;}
/* Header */
header{position:relative;height:326px;}
header h1{position:absolute;left:-5px; top:20px;margin:0;}
/* Menu */
header nav{position:absolute;left:12px; top:242px;}
header nav ul li{float:left;width:93px;margin:0 2px 0 0;}
header nav ul li a{display:block;width:93px;height:76px;text-indent:-9999px;background-image: url("../img/bt/menu.jpg");background-repeat:no-repeat;}
header nav ul li a.mn-home{background-position:left top;}
header nav ul li a.mn-start{background-position:-93px top;}
header nav ul li a.mn-heroes{background-position:-186px top;}
header nav ul li a.mn-powerup{background-position:-279px top;}
header nav ul li a.mn-media{background-position:-372px top;}
header nav ul li a.mn-support{background-position:-465px top;}
header nav ul li a.mn-contact{background-position:-558px top;}
/* Menu hover */
header nav ul li a.mn-home:hover, header nav ul li.on a.mn-home{background-position:left bottom;}
header nav ul li a.mn-start:hover, header nav ul li.on a.mn-start{background-position:-93px bottom;}
header nav ul li a.mn-heroes:hover, header nav ul li.on a.mn-heroes{background-position:-186px bottom;}
header nav ul li a.mn-powerup:hover, header nav ul li.on a.mn-powerup{background-position:-279px bottom;}
header nav ul li a.mn-media:hover, header nav ul li.on a.mn-media{background-position:-372px bottom;}
header nav ul li a.mn-support:hover, header nav ul li.on a.mn-support{background-position:-465px bottom;}
header nav ul li a.mn-contact:hover, header nav ul li.on a.mn-contact{background-position:-558px bottom;}
/* Botoes redes sociais */
#social{position:absolute;right:0px;top:115px;}
#social li{float:left;width:101px;height:90px;}
#social li a{display:block;width:101px;height:90px;text-indent:-9999px;background-image: url("../img/bt/redes-sociais.png");background-repeat:no-repeat;}
#social li a.bt-facebook{background-position:left top;}
#social li a.bt-twitter{background-position:-101px top;}
#social li a.bt-youtube{background-position:-202px top;}
/*Botao Like */
.likebt{position:absolute !important;right:0px;top:20px;}
.bt-appstore, .bt-androidmarket{position:absolute;top:252px;display:block;width:142px;height:55px;text-indent:-9999px;background: url("../img/bt/app-store.png") no-repeat center top;}
.bt-appstore{right:15px;background-position:center bottom;}
.bt-androidmarket{right:160px;background-position:center top;}
/* Footer */
footer{clear:both;height:42px;padding-top:18px;background: url("../img/bg/footer.png") no-repeat center;}
footer p{text-align:center;margin:0;}
footer p a, footer p a:visited{font-weight:bold;text-decoration:none;color:#242424;}
footer p a:hover{text-decoration:underline;}
/* Main */
#main{width:990px;margin:0 auto;border-left:1px solid #616161;border-right:1px solid #616161;background-color:#252525;padding:18px 0 0 0;overflow:hidden;}
#main.getting {background: #000;}
.home{width:990px;padding-bottom:18px;overflow:hidden;}
.home .news{float:left;width:662px;margin-left:5px;}
.news article{
width:657px;
height:auto;
background: #252525; /* Old browsers */
background: -moz-linear-gradient(top, #252525 0%, #1a1a1a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#252525), color-stop(100%,#1a1a1a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #252525 0%,#1a1a1a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #252525 0%,#1a1a1a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #252525 0%,#1a1a1a 100%); /* IE10+ */
background: linear-gradient(top, #252525 0%,#1a1a1a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252525', endColorstr='#1a1a1a',GradientType=0 ); /* IE6-9 */
}
.news article > div{padding:18px 15px 30px 30px;background: url("../img/bg/news-textura.png") no-repeat left top;overflow:hidden;}
.news h2 + article > div{background-position: left -2px;}
.news article > div h4{margin:0 0 20px 0;color:#ddb937;font-family: Palatino Linotype, Book Antiqua3, Palatino, serif;font-size:24px;}
.news article > div h4 a, .news article > div h4 a:visited{color:#ddb937;text-decoration:none;}
.news article > div h4 a:hover{text-decoration:underline;}
.news article > div p{color:#a3a3a3;margin:0 0 10px 0;font-family: Arial, Helvetica, sans-serif;}
.news article > div p.news-txt, .news article > div p.news-txt a{line-height:21px;color:#a3a3a3;text-decoration:none;}
.news article > div p.news-txt a:hover{text-decoration:underline;}
.news article > div p.news-info{clear:both;color:#787575;margin:0;}
.news article > div p.news-info a,.news article > div p.news-info a:visited{color:#bba39e;text-decoration:none;}
.news article > div p.news-info a:hover{text-decoration:underline;}
.news article > div p.news-info a.comments{height:18px;padding-left:20px;margin-left:8px;background: url("../img/ico/comentarios.png") no-repeat left bottom;color:#787575;}
.news article > div p.news-info a.comments:hover{text-decoration:none;}
.news article > div .post-img{float:left;margin:0 20px 15px 0;}
.news article > div .post-img img{border:1px solid #7d6e4e;}
#video_box{width:640px;min-height:362px;margin:0 0 20px 11px;}
.home aside{
float:right;
width:300px;
padding:0 6px 30px 7px;
margin-right:9px;
background: #272727; /* Old browsers */
background: -moz-linear-gradient(top, #2a2a2a 0%, #141414 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a2a2a), color-stop(100%,#141414)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2a2a2a 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2a2a2a 0%,#141414 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2a2a2a 0%,#141414 100%); /* IE10+ */
background: linear-gradient(top, #2a2a2a 0%,#141414 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a2a2a', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
}
/* Destaque barra lateral */
#destaque{margin-bottom:22px;}
#destaque img{border:1px solid #7d6e4e;}
/*Breadcrumb */
#breadcrumb{width:620px;margin-left:12px;overflow:hidden;}
#breadcrumb li {float:left;font-size:12px;font-family:arial, helvetica, sans-serif;color:#ddb937;}
#breadcrumb li a{text-decoration:none;color:#979695;}
#breadcrumb li span{padding-left:5px;}
/******** HEROES ********/
.heroes {float:left;width:642px;min-height:1100px;font-family:arial, helvetica, sans-serif;}
#hero-selector{position:relative;width:558px;height:77px;margin:0 0 20px 22px;padding:8px 21px;background: url("../img/bg/heroes-selector-borders.jpg") no-repeat center;}
#hero-selector div{position:relative;width:555px;height:77px;overflow:hidden;background-color:#000;}
#hero-selector ul{position:absolute;margin:0;padding:0;}
#hero-selector ul li{float:left;margin:0 5px;}
#hero-selector ul li a{display:block;width:70px;height:71px;padding-top:6px;letter-spacing:-1px;color:#a3a3a3;text-decoration:none;text-align:center;}
#hero-selector ul li a img{margin-bottom:1px;}
#hero-selector ul li.on a, #hero-selector ul li a:hover{color:#fff;text-decoration:none;background: url("../img/bg/heroes-selector.jpg") no-repeat center;}
#hero-selector .prev,#hero-selector .next{position:absolute;top:32px;width:16px;height:31px;background-image: url("../img/bt/nav-slider-sml.png");background-repeat:no-repeat;cursor:pointer;}
#hero-selector .prev{left:0;background-position:left top;}
#hero-selector .next{right:0;background-position:right top;}
/******** MEDIA ********/
.media {width:100%;font-family:arial, helvetica, sans-serif;}
.media .box-media {width: auto; background: #000 url(../img/bg/box-media.jpg) top left no-repeat; padding: 16px 0 0 40px;}
.media .clear {clear:both;}
.media .box-media h2 {display: block; height: 20px; background: url(../img/tit/videos-screen-wall.png) no-repeat; text-indent: -9999px; margin-bottom: 39px;}
.media .box-media ul li {float: left; margin-left: 47px; width: 178px; height: 180px;}
.media .box-media ul li:first-child {margin-left: 0;}
.media .box-media ul li img {display: block; border: 1px solid #7d6e4e; margin-bottom: 5px;}
.media .box-media ul li h3 {color: #ddb937; font-size: 16px;}
.media .box-media ul li p {color: #a3a3a3; margin: 0; margin-bottom: 15px;}
.media .box-media ul li span {color: #575656;}
.media .videos {height: 599px; margin-top: 10px;padding-bottom:40px;}
.media .screenshots {height: 232px;}
.media .screenshots h2 {background-position: 0 -20px;}
.media .wallpapers {height: 284px;}
.media .wallpapers h2 {background-position: 0 -40px;}
/******** GETTING STATERD ********/
.gettingstarted {width:100%; background: #000 url(../img/bg/gettingstarted.jpg) top right no-repeat; overflow:hidden; margin-top: 10px;}
.getting-nav {float:left;width:227px;height:780px;font-family:arial, helvetica, sans-serif; background: url(../img/bg/getting-nav.png); margin: 14px 0 0 17px;}
.getting-nav ul {width: 227px; margin-top: 50px;}
.getting-nav ul li a {display:block; width:200px; height:21px; text-decoration:none; text-transform:uppercase; font-weight:bold; background: url(../img/bg/bt-gettingstarted.png) top left no-repeat; color:#eee4ae; padding: 5px 0 0 27px;}
.getting-nav ul li a:hover,.getting-nav ul li a.hover {background-position: 1px -26px;}
.getting-nav ul.sub {margin: 0;}
.getting-nav ul.sub li a {background: none; font-size: 11px; height:10px; margin-left: 8px; color:#959271;}
.getting-nav ul.sub li a:hover,.getting-nav ul.sub li a.hover {color: #eceab8;}
.getting-content {float: right; width:734px; margin-top: 35px;}
.getting-content .post {width: auto; background: url(../img/bg/post.jpg) no-repeat; min-height: 95px; padding: 15px 90px 40px 15px; position: relative;}
.getting-content .post a.top {display:block; width:35px; height:11px; background: url(../img/bt/top.png); position: absolute; top: 17px; right:82px; text-indent: -9999px;}
.getting-content .post h2 {font-size: 13px; color: #ddb937; font-weight: bold; text-transform: uppercase;}
.getting-content .post p, .getting-content .post ul li {color: #a3a3a3;}
.getting-content .post ul {margin:0 0 25px 0;}
.getting-content .post ul li {margin:0 0 15px 25px;}
/******** CONTACT - SUPPORT ********/
.wrapper-form {width:100%;font-family:arial, helvetica, sans-serif; margin: 10px 0 0 0; min-height: 490px; background:url(../img/bg/wrapper-form.jpg) top left no-repeat}
.wrapper-form .content {width: 484px; margin: 0 auto; padding:57px 0;}
.wrapper-form .content p {color:#a3a3a3}
.wrapper-form .msg-success {width: 900px; margin: 0 auto; padding:40px 0;}
.wrapper-form .msg-success p {font-size:26px;color:#DDB937}
.wrapper-form .clear {clear:both}
.wrapper-form label {display:block; color:#ddb937; font-weight: bold; text-transform:uppercase; font-size: 17px; cursor:default; margin-top: 10px;}
.wrapper-form label.error {display:block; color:#f00;font-weight: normal; text-transform:normal; font-size: 14px;margin-top: 2px;}
.wrapper-form input {display:block;}
.wrapper-form input.text {width: 478px; height:25px;}
.wrapper-form textarea {width: 478px; height: 154px; margin-bottom: 10px;}
.wrapper-form .left {width: 280px; float:left;}
.wrapper-form .left select {width: 275px; height:28px;padding:5px;}
.wrapper-form .right {width: 180px; float:right}
.wrapper-form .right select {width: 179px; height:28px;padding:5px;}
.wrapper-form .submit {float: right;display:block; width: 104px; height: 33px; border:0; margin: 10px 0 15px 0;font-size:0px;line-height:0px;background: url(../img/bt/send.gif);text-indent:-9999px;}
/**** Content ****/
#hero-content h2{margin:0 0 18px 110px;height:40px;clear:both;text-indent:-9999px;}
#hero-content .info{min-height:500px;padding:0 0 0 360px;}
#hero-content .info h4{margin:0 0 20px 0;color:#ddb937;font-family: Palatino Linotype, Book Antiqua3, Palatino, serif;font-size:24px;}
#hero-content .info p{width:263px;font-size:14px;line-height:24px;color:#a3a3a3;}
.sunbird{background: url("../img/bg/sunbird.jpg") no-repeat left top;}
.sunbird h2{width:230px;background: url("../img/tit/sunbird.png") no-repeat left top;}
.sandqueen{background: url("../img/bg/sandqueen.jpg") no-repeat left top;}
.sandqueen h2{width:230px;background: url("../img/tit/sandqueen.png") no-repeat left top;}
.soultaker{background: url("../img/bg/soultaker.jpg") no-repeat left top;}
.soultaker h2{width:230px;background: url("../img/tit/soultaker.png") no-repeat left top;}
.crusader{background: url("../img/bg/crusader.jpg") no-repeat left top;}
.crusader h2{width:230px;background: url("../img/tit/crusader.png") no-repeat left top;}
.mindeater{background: url("../img/bg/mindeater.jpg") no-repeat left top;}
.mindeater h2{width:230px;background: url("../img/tit/mindeater.png") no-repeat left top;}
.pillbug{background: url("../img/bg/pillbug.jpg") no-repeat left top;}
.pillbug h2{width:230px;background: url("../img/tit/pillbug.png") no-repeat left top;}
.ravager{background: url("../img/bg/ravager.jpg") no-repeat left top;}
.ravager h2{width:230px;background: url("../img/tit/ravager.png") no-repeat left top;}
.redstorm{background: url("../img/bg/redstorm.jpg") no-repeat left top;}
.redstorm h2{width:230px;background: url("../img/tit/redstorm.png") no-repeat left top;}
.ghostemperor{background: url("../img/bg/ghostemperor.jpg") no-repeat left top;}
.ghostemperor h2{width:305px;background: url("../img/tit/ghost-emperor.png") no-repeat left top;}
.shade-countess{background: url("../img/bg/shade-countess.jpg") no-repeat left top;}
.shade-countess h2{width:310px;background: url("../img/tit/shade-countess.png") no-repeat left top;}
.gallery{position:relative;width:560px;height:148px;margin:0 0 19px 16px;padding:9px 30px;background: url("../img/bg/gallery-borders.jpg") no-repeat center;}
.gallery div{position:relative;width:560px;height:128px;padding:10px 0;overflow:hidden;background-color:#000;}
.gallery ul{position:absolute;margin:0;padding:0;}
.gallery ul li{float:left;margin:0 18px;}
.gallery ul li a{display:block;width:150px;height:130px;}
.gallery ul li a img{border:1px solid #7d6e4e;}
.gallery ul li.on a, .gallery ul li a:hover{}
.gallery .prev,.gallery .next{position:absolute;top:50%;width:24px;height:47px;margin-top:-24px;cursor:pointer;background-image: url("../img/bt/nav-slider-big.png");background-repeat:no-repeat;}
.gallery .prev{left:0;background-position:left top;}
.gallery .next{right:0;background-position:right top;}
#videos{padding:37px 0 0 28px;background: url("../img/bg/box-videos.jpg") no-repeat left top;overflow:hidden;}
#videos h3{width:99px;height:23px;margin:0 0 30px 5px;background-image: url("../img/tit/videos.png");}
#videos div{float:left;width:222px;margin:0 85px 28px 0;}
#videos div > a {float:left;outline:none;}
#videos div > a img{margin:0 13px 13px 0; border:1px solid #7d6e4e;}
#videos div h4{margin:0 0 5px 0;color:#ddb937;font-weight:normal;font-size:16px;color:#ddb937;}
#videos div h4 a{color:#ddb937;text-decoration:none;}
#videos div p{margin:0 0 15px 0;color:#a3a3a3;font-size:13px;}
#videos div p a{color:#a3a3a3;text-decoration:none;}
#videos div span{color:#a3a3a3;color:#575656;}
#skills{width:347px;padding:28px 0 0 0;float:right;background:#000 url("../img/bg/skills.jpg") no-repeat center top;}
#skills > div{width:347px;padding-top:22px;border-left:1px solid #616060;}
#skills > div h3{width:83px;height:23px;margin:0 auto 40px auto;background: url("../img/tit/skills.png") no-repeat left top;}
#skills > div > div{padding:0 16px 24px 30px;margin-bottom:22px;background: url("../img/bg/line-divisor.jpg") no-repeat left bottom;overflow:hidden;}
#skills > div > div img{float:left;margin:0 14px 14px 0;}
#skills > div > div h4{margin:0 0 10px 0;color:#ddb937;font-family: Palatino Linotype, Book Antiqua3, Palatino, serif;font-size:20px; line-height:16px;}
#skills > div > div p{float:left;width:206px;margin:0 0 10px 0;color:#a3a3a3;}
/******** POWER-UPS ********/
#main.main-power{background: #252525 url("../img/bg/powerups.jpg") no-repeat center top;}
#power {font-family:arial, helvetica, sans-serif;}
#power > ul{width:407px;height:47px;margin:2px auto 0 auto;}
#power > ul li{float:left;}
#power > ul li a{height:47px;background: url("../img/bt/mn-powerup-2.png") no-repeat left bottom;}
#power > ul li a.mn-all{width:115px;background-position:left bottom;}
#power > ul li a.mn-power{width:143px;background-position:-115px bottom;}
#power > ul li a.mn-equip{width:149px;background-position:right bottom;}
/* Hover */
#power > ul li.on a.mn-all, #power ul li a.mn-all:hover{background-position:left top;}
#power > ul li.on a.mn-power, #power ul li a.mn-power:hover{width:143px;background-position:-115px top;}
#power > ul li.on a.mn-equip, #power ul li a.mn-equip:hover{width:149px;background-position:right top;}
#power .box{width:100%;padding:15px 0 40px 0; background: #000 url("../img/bg/box-powerups.jpg") no-repeat center bottom;}
#power .box p.category {width:auto;margin:0 0 7px 0;}
#power .box p.category a{margin:0 16px;color:#ded5a2;text-transform:uppercase;font-weight:bold;text-decoration:none;}
#power .box h2{margin:0 0 10px 0;font-family: MoolBoran, Palatino Linotype, Book Antiqua3, Palatino, serif;font-size:58px;font-weight:normal;text-align:center;color:#bfbfbf; background: #000 url(../img/bg/h2-power.jpg) top center no-repeat;}
#power .box > p{width:715px;margin:0 auto;font-size:14px;text-align:center;color:#a3a3a3;}
#power .box .itens{margin:30px auto 0 auto;overflow:hidden;}
#power .box .q1{width:236px;}
#power .box .q2{width:472px;}
#power .box .q3{width:708px;}
#power .box .itens li{float:left;width:234px;margin:0 0 0 0;padding:15px 0 0 0;background: url("../img/bg/item-top.jpg") no-repeat center top;border:1px solid #504e4e;}
#power .box .itens li div{width:199px;padding:0 10px 13px 25px;background: url("../img/bg/item-bottom.jpg") no-repeat center bottom;overflow:hidden;}
#power .box .itens li div img{float:left;margin:0 10px 10px 0;}
#power .box .itens li div p, #power .box .itens li div h3{font-size:12px;margin:0 0 5px 0;color:#ddb937;}
#power .box .itens li div h3{margin-bottom:10px;text-align:center;}
#power .box .itens li div p span{color:#a3a3a3;}
/* Títulos */
.tit-news{width:662px;height:43px;margin:0 0 0 0;background-image: url("../img/tit/news.png");}
.tit-facebook{width:300px;height:30px;margin:0 0 0 0;background-image: url("../img/tit/facebook.png");}
/* Para o player de vídeo */
#video_box { position: relative; }
#video { background-color: #000; }
#controls { display: none; opacity: 0.85; color: #fff; position: absolute; height: 30px; }
.control { float: left; height: 25px; width: 25px; margin-right: 5px; background-color: #001E25; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.control:last-child { margin-right: 0; }
.control:first-child { margin-left: 5px; }
#play span { display: block; font-size: 0px; line-height: 0; }
#play.play span { width: 0; height: 0; margin: 8px 0 0 8px; border-top: 5px solid #001E25; border-left: 10px solid #fff; border-bottom: 5px solid #001E25; }
#play.pause span { width: 3px; height: 10px; margin: 8px auto 0; border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff; }
#progress { width: 190px; }
#progress #progress_box { float: left; width: 100px; height: 9px; border: 1px solid #777; background-color: #001E25; margin: 7px 0 0 5px; overflow:hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#progress #play_progress { display: block; width: 0px; height: 9px; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#progress #load_progress { display: block; width: 0px; height: 9px; background-color: #777; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#progress #play_time { float: left; margin: 7px 0 0 5px; font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
#volume { width: 50px; }
#volume span { display: block; margin: 4px 0 0 5px; }
#volume ul { display: block; margin: 0; padding: 0; list-style: none; }
#volume ul li { float: left; margin: 0; padding: 0; list-style: none; width: 5px; margin-right: 2px; height: 0px; border-bottom: 18px solid #555; }
#volume ul li:nth-child(1) { border-bottom-width: 2px; height: 16px; }
#volume ul li:nth-child(2) { border-bottom-width: 4px; height: 14px; }
#volume ul li:nth-child(3) { border-bottom-width: 7px; height: 11px; }
#volume ul li:nth-child(4) { border-bottom-width: 10px; height: 8px; }
#volume ul li:nth-child(5) { border-bottom-width: 14px; height: 4px; }
#full_screen span { display: block; float: left; margin: 5px 0 0 5px; padding: 0; }
#full_screen span table { width: 20px; height: 20px; margin: 0; padding: 0; text-align: left; vertical-align: top; }
#full_screen span table td { margin: 0; padding: 0; text-align: left; vertical-align: top; }
#full_screen span table tr:first-child td:first-child { width: 9px; height: 9px; }
#full_screen .fs-corner { font-size: 0; line-height: 0; width: 0; }
#full_screen #fs_top_left { border: none; border-top: 6px solid #fff; border-right: 6px solid #001E25; }
#full_screen #fs_top_right { border: none; border-top: 6px solid #fff; border-left: 6px solid #001E25; }
#full_screen #fs_bottom_left { border: none; border-bottom: 6px solid #fff; border-right: 6px solid #001E25; }
#full_screen #fs_bottom_right { border: none; border-bottom: 6px solid #fff; border-left: 6px solid #001E25; }
#full_screen.fs-active #fs_top_left { border: none; border-bottom: 6px solid #fff; border-left: 6px solid #001E25; }
#full_screen.fs-active #fs_top_right { border: none; border-bottom: 6px solid #fff; border-right: 6px solid #001E25; }
#full_screen.fs-active #fs_bottom_left { border: none; border-top: 6px solid #fff; border-left: 6px solid #001E25; }
#full_screen.fs-active #fs_bottom_right { border: none; border-top: 6px solid #fff; border-right: 6px solid #001E25; }
#full_screen.fs-active span table tr:first-child td:first-child { width: 13px; height: 13px; }
#full_screen.fs-active span { display: block; float: left; margin: 3px 0 0 3px; padding: 0; }
/* =============================================================================
Non-semantic helper classes
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide for both screenreaders and browsers:
css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: by Jon Neal.
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* =============================================================================
PLACEHOLDER Media Queries for Responsive Design.
These override the primary ('mobile first') styles
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 480px) {
/* Style adjustments for viewports 480px and over go here */
}
@media only screen and (min-width: 768px) {
/* Style adjustments for viewports 768px and over go here */
}
/* =============================================================================
Print styles.
Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
a, a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;border:5px solid #000;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{}
#cboxTopLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 0;}
#cboxTopCenter{height:25px; background:url(images/border1.png) repeat-x 0 -50px;}
#cboxTopRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px 0;}
#cboxBottomLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 -25px;}
#cboxBottomCenter{height:25px; background:url(images/border1.png) repeat-x 0 -75px;}
#cboxBottomRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px -25px;}
#cboxMiddleLeft{width:25px; background:url(images/border2.png) repeat-y 0 0;}
#cboxMiddleRight{width:25px; background:url(images/border2.png) repeat-y -25px 0;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:20px;}
#cboxTitle{
position:absolute;
bottom:0px;
left:0;
width:100%;
padding:5px 0;
text-align:center;
color:#999;
background-color:#000;
}
#cboxCurrent{position:absolute; bottom:5px; left:10px; color:#999;}
#cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
#cboxPrevious, #cboxNext{position:absolute; top:50%;width:50px;height:60px;margin-top:-30px;background:url(../img/bt/nav-modal.png) no-repeat left top;text-indent:-99999px;}
#cboxPrevious{left:0;background-position:left top;}
#cboxNext{right:0;background-position:right top;}
#cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat 5px 5px;}
#cboxClose{position:absolute; bottom:5px; right:10px; display:block; color:#999;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
/*
The following provides PNG transparency support for IE6
Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(images/ie6/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(images/ie6/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(images/ie6/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(images/ie6/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(images/ie6/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(images/ie6/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(images/ie6/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(images/ie6/borderMiddleRight.png);}
.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
_behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}