@charset "utf-8"; /* Global CSS Document, dianemagee.com - Production Copy, global-p.css Version: 1.00.20100107 Author: Scratch Web Design, barra@scratchwebdesign.com ----------------------------------------------------------------------------- */ @import url("access.css"); /* =JS/NOFOUC js class is applied to from within if UA is JS capable. Use to apply script specific styles. Use nofouc class to stop FOUC http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content ----------------------------------------------------------------------------- */ .js .nofouc { display: none; } /* =RESET --------------------------------------------------------- */ html, body, div, span, iframe, font, img, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, ol, ul, li, fieldset, form, label, legend, abbr, acronym, applet, object, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, address, big, cite, code, dl, dt, dd { vertical-align: baseline; font-family: inherit; font-weight: normal; font-style: normal; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0 none; } body { line-height: 1.25em; } /* No list-markers by default since lists are most often used for semantics */ /* Define default left margin for lists and blockquote */ ol, ul { list-style: none; margin-left: 0; } li, dd, blockquote { margin-left: 0; } /* Tables still need cellspacing="0" in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } /* Remove possible quote marks */ blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles as required! */ :focus { outline: none; } /* Remember to define link styles as required! */ :link, :visited { text-decoration: none } /* Kill borders on linked images */ a img,:link img, :visited img { border: none } /* Avoid inconsistant browser default heading and pre/code font-sizes */ /* Set font sizes as required in CSS*/ h1, h2, h3, h4, h5, h6, pre, code { font-size: 1.0em; } /* Remember to highlight inserts somehow when used! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* =DOCUMENT --------------------------------------------------------- */ html { height: 100%; } body { height: 100%; background-color: #050505; font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; text-align: center; /* Centers the page content container in IE 5 browsers. */ color: #999; } /* =LINKS --------------------------------------------------------- */ /* Usability enhancement places image after link to indicate that link is external Caveat: Attribute selector not supported by IE6 */ a[href^="http"] { padding-right: 15px; background: url("../images/ext-link-dark.png") no-repeat top right; } body#contact a[href^="http"] { background: url("../images/ext-link-light.png") no-repeat top right; } a[href^="http://www.dianemagee.com"] { padding-right: 0; background-image: none; } .highslide-thumbstrip-inner a { background: none !important; } /* =IE7, =1 */ a:link { color: #94a4b4; text-decoration: underline; margin: 0.5em 0 0.5em 0; font-size: 1em; } a:visited { color: #94a4b4; text-decoration: underline; } a:hover { color: #fafafa; text-decoration: underline; } a:active, a:focus { color: #fafafa; text-decoration: none; border-top: 1px dotted #fafafaf; border-bottom: 1px dotted #fafafa; } a.lnk-deco { text-decoration: underline; } /* Image Links */ div#outerwrap a.image-link:active, div#outerwrap a.image-link:focus { border: none; } /* 'ENTER SITE' link */ body#index div#centered a { float: left; font-size: 0.9em; text-transform: uppercase; } body#index a:link, body#index a:visited { color: #999; } body#index a:hover { color: #fafafa; } body#index a:active, body#index a:focus { color: #fafafa; text-decoration: none; border-top: 1px dotted #fafafaf; border-bottom: 1px dotted #fafafa; } /* Footer Links */ #footer a, #footer a:link { color: #666; font-weight: bold; outline: none; text-decoration: underline; } /* Sets the style for visited links. */ #footer a:visited { color: #666; font-weight: bold; text-decoration: underline; } /* Sets the style for links on hover, focus and active */ #footer a:hover { color: #ccc; text-decoration: underline; } /* Additional style for link focus and active */ #footer a:active, #footer a:focus { color: #ccc; text-decoration: none; border-top: 1px dotted #999; border-bottom: 1px dotted #999; } #showinfo a:link, #showinfo a:visited { text-decoration:none; } #showinfo a:hover, #showinfo a:active { text-decoration:underline; } /* =NAVIGATION --------------------------------------------------------- */ ul#main-nav { position: absolute; top: 15px; right: 0; } ul#main-nav a { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; font-size: 0.85em; font-weight: normal; /* Sets font weight for all menu items */ font-style: normal; letter-spacing: 1px; text-align: center; text-transform: uppercase; display: block; border: 1px solid #222; border-width: 1px 0 1px 1px; white-space: normal; margin: 0; padding: 0.3em; } ul#main-nav li a.rbrd { /* Add right border to top level end link */ border-right-width: 1px; } ul#main-nav ul.rbrd li a { /* Add right border to all dropdown links */ border-right-width: 1px; border-top-width: 0px; } ul#main-nav a:link, ul#main-nav a:visited, ul#main-nav a:active /* Menu at rest */ { color: #999; text-decoration: none; padding: 0.3em 0 0.3em 0; background-color: #090909; } ul#main-nav a:hover, ul#main-nav a:focus /* Menu on mouse-over */ { color: white; background-color: #222; text-decoration:none; } ul#main-nav a.top_parent, ul#main-nav a.top_parent:hover { /* Attaches down-arrow to all top-parents */ background: #090909 url(../images/navdown_white.gif) 100% 0 no-repeat; cursor: pointer; } ul#main-nav a.parent, ul#main-nav a.parent:hover /* Attaches side-arrow to all parents */ { background-image: url(../images/nav_white.gif); background-position: 100% 0; background-repeat: no-repeat; } ul#main-nav li { display: inline; list-style: none; margin: 0; padding: 0; float: left; width: 158px; /* width of all menu boxes */ /* NOTE: For adjustable menu boxes comment out width and add padding in the "#menh a" so that the menu boxes will have space on either side */ } ul#main-nav li ul li { width:159px; } ul#main-nav li { position: relative; min-height: 1px; /* Sophie Dennis contribution for IE7 */ vertical-align: bottom; /* Sophie Dennis contribution for IE7 */ } ul#main-nav ul { position:absolute; z-index:500; top:auto; display:none; padding: 1em; margin:-1em 0 0 -1em; } ul#main-nav ul ul { top:0; left:100%; } ul#main-nav li:hover { cursor:pointer; z-index:100; } ul#main-nav li:hover ul ul, ul#main-nav li li:hover ul ul, ul#main-nav li li li:hover ul ul, ul#main-nav li li li li:hover ul ul { display:none;} ul#main-nav li:hover ul, ul#main-nav li li:hover ul, ul#main-nav li li li:hover ul, ul#main-nav li li li li:hover ul { display:block;} ul#main-nav li:focus ul, ul#main-nav li li:focus ul, ul#main-nav li li li:focus ul, ul#main-nav li li li li:focus ul { display:block;} /* =LAYOUT --------------------------------------------------------- */ /* Outer container */ #outerwrap { text-align: left; /* Redefines the text alignment defined by the body element. */ width: 100%; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px; } div#footer { height: 50px; } #headerwrap { /* Container for header image and IR */ position: relative; width: 960px; height: 110px; margin: 0 auto; } /* Branding IR */ #branding { float: left; width: 100%; height: 85px; margin: 0 auto; position: relative; background-color: inherit; color: #fafafa; font-size: 1.5em; font-weight: normal; font-style: italic; letter-spacing: 2px; line-height: 85px; } #branding span { background: url(../images/bg-branding.jpg) no-repeat 0 10px; position: absolute; top: 0; width: 100%; height: 85px; } #contentwrap { position: relative; width: 958px; min-height: 450px; margin-left: auto; margin-right: auto; } body#profile #contentwrap, body#exhibitions #contentwrap { background-image: url(../images/home-center-stage_bg.jpg); background-repeat: no-repeat; background-position: 361px 30px; } body#works #contentwrap { background-image: url(../images/gallery-center-stage_bg.jpg); background-repeat: no-repeat; background-position: 361px 30px; } #centered { /* Center index image */ position: absolute; top: 50%; left: 50%; width: 700px; margin-left: -350px; height: 517px; margin-top: -275px; background-image: url(../images/center-it_bg.gif); background-repeat: no-repeat; background-position: 5px 5px; } body#profile div#maincontent, body#exhibitions div#maincontent, div#listing { float: left; width: 430px; min-height: 350px; margin: 0 0 20px 10px; padding: 50px 30px; border: 0px solid #111; background-color: #000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 5px; } div#listing { width: 310px; } div#featuredwork { float: right; width: 430px; height: 600px; padding-left: 15px; background-repeat: no-repeat; background-position: 0 20px; text-align: right; } div#featuredwork img { display: block; position: relative; top: 120px; left: -15px; margin: 0 auto; border: 1px solid #fff; } div#featuredwork span#featuredtitle { display: block; position: relative; top: 125px; left: -15px; clear: both; font-size: 0.85em; font-style: italic; color: #666; text-align: center; } div#thumbs { float: right; width: 540px; min-height: 400px; padding:80px 30px 0 0; background-repeat: no-repeat; background-position: 0 20px; text-align: right; } .col { float:left; width:33%; } div#thumbs img { vertical-align:top; margin:0 0 20px 10px; } ol.collection { list-style: decimal; margin: 10px 0 0 20px; } dl#exhibitions-list dt { color:#DDD; font-weight:bold; margin-bottom:5px; padding-top:10px; } dl#exhibitions-list dd { margin:0 0 10px; } dl#exhibitions-list dd span { display:block; font-style:italic; } ul.collection { list-style: none; margin: 10px 0 0 0; } ol.collection li, ul.collection li { margin-bottom: 7px; } .help-cs { background-image: url(../images/home-center-stage_bg.jpg); background-repeat: no-repeat; background-position: 150px 40px; } #help-center-stage-left { float: left; width: 500px; margin: 0 0 0 10px; padding: 0 20px 15px 20px; border: 1px solid #362C28; border-width: 0 1px 0 1px; background-color: #000; } #help-center-stage-right { float: left; width: 185px; text-align: right; } #center-stage-contact { clear: both; padding: 0.5em; text-indent: 5px; } #twitter { position: absolute; top: 20px; right: 0; width: 400px; min-height: 100px; background: #191919 url("../images/icon-twitter.png") no-repeat 440px 60px; background: transparent url("../images/bg-twitter.png") no-repeat 0 0; padding: 10px 70px 10px 30px; border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border: 1px solid #222; } #audio { position: absolute; top: 0; right: 20px; width: 100px; color: #999; font-size: 0.8em; font-family: sans-serif; text-align: left; } #footer { width: 96%; margin: 0 auto; padding: 0; font-family: Arial, Helvetica, sans-serif; color: #666; font-size: 0.8em; text-align: center; clear: both; height: 50px; } .js #footer { line-height: 25px; } /* Scratch Footer info using jQuery to show footer texts on demand. Reduce #footer height if script is enabled (because either #legal or #design will be shown, but not both together) */ .js div#footer { height: 25px; } span#showinfo { float: right; margin-right: 30px; padding-left: 20px; background: transparent url("http://www.scratchwebdesign.com/branding/scratch-ftr-dianemagee.png") no-repeat 10px -1px; width: 100px; height: 50px; text-transform: uppercase; line-height:1; } span#legal, span#design { float: right; clear: right; margin-right: 30px; } .js span#legal, .js span#design { margin-right: 10px; clear: none; line-height: 1.3; text-align: left; } /* =TYPOGRAPHY --------------------------------------------------------- */ h1, body#profile div#maincontent h2, body#exhibitions div#maincontent h2 { padding: 10px 0; color: #666; font-size: 1.2em; text-transform: uppercase; letter-spacing: 2px; font-style: normal; } body#index h1 { float: right; color: #333; font-size: 0.9em; text-transform: none; letter-spacing: normal; padding: 0; } h2 { padding: 10px 0; color: #666; font-size: 1em; font-style: italic; } p { text-align: justify; } body#profile div#maincontent p, body#exhibitions div#maincontent p, div#listing p, div#help-center-stage-left p { padding: 10px 0 10px 0; color: #999999; font-size: 1em; } div#contentwrap p#click { color: #555; font-size: 0.85em; font-style: italic; } div#contentwrap p.titles { color: #999; font-size: 0.9em; text-align: left; padding: 0.8em; } p.contact { color: #999; font-size: 1em; text-align: right; } .it { font-style: italic; } div#twitter { font: 1em/1.2 Arial, Helvetica, sans-serif; } div#twitter h2 { font: 1.2em/1.2 Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; padding: 0; color: #fafafa; color: #666; } div#twitter p { margin-top: 5px; text-align: right; } span.sold, span.nfs abbr { float:right; color:#990000; font-size:0.85em; font-weight:bold; font-style:italic; text-transform:uppercase; } span.nfs abbr { border-color:#990000; } span.sold abbr { border-color:#990000; } .italic {font-style: italic} .bold {font-weight: bold} .com { font-style: italic; padding-left: 15px; } .cap { text-transform: capitalize; } /* =IMAGES --------------------------------------------------------- */ body#index div#centered img { border: 1px solid #222; padding: 5px; } img#profilepic { float: left; border: 1px solid #222; margin: 10px 20px 10px 0; padding: 5px; background-color: #050505; } /* =UTILITY --------------------------------------------------------- */ .block {display: block} .left {text-align: left} .clear-left {clear: left}; .clear-right {clear: right} .clear-both {clear: both} .screenreadertext { /* Off-screen content for screen readers */ position: absolute; left: -9999px; } abbr[title], acronym[title] { /* If abbr or acronym has a title attribute, add style */ cursor: help; border-bottom: 1px dotted #999; } .noscript { color: inherit; font-size: inherit; font-style: normal; display: inline; } h2.noscript { color: #cc0000; } /* EOF */