/* * Gears of War 3 - Gears United / Artists United Contest * deviantART Creative Team * August 2011 */ @font-face { font-family: 'EurostileBold'; src: url('http://st.deviantart.net/news/gears-of-war/font-eurobold.eot'); src: url('http://st.deviantart.net/news/gears-of-war/font-eurobold.eot?#iefix') format('embedded-opentype'), url('http://st.deviantart.net/news/gears-of-war/font-eurobold.woff') format('woff'), url('http://st.deviantart.net/news/gears-of-war/font-eurobold.ttf') format('truetype'), url('http://st.deviantart.net/news/gears-of-war/font-eurobold.svg#EurostileBold') format('svg'); font-weight: normal; font-style: normal; } @-webkit-keyframes thrity-five { 0% { top:320px; opacity: 0; } 100% { top:340px; opacity: 1; } } /* ARTICLE BODY ---------------------------------------------------*/ /* Common Tags */ #news-special #news-content { background:#000; font:normal 12px/17px Verdana, Geneva, sans-serif; color:#CCC; text-align:center; position:relative; } #news-special p { text-align:left; padding-bottom:20px; margin:0; } #news-special p b { color:#FFF; font-weight:bold; } #news-special h2 { background:url(http://st.deviantart.net/news/gears-of-war/arrow-h2.gif) 0 0 no-repeat; font:normal 23px/normal EurostileBold, Arial, Helvetica; color:#fefefe; padding:0 0 0 30px; position:relative; left:-30px; letter-spacing:normal; } #news-special h2 cite { display:block; color:#999999; font:normal 18px/normal EurostileBold, Arial, Helvetica; } #news-special h3 { font:normal 18px/normal EurostileBold, Arial, Helvetica; color:#cc0003; letter-spacing:normal; text-transform:uppercase; } #news-special h4 { font:bold 16px/normal EurostileBold, Arial, Helvetica; color: #FFF; letter-spacing: normal; text-transform: uppercase; margin-bottom: 10px; } #news-special #news-content a { color:#fff; outline:none; transition:color 0.20s ease; -o-transition:color 0.20s ease; -moz-transition:color 0.20s ease; -webkit-transition:color 0.20s ease; } #news-special #news-content a:hover { color:#C00; } /* Article Structure + Columns */ #news-special .sec { width:960px; margin:0 auto; text-align:left; position:relative; height:100%; z-index:2; } #news-special .col { display:inline; float:left; position:relative; } #news-special .w220 { width:220px; margin:0 10px; } #news-special .w300 { width:300px; margin:0 10px; } #news-special .w380 { width:380px; margin:0 10px; } #news-special .w540 { width:540px; margin:0 10px; } #news-special .w460 { width:460px; margin:0 10px; } #news-special ul { margin:0 0 20px 0; padding:0 0 0 5px; } #news-special ul li { background:url(http://st.deviantart.net/news/gears-of-war/bullet.gif) 0 7px no-repeat; list-style:none; line-height:18px; padding:0 0 0 20px; margin-bottom:15px; vertical-align:top!important; } #news-special *::selection { background:#900; } #news-special *::-moz-selection { background:#900; } /* HEADER ---------------------------------------------------*/ #news-special #article-header { background:url(http://st.deviantart.net/news/gears-of-war/bg-header.jpg) center top no-repeat; position:relative; height:578px; } #news-special #article-header .sec { overflow:hidden; } #news-special #article-header h1 { display:block; background:url(http://st.deviantart.net/news/gears-of-war/title-gow.png?1) center no-repeat; width:638px; height:79px; text-indent:-9999em; margin:0 auto; position:relative; top:13px; } #news-special #article-header h2 { display:block; background:url(http://st.deviantart.net/news/gears-of-war/35000.png) center no-repeat; width:474px; height:81px; text-indent:-9999em; left:50%; margin:0 0 0 -237px; position:absolute; top:340px; -webkit-animation: thrity-five 1.5s ease-in-out; } #news-special #article-header span { background: url(http://st.deviantart.net/news/gears-of-war/bg-buttonbackplate.png) center no-repeat; width: 199px; height: 70px; position: absolute; bottom: -68px; right: 6px; } /*Browse Button */ #news-special a.browse { background-position:-596px -98px; margin-bottom:10px; width: 160px; height: 40px; } #news-special a.browse:hover { background-position:-596px -58px; } #news-special a.browse:active { background-position:-596px -18px; } #news-special #article-header span a.browse { position: absolute; left: 20px; top: 17px; } /* DIVISION 01 - Introduction ---------------------------------------------------*/ #news-special #div-01 { background:url(http://st.deviantart.net/news/gears-of-war/bg-metal_tile.jpg) repeat; position:relative; } /*#news-special #div-01 .sec > .col:first-child { background:url(http://st.deviantart.net/news/gears-of-war/div-box.gif?1) 0 0 no-repeat; min-height:475px; }*/ #news-special #div-01 #bg-mission-objective {background: url(http://st.deviantart.net/news/gears-of-war/bg-mission_objective.png) center no-repeat; width: 502px; height: 242px; position: relative; left: -20px; margin-top: -20px; padding: 20px; } #news-special #div-01 img[alt="THE OBJECTIVE:"], #news-special #div-01 img[alt="THE PLAN:"] { margin-top:10px; display:block; margin-bottom:10px; } #news-special #div-01 .w540 p { background:url(http://st.deviantart.net/news/gears-of-war/bullet-arrow.gif) 0 5px no-repeat; font:normal 14px/20px Verdana, Geneva, sans-serif; padding:0 0 20px 20px; margin:0; color: #CCC; width:460px; } #news-special #div-01 .w540 p sub { background: url(http://st.deviantart.net/news/gears-of-war/title--10000.gif) center no-repeat; width: 122px; height: 26px; display: inline-block; position: relative; text-indent: -9999em; top: -3px; left: 2px; box-shadow: 0 1px 0 #393936;} /*Gun Casing Element */ #news-special #div-01 #bg-weapons { background:url(http://st.deviantart.net/news/gears-of-war/bg-weapons.png?1) center no-repeat; width: 542px; height: 242px; position: relative; left: -20px; margin-top: 10px;} #news-special #slides { margin:0 auto; overflow:hidden; position:relative; width:367px; height:200px; padding-top:30px; } /* Item Width of Total Items */ #news-special #slides ul { position:relative; left:0; top:0; list-style:none; margin:0; padding:0; width:1468px; } #news-special #slides li { width:367px; height:150px; float:left; background:none; padding:0; margin:0; text-align:center; } #news-special #slides li .weapon { min-height:160px;} #news-special #slides li img { display:inline-block; } #news-special #slides li img[alt^="Gnasher"] { margin-top:35px; } #news-special #slides li img[alt^="Retro"] { margin-top:30px; } #news-special #slides li span { position:relative; font-size: 11px; color: #666; background: #232322; display: inline-block; padding: 7px 15px; box-shadow: 0 1px 0 #30302f; -o-box-shadow: 0 1px 0 #30302f; -moz-box-shadow: 0 1px 0 #30302f; -webkit-box-shadow: 0 1px 0 #30302f; border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #news-special #slides li span i { height: 0; width: 0; border-left: 15px solid transparent; border-top: 15px solid transparent; border-bottom: 15px solid #232322; border-right: 15px solid transparent; font-size: 0; margin: 0 0 0 -15px; position: absolute; top: -30px; left: 50%; } /* Styling for prev and next buttons */ #news-special #bg-weapons a { position:absolute; width:28px; height:28px; display:block; background:url(http://st.deviantart.net/news/gears-of-war/buttons-slide.png) no-repeat; top:50%; margin:-14px 0 0 0; text-indent:-9999em; } #news-special #bg-weapons a#prev { left:20px; background-position:bottom left; } #news-special #bg-weapons a#prev:hover { background-position:top left; } #news-special #bg-weapons a#next { right:20px; background-position: bottom right; } #news-special #bg-weapons a#next:hover { background-position: top right; } /* Back and Better Than Ever */ #news-special #div-01 .w940 { margin:30px 0 100px 0; } #news-special #div-01 img[alt^="BACK"] { margin:28px 0 10px 0; position:relative; left:-30px; } #news-special #div-01 .w540 img[alt^="BACK"] + p { background:none; font-size:12px; padding:0 0 10px 0; line-height:17px; } /* Example Submission */ #news-special #example-submission { background:url(http://st.deviantart.net/news/gears-of-war/title-example.png) top right no-repeat; padding:33px 0 0 0; font:normal 10px/normal Verdana, Geneva, sans-serif; color:#666; text-align:right; display:block; position:relative; } #news-special #example-submission span { display:none\9/*IE*/; background:url(http://st.deviantart.net/news/gears-of-war/overlay-minpx.png?2) center no-repeat; width:380px; height:214px; position:absolute; top:33px; left:0; opacity:0;transition:opacity 0.25s linear; -o-transition:opacity 0.25s linear; -moz-transition:opacity 0.25s linear; -webkit-transition:opacity 0.25s linear; } #news-special #example-submission span:hover { opacity:1; } #news-special #example-submission img { display:block; box-shadow:0 5px 5px rgba(0, 0, 0, 0.75); -o-box-shadow:0 5px 5px rgba(0, 0, 0, 0.75); -moz-box-shadow:0 5px 5px rgba(0, 0, 0, 0.75); -webkit-box-shadow:0 5px 5px rgba(0, 0, 0, 0.75); } #news-special #example-submission small { display: inline-block; color: #666!important; font-size: 10px; background: #161816; padding: 7px 15px; border-radius: 0 0 5px 5px; } /* Metal Seams */ #news-special div.seam-top { background:url(http://st.deviantart.net/news/gears-of-war/seam-top.jpg) repeat-x; height:31px; width:100%; clear:both; margin:0 0 40px 0; } #news-special div.seam-bottom { background:url(http://st.deviantart.net/news/gears-of-war/seam-top.jpg) repeat-x; height:31px; width:100%; clear:both; } /* DIVISION 02 - How to Enter ---------------------------------------------------*/ #news-special #div-02 { background:url(http://st.deviantart.net/news/gears-of-war/bg-metalplate.png?1) top center no-repeat; width:1007px; height:677px; margin:0 auto -30px; position:relative; left:-20px; top:-80px; } #news-special #div-02 .sec { padding:30px 0 0 0; position:relative; left:20px; } /*How To Enter*/ #news-special #div-02 h2 { text-align:left; } #news-special #div-02 img[alt="HOW TO ENTER"] { display:block; position:relative; left:-30px; } #news-special #div-02 img[alt="HOW TO ENTER"] + p { font-size: 11px; line-height: 14px; padding: 0; width: 300px; margin: 45px 0 0 20px; } #news-special #div-02 ol { padding-left:85px; margin-left:15px; font:normal 11px/14px Verdana, Geneva, sans-serif; } #news-special #div-02 ol li { color:#FFF; width:260px; font-weight:bold; /*IE*/ vertical-align:top; *list-style:inside decimal-leading-zero; *display:list-item; *line-height:normal; *height:1%;zoom:1; } #news-special #div-02 ol li p { font-weight:normal; color:#ccc; padding:0 0 10px 0; line-height:normal; } /* Single Mission + Co-Op Mission */ #news-special #div-02 #single-mission { background:url(http://st.deviantart.net/news/gears-of-war/title-single.png?1) 0 0 no-repeat; padding-top:35px; margin-top:30px; margin-bottom:0; } #news-special #div-02 #single-mission li:last-child p { padding-bottom:10px; } #news-special #div-02 #single-mission + img { position:relative; left:65px; } #news-special #div-02 #coop-mission { background:url(http://st.deviantart.net/news/gears-of-war/title-coop.png?1) 0 0 no-repeat; margin-top:25px; padding-top:35px; } /* Media Column */ #news-special #div-02 .w540 { padding-top:71px; } #news-special #gow-media { background:url(http://st.deviantart.net/news/gears-of-war/title-missionbrief.png) 0 0 no-repeat; padding:36px 0 0 0; width:540px; height:304px; } /* Video + Image Casing Element */ #news-special #gow-media span { background:rgba(0, 0, 0, 0.20) url(http://st.deviantart.net/news/gears-of-war/loader.gif?3) center no-repeat; width:540px; height:304px; display:block; position:relative; } #news-special #div-02 #gow-media > * { display:block; } /* Close Button */ #news-special #div-02 #gow-media i { background:url(http://st.deviantart.net/news/gears-of-war/icon-close.png) center top no-repeat; position: absolute; top: 122px; right: 10px; left: inherit; height: 36px; width: 36px; z-index: 1; cursor:pointer; display:none; } #news-special #div-02 #gow-media i:hover { background-position:center bottom; } /* Thumbs */ #news-special #gow-thumbs a { margin:4px 0 4px 4px; float:left; width:132px; height:74px; position:relative; display:inline-block; background:#121414; transition:all 0.2s linear; -o-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -webkit-transition:all 0.2s linear; } #news-special #gow-thumbs img { width:132px; } #news-special #gow-thumbs a i { opacity:0; line-height:37px; text-align:center; background: rgba(255, 0, 0, 0.75); display: block; height: 100%; width: 100%; position: absolute; top: 0; transition:all 0.2s linear; -o-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -webkit-transition:all 0.2s linear; } #news-special #gow-thumbs a:hover i { opacity:0.30; } #news-special #gow-thumbs a:first-child { margin-left:0; } /* Meta-Data */ #news-special #gow-metadata { height:99px; font-size:11px; line-height:14px; background:#171717; padding:15px 20px 20px; background:rgba(0, 0, 0, 0.40); border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; } #news-special #gow-metadata h4 { margin-bottom:35px; } #news-special #gow-metadata span { background:url(http://st.deviantart.net/news/gears-of-war/seam-vert.gif) 0 0 repeat-y; padding: 5px 0 5px 20px; margin: 0 0 0 20px; display: inline-block; float: left; } /* Download Assets Button */ #news-special #news-content a.download { background-position:-209px -92px; display:inline-block; float:left; width: 217px; height: 46px; } #news-special #news-content a.download:hover { background-position: -209px -46px; } #news-special #news-content a.download:active { background-position: -209px 0; } /* Submit Button */ #news-special #news-content #div-02 a.submit { background-position:-424px -102px; display:inline-block; float:left; width: 172px; height: 36px; } #news-special #news-content #div-02 a.submit:hover { background-position: -424px -66px; } #news-special #news-content #div-02 a.submit:active { background-position: -424px -30px; } /* Bottom Right Omen Skull Logo */ #news-special #div-02 .sec + img { position:absolute; bottom:0; right:0; z-index:2; } /* DIVISION 03 - Prizes ---------------------------------------------------*/ #news-special #div-03 { background:url(http://st.deviantart.net/news/gears-of-war/bg-prizes.jpg?1) center top no-repeat; height:678px; position:relative; } /* DIVISION 04 - Prize List ---------------------------------------------------*/ #news-special #div-04 { background:url(http://st.deviantart.net/news/gears-of-war/bg-prizeplate.jpg?1) center top no-repeat; height:697px; position:relative; } #news-special #div-04 .sec { padding-top:225px; } #news-special #div-04 ul { margin:0 10px 115px; padding:0; float:left; width:300px; position:relative; left:3px; } #news-special #div-04 ul li { line-height:normal; } #news-special #div-04 small { position: absolute; top: 450px; right: -20px; display: block; white-space: nowrap; text-align: right; font-size: 10px; background: #181915; background:rgba(30, 30, 30, 0.50); color: #525453!important; padding: 5px 7px; border-radius: 5px 0 0 5px; -o-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; } /* Semi & Collaboratos */ #news-special #div-04 .w380 { padding:0 0 0 20px; width:360px; } #news-special #div-04 .col p { background: url(http://st.deviantart.net/news/gears-of-war/bullet-arrow.gif) 0 5px no-repeat; font: normal 11px/16px Verdana, Geneva, sans-serif; padding: 0 0 10px 20px; color:#999999; margin:10px 0 0 10px; } #news-special #div-04 .col img { display:block; } #news-special #div-04 .col p b { color:#CCC; } /* DIVISION 05 - Rules / Judging ---------------------------------------------------*/ #news-special #div-05 { background:url(http://st.deviantart.net/news/gears-of-war/bg-rules_judging-1.jpg) center top no-repeat; font:normal 11px/14px Verdana, Geneva, sans-serif; position:relative; color:#ccc; } #news-special #div-05 .sec { padding:220px 0 90px; } #news-special #div-05 p { padding-bottom:11px; } #news-special #div-05 ul li { background:url(http://st.deviantart.net/news/gears-of-war/bullet-redarrow.gif) 0 3px no-repeat; padding:0 0 0 15px; line-height:normal; margin-bottom:15px; } #news-special #div-05 ul + a.rules { margin-left:20px; } /* Countdown Timer */ #news-special #gow-countdown { background:url(http://st.deviantart.net/news/gears-of-war/bg-countdown.png?2) center no-repeat; width:300px; height:208px; position:relative; margin-bottom:-15px; z-index:1; } #news-special #gow-countdown iframe { position:absolute; left:20px; top:20px; visibility:hidden; } /* Footer submit button */ #news-special #news-content #div-05 a.submit { background-position:1px -92px; position:absolute; bottom: 30px; left: 29px; width: 210px; height: 46px; box-shadow:none; -o-box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } #news-special #news-content #div-05 a.submit:hover { background-position: 1px -46px; } #news-special #news-content #div-05 a.submit:active { background-position: 1px 0px; } /* Browse + Rules Buttons */ #news-special #gow-button-bg { background:url(http://st.deviantart.net/news/gears-of-war/bg-buttons.png) center no-repeat;height: 114px; width: 211px; position: relative; padding-top: 35px;} #news-special #gow-button-bg a.browse, #news-special #gow-button-bg a.rules { margin-left:30px; } /* ARTICLE FOOTER ---------------------------------------------------*/ #news-special #article-footer { background:#000 url(http://st.deviantart.net/news/gears-of-war/bg-footer.jpg) center top repeat-x; position:relative; } #news-special #article-footer .sec { padding:75px 0 100px; } #news-special #article-footer h5 { background:url(http://st.deviantart.net/news/gears-of-war/logo-footer.png) center no-repeat; width:405px; height:121px; display:block; text-indent:-9999em; margin:0 auto; } #news-special #article-footer span { display: block; margin: 30px 0 10px; text-align: center; } #news-special #article-footer p { font-size:10px; width:460px; margin:0 auto; text-align:center; color:#474747; line-height:13px; } #news-special img[alt="Rated M"] { margin:20px 0 0 20px; display:block; } /* COMMON BUTTON ATTRIBUTES ---------------------------------------------------*/ #news-special #news-content a.rules, #news-special #news-content a.browse, #news-special #news-content a.submit, #news-special #news-content a.download { background-image: url(http://st.deviantart.net/news/gears-of-war/buttons.png?1); background-repeat:no-repeat; display:block; text-indent:-9999em; transition:none; -o-transition:none; -moz-transition:none; -webkit-transition:none; border-radius:5px; -o-border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 1px 0 rgba(255, 255, 255, 0.15); -o-box-shadow:0 1px 0 rgba(255, 255, 255, 0.15); -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.15); -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.15); } /* Rules Button */ #news-special a.rules { background-position:-755px -102px; width: 142px; height: 36px; } #news-special a.rules:hover { background-position: -755px -66px; } #news-special a.rules:active { background-position: -755px -30px; } /* LOVER + FACEBOOK + TWITTER ---------------------------------------------------*/ #news-special div.report a.loves, #news-special div.report div.love { left:15px; top:47px; z-index:999; } #news-special div.report .love { background-color:transparent!important; background-image:url('http://st.deviantart.net/news/gears-of-war/fav.png')!important; z-index:999; } #news-special div.report a.love { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:0 1px 2px rgba(0, 0, 0, 0.35); } #news-special div.report .love span { background-color:transparent!important; background-image:url('http://st.deviantart.net/news/gears-of-war/fav.png')!important; font-family:Helvetica, Arial, sans-serif; color:#FFF; font-size:18px; z-index:999; letter-spacing:normal; text-shadow:0 -1px 0 #000; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:0 1px 2px rgba(0, 0, 0, 0.35); } #news-special #social { width: 107px; position: absolute; z-index: 1337; top: 47px; left: 70px; background: rgba(0, 0, 0, 0.55); height: 63px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #news-special #social iframe { margin: 2px 0; height: 22px; overflow: hidden; border: none; width: 97px!important; display:block; position:absolute; left:5px; } #news-special #social iframe.fb { top: 3px; border-bottom: 1px dotted #324246; width: 95px!important; padding-bottom: 3px; } #news-special #social iframe.twitter-share-button { top: 35px; } * html #news-special #social iframe { /* IE */ height:24px; overflow:visible!important; } img.territory { position:absolute; right:0; top:47px; z-index:1339; } /* ARTICLE POSITIONING + RESETS ---------------------------------------------------*/ #news-special { margin: 0 -15px 0 -15px; } #news-special .clear { clear:both; display:block; height:0; overflow:hidden; visibility:hidden; width:0; margin:0; padding:0; } #news-special .text { margin:0!important; padding:0!important; } #news-special .iconleft { padding-left: 0!important; } #news-special div.report h1 { display: none; } /*hide the default article h1*/ #news-special div.line0 { display:none; } #news-special div.line1 { margin-left:2em; padding-top:1em; } #news-special div.line1, #news-special div.line2 { text-align:center; } #news-special div.line1 a, #news-special div.line2 a { color:#666; text-align:center; } #news-special div.line2 { margin-left:2em; } #news-special .contestopen { text-align:left; margin-top:-2px!important; }