/** * Cutting Edge * 2000-2011 deviantART, Inc. All rights reserved. * * index: * 01 ARTICLE BODY * 02 HEADER * 03 NEW PRINTS THAT LEFT THEIR MARK * 04 FEATURED * * A) LOVER, FACEBOOK, TWITTER * B) ARTICLE POSITIONING BASIC STUFF & RESETS * **/ /* 01-ARTICLE BODY -------------------------------------------*/ /* Layout */ #cutting-edge { background:#f2f3ed url(http://st.deviantart.net/news/prints/cutting-edge/pattern.gif) repeat; font:normal 12px/18px Georgia, "Times New Roman", serif; color:#000; text-align:center; position:relative; margin: 0 -15px 0 -15px;} #cutting-edge .sec { width:960px; margin:0 auto; text-align:left; position:relative; height:100%; } /* Column + Column Widths */ #cutting-edge .col { display:inline; float:left; position:relative; margin:0 10px; } #cutting-edge .w220 { width:220px; } #cutting-edge .w300 { width:300px; } #cutting-edge .w380 { width:380px; } #cutting-edge .w620 { width:620px; } /* Article Typography */ @font-face { font-family: 'DepotNewBold'; src: url('http://st.deviantart.net/news/prints/cutting-edge/depotnew-bd-webfont.eot'); src: url('http://st.deviantart.net/news/prints/cutting-edge/depotnew-bd-webfont.eot?#iefix') format('embedded-opentype'), url('http://st.deviantart.net/news/prints/cutting-edge/depotnew-bd-webfont.woff') format('woff'), url('http://st.deviantart.net/news/prints/cutting-edge/depotnew-bd-webfont.ttf') format('truetype'), url('http://st.deviantart.net/news/prints/cutting-edge/depotnew-bd-webfont.svg#DepotNewBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DepotNewMedium'; src: url('http://st.deviantart.net/news/prints/cutting-edge/depotnew-md-webfont.eot'); src: url('http://st.deviantart.net/news/prints/cutting-edge/depotnew-md-webfont.eot?#iefix') format('embedded-opentype'), url('http://st.deviantart.net/news/prints/cutting-edge/depotnew-md-webfont.woff') format('woff'), url('http://st.deviantart.net/news/prints/cutting-edge/depotnew-md-webfont.ttf') format('truetype'), url('http://st.deviantart.net/news/prints/cutting-edge/depotnew-md-webfont.svg#DepotNewMedium') format('svg'); font-weight: normal; font-style: normal; } #cutting-edge h2 { *overflow:visible!important;} #cutting-edge h3 { font:normal 24px "DepotNewMedium", Georgia, "Times New Roman", serif; color:#000; letter-spacing:normal; } #cutting-edge p { text-align:left; padding-bottom:13px; margin:0; } #cutting-edge a { position:relative; color:#00ffcd; text-decoration:none; outline:none; } #cutting-edge a:hover { text-decoration:underline; } #cutting-edge a:active { top:1px; } #cutting-edge ul { margin:10px 0 15px 0; padding:0 0 0 15px; } #cutting-edge ul li { line-height:normal; margin-bottom:10px; } /* 02-HEADER -------------------------------------------*/ #cutting-edge #ce-header { font:normal 14px/20px Georgia, "Times New Roman", serif; border-top:1px solid #000; padding:20px 0 15px; position:relative; margin-top:5px; color:#000; } /* Red Flag - Issue Date */ #ce-header #issue-flag { background:url(http://st.deviantart.net/news/prints/cutting-edge/flag-left.gif) center left no-repeat; font-family:Georgia, "Times New Roman", serif; padding:0 10px 0 0; position: absolute; height: 33px; top: -14px; left: 0; } #ce-header #issue-flag img { position: absolute; right: 1px; top: 0; } #ce-header #issue-flag span { background:#c0002e; height:25px; float:left; } #ce-header #issue-flag .issue-week { font-family:Verdana, sans-serif; padding:2px 5px 0px 9px; height:23px; font-size:11px; color:#e6e3af; } #ce-header #issue-flag .issue-date { font-family:Georgia, "Times New Roman", serif; font-size:18px; color:#FFF; } #ce-header #issue-flag .issue-month { font-family:Georgia, "Times New Roman", serif; font-size:13px; color:#e6e3af; padding:3px 0 0 0; height:22px; } #ce-header #issue-flag .issue-bullet { font-family:Georgia, "Times New Roman", serif; font-size:11px; padding:2px 6px 0; height:23px; color:#6b0019; } #ce-header #issue-flag .issue-year { font-family:Georgia, "Times New Roman", serif; padding:2px 10px 0 0; font-size:11px; color:#e6e3af; height:23px; } /* Title + Intro Copy */ #ce-header h1 { background:url(http://st.deviantart.net/news/prints/cutting-edge/title_cutting-edge.gif) center no-repeat; margin: -43px 10px 0 0; text-indent: -9999em; position: absolute; display: block; height: 85px; width: 549px; float: left; left: 0; top: 50%; } #ce-header .w380 { border-left:1px solid #000; padding-left:20px; width:360px; float:right; } #ce-header .w380 p:last-child { padding:0; } /* 03-NEW PRINTS THAT LEFT THEIR MARK -------------------------------------------*/ /* Layout */ #new-prints { background:url(http://st.deviantart.net/news/prints/cutting-edge/dot-horz.gif?1) 290px 12px no-repeat; position:relative; overflow:hidden; } #new-prints:before { content:""; position:absolute; bottom:0; left:0; width:100%; height:100px; background:#DEDED3; } #new-prints.sec { margin-bottom:45px; padding-bottom:50px; } #new-prints h2 { background:url(http://st.deviantart.net/news/prints/cutting-edge/h-arrow.gif) center left no-repeat; font:italic 18px/normal Georgia, "Times New Roman", serif; letter-spacing:normal; padding:0 0 0 15px; text-align:left; display:block; color:#000; margin-bottom:15px; } /* Prints Credit */ #cutting-edge .credit { background:#000; display:inline-block; padding:10px 20px; position:relative; white-space:nowrap; z-index:1; margin:0 0 -10px -10px; } #cutting-edge .credit .title, #cutting-edge .credit .title a { font:italic 14px/normal Georgia, "Times New Roman", serif; color:#fff; } #cutting-edge .credit .deviant { font-family:Verdana, sans-serif; font-size:10px; color:#b2b2b2; } /* Prints Original */ #cutting-edge .original-view { position:relative; } #cutting-edge .original-view img { display:block; width:100%; } * html #cutting-edge .original-view { height: expression( this.scrollHeight < 229 ? "230px" : "auto" ); /* sets min-height for IE */ } /* Prints Preview/Perspective View */ #cutting-edge .perspective-view { position:relative; } #cutting-edge .perspective-view:before { content:""; height:0; width:0; border-top: 5px solid #BCBCB2; border-right: 20px solid #BCBCB2; border-bottom: 10px solid transparent; border-left: 10px solid transparent; position:absolute; bottom:5px; left:5px; } #cutting-edge .perspective-view img { max-width:100%; } /* Featured Print */ #new-prints .call-to-action { margin:0 10px; font-size:14px; } #new-prints .call-to-action span { position:absolute; top:50%; } #new-prints .call-to-action h3 { padding:0; border:0; font-family:DepotNewBold;} /* Featured Print Button */ #new-prints .call-to-action a { background:url(http://st.deviantart.net/news/prints/cutting-edge/button-viewprint.gif) center bottom no-repeat; display:block; text-indent:-9999em; height:50px; width:207px; } #new-prints .call-to-action a:hover { background-position:center; } #new-prints .call-to-action a:active { background-position:center top; } /* Loading Prints... */ #loading-new-prints, #cutting-edge noscript { position:absolute; top:0; left:0; width:100%; height:100%; background:#f2f3ed url(http://st.deviantart.net/news/prints/cutting-edge/pattern.gif) repeat; z-index:1; } #loading-new-prints p { position:absolute; height:41px; width:220px; top:50%; left:50%; margin:-20px 0 0 -110px; background:url(http://dl.dropbox.com/u/5866760/deviantART/News/loading.gif) center bottom no-repeat; text-align:center; font:italic 18px Georgia, "Times New Roman", serif; color:#000; } #cutting-edge noscript p { text-align:center; font:italic 18px Georgia, "Times New Roman", serif; color:#000; padding:100px 0; } /* 04-FEATURED -------------------------------------------*/ #cutting-edge .featured { border-top:1px solid #000; padding-bottom:30px; clear:both; } #cutting-edge .featured h3 { margin:0 0 20px 0; clear: both; font-family:Georgia, "Times New Roman", serif; } #cutting-edge .featured h3 i { padding:4px 10px; border-top:5px solid #000; display:inline-block; } /* Thumbs */ #cutting-edge .featured span.shadow { padding:5px; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; transition:all 0.2s ease; position:relative; } #cutting-edge .featured span.shadow:hover { background:#333; } #cutting-edge .featured span.shadow img { border:1px solid #000; } /* Common CSS to Featured */ #cutting-edge .featured .portrait-f-middle img, #cutting-edge .featured .landscape-f-middle img, #cutting-edge .featured .square-f-middle img { box-shadow: inset 0 3px 5px rgba(250, 250, 250, 0.75), inset 0 -3px 5px rgba(0, 0, 0, 0.75); } #cutting-edge .featured .frame-holder a { height:100%; position:absolute; top:0; left:7px; box-shadow:inset 0 2px 2px rgba(250, 250, 250, 0.35), inset 0 -1px 6px rgba(0, 0, 0, 0.55); background:url(http://st.deviantart.net/news/prints/cutting-edge/canvastexture.png?4) repeat; } /* Portrait Format Frame */ #cutting-edge #portrait-f + .thumb-wrapper { padding-left:318px; } #cutting-edge .featured #portrait-f { width:318px; position:relative; float:left; } #cutting-edge .featured .portrait-f-top { width:318px; height:7px; background:url(http://st.deviantart.net/news/prints/cutting-edge/pf-top.png?1) center no-repeat; position:relative;} #cutting-edge .featured .portrait-f-bottom { width:318px; height:42px; background:url(http://st.deviantart.net/news/prints/cutting-edge/pf-bottom.png?1) center no-repeat; position:relative; z-index:1; margin-bottom:40px; } #cutting-edge .featured .portrait-f-middle { width:311px; background:url(http://st.deviantart.net/news/prints/cutting-edge/pf-middle.png?1) center top repeat-y; position:relative; padding-left:7px; } #cutting-edge .featured .portrait-f-middle img, #cutting-edge .featured .portrait-f-middle a { width:286px; display:block; border:none; } /* landscape Format Frame */ #cutting-edge #landscape-f + .thumb-wrapper { padding-left:395px; } #cutting-edge .featured #landscape-f { width:395px; position:relative; float:left; } #cutting-edge .featured .landscape-f-top { width:395px; height:7px; background:url(http://st.deviantart.net/news/prints/cutting-edge/lf-top.png?1) center no-repeat; position:relative;} #cutting-edge .featured .landscape-f-bottom { width:395px; height:38px; background:url(http://st.deviantart.net/news/prints/cutting-edge/lf-bottom.png?1) center no-repeat; position:relative; z-index:1; margin-bottom:40px; } #cutting-edge .featured .landscape-f-middle { width:388px; min-height:100px; background:url(http://st.deviantart.net/news/prints/cutting-edge/lf-middle.png?1) center top repeat-y; position:relative; padding-left:7px; } #cutting-edge .featured .landscape-f-middle img, #cutting-edge .featured .landscape-f-middle a { width:366px; display:block; border:none; } /* Square Format Frame */ #cutting-edge #square-f + .thumb-wrapper { padding-left:314px; } #cutting-edge .featured #square-f { width:314px; position:relative; float:left; } #cutting-edge .featured .square-f-top { width:314px; height:7px; background:url(http://st.deviantart.net/news/prints/cutting-edge/sf-top.png?1) center no-repeat; position:relative;} #cutting-edge .featured .square-f-bottom { width:314px; height:36px; background:url(http://st.deviantart.net/news/prints/cutting-edge/sf-bottom.png?1) center no-repeat; position:relative; z-index:1; margin-bottom:40px; } #cutting-edge .featured .square-f-middle { width:307px; min-height:100px; background:url(http://st.deviantart.net/news/prints/cutting-edge/sf-middle.png?1) center top repeat-y; position:relative; padding-left:7px; } #cutting-edge .featured .square-f-middle img, #cutting-edge .featured .square-f-middle a { width:286px; display:block; border:none; } /* 05-CUTTING EDGE FOOTER -------------------------------------------*/ #ce-footer { background:#0d251d; border-top:5px solid #3d514a; padding:60px 0; position:relative; clear:both; font:normal 14px/20px Georgia, "Times New Roman", Times, serif; color:#ccc; margin-top:120px; } #ce-footer .sec { background:url(http://st.deviantart.net/news/prints/cutting-edge/cefooter-div.gif?1) center repeat-y; } #ce-footer h3 { font-family:DepotNewMedium; color:#fff; font-size:18px; border:none; display:block; margin:0 0 15px 0; letter-spacing:normal; white-space:nowrap; } #ce-footer a { -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; transition:all 0.2s ease; position:relative; } #ce-footer a:hover { color:#fff; text-decoration:none; } #ce-footer a.logo-badge { position:absolute; left:50%; top:-51px; margin:0 0 0 -48px; display:block; background:url(http://st.deviantart.net/news/prints/cutting-edge/logo-badge.png) center no-repeat; width:96px; height:99px; text-indent:-9999em; } /* Previous Cuttin Edge Articles + Links */ #ce-footer .p260 { width:260px; padding:0 20px; } #ce-footer .p260 a { font-size:12px; display:block; background:url(http://st.deviantart.net/news/prints/cutting-edge/link-arrow.gif) 6px 10px no-repeat; padding: 3px 0 3px 16px; border-bottom: 1px dotted #3f564f; } #ce-footer .p260 a:hover { background-color:#123328; text-decoration:none; color:#fff; } #ce-footer .p260 a:active { top:0; } /* Visit Print Shop Button */ #ce-footer a.b-printshop { background:url(http://st.deviantart.net/news/prints/cutting-edge/button-printshop.gif) center bottom no-repeat; text-indent:-9999em; display:block; height:50px; width:221px; -webkit-transition:none; -moz-transition:none; transition:none; margin:20px 0; padding:0; border:0; } #ce-footer a.b-printshop:hover { background-position: center; } #ce-footer a.b-printshop:active { background-position: center top; } /* A)-LOVER, FACEBOOK, TWITTER -----------------------------------------------------------------*/ /* Fav/Love Box */ div.report a.loves, div.report div.love { display:none; } #social { padding:15px 0 20px 0; } /* Facebook + Twitter Buttons */ #social iframe.twitter-share-button { height:20px; overflow:hidden; border:none; z-index:1337; display:inline-block; } * html iframe.twitter-share-button { height:24px; overflow:visible!important; } /* B)-ARTICLE POSITIONING BASIC STUFF & RESETS -----------------------------------------------------------------*/ #cutting-edge .clear:before, .clear:after { content:""; display:table; } #cutting-edge .clear:after { clear:both; } #cutting-edge .clear { zoom:1; } #news-special .text { margin:0!important; padding:0!important; } #news-special .iconleft { padding-left: 0!important; }