/* ============================================================================= HTML5 Boilerplate CSS: h5bp.com/css ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } button, input, select, textarea { font-family: sans-serif; color: black; } html { font-family: sans-serif; color: gainsboro; } body { margin: 0; font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #aaa; color: #fff; text-shadow: none; } ::selection { background: #aaa; color: #fff; text-shadow: none; } a { color: #D96500; text-decoration: none; } a:visited { color: #D96500; } a:hover { color: white; text-decoration: underline; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } 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; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } 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%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } label { cursor: pointer; } legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } /* ===== Primary Styles ===================================================== */ html { background: url("http://cdn.somepage.com/diablo/layout/background-g4.jpg") repeat scroll 0 0 #4C4A4A; margin: 0; padding: 0px; height: 100%; } .textfield { border: solid 1px #666; padding: 10px; -webkit-box-shadow: inset 3px 3px 3px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 3px 3px 3px 0 rgba(0,0,0,0.15); box-shadow: inset 3px 3px 3px 0 rgba(0,0,0,0.15); font-size: 12px; line-height: 15px; font-family: georgia, times, "times new roman", serif; } input[type="radio"] { margin: 3px 3px 0px 3px; } .linkClass { color: #D96500; cursor : pointer; } /* Wrapper for everything */ #wrapper { width: 1022px; margin: 0 auto; border-width: 0; background-color: #221F1A; color: #A99877; font-family: georgia, times, "times new roman", serif; border-right: solid 1px #353030; border-left: solid 1px #353030; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 18px 10px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 18px 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 18px 10px; } blockquote { border-left: 2px solid #7D84A2; color: #C4C4C4; margin: 12px; padding: 0 0 0 14px; } /* Top bar with logo, social media and ad */ .logo-bar { z-index: 0; height: 155px; background: #e8cbc9; /* Old browsers */ background: -moz-linear-gradient(top, #e8cbc9 0%, #221f1a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8cbc9), color-stop(100%,#221f1a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e8cbc9 0%,#221f1a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e8cbc9 0%,#221f1a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e8cbc9 0%,#221f1a 100%); /* IE10+ */ background: linear-gradient(to bottom, #e8cbc9 0%,#221f1a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8cbc9', endColorstr='#221f1a',GradientType=0 ); /* IE6-9 */ } /* Logo on left */ .logo { display: block; background: transparent url("http://cdn.somepage.com/diablo/layout/d3-logo-diablo-somepage.jpg") no-repeat 0 0; width: 170px; height: 155px; filter: alpha(opacity=100); opacity: 1.0; } .logo:hover { filter: alpha(opacity=85); opacity: .85; } .logo-text { padding-top: 120px; font-family: Arial, sans-serif; font-size: 14px; text-shadow: 1px 1px 0 #000; } .logo, .logo:hover, .logo:visited { text-decoration: none; color: white !important; } /* Middle section of header */ #mid-header { height: 30px; padding-top: 10px; } /* Social follow icons, in the right side of the header */ .social-follow { padding-top: 5px; float: right; } .social-follow ul { list-style: none; margin: 0; padding: 0; } .social-follow li { display: inline-block; margin: 0px; } .social-follow li a { background-image: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png"); background-repeat: no-repeat; width: 28px; height: 26px; display: block; text-indent: 28px; overflow: hidden; outline: 0; color: #7A7A7A; -moz-opacity: 0.5; filter: alpha(opacity=50); opacity: 0.5; } .social-follow li a:hover { -moz-opacity: 1.0; filter: alpha(opacity=100); opacity: 1.0; } .social-follow li a.facebook { background-position: 0px 0px; } .social-follow li a.twitter { background-position: -28px -1px; } .social-follow li a.googleplus { background-position: -56px -1px; } .social-follow li a.rss { background-position: -112px -1px; } /* Search box on right */ .search-box { position: relative; float: right; border: 1px solid black; width: 230px; height: 35px; overflow: hidden; -moz-box-shadow: inset 1px 1px 2px 1px #ccc; -webkit-box-shadow: inset 1px 1px 2px 1px #ccc; box-shadow: inset 1px 1px 2px 1px #ccc; } .search-box input { border: 0; width: 200px; background: white; padding: 9px 15px 9px; font-family: adelle,georgia; color: #888; font-size: 14px; line-height: 1; } .search-box button { width: 20px; height: 20px; text-indent: -1000px; overflow: hidden; border: 0; background: white url("http://cdn.somepage.com/diablo/layout/magnifying-glass.png") no-repeat 0 0; position: absolute; top: 50%; right: 15px; margin-top: -10px; filter: alpha(opacity=50); opacity: .5; } .column { float: left; display:block; } .r-column { float: right; display:block; } /* Container for top ad, no longer used */ .ad-bar { width: 1022px; height: 115px; background: #111111; } .ad-horizontal { margin-left: 35px; margin-top: 5px; max-height: 100px; } /* Background image */ .background { background: #221F1A url("http://cdn.somepage.com/diablo/layout/background-slim.jpg") repeat-x scroll 0 0; } /* Social media sharing buttons */ .social-wrapper { margin: 25px 10px 0; width: 320px; height: 26px; float: left; } .social { width: 100px; } /* Pop-up box for popup on adding/updating BattleTags */ .popup { background: #FFFFFF; color: #cebea3; } /* Main body div */ .main { font-family: Arial, sans-serif; font-size: 14px; line-height: 22px; color: #cebea3; min-height: 560px; } .main h1 { color: white; font-size: 26px; font-weight: normal; border-bottom: 1px solid #505050; padding: 30px 0 5px 0; margin: 0 15px 13px 15px; line-height: 1.1em; text-shadow: 1px 1px 0 #000; } .main h2 { color: white; font-size: 18px; font-weight: normal; padding: 26px 0 3px 0; margin: 0 0 13px 0; } .main h3 { color: white; font-size: 16px; padding: 0; margin: 1.5em 0 .5em 0; } /* Basic beige text color used throughout the site*/ .beige { color: #cebea3 !important; } /* Headline titles */ .headline { padding: 0 20px 20px; position: relative; } .headline h1 { font-size: 40px; line-height: 44px; font-family: "Palatino Linotype", Georgia, Serif; font-weight: normal; color: #F3E6D0; letter-spacing: -1.5px; margin: 20px 25px 0 0; width: 100%; border-bottom: 0px; padding: 0; } .headline h2, .headline .subhead { font-size: 26px; line-height: 30px; color: #F3E6D0; font-family: "Palatino Linotype", Georgia, Serif; font-style: italic; text-transform: none; margin: 8px 0 10px; padding: 0; } .byline { font-size: 14px; line-height: 23px; font-family: Georgia, Serif; margin: 0; } /* Meta info for articles: Source, Via, and Tags */ .article-meta { padding: 20px 0 10px 0; font-size: 11px; line-height: 14px; color: #999; margin: 0; } .source-list { list-style: none; padding-right: 20px; padding-left: 0; margin: 0; } .source-list li { margin: 0 0 4px; clear: both; } .source strong { background-color: #D96500 !important; } .source-list strong, .source-list a { background: black; font-family: Geneva,sans-serif; text-transform: uppercase; font-weight: normal; color: #CEBEA3; padding: 3px 8px 1px; margin: 1px 1px 0 0; float: left; } .source-list a { background: #3d372f; text-decoration: none; } .source-list a:hover { background: #D96500; text-decoration: underline; } /* Arrows for Next and Previous pages; just red used for now */ .rarrow-black { background-image: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png"); background-repeat: no-repeat; background-position: -28px -55px; width: 28px; height: 28px; padding: 8px 13px 5px 15px; margin: 5px; } .rarrow-grey { background-image: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png"); background-repeat: no-repeat; background-position: -28px -83px; width: 28px; height: 28px; padding: 8px 13px 5px 15px; margin: 5px; } .rarrow-red { background-image: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png"); background-repeat: no-repeat; background-position: -29px -112px; width: 28px; height: 28px; padding: 8px 13px 5px 15px; margin: 5px; filter: alpha(opacity=80); opacity: .80; } .larrow-red { background-image: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png"); background-repeat: no-repeat; background-position: -0px -112px; width: 28px; height: 28px; padding: 8px 13px 5px 15px; margin: 5px; filter: alpha(opacity=80); opacity: .80; } /* Leaf icon for Seasonal characters */ .seasonal:before { content: " "; display: inline-block; background-image: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png"); background-repeat: no-repeat; background-position: 0 -621px; width: 17px; height: 22px; margin-right: 5px; vertical-align: top; border: 0; } /* Icon for Hardcore characters - NYI */ .hc-icon:before { content: " "; display: inline-block; background-image: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png"); background-repeat: no-repeat; background-position: 0 -592px; width: 20px; height: 22px; margin-right: 5px; vertical-align: top; border: 0; } .rarrow-red:hover, .larrow-red:hover { filter: alpha(opacity=100); opacity: 1.0; } /* Front page article image */ .image-wrapper { position: relative; margin-top: 20px; max-width: 640px; } .image-article { display: block; margin: auto; max-width: 630px; background-color: #1A1A1A; border: 1px solid #222; padding: 3px; } /* Gives the front page images a slight change in opacity when moused over, but not the .image-wrapper inside the news */ .front .image-wrapper, .image-darken { filter: alpha(opacity=100); opacity: 1.0; } .front a:hover .image-wrapper, .front a:focus .image-wrapper, a:hover .image-darken, a:focus .image-darken { filter: alpha(opacity=85); opacity: .85; } /* Page new content display, with the [new] tag */ .new { color: #FFFF2A !important; } /* Flexible header */ .flexhead40 { font-size: 40px; line-height: 48px; font-weight: normal; border-bottom: none; font-family: Arial, sans-serif; } .flexhead35 { font-size: 35px; line-height: 40px; font-weight: normal; border-bottom: none; font-family: Arial, sans-serif; } .flexhead30 { font-size: 30px; line-height: 35px; font-weight: normal; border-bottom: none; font-family: Arial, sans-serif; } .flexhead25 { font-size: 25px; line-height: 30px; font-weight: normal; border-bottom: none; font-family: Arial, sans-serif; } .flexhead20 { font-size: 20px; line-height: 24px; font-weight: normal; border-bottom: none; font-family: Arial, sans-serif; } .flexhead18 { font-size: 18px; line-height: 22px; font-weight: normal; border-bottom: none; font-family: Arial, sans-serif; } .flexhead16 { font-size: 16px; line-height: 19px; font-weight: normal; border-bottom: none; font-family: Arial, sans-serif; } .flexhead15 { font-size: 15px; line-height: 18px; font-weight: normal; border-bottom: none; font-family: Arial, sans-serif; } .fh-shadow { text-shadow: 1px 1px 0 #000; } .fh-brite { color: #F3E6D0; } .flexhead40 a:hover, .flexhead30 a:hover, .flexhead25 a:hover, .flexhead20 a:hover, .flexhead18 a:hover, .flexhead15 a:hover { color: white; text-decoration: underline; } /* Other font formats */ .font14 { font-size: 14px !important; } .font16 { font-size: 16px !important; } .palatino { font-family: "Palatino Linotype", Georgia, Serif !important; } /* Front page article */ .front-wrapper { float: left; position: relative; } .front { padding: 15px; margin: 0 0 40px 15px; width: 630px; border: 1px solid #505050; box-shadow: 0 0 2px #000; background: #0E0D0C; } /* Section with the

,

, and byline on the front news */ .front-header { } .front-header h1 { font-size: 24px; line-height: 26px; font-family: "Palatino Linotype", Georgia, Serif; font-weight: normal; color: #F3E6D0; border-bottom: 0px; padding: 0; margin: 0; } .front-header h1 a, .front-header h1 a:visited { text-decoration: none; color: #F3E6D0; } .front-header h1 a:hover { text-decoration: none; color: #D96500; } .front-header h2 { font-size: 20px; line-height: 23px; color: #cebea3; font-family: "Palatino Linotype", Georgia, Serif; font-style: italic; text-transform: none; margin: 6px 0 0 0; padding: 0; } .front-byline { font-size: 12px; line-height: 14px; padding-top: 8px; margin: 0; } .front-byline a { color: #CEBEA3; } .front-news { padding: 20px 0 0 0; } /* The "Read More" text and arrow */ .read-more { font-size: 18px; line-height: 24px; } /* List with extra space below, and colored bullet */ .spacedlist ul { list-style-type: none; padding: 0; margin: 0; margin-left: 20px; } .spacedlist ul li { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACxSURBVDjL7dI9C0FxGAXw8znu5/IdZDGYjI+BzWSwKFnlpW5dcaPkbgalPInyzqSrG65w0/EJlH9Ww1l/dU4HJPFL8Ac+AB4sepCoDw1dqG9DdlVYJoC8VsLI7/B5dBhMhNMy5Gvg0YNGJ5f3bYbhPMVw3+SwAP0aCBzo49jmbZnmVeO8rOvs5gyAQw3ij4XhweZ50+BiIKwkDSrMKrBGRYiXh7Yy0FICko2ZjPh/olHeFCjwX864N2kAAAAASUVORK5CYII=); background-repeat: no-repeat; background-position: 0 4px; padding-left: 18px; padding-bottom: 12px; min-height: 10px; } .spacedlist ul li ul li { padding-bottom: 0px; } .spacedlist ol { padding: 0; margin: 0 0 0 40px; } .spacedlist ol li, .spacedlist ul li ol li { background-image: none; padding-left: 0px; margin: 0px; padding-bottom: 0px; } /* Line used in sidebar */ .sideline { border-bottom: 1px solid #888888; margin: 0 25px 0 0; width: 75%; } /* Sidebar to go around square ad and news list */ .sidebar { width: 330px; border-left: 1px solid #888888; border-top: 1px solid #888888; border-bottom: 1px solid #888888; border-bottom-left-radius: 150px; padding-bottom: 140px; margin-bottom: 20px; } /* Alternating color list, used by the news */ .sidelist { margin-top: 10px; width: 100%; } .sidelist li { padding: 8px; margin: 0; line-height: 16px; list-style: none; } .sidelist p, .sidelist ul { margin: 0; padding: 0; } .sidelist p { font-size: 12px; } .sidelist a .plain { color: #CEBEA3 !important; } .sidelist a:hover .plain { color: white !important; } .list-even { background-color: #111 !important; } .list-odd { background-color: #3D372F !important; } /* Small text table of contents */ .toc { padding: 15px; border: 1px solid #505050; background: #0E0D0C; width: auto; display: inline-block; } .toc ul, .toc ul { list-style-type: none; list-style-image: none; margin: 0; padding: 0; text-align: left; } .toc ul ul, .toc ul ul ul { margin: 0 0 0 25px; } .toc ul li { margin-top: 2px; } /* Pull quotes */ .pull-quote { width: 230px;; font-family: "Palatino Linotype", Georgia, Serif; font-size: 22px; line-height: 26px; } .pull-quote .quote { color: #DD9F30; text-shadow: 0 1px 2px #000; } .quote-left { float: left; margin: 20px 40px 20px 0; padding: 15px 10px 10px 0px; border-right: 1px solid #C9AFA3; } .quote-right { float: right; margin: 20px 0px 20px 40px; padding: 10px 0px 5px 25px; border-left: 1px solid #C9AFA3; } .quote-sign { padding-top: 10px; font-size: 18px; line-height: 22px; color: #E7DEDD; } /* Borders */ .border-l { border-left: solid 1px #aaa; } .border-r { border-right: solid 1px #aaa; } .border-b { border-bottom: solid 1px #aaa; } .border-t { border-top: solid 1px #aaa; } /* Bright Bar */ .bbar { border-top: 1px solid #aaa; width: 90%; } /* Light Bar */ .lbar { border-top: 1px solid #505050; width: 90%; } /* Breadcrumb */ .crumb-wrapper { padding: 25px 15px 15px 15px; float: left; width: 650px; } .crumb:after { border: 0; content: " "; display: inline-block; background: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png") no-repeat; margin: 2px 7px 0 7px; background-position: -7px -477px; width: 8px; height: 10px; } .crumb a { outline: none; text-decoration: none; border-color: #803C01; border-bottom: 1px dotted; } .crumb-last:after { padding: 0; background: none; } .crumb-last a { color: #F3E6D0; } .crumb-single a { border-bottom: 0px; } /* Smaller text */ .small { font-size: 11px; line-height: 1.0em; } /* Bigger text */ .big { font-size: 16px; line-height: 2.0em; } .text-16 { font-size: 16px; } .text-18 { font-size: 18px; } .text-20 { font-size: 20px; } /* Small grey text with underline for titles */ .mini-under { color: #9d9d9d; font-size: 11px; border-bottom: 1px dotted #9d9d9d; } /* Centered text */ .center { text-align: center; } /* Left-aligned text */ .left { text-align: left; } /* Right-aligned text */ .right { text-align: right; } /* Underlined text */ .underline { text-decoration: underline !important; } .dot-underline { text-decoration: none; border-bottom: 1px dotted; } /* Bold text */ .bold { font-weight: bold; } /* Italics text */ .italic { font-style: italic; } /* Generic Padding */ .pad0 { padding: 0px !important; } .pad5 { padding: 5px !important; } .pad10 { padding: 10px !important; } .pad15 { padding: 15px !important; } .pad20 { padding: 20px !important; } .pad30 { padding: 30px !important; } .pad0top { padding-top: 0px !important; } .pad5top { padding-top: 5px !important; } .pad10top { padding-top: 10px !important; } .pad15top { padding-top: 15px !important; } .pad20top { padding-top: 20px !important; } .pad30top { padding-top: 30px !important; } .pad0bottom { padding-bottom: 0px !important; } .pad5bottom { padding-bottom: 5px !important; } .pad10bottom { padding-bottom: 10px !important; } .pad15bottom { padding-bottom: 15px !important; } .pad20bottom { padding-bottom: 20px !important; } .pad30bottom { padding-bottom: 30px !important; } .pad0left { padding-left: 0px !important; } .pad0left { padding-left: 0px !important; } .pad5left { padding-left: 5px !important; } .pad10left { padding-left: 10px !important; } .pad15left { padding-left: 15px !important; } .pad20left { padding-left: 20px !important; } .pad30left { padding-left: 30px !important; } .pad5right { padding-right: 5px !important; } .pad0right { padding-right: 0px !important; } .pad10right { padding-right: 10px !important; } .pad15right { padding-right: 15px !important; } .pad20right { padding-right: 20px !important; } .pad30right { padding-right: 30px !important; } /* Generic margins */ .margin0 { margin: 0px !important; } .margin5 { margin: 5px !important; } .margin10 { margin: 10px !important; } .margin20 { margin: 20px !important; } .margin0top { margin-top: 0px !important; } .margin5top { margin-top: 5px !important; } .margin10top { margin-top: 10px !important; } .margin20top { margin-top: 20px !important; } .margin0bottom { margin-bottom: 0px !important; } .margin5bottom { margin-bottom: 5px !important; } .margin10bottom { margin-bottom: 10px !important; } .margin20bottom { margin-bottom: 20px !important; } .margin0left { margin-left: 0px !important; } .margin5left { margin-left: 5px !important; } .margin10left { margin-left: 10px !important; } .margin20left { margin-left: 20px !important; } .margin0right { margin-right: 0px !important; } .margin5right { margin-right: 5px !important; } .margin10right { margin-right: 10px !important; } .margin20right { margin-right: 20px !important; } /* Centered element */ .center-all { margin: 0 auto !important; } /* Text alignment middle */ .text-middle { vertical-align: middle; } /* Class colors - keep their own color even as a link */ .c-bar, .c-bar a, .c-bar a:visited { color: #b52615 !important; } .c-cru, .c-cru a, .c-cru a:visited { color: #e1d5a7 !important; } .c-dem, .c-dem a, .c-dem a:visited { color: #735289 !important; } .c-mon, .c-mon a, .c-mon a:visited { color: #e5d34d !important; } .c-wit, .c-wit a, .c-wit a:visited { color: #46c230 !important; } .c-wiz, .c-wiz a, .c-wiz a:visited { color: #5fc6e5 !important; } /* Class colors goes to white and underlined when moused over */ .c-bar a:hover, .c-cru a:hover, .c-dem a:hover, .c-mon a:hover, .c-wit a:hover, .c-wiz a:hover { color: white !important; text-decoration: underline; } /* Inside the crest, class colors goes to white but no underline on hover */ .crest-wrapper:hover a .c-bar, .crest-wrapper:hover a .c-cru, .crest-wrapper:hover a .c-dem, .crest-wrapper:hover a .c-mon, .crest-wrapper:hover a .c-wit, .crest-wrapper:hover a .c-wiz { color: white !important; text-decoration: none; } /* Red for hardcore characters */ .c-hardcore { color: #E60101 !important; } /* Seasonal green */ .c-seasonal { color: #66cc00 !important; } /* Elemental colors for skills */ .ele-arc { color: #760be4 !important; } .ele-col { color: #99bbff !important; } .ele-fir { color: #ff0000 !important; } .ele-hol { color: #c7b377 !important; } .ele-lig { color: #6969ff !important; } .ele-phy { color: #909090 !important; } .ele-poi { color: #00ff00 !important; } /* Other colors */ .off-white { color: #DDD !important; } .c-gem { color: #FFE26E !important; } /* Background colors */ .bc1 { background-color: #100F0F; } .bc2 { background-color: #100C0C; } /* d3 colors from Blizzard */ .d3-color-blue, .d3-color-blue a { color: #6969ff !important; } .d3-color-gray, .d3-color-gray a { color: #909090 !important; } .d3-color-gold, .d3-color-gold a { color: #c7b377 !important; } .d3-color-green, .d3-color-green a { color: #00ff00 !important; } .d3-color-orange, .d3-color-orange a { color: #bf642f !important; } .d3-color-purple, .d3-color-purple a { color: #a335ee !important; } .d3-color-red, .d3-color-red a { color: #ff0000 !important; } .d3-color-white, .d3-color-white a { color: white !important; } .d3-color-yellow, .d3-color-yellow a { color: #ffff00 !important; } /* Diablo 3 tooltips code */ /* item properties (shared between item detail page, item browsing, and item tooltips */ .spd3-item-properties ul, .spd3-item-properties div { margin-top: 10px; } .spd3-item-properties ul ul { margin-top: 0; } .spd3-item-properties ul li { margin: 1px 0; } .spd3-item-properties ul li.bump { margin-top: 10px; } .spd3-item-properties p { margin: 0 !important; } .spd3-item-properties .indent { padding-left: 18px; } .spd3-item-properties .value { color: #ded2ab; } .spd3-item-properties .big .value { font-size: 400%; line-height: 100%; font-family: "Palatino Linotype", "Times", serif; text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black; } .spd3-item-properties .item-requirement { color: #A99877 } .spd3-item-properties .spd3-color-lightblue .value { color: #99bbff !important; } .spd3-item-properties .spd3-color-blue .value { color: #bda6db !important; } .spd3-item-properties .spd3-color-gold .value { color: white !important; } .spd3-item-properties .item-jewel-rank { color: #909090; } .spd3-item-properties .item-property-category { color: #909090; } .spd3-item-properties .item-type, .spd3-item-properties .item-type-right { margin-top: 0; } .spd3-item-properties .item-type-right { float: right; text-align: right; } .spd3-item-properties .item-type { color: white; } .spd3-item-properties .item-slot { color: #909090; } .spd3-item-properties .item-unique-equipped { text-align:left; clear:both } .spd3-item-properties .item-armor-weapon li { color: #909090; } .spd3-item-properties .item-armor-weapon .value { color: white; } .spd3-item-properties .item-before-effects { display: none; } /* Old version, using our icon image files .spd3-item-properties .item-effects li { padding-left: 16px; background: url("http://cdn.somepage.com/diablo/layout/item-bullet.gif") 2px 5px no-repeat; } .spd3-item-properties .item-effects li.empty-socket { background: url("http://cdn.somepage.com/diablo/layout/item-empty-socket.png") 0 center no-repeat; } .spd3-item-properties .item-effects li.full-socket { line-height:18px; min-height:18px; background: none; padding-left:0; padding-top:7px; white-space:nowrap } .spd3-item-properties .item-effects li.full-socket .gem { float:left; width:17px; height:17px; margin-right:4px } .spd3-item-properties .item-effects li.full-socket .socket-effect { padding-left: 16px; background: url("http://cdn.somepage.com/diablo/layout/item-bullet.gif") 2px 5px no-repeat; display:inline-block; min-height:18px; line-height:18px; white-space:normal } */ .spd3-item-properties .item-effects li { padding-left: 16px; background: url("http://us.battle.net/d3/static/images/icons/primary.gif") 0 3px no-repeat; } .spd3-item-properties .item-effects li.spd3-item-property-utility { background: url("http://us.battle.net/d3/static/images/icons/utility.gif") 0 3px no-repeat; } .spd3-item-properties .item-effects li.spd3-item-property-enchant { background: url("http://us.battle.net/d3/static/images/icons/enchant.gif") 0 3px no-repeat; } .spd3-item-properties .item-effects li.secondary { background: url("http://us.battle.net/d3/static/images/icons/secondary.gif") 0 3px no-repeat; } .spd3-item-properties .item-effects li.empty-socket { background: url("http://us.battle.net/d3/static/images/item/empty-socket.png") 0 center no-repeat; } .spd3-item-properties .item-effects li.full-socket { line-height:18px; min-height:18px; background: none; padding-left:0; padding-top:7px; white-space:nowrap } .spd3-item-properties .item-effects li.full-socket ul { padding-left: 16px } .spd3-item-properties .item-effects li.full-socket .gem { float:left; width:17px; height:17px; margin-right:4px } .spd3-item-properties .item-effects li.full-socket .jewel-effect { white-space:normal } .spd3-item-properties .item-effects li.full-socket .socket-effect { padding-left: 16px; background: url("http://us.battle.net/d3/static/images/icons/primary.gif") 0px 3px no-repeat; display:inline-block; min-height:18px; line-height:18px; white-space:normal } /* Item tooltips should more closely match what we see in game */ .spd3-item-properties .item-effects .item-property-category { padding-top: 6px; } .spd3-item-properties .item-effects .item-property-category { color: white; } /* end items overrides */ .spd3-item-properties .item-effects .gem-effect { color: white; } .spd3-item-properties .item-effects-choice { margin-bottom: 10px; } .spd3-tooltip-wrapper { background: black; padding: 1px; border: 1px solid #322a20; max-width: 360px; position: absolute; z-index: 2147483647; border-radius: 2px; box-shadow: 0 0 10px #000; } /* Blizzard version, different width and translucent .spd3-tooltip-wrapper { background: #1d180e; padding: 1px; border: 1px solid #322a20; max-width: 355px; position: absolute; z-index: 2147483647; border-radius: 2px; box-shadow: 0 0 10px #000; } */ .spd3-tooltip-wrapper-inner { background: black; } .spd3-tooltip .title, .spd3-tooltip .subtitle { font-family: "Palatino Linotype", "Georgia", "Times", serif; color: #F3E6D0; font-weight: normal; margin-bottom: 6px; } .ko-kr .spd3-tooltip .title, .ko-kr .spd3-tooltip .subtitle { font-family: Dotum; } .spd3-tooltip .title { font-size: 18px; } .spd3-tooltip .subtitle { font-size: 14px; text-transform: uppercase; } .spd3-tooltip .special { color: #AD835A; } .spd3-tooltip .subtle { color: #7B6D55; display: block; } .spd3-tooltip .subtle em { color: #AD835A; font-weight: bold; font-style: normal; } .spd3-tooltip .flavor { font-size: 16px; color: #AD835A; font-family: "Palatino Linotype", "Times", serif; font-style: italic; } .ko-kr .spd3-tooltip .flavor { font-family: Kodia, Dotum; } .spd3-tooltip .tip { border-bottom: 0; } .spd3-tooltip p { margin: 10px 0 0 0; } .spd3-tooltip p:first-child { margin-top: 0; } .spd3-tooltip .loading { display: block; width: 32px; height: 32px; background: url("http://cdn.somepage.com/diablo/layout/item-loader-default.gif") no-repeat center center; } /* Using our own loading icon, that rotates, as opposed to Blizzard version .spd3-tooltip .loading { display: block; width: 32px; height: 32px; background: url("http://us.battle.net/d3/static/images/loaders/default.gif") no-repeat center center; } */ .spd3-tooltip .wip { position: absolute; z-index: 2; left: 0; top: 33%; width: 350px; text-align: center; font-size: 28px; font-family: "Palatino Linotype", "Georgia", "Times", serif; text-transform: uppercase; color: #A99877; opacity: 0.25; filter: alpha(opacity=25); line-height: 100%; } /* style reset */ .spd3-tooltip { padding: 2px; font: normal 12px/1.5 Arial, sans-serif; color: #c7b377; } .spd3-tooltip * { margin: 0; padding: 0; background: none; } .spd3-tooltip ul { list-style-type: none; } .spd3-tooltip .value { color: white; } /* head */ .spd3-tooltip .tooltip-head { height: 40px; width: 320px; padding: 0 15px; background: url("http://us.battle.net/d3/static/images/ui/tooltip-title.jpg") no-repeat; } .spd3-tooltip .tooltip-head h3 { color: #F3E6D0; font: 22px "Palatino Linotype", "Times", serif; height: 40px; line-height: 37px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ko-kr .spd3-tooltip .tooltip-head h3 { font-family: Kodia, Dotum; } .spd3-tooltip .tooltip-head h3.smaller { font-size: 18px; line-height: 40px; } .spd3-tooltip .tooltip-head h3.smallest { font-size: 14px; line-height: 42px; } .spd3-tooltip .tooltip-head-gray, .spd3-tooltip .tooltip-head-white { background-position: 0 -40px; } .spd3-tooltip .tooltip-head-blue { background-position: 0 -80px; } .spd3-tooltip .tooltip-head-yellow { background-position: 0 -120px; } .spd3-tooltip .tooltip-head-orange { background-position: 0 -160px; } .spd3-tooltip .tooltip-head-purple { background-position: 0 -200px; } .spd3-tooltip .tooltip-head-green { background-position: 0 -240px; } /* body */ .spd3-tooltip .tooltip-body { position: relative; padding: 10px; background: black; } .spd3-tooltip { border: 2px solid #282828; } /* Blizzard version isn't a black background, or with border: .spd3-tooltip .tooltip-body { position: relative; padding: 10px; } */ /* extension */ .spd3-tooltip .tooltip-extension { margin: 10px -2px 0 -2px; padding: 10px 12px; border-top: 2px solid #322A20; } /* more horizontal padding to make up for negative margin */ .spd3-tooltip .tooltip-extension.rune-extension { padding-left: 87px; min-height: 52px; position: relative; } .spd3-tooltip .tooltip-extension.rune-extension .spd3-icon-rune { position: absolute; top: 10px; left: 20px; } /* item tooltips */ .spd3-tooltip-item .spd3-icon-item { float: left; margin-right: 10px; margin-bottom: 11px; } .spd3-tooltip-item .item-armor-weapon { clear: right; } .spd3-tooltip-item .item-before-effects { display: block !important; clear: both; } .spd3-tooltip-item .item-description { margin-top: 10px; } .spd3-tooltip-item .item-itemset { font-size: 12px; } .spd3-tooltip-item .effect-bg { background-position: 10px 10px; background-repeat: no-repeat; } .spd3-tooltip-item .effect-bg-arcane { background-image: url("http://us.battle.net/d3/static/images/item/effect-bgs/arcane.jpg"); } .spd3-tooltip-item .effect-bg-cold { background-image: url("http://us.battle.net/d3/static/images/item/effect-bgs/cold.jpg"); } .spd3-tooltip-item .effect-bg-fire { background-image: url("http://us.battle.net/d3/static/images/item/effect-bgs/fire.jpg"); } .spd3-tooltip-item .effect-bg-holy { background-image: url("http://us.battle.net/d3/static/images/item/effect-bgs/holy.jpg"); } .spd3-tooltip-item .effect-bg-lightning { background-image: url("http://us.battle.net/d3/static/images/item/effect-bgs/lightning.jpg"); } .spd3-tooltip-item .effect-bg-poison { background-image: url("http://us.battle.net/d3/static/images/item/effect-bgs/poison.jpg"); } .spd3-tooltip-item .effect-bg-armor { background-image: url("http://us.battle.net/d3/static/images/item/effect-bgs/armor.jpg"); background-position: 78px 20px; } .spd3-tooltip-item .effect-bg-armor-square { background-position: 78px 14px; } .spd3-tooltip-item .effect-bg-armor-big { background-position: 96px 20px; } .spd3-tooltip-item .effect-bg .item-type, .spd3-tooltip-item .effect-bg .item-armor-weapon { text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black; } /* makes the text readable when a background is used */ /* skill tooltips */ .spd3-tooltip-skill .tooltip-body { padding-left: 85px; } .spd3-tooltip-skill .spd3-icon-skill { position: absolute; left: 10px; top: 10px; } .spd3-tooltip-skill .value { color: #c7b377 } /* trait tooltips */ .spd3-tooltip-trait .tooltip-body { padding-left: 105px; min-height: 80px; } .spd3-tooltip-trait .spd3-icon-trait { position: absolute; left: 10px; top: 10px; } /* rune tooltips */ .spd3-tooltip-rune .tooltip-body { padding-left: 60px; } .spd3-tooltip-rune .spd3-icon-rune { position: absolute; left: 10px; top: 10px; } /* calculator tooltips */ .spd3-tooltip-calculator { padding: 10px; min-width: 200px; } .spd3-tooltip-calculator .title { font-size: 22px; line-height: 1em; margin-bottom: 0; } .ko-kr .spd3-tooltip-calculator .title { font-size: 18px; } .spd3-tooltip-calculator .subtitle { } .spd3-tooltip-calculator .empty { color: #808080; } .spd3-tooltip-calculator li { position: relative; } .spd3-tooltip-calculator li:nth-child(even), .spd3-tooltip-calculator li.row2 { background-color: #101010; } .spd3-tooltip-calculator .skill-icon { position: absolute; } .spd3-tooltip-calculator .skill-rune { position: absolute; right: 5px; top: 0; } .spd3-tooltip-calculator .actives { padding-top: 15px; } .spd3-tooltip-calculator .actives li { line-height: 24px; padding-left: 26px; padding-right: 35px; } .spd3-tooltip-calculator .actives .skill-icon { left: 0; top: 2px; } .spd3-tooltip-calculator .passives { padding-top: 15px; } .spd3-tooltip-calculator .passives li { line-height: 30px; padding-left: 29px; } .spd3-tooltip-calculator .passives .skill-icon { left: 0; top: 3px; } /* icons */ .spd3-icon { display: inline-block; overflow: hidden; background: 50% 50% no-repeat; font-size: 1px; } .spd3-icon-item, .spd3-icon-skill { box-shadow: 0 0 5px #000; } /* items */ .spd3-icon-item { border: 1px solid black; background: no-repeat 50% 100%; border-radius: 4px; } .spd3-icon-item .icon-item-gradient { display: block; border-radius: 4px; background-image: url("http://us.battle.net/d3/static/images/item/icon-bgs/gradient.png"); /* fallback */ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); background-image: linear-gradient(top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); } .spd3-icon-item .icon-item-inner { display: block; padding: 1px; background: no-repeat center center; font-size: 1px; line-height: normal; text-align: center; border-radius: 4px; overflow: hidden; } a:hover .spd3-icon-item .icon-item-inner, .hover .spd3-icon-item .icon-item-inner, .icon-active .spd3-icon-item .icon-item-inner { background-color: rgba(255, 255, 255, 0.05); } /* brighter */ .spd3-icon-item-large .icon-item-default { width: 64px; height: 128px; } .spd3-icon-item-large .icon-item-square { width: 64px; height: 64px; } .spd3-icon-item-large .icon-item-big { width: 82px; height: 164px; } .spd3-icon-item-small .icon-item-default { width: 32px; height: 64px; } .spd3-icon-item-small .icon-item-square { width: 32px; height: 32px; } .spd3-icon-item-small .icon-item-big { width: 41px; height: 82px; } .spd3-icon-item-small, .spd3-icon-item-small .icon-item-gradient, .spd3-icon-item-small .icon-item-inner, .spd3-icon-item-32, .spd3-icon-item-32 .icon-item-gradient, .spd3-icon-item-32 .icon-item-inner { border-radius: 2px; } /* scale border radius accordingly */ .spd3-icon-item-32 .icon-item-default, .spd3-icon-item-32 .icon-item-square, .spd3-icon-item-32 .icon-item-big { width: 32px; height: 32px; } .spd3-icon-item-64 .icon-item-default, .spd3-icon-item-64 .icon-item-square, .spd3-icon-item-64 .icon-item-big { width: 64px; height: 64px; } /* gray */ .spd3-icon-item-gray { border-color: #513f2e; background-image: url("http://us.battle.net/d3/static/images/item/icon-bgs/brown.png"); background-color: #2a2017; } a:hover .spd3-icon-item-gray, .hover .spd3-icon-item-gray, .icon-active .spd3-icon-item-gray { border-color: #7a5f45; } /* white */ .spd3-icon-item-white { border-color: #513f2e; background-image: url("http://us.battle.net/d3/static/images/item/icon-bgs/brown.png"); background-color: #2a2017; } a:hover .spd3-icon-item-white, .hover .spd3-icon-item-white, .icon-active .spd3-icon-item-white { border-color: #7a5f45; } /* blue */ .spd3-icon-item-blue { border-color: #6091a6; background-image: url("http://us.battle.net/d3/static/images/item/icon-bgs/blue.png"); background-color: #232227; } a:hover .spd3-icon-item-blue, .hover .spd3-icon-item-blue, .icon-active .spd3-icon-item-blue { border-color: #90c8d3; } /* yellow */ .spd3-icon-item-yellow { border-color: #9b8e3c; background-image: url("http://us.battle.net/d3/static/images/item/icon-bgs/yellow.png"); background-color: #322914; } a:hover .spd3-icon-item-yellow, .hover .spd3-icon-item-yellow, .icon-active .spd3-icon-item-yellow { border-color: #cdc75a; } /* orange */ .spd3-icon-item-orange { border-color: #b07b38; background-image: url("http://us.battle.net/d3/static/images/item/icon-bgs/orange.png"); background-color: #332314; } a:hover .spd3-icon-item-orange, .hover .spd3-icon-item-orange, .icon-active .spd3-icon-item-orange { border-color: #d8b954; } /* green */ .spd3-icon-item-green { border-color: #748e3d; background-image: url("http://us.battle.net/d3/static/images/item/icon-bgs/green.png"); background-color: #262f14; } a:hover .spd3-icon-item-green, .hover .spd3-icon-item-green, .icon-active .spd3-icon-item-green { border-color: #aec75c; } /* skills */ .spd3-icon-skill { } .spd3-icon-skill .frame { display: block; background: no-repeat; } .spd3-icon-skill-21, .spd3-icon-skill-21 .frame { width: 21px; height: 21px; } .spd3-icon-skill-42, .spd3-icon-skill-42 .frame { width: 42px; height: 42px; } .spd3-icon-skill-64, .spd3-icon-skill-64 .frame { width: 64px; height: 64px; } .spd3-icon-skill-21 .frame { background-image: url("http://us.battle.net/d3/static/images/icons/frames/skill-21.png"); } .spd3-icon-skill-42 .frame { background-image: url("http://us.battle.net/d3/static/images/icons/frames/skill-42.png"); } .spd3-icon-skill-64 .frame { background-image: url("http://us.battle.net/d3/static/images/icons/frames/skill-64.png"); } .spd3-icon-skill.selected .frame { background-position: top right; } a:hover .spd3-icon-skill .frame, .hover .spd3-icon-skill .frame { background-position: left bottom; } a:hover .spd3-icon-skill.selected .frame, .hover .spd3-icon-skill.selected .frame { background-position: right bottom; } a.disabled:hover .spd3-icon-skill .frame, .disabled.hover .spd3-icon-skill .frame { background-position: left top !important; } a.disabled:hover .spd3-icon-skill.selected .frame, .disabled.hover .spd3-icon-skill.selected .frame { background-position: right top !important; } /* traits */ .spd3-icon-trait { } .spd3-icon-trait .frame { display: block; background: no-repeat; } .spd3-icon-trait-21, .spd3-icon-trait-21 .frame { width: 25px !important; height: 25px !important; } .spd3-icon-trait-42, .spd3-icon-trait-42 .frame { width: 51px !important; height: 51px !important; } .spd3-icon-trait-64, .spd3-icon-trait-64 .frame { width: 81px !important; height: 81px !important; } .spd3-icon-trait-21 .frame { background-image: url("http://us.battle.net/d3/static/images/icons/frames/trait-21.png"); } .spd3-icon-trait-42 .frame { background-image: url("http://us.battle.net/d3/static/images/icons/frames/trait-42.png"); } .spd3-icon-trait-64 .frame { background-image: url("http://us.battle.net/d3/static/images/icons/frames/trait-64.png"); } .spd3-icon-trait.selected .frame { background-position: top right; } a:hover .spd3-icon-trait .frame, .hover .spd3-icon-trait .frame { background-position: left bottom; } a:hover .spd3-icon-trait.selected .frame, .hover .spd3-icon-trait.selected .frame { background-position: right bottom; } a.disabled:hover .spd3-icon-trait .frame, .disabled.hover .spd3-icon-trait .frame { background-position: left top !important; } a.disabled:hover .spd3-icon-trait.selected .frame, .disabled.hover .spd3-icon-trait.selected .frame { background-position: right top !important; } .spd3-icon-trait.circle, .spd3-icon-trait.circle .frame { width: 64px !important; height: 64px !important; } .spd3-icon-trait.circle .frame { background-image: url("http://us.battle.net/d3/static/images/icons/frames/trait-circle.png"); } /* runes */ .spd3-icon-rune { vertical-align: middle; } .spd3-icon-rune span { display: block; vertical-align: top; background: no-repeat; } .spd3-icon-rune-large span { width: 50px; height: 50px; background-image: url("http://us.battle.net/d3/static/images/icons/runes/large.png"); } .spd3-icon-rune-large .rune-a { background-position: 0 0; } .spd3-icon-rune-large .rune-b { background-position: -50px 0; } .spd3-icon-rune-large .rune-c { background-position: -100px 0; } .spd3-icon-rune-large .rune-d { background-position: -150px 0; } .spd3-icon-rune-large .rune-e { background-position: -200px 0; } .spd3-icon-rune-large .rune-none { background-position: -250px 0; } .spd3-icon-rune-medium span { width: 42px; height: 42px; background-image: url("http://us.battle.net/d3/static/images/icons/runes/medium.png"); } .spd3-icon-rune-medium .rune-a { background-position: 0 0; } .spd3-icon-rune-medium .rune-b { background-position: -42px 0; } .spd3-icon-rune-medium .rune-c { background-position: -84px 0; } .spd3-icon-rune-medium .rune-d { background-position: -126px 0; } .spd3-icon-rune-medium .rune-e { background-position: -168px 0; } .spd3-icon-rune-medium .rune-none { background-position: -210px 0; } .spd3-icon-rune-small span { width: 16px; height: 16px; background-image: url("http://us.battle.net/d3/static/images/icons/runes/small.png"); } .spd3-icon-rune-small .rune-a { background-position: 0 0; } .spd3-icon-rune-small .rune-b { background-position: -16px 0; } .spd3-icon-rune-small .rune-c { background-position: -32px 0; } .spd3-icon-rune-small .rune-d { background-position: -48px 0; } .spd3-icon-rune-small .rune-e { background-position: -64px 0; } .spd3-icon-rune-small .rune-none { background-position: -80px 0; } /* colors */ /* general */ .spd3-color-default, .spd3-color-default a { color: #fff !important; } .spd3-color-blue, .spd3-color-blue a { color: #6969ff !important; } .spd3-color-gray, .spd3-color-gray a { color: #909090 !important; } .spd3-color-gold, .spd3-color-gold a { color: #c7b377 !important; } .spd3-color-green, .spd3-color-green a { color: #00ff00 !important; } .spd3-color-orange, .spd3-color-orange a { color: #bf642f !important; } .spd3-color-purple, .spd3-color-purple a { color: #a335ee !important; } .spd3-color-red, .spd3-color-red a { color: #ff0000 !important; } .spd3-color-white, .spd3-color-white a { color: #fff !important; } .spd3-color-yellow, .spd3-color-yellow a { color: #ffff00 !important; } a.spd3-color-blue:hover, .spd3-color-blue a:hover, a:hover .spd3-color-blue, a.spd3-color-gray:hover, .spd3-color-gray a:hover, a:hover .spd3-color-gray, a.spd3-color-gold:hover, .spd3-color-gold a:hover, a:hover .spd3-color-gold, a.spd3-color-green:hover, .spd3-color-green a:hover, a:hover .spd3-color-green, a.spd3-color-orange:hover, .spd3-color-orange a:hover, a:hover .spd3-color-orange, a.spd3-color-purple:hover, .spd3-color-purple a:hover, a:hover .spd3-color-purple, a.spd3-color-red:hover, .spd3-color-red a:hover, a:hover .spd3-color-red, a.spd3-color-white:hover, .spd3-color-white a:hover, a:hover .spd3-color-white, a.spd3-color-yellow:hover, .spd3-color-yellow a:hover a:hover .spd3-color-yellow { color: #fff !important; } /* runes */ .spd3-color-rune { color: #F3E6D0 !important; } .spd3-color-rune-a { color: #e52817 !important; } .spd3-color-rune-b { color: #6e7ee5 !important; } .spd3-color-rune-c { color: #948b91 !important; } .spd3-color-rune-d { color: #fa8b14 !important; } .spd3-color-rune-e { color: #f7e9b7 !important; } .spd3-debug { display: none; } /* Using the same icon, but hosted at our cdn */ .tooltip-icon-bullet { display: inline-block; width: 8px; height: 8px; margin-right: 2px; vertical-align: middle; background: url("http://cdn.somepage.com/diablo/layout/item-bullet.gif") no-repeat; } /* Classes for the item display */ .value { color: #ded2ab; } .spd3-color-blue .value { color: #7979d4 !important; } /* Crest display in /popular/ */ .class-crest { background-repeat: no-repeat; background-position: top center; width: 250px; height: 125px; } .crest-wrapper .build-tt-wrapper:hover { border: 1px solid #666; } .crest-wrapper div:hover { background-color: #181818; } .crest-wrapper a:hover { color: white; text-decoration: none; } /* Class crests - small versions as a sprite */ .crest-barbarian-small, .crest-crusader-small, .crest-demon-hunter-small, .crest-monk-small, .crest-witch-doctor-small, .crest-wizard-small { background: url(http://cdn.somepage.com/diablo/layout/crests-sprite.png) no-repeat; } .crest-barbarian-small { background-position: 0 0; width: 125px; height: 125px; } .crest-crusader-small { background-position: -150px -150px; width: 125px; height: 125px; } .crest-demon-hunter-small { background-position: -146px 0; width: 125px; height: 125px; } .crest-monk-small { background-position: -294px 0; width: 125px; height: 125px; } .crest-witch-doctor-small { background-position: -447px 0; width: 125px; height: 125px; } .crest-wizard-small { background-position: 0 -151px ; width: 125px; height: 125px; } /* Profiles: Tiny icon for links to builds */ .profile-build { background-image: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png"); background-repeat: no-repeat; background-position: 0 -217px; padding: 0 2px 7px 20px !important; margin: 0px; width: 20px; height: 17px; } /* 21px icon positioning, used for the square skill icons */ .skill21 { padding-left: 25px; background-size: 21px 21px; background-repeat: no-repeat; background-position: left center; } /* Item icon, resizes the 32 x 64 pixel item images to be 16 x 22 */ .itemicon { padding-left: 20px; background-size: 16px 22px; background-repeat: no-repeat; background-position: left center; } /* Item icon at a natural 32 x 32 pixel image*/ .itemicon32 { padding-left: 32px; background-size: 32px 32px; background-repeat: no-repeat; background-position: left center; } /* Item icon, to display the rectangle 32 x 64 pixel item images */ .itemicon-rect { padding-left: 40px; padding-top: 64px; background-size: 32px 64px; background-repeat: no-repeat; } /* Item icon, to display the square 32 x 32 pixel item images */ .itemicon-square { padding-left: 40px; padding-top: 32px; margin-bottom: 10px; background-size: 32px 32px; background-repeat: no-repeat; } /* Used to center divs; for text, use style "center" */ .build-wrapper { margin: 0 auto; } /* Tabs interior section */ .tab-inside { font-family: Arial, sans-serif; font-size: 14px; line-height: 22px; color: #cebea3 !important; background-color: #221F1A !important; } /* Tables for character builds */ .build-tt-wrapper { padding: 5px; margin: 10px 15px 15px 15px; background-color: #242424; border: 1px solid #383838; } .build-tt { border-collapse: collapse; width: 100%; } .build-tt th { border: 1px solid #404040; background-color: #585858; color: white; padding: 4px; font-weight: bold; font-size: 14px; } .build-tt td { border: 1px solid #404040; background-color: #181818; color: #cebea3; padding: 5px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; } .build-tt a { text-decoration: none; } .build-tt a:hover { text-decoration: underline; } /* Middle column spacer */ .build-tt-spacer { width: 4px; padding: 0px !important; background-color: #242424 !important; border: 0px !important; } /* Link to the skill calculator */ .calc-link { font-size: 11px; border-bottom-width: 0pt; text-align: center; } .calc-link a { color: #9d9d9d; } /* Add this to the if the entire should change color for a link */ .build-tt-trcolor tbody tr:hover { background-color: #202020; cursor: pointer; } .build-tt-wrapper h3 { text-align: center; font-size: 20px; line-height: 22px; color: #F3E6D0; font-family: "Palatino Linotype", Georgia, Serif; text-transform: none; margin: 8px 0 10px; padding: 0; } /* The table for stats on the hero profile */ .stat-table { width: 100%; border: 0px; } .stat-line { border-top: 1px dashed #505050; } .stat-table td { border: 0px; } .stat-header { color: white; font-size: 20px; line-height: 50px; font-weight: normal; vertical-align: bottom; text-transform: uppercase; font-family: "Palatino Linotype", Georgia, Serif; } .stat-name { color: #D7CBB7; font-size: 16px; line-height: 40px; vertical-align: bottom; } .stat-amount { color: #00ff00; font-size: 16px; line-height: 40px; vertical-align: bottom; } /* Item display on hero profile page */ .id-wrap { width: 870px; color: #6969ff; padding: 10px 0 10px 0; margin: 10px 10px 15px 75px; background-color: #242424; border: 1px solid #888; font-size: 13px; line-height: 19px; } .id { width: 355px; min-height: 40px; background-color: #0E0D0C; margin: 15px 0 15px 30px; border: 1px solid #505050; } .id-mid { width: 355px; min-height: 40px; background-color: #0E0D0C; margin: 0 0 5px 5px; border: 1px solid #505050; } /* Item name */ .id-title { max-width: 250px; line-height: 25px; } .id-title a:hover { text-decoration: none; color: white !important; } /* Display for set bonus */ .id-set { width: 550px; background-color: #0E0D0C; margin: 0 0 5px 5px; border: 1px solid #505050; } /* The
borders from showing, for each row; this is done automatically for */ .tt-single { border-right: none !important; border-left: none !important; } /* Make item stat displays work inside the table */ .tt td table td { border: none; } /* Change links to not underline, except on hover */ .tt a { text-decoration: none; } .tt a:hover, .tt a:focus { text-decoration: underline; } .tt tbody tr:hover, .tt tbody tr:focus { background-color: #202020; } /* Mouseover -mo tooltip styles for tables that are not the Blue Tracker (such as the /news/ mouseovers) */ .tab-mo { border: 1px solid #282828; background-color: #0E0D0C; color: #CEBEA3; font-family: Arial, sans-serif; font-size: 12px; line-height: 1.3em; padding: 8px; } .tab-mo b, .tab-mo strong, .tab-mo u b, .tab-mo u strong { color: #F3E6D0; } .tab-mo a, .tab-mo a:visited { color: #D96500 !important; } .tab-subhead { font-style: italic; color: #F3E6D0; } .tab-mo .tab-quote { margin: 2px; } .tab-mo-date { float: right; color: #DDDDDD; text-align: right; font-size: 12px; } .tab-mo-title { float: left; color: #F3E6D0; font-weight: bold; } .tab-mo .grid_7, .tab-mo .grid_8 { max-width: 490px; } /* Box with alternate color scheme and outline */ .box1 { background-color: #242424; border: 3px solid #383838; min-height: 200px; padding: 10px; margin: 10px; font-family: Arial, sans-serif; font-size: 14px; line-height: 23px; color: #CCCCCC; } /* Segment widths for entire page */ .grid_1 { width:85px } .grid_2 { width:170px } .grid_3 { width:255px } .grid_4 { width:340px } .grid_5 { width:425px } .grid_6 { width:510px } .grid_7 { width:595px } .grid_8 { width:680px } .grid_9 { width:765px } .grid_10 { width:850px } .grid_11 { width:935px } .grid_12 { width:1020px } /* Content container */ .c-contain{padding:20px} .c-contain.grid_1{width:45px} .c-contain.grid_2{width:130px} .c-contain.grid_3{width:215px} .c-contain.grid_4{width:300px} .c-contain.grid_5{width:385px} .c-contain.grid_6{width:470px} .c-contain.grid_7{width:555px} .c-contain.grid_8{width:640px} .c-contain.grid_9{width:725px} .c-contain.grid_10{width:810px} .c-contain.grid_11{width:895px} .c-contain.grid_12{width:980px} .ui-dialog-titlebar-close { display: none; } /* Wrapper around the top menu */ .menu-bar { height: 37px; width: 1022px; background: #555555; border-top: 1px solid #292929; border-bottom: 1px solid #292929; } /* Multilevel Superfish menu */ /*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; z-index: 10; } .sf-menu { line-height: 1.0; } .sf-menu ul { position: absolute; top: -999em; width: 180px; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float: left; position: relative; } .sf-menu a { display: block; position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 10; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 180px; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 180px; /* match ul width */ top: 0; } /*** Colors and font skin ***/ .sf-menu { float: left; margin-bottom: 1em; font-family: verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif; font-size: 16px; text-shadow: 1px 1px 0 #000; letter-spacing: -0.03em; } .sf-menu a { border: 1px solid #333333; padding: 10px; text-decoration:none; } .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #D96500; } .sf-menu li { background: #290A07; } .sf-menu li li { background: #290A07; } .sf-menu li li li { background: #290A07; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #450000; outline: 0; } /*** arrows **/ .sf-menu a.sf-with-ul { padding-right: 1.75em; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position: absolute; display: block; right: .6em; top: 1.05em; /* IE6 only */ width: 12px; height: 5px; text-indent: -999em; overflow: hidden; background: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png") no-repeat -205px -71px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: 1.0em; background-position: -205px -71px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -233px -71px; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator { background-position: -210px -36px; height: 12px; width: 5px; top: 0.7em; } .sf-menu ul a > .sf-sub-indicator { background-position: -210px -36px; height: 12px; width: 5px; top: 0.7em; } /* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -238px -36px; /* arrow hovers for modern browsers*/ } /*** shadows for all but IE6 ***/ .sf-shadow ul { background: url("http://cdn.somepage.com/diablo/layout/menu-shadow.png") no-repeat bottom right; padding: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; border-top-right-radius: 17px; border-bottom-left-radius: 17px; } .sf-shadow ul.sf-shadow-off { background: transparent; } /* Footer info */ .foot { background-color: #666; padding: 1em; border-top: 1px solid #333333; padding: 0.3em 0; text-align: center; font-family: Arial, sans-serif; font-size: 12px; color: #CCCCCC; width: 1022px; margin: 0 auto; } .foot a { color: #FFFFFF; } .foot a:hover { color: white; } .foot a.selected,.footer a.selected:hover { cursor: default; color: white; font-weight: bold; text-decoration: none; } #feedback-modal { background: #221F1A; color: #cebea3 !important; } /**** Masonry CSS for front page news ****/ .blurb-wrapper { background: #CCC; border: 0px solid #404040; padding: 10px; margin: 30px 30px 10px 30px; border-radius: 5px; clear: both; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .box { margin: 5px; padding: 5px; background: #181818; float: left; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .box a { color: #DDD; text-decoration: none; } .box:hover { background-color: #020101; -webkit-box-shadow: 0px 0px 2px 2px #888888; -moz-box-shadow: 0px 0px 2px 2px #888888; box-shadow: 0px 0px 2px 2px #888888; } .blurb { color: #FFF; } .blurb-blue { font-weight: bold; color: #00C0FF; } .blurb-news { font-weight: bold; color: #D96500; } .col1 { width: 215px; } .col2 { width: 450px; } .col3 { width: 685px; } .col1 img { max-width: 215px; } .col2 img { max-width: 450px; } .col3 img { max-width: 685px; } /* Blue Post div for news */ .blue-news { border: 1px solid #383838; margin: 0 auto; } /* Blue Post for [bpost] */ .bpost-wrapper { padding: 5px; background-color: #242424; border: 1px solid #383838; } .bpost-wrapper .blue-post { padding: 0px !important; } .bpost-spacer { border: 1px solid #383838; /* width: 94%; */ margin: 0 auto; /* margin-bottom: 10px; */ padding: 15px; font-size: 13px; line-height: 18px; background-color: #13181E; } /* Attempt to limit image width on smaller bpost display, needs more work */ .bpost-spacer img { max-width: 600px; } .bpost-link { padding: 5px 30px 0px 5px; } .bpost-link:before { border: 0; content: " "; display: inline-block; background: url(http://cdn.somepage.com/diablo/layout/sprites-layout4.png) no-repeat; background-position: 0 -240px; width: 20px; height: 13px; padding: 0 5px 0 0; vertical-align: text-bottom; } /* Blizzard blog post */ .blizzard-blog a img { max-width: 650px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 0 20px #000000; -webkit-box-shadow: 0 0 20px #000000; box-shadow: 0 0 20px #000000; padding: 1px; border: 1px solid #666666; } .blizzard-blog a img:hover { border: 1px solid #D96500; } .blizzard-blog fieldset, .blizzard-blog form, .blizzard-blog label, .blizzard-blog legend, .blizzard-blog table, .blizzard-blog caption, .blizzard-blog tbody, .blizzard-blog tfoot, .blizzard-blog thead, .blizzard-blog tr, .blizzard-blog th, .blizzard-blog td { margin: 0; padding: 0; border: 0; outline: 0; } /* OneStoneDivider */ hr.onestonehr { width:100%; height: 50px; background:url('http://cdn.somepage.com/diablo/layout/one-stone.png') center center no-repeat; border: none; margin-top: 0px; margin-bottom: 0px; } /* TwoStoneDivider */ hr.twostonehr { width:100%; height: 50px; background:url('http://cdn.somepage.com/diablo/layout/two-stone.png') center center no-repeat; border: none; margin-top: 0px; margin-bottom: 0px; } /* ThreeStoneDivider */ hr.threestonehr { width:100%; height: 50px; background:url('http://cdn.somepage.com/diablo/layout/three-stone.png') center center no-repeat; border: none; margin-top: 0px; margin-bottom: 0px; } /* FourStoneDivider */ hr.fourstonehr { width:100%; height: 50px; background:url('http://cdn.somepage.com/diablo/layout/four-stone.png') center center no-repeat; border: none; margin-top: 0px; margin-bottom: 0px; } /* FiveStoneDivider */ hr.fivestonehr { width:100%; height: 50px; background:url('http://cdn.somepage.com/diablo/layout/five-stone.png') center center no-repeat; border: none; margin-top: 0px; margin-bottom: 0px; } /* SixStoneDivider */ hr.sixstonehr { width:100%; height: 50px; background:url('http://cdn.somepage.com/diablo/layout/six-stone.png') center center no-repeat; border: none; margin-top: 0px; margin-bottom: 0px; } /* Poll Table in Blog Post */ .result-label { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACxSURBVDjL7dI9C0FxGAXw8znu5/IdZDGYjI+BzWSwKFnlpW5dcaPkbgalPInyzqSrG65w0/EJlH9Ww1l/dU4HJPFL8Ac+AB4sepCoDw1dqG9DdlVYJoC8VsLI7/B5dBhMhNMy5Gvg0YNGJ5f3bYbhPMVw3+SwAP0aCBzo49jmbZnmVeO8rOvs5gyAQw3ij4XhweZ50+BiIKwkDSrMKrBGRYiXh7Yy0FICko2ZjPh/olHeFCjwX864N2kAAAAASUVORK5CYII=); background-repeat: no-repeat; background-position: 0 4px; padding-left: 18px; padding-bottom: 12px; min-height: 10px; } /* Blue Tracker */ .bluep, .bluep a { color: #0CA9FE !important; } /* Blue Tracker mouseover styles are -mo */ .bluep-mo { color: #0CA9FE; border: 1px solid #282828; background-color: #13181E; font-family: Arial, sans-serif; font-size: 12px; line-height: 1.3em; padding: 8px; } .bluep-mo u b, .bluep-mo b .underline, .bluep-mo strong .underline, .bluep-mo .underline strong, .bluep-mo .underline b, .bluep-mo u strong, .bluep-mo strong, .bluep-mo b { color: #F3E6D0; } .bluep-mo u b, .bluep-mo b .underline, .bluep-mo strong .underline, .bluep-mo .underline strong, .bluep-mo .underline b, .bluep-mo u strong { text-decoration: underline; color: #F3E6D0; } .bluep-mo a, .bluep-mo a:visited { color: #D96500 !important; } .bluep-mo .blue-quote { margin: 2px; } .bluep-mo-date { float: right; color: #DDDDDD; text-align: right; font-size: 12px; } .bluep-mo-author { float: left; color: #0CA9FE; font-weight: bold; font-size: 12px; } .bluep-mo h1, h2 { font-size: 14px; font-weight: bold; color: #F3E6D0; margin: 20px 0 10px 0; border-bottom: 0px; } /* Icons for Blue Tracker and header in post */ .blue-eu:before { border: 0; content: " "; display: inline-block; background-image: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png"); background-repeat: no-repeat; background-position: 0 -257px; width: 16px; height: 11px; padding-right: 5px; vertical-align: middle; } .blue-us:before { border: 0; content: " "; display: inline-block; background-image: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png"); background-position: 0 -271px; background-repeat: no-repeat; width: 16px; height: 11px; padding-right: 5px; vertical-align: middle; } .blue-sticky { background-image: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png"); background-position: 0 -545px; background-repeat: no-repeat; width: 22px; height: 15px; padding: 0 20px 0 5px; vertical-align: middle; } .blue-lock { background-image: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png"); background-position: 0 -524px; background-repeat: no-repeat; width: 15px; height: 16px; padding-right: 20px; vertical-align: middle; } .blue-poll { background-image: url("http://cdn.somepage.com/diablo/layout/sprites-layout4.png"); background-position: 0 -567px; background-repeat: no-repeat; width: 22px; height: 15px; padding-right: 20px; vertical-align: middle; } .blue-abbr { color: #9d9d9d; font-size: 11px; border-bottom-width: 0pt; } .blue-newpost { font-weight: bold; } /* Blue Tracker Topic Page, & used for each post on individual blue tracker page */ .blue-table { border: 1px solid #383838; width: 100%; margin: 3px 0px 0px 0px; font-size: 13px; line-height: 18px; } /* The with the topic name */ .blue-topic { width: 400px; } .blue-post { background-color: #2c2c2c; width: 100%; color: #CEBEA3; } .blue-post ul li, .bluep-mo ul li { display: list-item; list-style: disc outside none; line-height: 1.3em !important; padding: 0 0 2px 0; margin: 0px; } .blue-post ul, .bluep-mo ul { margin: 8px, 0px, 8px, 0px; padding-left: 30px; } .blue-post ul ul, .blue-post ul ul ul, .bluep-mo ul ul, .bluep-mo ul ul ul { margin: 0px; } .blue-author { width: 110px; text-align: center; padding: 5px 0 5px 0; vertical-align: top; } .blue-author a { text-decoration: none; } .blue-avatar img { margin: 2px; width: 64px; height: 64px; -webkit-box-shadow: 0 0 5px #111111; -moz-box-shadow: 0 0 5px #111111; box-shadow: 0 0 10px #111111; } /* The actual body of the text for a blue post */ .blue-posttext { padding: 15px 30px 15px 30px; } /* Images within links, that can be clicked to show larger version of the image; makes an outline to show clickability */ .blue-posttext a img { border: 1px solid #666666; } .blue-posttext a img:hover { border: 1px solid #D96500; } /* Side quotes in blue blog posts */ .blue-posttext .pullquote:before { content:"\201C" attr(title) "\201D"; font-size:1.2em; display:block; float:right; width:8em; margin: 0.25em 1em 0.5em 0; padding:1em; } /* Images in blue blog posts, used in Community News updates */ .blue-posttext .fsnews img, .fwnews img, .comicnews img { margin: 0px 30px 0px 10px; } /* The top image in blue blog posts */ .blue-posttext .header_image { text-align: center; } .blue-posttext .ctextheadline { position: relative; display: block; text-decoration: none; line-height:1 !important; font-family: Palatino Linotype !important; margin-left: 0px; } .blue-posttext .ctextheadline h1 { position: absolute; top: -40px; left: 10px; color: #FFBF55 !important; font-size: 23px !important; } .blue-posttext .ctextheadline h2 { font:normal 20px "Palatino Linotype", "Times", serif; color:#FFF; margin: 0; padding: 0; } /* Extra space between the paragraphs in the blue posts */ .blue-posttext p { padding: 6px 0; } /* Extra space and border around text */ .blue-table code, .blue-table pre { white-space: pre; display: block; overflow: auto; max-height: 1000px; border: 1px solid #000; margin: 5px 0; padding: 10px; border-radius: 5px; border: 1px solid #444444; } .blue-blizpost { color: #00C0FF; background-color: #13181E; } /* Bold text from a blue post is colored near-white */ .blue-blizpost b, .blue-blizpost strong { color: #F3E6D0; } /* Bold text changed for underline, too */ .blue-blizpost u b, .blue-blizpost b .underline, .blue-blizpost strong .underline, .blue-blizpost .underline strong, .blue-blizpost .underline b, .blue-blizpost u strong { text-decoration: underline; color: #F3E6D0; } .blue-blizpost h1, .blue-blizpost h2 { font-size: 20px; line-height: 24px; font-weight: bold; color: #F3E6D0; margin: 30px 0 10px 0; border-bottom: 0px; padding: 0; } .blue-head { color: #F3E6D0; border-bottom: 2px solid #383838; font-size: 110%; padding: 5px 10px 0 5px; } .blue-head a { text-decoration: none; color: #F3E6D0; } .blue-source { padding: 0 5px 0 10px; vertical-align: center; border: 0px; } .blue-headdate { color: #F3E6D0; text-align: right; border-bottom: 2px solid #383838; font-size: 90%; padding-top: 3px; width="100%"; } .blue-headlink { text-align: left; padding-right: 40px; padding-left: 10px; } .blue-headlink a { text-decoration: underline; color: #F3E6D0; } /* Quoted text in a blue post */ .blue-quote { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #CEBEA3; border: 1px solid #444444; padding: 5px; max-width: 95%; margin: 2px 0px 2px 30px; font-size: 12px; line-height: 15px; } /* Quoted text in a blue post, that was originally written by a blue poster */ .blue-quote-blizpost { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #00C0FF; border: 1px solid #00C0FF; padding: 5px; max-width: 95%; margin: 2px 0px 2px 30px; font-size: 12px; line-height: 15px; } /* For the author line, in quotes in the blue tracker */ .blue-quote-author { font-style: italic; float: left; } /* For the author date, in quotes in the blue tracker */ .blue-quote-author-date { font-style: italic; float: right; } .blue-mvp, .blue-mvp b { color: #5DF644; } .blue-edit { color: #AD7474; margin-top: 15px; font-size: 85%; } .blue-icons { padding: 0 5px 0 5px; vertical-align: center; border: 0px; } /* ============================================================================= Media Queries ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } /* ============================================================================= Non-Semantic Helper Classes ========================================================================== */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } .ir br { display: none; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ============================================================================= Print Styles ========================================================================== */ @media print { * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { 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; } /* h5bp.com/t */ 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; } } /* ============================================================================= Cluetip Styles ========================================================================== */ /* global */ #cluetip-close img { border: 0; } #cluetip-title { overflow: hidden; } #cluetip-title #cluetip-close { float: right; position: relative; } #cluetip-waitimage { width: 43px; height: 11px; position: absolute; background-image: url(http://cdn.somepage.com/shared/wait.gif); } .cluetip-arrows { display: none; position: absolute; top: 0; left: -11px; height: 22px; width: 11px; background-repeat: no-repeat; background-position: 0 0; } #cluetip-extra { display: none; } /*************************************** =cluetipClass: 'default' -------------------------------------- */ .cluetip-default { background-color: black; } .cluetip-default #cluetip-outer { position: relative; margin: 0; background-color: #d9d9c2; } .cluetip-default h3#cluetip-title { margin: 0 0 0px; padding: 0px 0px 0px; font-size: 1.1em; font-weight: normal; background-color: #87876a; color: #fff; } .cluetip-default #cluetip-title a { color: #d9d9c2; font-size: 0.95em; } .cluetip-default #cluetip-inner { padding: 0px; } .cluetip-default div#cluetip-close { text-align: right; margin: 0 0px 0px; color: black; } /* default arrows */ .clue-right-default .cluetip-arrows { /* background-image: url(images/darrowleft.gif); */ } .clue-left-default .cluetip-arrows { /* background-image: url(images/darrowright.gif); */ left: 100%; margin-right: -11px; } .clue-top-default .cluetip-arrows { /* background-image: url(images/darrowdown.gif); */ top: 100%; left: 50%; margin-left: -11px; height: 11px; width: 22px; } .clue-bottom-default .cluetip-arrows { /* background-image: url(images/darrowup.gif); */ top: -11px; left: 50%; margin-left: -11px; height: 11px; width: 22px; } /*************************************** =cluetipClass: 'jtip' -------------------------------------- */ .cluetip-jtip { background-color: transparent; } .cluetip-jtip #cluetip-outer { border: 2px solid #ccc; position: relative; background-color: #fff; } .cluetip-jtip h3#cluetip-title { margin: 0 0 0px; padding: 0px 0px; font-size: 16px; font-weight: normal; background-color: #ccc; color: #333; } .cluetip-jtip #cluetip-inner { padding: 0 0px 0px; display: inline-block; } .cluetip-jtip div#cluetip-close { text-align: right; margin: 0 0px 0px; color: #900; } /* jtip arrows */ .clue-right-jtip .cluetip-arrows { /* background-image: url(images/arrowleft.gif); */ } .clue-left-jtip .cluetip-arrows { /* background-image: url(images/arrowright.gif); */ left: 100%; margin-right: -11px; } .clue-top-jtip .cluetip-arrows { /* background-image: url(images/arrowdown.gif); */ top: 100%; left: 50%; margin-left: -11px; height: 11px; width: 22px; } .clue-bottom-jtip .cluetip-arrows { /* background-image: url(images/arrowup.gif); */ top: -11px; left: 50%; margin-left: -11px; height: 11px; width: 22px; } /*************************************** =cluetipClass: 'rounded' -------------------------------------- */ .cluetip-rounded { background: transparent url(images/bl.gif) no-repeat 0 100%; margin-top: 10px; margin-left: 12px; } .cluetip-rounded #cluetip-outer { background: transparent url(images/tl.gif) no-repeat 0 0; margin-top: -12px; } .cluetip-rounded #cluetip-title { background-color: transparent; padding: 12px 12px 0; margin: 0 -12px 0 0; position: relative; } .cluetip-rounded #cluetip-extra { position: absolute; display: block; background: transparent url(images/tr.gif) no-repeat 100% 0; top: 0; right: 0; width: 12px; height: 30px; margin: -12px -12px 0 0; } .cluetip-rounded #cluetip-inner { background: url(images/br.gif) no-repeat 100% 100%; padding: 5px 12px 12px; margin: -18px -12px 0 0; position: relative; } .cluetip-rounded div#cluetip-close { text-align: right; margin: 0 5px 5px; color: #009; background: transparent; } .cluetip-rounded div#cluetip-close a { color: #777; } /* rounded arrows */ .clue-right-rounded .cluetip-arrows { background-image: url(images/rarrowleft.gif); } .clue-left-rounded .cluetip-arrows { background-image: url(images/rarrowright.gif); left: 100%; margin-left: 12px; } .clue-top-rounded .cluetip-arrows { background-image: url(images/rarrowdown.gif); top: 100%; left: 50%; margin-left: -11px; height: 11px; width: 22px; } .clue-bottom-rounded .cluetip-arrows { background-image: url(images/rarrowup.gif); top: -23px; left: 50%; margin-left: -11px; height: 11px; width: 22px; } /* stupid IE6 HasLayout hack */ .cluetip-rounded #cluetip-title, .cluetip-rounded #cluetip-inner { zoom: 1; }