/** * HTML5 ✰ Boilerplate * * style.css contains a reset, font normalization and some base styles. * * Credit is left where credit is due. * Much inspirationks was taken from these projects: * - yui.yahooapis.com/2.8.1/build/base/base.css * - camendesign.com/design/ * - praegnanz.de/weblog/htmlcssjs-kickstart */ /** * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark * html5doctor.com/html-5-reset-stylesheet/ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } :-moz-placeholder { color:#aaa; } :placeholder { color:#aaa; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } /** * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/ */ body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */ select, input, textarea, button { font:99% sans-serif; } /* Normalize monospace sizing: en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ pre, code, kbd, samp { font-family: monospace, sans-serif; } /** * Minimal base styles. */ /* Always force a scrollbar in non-IE */ /* html { overflow-y: scroll; } */ /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active { outline: none; } ul, ol { margin-left: 2em; } ol { list-style-type: decimal; } /* Remove margins for navigation lists */ nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } small { font-size: 85%; } strong, th { font-weight: bold; } td { vertical-align: top; } /* Set sub, sup without affecting line-height: gist.github.com/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } pre { /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; } textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ .ie6 legend, .ie7 legend { margin-left: -7px; } /* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } .ie7 input[type="checkbox"] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } /* Hand cursor on clickable input elements */ label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } /* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea { margin: 0; } /* Colors for form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } /* j.mp/webkit-tap-highlight-color */ a:link { -webkit-tap-highlight-color: rgba(0,0,0,0.5); } /* Make buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ button { width: auto; overflow: visible; } /* Bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ .ie7 img { -ms-interpolation-mode: bicubic; } /** * You might tweak these.. */ body, select, input, textarea { /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ color: #444; /* Set your base font here, to apply evenly */ /* font-family: Georgia, serif; */ } /* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */ h1, h2, h3, h4, h5, h6 { font-weight: normal; } a, a:active, a:visited { text-decoration: none; color: inherit; } a:hover { } /* Swatches -------------------------------------------------------------------------*/ /* Text Colors: Mustard: rgb(246,194,79) #F6C24F Darkish Gray: rgb(87,87,87) #575757 Dark Gray: rgb(65,64,66) #414042 Almost Black rgb(35,31,32) #231F20 Block Colors Background rgb(181,184,181) #b5b7b5 Average Background Color (when bg image is factored in, handy to know for matting) rgb(183,186,183) #b7bab7 mainContent Avg rgb(220,219,218) #dcdbda Slate Gray (h2 ribbon color) rgb(86,87,87) #565757 Plum (h2 ribbon color alt) rgb(147,74,129) #934a81 Mustard rgb(246,194,79) #F6C24F Offwhite rgb(247,242,237) #f7f2ed Gray rgb(151,151,151) #979797 Green/Gray rgb(204,205,195) #cccdc3 Section Colors Art rgb(130,193,85) #82C155 Drama rgb(248,156,62) #F89C3E Theatre rgb(248,156,62) #F89C3E Music rgb(99,185,210) #63B9D2 Dance rgb(240,86,90) #F0565A Design rgb(29,185,162) #1DB9A2 Film rgb(147,74,129) #934A81 Literature rgb(190,57,109) #BE396D */ em.art {color:#82C155;} em.drama, em.theatre {color:#F89C3E;} em.music {color:#63B9D2;} em.dance {color:#F0565A;} em.design {color:#1DB9A2;} em.film {color:#934A81;} em.literature {color:#BE396D;} /*-----------------------------------------------------------------------*/ /* Typography -------------------------------------------------------------------------*/ .wyswyg { line-height: 14pt; } .wyswyg h2 { float: left; clear: both; margin: 0 0 12px -26px; padding: 0 0 3px 13px; background: url(../images/effectsRibbon.gif) no-repeat left top; font: 12pt/14pt 'BoBook', 'Arial'; text-tranform: uppercase; color: white; } .wyswyg h2 span { display: block; width: 470px; height: 18px; padding: 3px 0 0 12px; background-color: rgb(86,87,87); border-bottom: 1px solid rgba(86,87,87,.65); border-right: 1px solid rgba(86,87,87,.65); } body.bios .wyswyg h2 span { width: 460px; } .wyswyg p { padding-bottom: 18px; } .wyswyg ul, .wyswyg ol { list-style: disc outside none; padding: 0 0 11px 20px; } .wyswyg ol { list-style-type: decimal; } .wyswyg img { margin: 0 20px; } .wyswyg img.alignLeft { float: left; margin-left: 0; } .wyswyg img.alignRight { float: right; margin-right: 0; } .wyswyg a { text-decoration: underline; } h2.ribbon { position:relative; padding: 3px 12px 0 12px; background-color: rgb(87,87,87); font: 12pt/14pt 'BoBook', 'Arial'; text-tranform: uppercase; color: white; } h2.ribbon.art { background-color:rgb(130,193,85); } h2.ribbon.drama, h2.ribbon.theatre { background-color:rgb(248,156,62); } h2.ribbon.music { background-color:rgb(99,185,210); } h2.ribbon.dance { background-color: rgb(240,86,90); } h2.ribbon.design { background-color: rgb(29,185,162); } h2.ribbon.film { background-color: rgb(147,74,129); } h2.ribbon.lit { background-color: rgb(190,57,109); } h2.ribbon:after { display: block; position: absolute; right: -13px; top: 0; width: 13px; height: 24px; background: url(../images/effectsRibbon.gif) no-repeat left -192px; content: ' '; text-indent: -9999px; } h2.ribbon.art:after { background-position: left -216px; } h2.ribbon.drama:after, h2.ribbon.theatre:after { background-position:left -240px; } h2.ribbon.music:after { background-position:left -264px; } h2.ribbon.dance:after { background-position:left -288px; } h2.ribbon.design:after { background-position:left -312px; } h2.ribbon.film:after { background-position:left -336px; } h2.ribbon.lit:after { background-position:left -360px; } .arrowOutline { position: relative; display: block; float: left; height: 17px; padding: 5px 2px 3px 7px; border-top: 1px solid rgb(186,186,185); border-bottom: 1px solid rgb(186,186,185); text-transform: uppercase; font: 11pt/13pt 'Trade18', 'Arial'; } .arrowOutline.art { border-color:rgb(180,208,160); } .arrowOutline.drama, .arrowOutline.theatre { border-color:rgb(232,191,150); } .arrowOutline.music { border-color:rgb(167,205,215); } .arrowOutline.dance { border-color:rgb(229,161,162); } .arrowOutline.design { border-color:rgb(132,204,193); } .arrowOutline.film { border-color:rgb(189,156,180); } .arrowOutline.lit { border-color:rgb(208,147,171); } .arrowOutline:before { display: block; position: absolute; left: -7px; top: -1px; width: 7px; height: 27px; background: url(../images/effectsChevron.gif) no-repeat left -810px; content: ' '; text-indent: -9999px; } .arrowOutline.art:before { background-position:left -837px;/*color:rgb(130,193,85);*/ } .arrowOutline.drama:before, .arrowOutline.theatre:before { background-position:left -864px;/*color:rgb(248,156,62);*/ } .arrowOutline.music:before { background-position:left -891px;/*color:rgb(99,185,210);*/ } .arrowOutline.dance:before { background-position:left -918px;/*color: rgb(240,86,90);*/ } .arrowOutline.design:before { background-position:left -945px;/*color: rgb(29,185,162);*/ } .arrowOutline.film:before { background-position:left -972px;/*color: rgb(147,74,129);*/ } .arrowOutline.lit:before { background-position:left -999px;/*color: rgb(190,57,109); */ } .arrowOutline:after { display: block; position: absolute; right: -7px; top: -1px; width: 7px; height: 27px; background: url(../images/effectsChevron.gif) no-repeat right -297px; content: ' '; text-indent: -9999px; } .arrowOutline.art:after { background-position: right -324px; } .arrowOutline.drama:after, .arrowOutline.theatre:after { background-position: right -351px; } .arrowOutline.music:after { background-position: right -378px; } .arrowOutline.dance:after { background-position: right -405px; } .arrowOutline.design:after { background-position: right -432px; } .arrowOutline.film:after { background-position: right -459px; } .arrowOutline.lit:after{ background-position: right -486px; } /* Common Styles -------------------------------------------------------------------------*/ body { background: url(../images/bg.gif) rgb(181,184,181); } #container { width: 951px; margin: 0 auto; } #contentWrap { float: left; width: 779px; } #main { float: left; margin-left: -7px; padding-top: 20px; background: url(../images/MainTop.png) no-repeat left top; } #main > div { padding-bottom: 20px; background: url(../images/MainBot.png) no-repeat left bottom; } #main > div > div { width: 775px; padding: 0 20px 0 0; background: url(../images/Main.png) repeat-y; } #mainSection { float: left; width: 450px; padding: 22px 0 0 41px; } body.bios #mainSection { width: 440px; padding-top: 39px; } .dottedWrap { clear: both; float: left; margin: 27px 9px 0 25px; border: 2px dotted rgba(0,0,0,.75); border-bottom: none; } body.profiles .dottedWrap { height: 390px; margin-bottom: 13px; border-bottom: 3px solid #666; } body.profiles.Art .dottedWrap { border-bottom-color: rgb(130,193,85); background-color: rgba(130,193,85,.25); } body.profiles.Drama .dottedWrap, body.profiles.Theatre .dottedWrap { border-bottom-color: rgb(248,156,62); background-color: rgba(248,156,62,.25); } body.profiles.Music .dottedWrap { border-bottom-color: rgb(99,185,210); background-color: rgba(99,185,210,.25); } body.profiles.Dance .dottedWrap { border-bottom-color: rgb(240,86,90); background-color: rgba(240,86,90,.25); } body.profiles.Design .dottedWrap { border-bottom-color: rgb(29,185,162); background-color: rgba(29,185,162,.25); } body.profiles.Film .dottedWrap { border-bottom-color: rgb(147,74,129); background-color: rgba(147,74,129,.25); } body.profiles.Literature .dottedWrap { border-bottom-color: rgb(190,57,109); background-color: rgba(190,57,109,.25); } body.events_listview .dottedWrap { width: 735px; } /* Reusable ui components -------------------------------------------------------------------------*/ a.previous, a.next, button.previous, button.next { display: block; margin: 0; padding: 0; border: 0; background: none; text-transform: uppercase; font: 9pt/9pt 'Trade18', 'Arial'; color: rgb(87,87,87); } .controller a.previous, .controller button.previous { float: left; } .controller a.next, .controller button.next { float: right; } .controller a.previous.inactive, .controller button.previous.inactive, .controller a.next.inactive, .controller button.next.inactive { opacity: .4; } a.previous small, a.next small, button.previous small, button.next small { display: block; float: left; width: 22px; height: 21px; background: url(../images/profiles-ui.gif) no-repeat; text-indent: -9999px; } a.previous small, button.previous small { margin-right: 5px; } a.previous small, button.previous small { background-position: -45px top; } a.next small, button.next small { background-position: -67px top; } a.previous span, a.next span, button.previous span, button.next span { display: block; float: left; padding-top: 5px; white-space: nowrap; } a.next span, button.next span { margin-right: 5px; } a.previousLrg, a.nextLrg, button.previousLrg, button.nextLrg { display: block; margin: 0; padding: 0; border: 0; background: none; text-transform: uppercase; font: 9pt/9pt 'Trade18', 'Arial'; color: rgb(87,87,87); } a.previousLrg small, a.nextLrg small, button.previousLrg small, button.nextLrg small { display: block; float: left; width: 31px; height: 31px; background: url(../images/ui-circleArrows31by30.png) no-repeat; text-indent: -9999px; } a.previousLrg small, button.previouslrg small { margin-right: 5px; } a.previousLrg small, button.previousLrg small { background-position: left top !important; } a.nextLrg small, button.nextLrg small { background-position: right top !important; } a.previousLrg span, a.nextLrg span, button.previousLrg span, button.nextLrg span { display: block; float: left; padding-top: 13px; white-space: nowrap; } a.nextLrg span, button.nextLrg span { margin-right: 5px; } .controller { clear: both; float: left; text-align: center; } body.profiles .controller { width: 736px; margin-left: 27px; } body.classifieds .controller, body.materials .controller { width: 736px; margin: 8px 0 0 27px; } body.bios .controller { width: 736px; margin-left: 16px; } body.jobs .controller { width: 740px; margin: 20px 0 0 0; } .controller ul { display: inline; margin: 0; list-style: none; } .controller li { display: inline-block; width: 17px; text-align: center; } .controller ul a { display: inline-block; width: 10px; height: 18px; background: url(../images/profiles-ui.gif) -106px 3px; text-indent: -9999px; } .controller li.active a { background-position: -89px top; width: 17px; height: 18px; border-top: none; } .filter ul { float: right; margin: -14px 22px 0; list-style: none; } body.events_calview .filter { margin-bottom: 10px; } body.events_listview .filter { margin-bottom: 8px; } .filter li { float: left; margin-right: -4px; padding-left: 7px; background: url(../images/effectsChevron.gif) no-repeat left -540px; font: 11pt/13pt 'Trade18', 'Arial'; text-transform: uppercase; } .filter li.All { color: rgb(130,193,85); } .filter li.art { color: rgb(130,193,85); } .filter li.theatre { color: rgb(248,156,62); } .filter li.music { color: rgb(99,185,210); } .filter li.dance { color: rgb(240,86,90); } .filter li.design { color: rgb(29,185,162); } .filter li.film { color: rgb(147,74,129); } .filter li.literature { color: rgb(190,57,109); } .filter li.active { background-position: left -594px; } .filter li.active.All { background-position: left -594px; } .filter li.active.art { background-position: left -621px; } .filter li.active.theatre { background-position: left -648px; } .filter li.active.music { background-position: left -675px; } .filter li.active.dance { background-position: left -702px; } .filter li.active.design { background-position: left -729px; } .filter li.active.film { background-position: left -756px; } .filter li.active.literature { background-position: left -783px; } .filter a { display: block; float: left; padding-right: 7px; background: url(../images/effectsChevron.gif) no-repeat right -27px; color: inherit; } .filter li.active a { background-position: right -81px; } .filter li.active.art a { background-position: right -108px; } .filter li.active.theatre a { background-position: right -135px; } .filter li.active.music a { background-position: right -162px; } .filter li.active.dance a { background-position: right -189px; } .filter li.active.design a { background-position: right -216px; } .filter li.active.film a { background-position: right -243px; } .filter li.active.literature a { background-position: right -270px; } .filter li span { display: block; float: left; height: 21px; padding: 4px 3px 0 5px; background-color: white; border-top: 1px solid rgb(190,190,190); border-bottom: 1px solid rgb(190,190,190); } .filter li.active span { background-color: rgb(87,87,87); border-color: rgb(87,87,87); color: white; } .filter li.active.All span { } .filter li.active.art span { background-color: rgb(130,193,85); border-color: rgb(118,167,86); } .filter li.active.theatre span { background-color: rgb(248,156,62); border-color: rgb(208,140,69); } .filter li.active.music span { background-color: rgb(99,185,210); border-color: rgb(96,161,180); } .filter li.active.dance span { background-color: rgb(240,86,90); border-color: rgb(202,86,89); } .filter li.active.design span { background-color: rgb(29,185,162); border-color: rgb(36,161,143); } .filter li.active.film span { background-color: rgb(147,74,129); border-color: rgb(133,79,120); } .filter li.active.literature span { background-color: rgb(190,57,109); border-color: rgb(166,64,104); } .filter h5 { float: right; margin: -43px -21px 0 0; } #Poster { clear: both; width: 210px; height: 60px; background-color: rgba(147,150,136,.5); font-size: 10pt; line-height: 12pt; color: rgb(100,100,100); } body.Classified #Poster { float: right; margin: 9px 27px 20px 0; } body.EventPage #Poster { float: right; margin: 4px 6px 23px 0; } #Poster p { float: left; width: 127px; padding: 15px 0 0 15px; text-align: right; } #Poster h6 { float: right; margin: -13px -25px 0 0; background: no-repeat 3px 3px; } #Poster h6 a { display: block; width: 85px; height: 87px; background: url(../images/MembersSticker.png) left -175px; text-indent: -9999px; text-align: center; font: 12pt/14pt 'BoBook', 'Arial'; color: rgb(246,194,79); text-transform: uppercase; } #Poster h6 a.noAvatar { background-position: left -88px; } .SpeechBubble { display: block; background: url(../images/EffectsSpeechBubble.png); } .SpeechBubble.Sm { width: 49px; height: 51px; background-position: left top; } .SpeechBubble.SmInvert { width: 49px; height: 51px; background-position: left -51px; } .SpeechBubble.Med { width: 53px; height: 55px; background-position: left -102px; } .SpeechBubble.MedInvert { width: 53px; height: 55px; background-position: left -157px; } .SpeechBubble.Lrg { width: 49px; height: 51px; background-position: left -212px; } .SpeechBubble.LrgInvert { width: 49px; height: 51px; background-position: left -271px; } .SpeechBubble span { display: block; width: inherit; height: inherit; background: url(../images/EffectsSpeechBubbleText.gif); background-position: inherit; text-indent: -9999px; } /* Login / Member Nav Styles -------------------------------------------------------------------------*/ #userNav { display: none; left: 4px; padding-left: 14px; background: url(../images/userNavL.png) no-repeat left top; color: white; } #userNav.active { display: block; } #userNav > div { padding-right: 16px; background: url(../images/userNavR.png) no-repeat right top; } #userNav > div > div { height: 40px; padding: 0 98px 0 150px; background: url(../images/userNav.png); } #userNav ul { margin: 0; list-style: none; } #userNav li { float: left; height: 31px; margin-top: 4px; border-right: 1px solid rgba(217,212,207,.75); } #userNav li:first-child { border-left: 1px solid rgba(217,212,207,.75); } #userNav ul a { position: relative; top: -4px; height: 17px; padding: 11px 12px 12px 12px; display: block; text-transform: uppercase; font: 11pt/13pt 'Trade18', 'Arial'; color: inherit; } #userNav ul a:hover { background-color: rgba(0,0,0,.25); } #userNav h5 { float: right; margin-top: 11px; font: 12pt/14pt 'BoBold', 'Arial'; color: rgb(246,194,79); } #userNav form { float: left; margin-top: 10px; } #userNav h6 { float: left; text-transform: uppercase; font: 10pt/12pt 'Trade18', 'Arial'; } #userNav form h6 { padding: 1px 7px 0 0; } #userNav div > h6 { position: relative; margin-top: 4px; padding-top: 7px; padding: 7px 0 0 18px; height: 24px; border-left: 1px solid rgba(217,212,207,.75); } #userNav h6 a { color: inherit; } #userNav h6 a:after { position: absolute; display: block; width: 31px; height: 30px; right: -38px; top: 1px; background: url(../images/ui-circleArrows31by30.png) no-repeat right top; content:' '; text-indent: -9999px; } #userNav label { position: relative; display: block; float: left; height: 16px; padding: 1px 4px 2px 4px; background-color: rgb(246,194,79); font: 10pt/12pt 'BoBold', 'Arial'; color: rgb(57,57,57); } #userNav label a { position: absolute; white-space: nowrap; left: 0; bottom: -10px; font: italic 5pt arial; color: white; } #userNav input { display: block; float: left; height: 15px; width: 105px; padding: 0 2px 2px 2px; margin-right: 9px; background-color: rgb(247,242,237); border: 1px solid rgb(246,194,79); font-size: 8pt; } #userNav button { position: relative; float: left; width: 31px; height: 30px; margin: -5px 18px 0 0; padding: 0; background: url(../images/ui-circleMustard31by30.png); border: none; font: 10pt/12pt 'BoBold', 'Arial'; color: rgb(57,57,57); } #userNav button span { display: block; position: absolute; left: -3px; top: -10px; width: inherit; } /* Header Styles -------------------------------------------------------------------------*/ #header { float: left; width: 794px; margin-top: -4px; padding-left: 8px; background: url(../images/headerL.png) no-repeat left top; text-transform: uppercase; font: 11pt/13pt 'BoBold', 'Arial'; color: rgb(35,31,32); } #header > div { padding-right: 16px; background: url(../images/headerR.png) no-repeat right top; } #header > div > div { height: 85px; background: url(../images/header.png) repeat-x left top; } #header a { color: rgb(35,31,32); } #header h5 { float: left; clear: both; height: 17px; margin: -3px 0 10px 30px; padding: 6px 18px 6px 13px; background: url(../images/effectsCorner.gif) no-repeat right bottom rgb(246,194,79); font: 11pt/13pt 'Trade18', 'Arial'; color: rgb(87,87,87); } #header h2 { height: 20px; } #header h2.active { background-color: rgb(246,194,79); border-bottom: 2px solid rgb(246,194,79); } #header h2 a { background: url(../images/effects-mustardCarrot.gif) no-repeat 9999px center; display: block; height: 25px; padding: 1px 5px 2px; } #header h2.active a { background-position: bottom center; } #header ul, #header h2 { float: right; clear: right; border-top: 1px dotted rgb(35,31,32); border-bottom: 1px dotted rgb(35,31,32); } #header ul { float: left; clear: left; margin: 0; margin-left: 20px; padding: 1px 5px 2px 2px; list-style: none; } #header li { float: left; padding-left: 14px; } #header li:first-child { padding-left: 0; } /* Header Directory by Tag -------------------------------------------------------------------------*/ .specialityWrap { display: none; float: left; clear: both; overflow: hidden; height: 123px; width: 751px; margin: -16px 0 5px 7px; padding: 6px 0 6px 28px; font-size: 7pt; line-height: 8pt; color: white; } .specialityWrap.active { display: block; } #ArtWrap { background-color: rgb(130,193,85); } #DramaWrap, #TheatreWrap { background-color: rgb(248,156,62); } #MusicWrap { background-color: rgb(99,185,210); } #DanceWrap { background-color: rgb(240,86,90); } #DesignWrap { background-color: rgb(29,185,162); } #FilmWrap { background-color: rgb(147,74,129); } #LiteratureWrap { background-color: rgb(190,57,109); } .specialityWrap p { padding: 10px 3px; font-size: 8pt; font-style: italic; } .specialityWrap ul { display: none; float: left; width: 114px; margin: 0; margin: 3px 10px 0 0; list-style: none; } .specialityWrap ul.active { display: block; } .specialityWrap li a { display: block; padding: 0 3px 0 3px; } .specialityWrap li a:hover { background-color: rgba(0,0,0,.3); } .specialityWrap .changer { float: right; display: block; white-space: nowrap; font-size: 8pt; margin: 10px; } .specialityWrap a { color: white; } /* Header Directory -------------------------------------------------------------------------*/ #listing { display: none; float: left; clear: both; width: 779px; margin: -17px 0 5px 7px; } #listing nav { display: block; width: 100%; text-align: center; font: 9pt/11pt 'BoBold', 'Arial'; color: rgb(57,57,57); } #listing nav ul { padding-left: 19px; } #listing nav li { float: left; margin-right: -1px; /* padding: 8px 0 10px 0; */ text-transform: uppercase; } #listing nav li.active { background-color: rgb(57,57,57); color: white; } #listing nav li a { display: block; border-left: 1px solid rgb(57,57,57); border-right: 1px solid transparent; padding: 10px; color: inherit; } #listing nav li:hover { background-color: rgba(0,0,0,0.2); } #listing nav li.open:hover { background-color: rgb(57,57,57); } #listing nav li:first-child a { border-color: transparent; } #listing > div { background-color: rgb(246,194,79); height: 155px; overflow: hidden; padding: 0 0 0 28px; margin:0 0 10px 0; font-size: 7pt; line-height: 9pt; position: relative; } #listing > div a { color: inherit; display:block; padding:0px;} #listing > div > div { display: none; position: absolute; width: 751px; top: 0; left: 0; padding-left:28px; height:100%; } #listing > div > div ul { display: none; float: left; width: 111px; margin: 3px 10px 0 0; padding: 0; list-style: none; } #listing .changer { display: block; position: absolute; right: -118px; bottom: 9px; font-size: 8pt; color: rgb(173,143,90); } #listing p { padding: 10px 0; font-size: 8pt; font-style: italic; } /* Footer Styles -------------------------------------------------------------------------*/ #footer { display: block; float: left; width: 100%; padding: 7px 0 20px 0; border-top: 2px solid rgb(87,87,87); font: 8pt/10pt Arial; color: rgb(35,31,32); } #footer ul { display: block; float: left; list-style: none; margin: 0; } #footer li { float: left; } #footer a { color: rgb(35,31,32); } #footer a:hover { text-decoration: underline; } #footer span { display: inline-block; padding: 0 7px; } #footer p { float: right; text-align: right; } /* Top Navigation -------------------------------------------------------------------------*/ #topNav { position: relative; float: right; clear: both; margin-bottom: -21px; font: 11pt/13pt 'Trade18', 'Arial'; text-transform: uppercase; color: rgb(87,87,87); } #topNav ul{ float: right; margin: 0; list-style: none; } #topNav li { float: left; padding-top: 9px; } #topNav li a { color: rgb(87,87,87); } #topNav li a:hover { color: rgb(35,31,32); } #topNav span { display: inline-block; padding: 0 8px; } #topNav h6 { float: right; margin: -34px 11px 0 0; background: no-repeat 3px 3px; } #topNav h6 a { display: block; width: 85px; height: 87px; background: url(../images/MembersSticker.png) left -175px; text-indent: -9999px; text-align: center; font: 12pt/14pt 'BoBook', 'Arial'; color: rgb(246,194,79); text-transform: uppercase; } #topNav h6 a.noAvatar { background-position: left -88px; } #topNav h6#loginToggler a { width: 90px; height: 45px; padding-top: 43px; background-position: left top; text-indent: 0; } /* Left Navigation -------------------------------------------------------------------------*/ #leftNav { display: block; float: left; margin: 17px -14px 0 0; } #leftNav h1 a { position: relative; display: block; width: 172px; height: 133px; margin: 0 0 2px 5px; background: url(../images/logo.gif); text-indent: -9999px; } #leftNav ul { margin: 0; list-style: none; } #leftNav .priNav > li { padding-bottom: 5px; } #leftNav .priNav > li > a { display: block; width: 116px; height: 28px; padding: 3px 14px 0 34px; background: url(../images/navBanner-0e0d0d.png); text-align: right; text-transform: lowercase; font: 12pt/14pt 'BoBold', 'Arial'; color: white; } #leftNav .priNav > li.active > a,#leftNav .priNav > li > a:hover { color: rgb(246,194,79); } #leftNav .secNav { display: none; width: 127px; margin: -1px 0 3px 26px; text-align: right; } #leftNav li.active > .secNav { display: block; } #leftNav .secNav > li { font: 12pt/14pt 'Trade18', 'Arial'; } #leftNav .secNav > li > a { display: block; padding: 4px 4px 3px 4px; background-color: rgb(247,242,237); text-transform: uppercase; } #leftNav .secNav > li.active > a { background-color: rgb(151,151,151); } #leftNav .secNav > li.active.Art > a { background-color: rgb(130,193,85); } #leftNav .secNav > li.active.Drama > a, #leftNav .secNav > li.active.Theatre > a { background-color: rgb(248,156,62); } #leftNav .secNav > li.active.Music > a { background-color: rgb(99,185,210); } #leftNav .secNav > li.active.Dance > a { background-color: rgb(240,86,90); } #leftNav .secNav > li.active.Design > a { background-color: rgb(29,185,162); } #leftNav .secNav > li.active.Film > a { background-color: rgb(147,74,129); } #leftNav .secNav > li.active.Literature > a { background-color: rgb(190,57,109); } #leftNav .secNav > li > a { color: rgb(65,64,66); } #leftNav .secNav > li.active > a { color: white; } #leftNav .terNav { border-bottom: 1px dotted rgb(87,87,87); font: 10pt/12pt 'Trade18', 'Arial'; } #leftNav li:last-child > .terNav { border-bottom: none; } #leftNav .terNav li a { display: block; padding: 2px 4px 1px 4px; background-color: rgb(247,242,237); color: rgb(87,87,87); } #leftNav .terNav li.active a { background-color: rgb(246,194,79); } #leftNav h2 a { display: block; width: 163px; height: 120px; background: url(../images/logo2.gif); text-indent: -9999px; } /* Headline & Breadcrumbs -------------------------------------------------------------------------*/ #headline { padding: 0 23px 0 19px; } #headline h1 { float: left; margin-top: 4px; border: 1px solid rgb(246,194,79); border-right: none; text-transform: uppercase; font: bold 17pt/19pt Arial; } #headline h1 span { float: right; display: block; height: 31px; margin: -1px -13px 0 0; padding: 9px 23px 0 14px; background: url(../images/effectsH1edge.gif) no-repeat top right; } #headline h5 { float: right; width: 49px; height: 51px; background: url(https://www.artsinmilwaukee.org/assets/images/effectsSpeechBubble-youre_viewing.gif); text-indent: -9999px; } #headline #nav, #headline nav { float: right; margin-top: 25px; border-top: 1px dotted rgb(35,31,32); } #headline ul { float: right; margin: -14px 0 0 0; list-style: none; } #headline li { float: left; margin-right: -4px; padding-left: 7px; background: url(../images/effectsChevron.gif) no-repeat left -540px; font: 11pt/13pt 'Trade18', 'Arial'; text-transform: uppercase; } #headline li.active { background-position: left -567px; } #headline a { display: block; float: left; padding-right: 7px; background: url(../images/effectsChevron.gif) no-repeat right -27px; color: rgb(87,87,87); } #headline li.active a { background-position: right -54px; } #headline li span { display: block; float: left; height: 21px; padding: 4px 3px 0 5px; background-color: white; border-top: 1px solid rgb(190,190,190); border-bottom: 1px solid rgb(190,190,190); } #headline li.active span { background-color: rgb(246,194,79); border-color: rgb(207,167,81); } /* Callouts -------------------------------------------------------------------------*/ #calloutWrap { float: left; width: 792px; margin: 0 0 16px -4px; } #rightCalloutWrap { float: right; width: 252px; } body.bios #rightCalloutWrap { margin: 35px 4px 0 0; } .callout { float: left; padding-bottom: 14px; padding-bottom: 16px; background: url(../images/CalloutBot.png) no-repeat left bottom; text-align: center; } a:hover .callout, .callout:hover { background-position: right bottom; } #calloutWrap .callout { margin-right: 2px; } #rightCalloutWrap .callout { margin-left: 1px; } .callout > div { padding-top: 12px; padding-top: 15px; background: url(../images/CalloutTop.png) no-repeat left top; } a:hover .callout > div, .callout:hover > div { background-position: right top; } .callout > div > div { background: url(../images/Callout.png) repeat-y left top; width: 220px !important; height: 109px; padding: 0 21px; } a:hover .callout > div > div, .callout:hover > div > div { background-position: right top; } .callout h5, .callout h6 { width: 221px; background: no-repeat left top; text-indent: -9999px; } .callout h5 { height: 74px; margin-bottom: 7px; } .callout h6 { height: 96px; } a:hover .callout h5, a:hover .callout h6 { background-position: right top; } .callout p { width: 238px; margin-left: -10px; font: 11pt/13pt Trade18, Arial; text-transform: uppercase; color: rgb(87,87,87); } a:hover .callout p { color: rgb(247,242,237); } #calloutWrap .callout.newsletter { display: none; } .callout.newsletter div div { height: auto; padding-bottom: 6px; } .callout.newsletter h3 { display: block; padding: 3px 0 4px 0; font: 19pt/21pt 'BoBold', 'Arial'; text-transform: uppercase; color: rgb(246,194,79); } .callout.newsletter:hover h3 { color: rgb(247,242,237); } .callout.newsletter h4 { display: block; padding: 1px 0 5px 0; border: 1px solid rgb(150,150,150); border-right: none; border-left: none; font: 17pt/19pt 'BoBold', 'Arial'; text-transform: lowercase; color: rgb(87,87,87); } .callout.newsletter h5, .callout.newsletter h6 { width: auto; height: auto; background: none; text-indent: 0; } .callout.newsletter ul { list-style: none; margin: 0; padding: 0; } .callout.newsletter li { padding: 9px 4px 11px; border-bottom: 1px dotted rgb(150,150,150); } .callout.newsletter li:last-child { border-bottom: none; } .callout.newsletter h6 { margin-bottom: 3px; font: 14pt/16pt 'BoBold', 'Arial'; text-transform: lowercase; color: rgb(246,194,79); } .callout.newsletter:hover h6 { color: rgb(247,242,237); } .callout.newsletter p { width: auto; margin-left: 0; text-align: left; text-transform: uppercase; color: rgb(87,87,87); } .callout.newsletter h5 { margin: 6px 0 0 0; padding: 1px 0 5px 0; border: 1px solid rgb(150,150,150); border-right: none; border-left: none; font: 17pt/19pt 'BoBold', 'Arial'; text-transform: lowercase; color: rgb(87,87,87); } #rightCalloutWrap .feature { position: relative; float: left; padding-top: 9px; background: url(../images/FeatureTop.png) no-repeat left top; text-align: center; } #rightCalloutWrap .feature > div { padding-bottom: 33px; background: url(../images/FeatureBot.png) no-repeat left bottom; } #rightCalloutWrap .feature > div > div { width: 282px; background: url(../images/Feature.png) repeat-y; } #rightCalloutWrap .feature span { display: block; position: absolute; width: 15px; height: 13px; left: 4px; bottom: 18px; background: url(../images/effectsCorner2.gif); } #rightCalloutWrap .feature img { float: left; margin: 2px 0 -8px 11px; } #rightCalloutWrap .feature p { display: block; float: right; clear: both; width: 255px; margin: 14px 16px -8px 0; text-align: right; color: rgb(135,135,135); } #rightCalloutWrap .feature a { color: inherit; } #rightCalloutWrap .feature a:hover { color: rgb(87,87,87); } #rightCalloutWrap hr { float: left; padding: 0; margin: 4px 0 5px 5px; width: 100%; border: none; border-top: 1px dotted rgb(35,31,32); background: none; } #calloutWrap hr { display: none; } body.bios #rightCalloutWrap hr:first-child { display: none; } /* Homepage Styles -------------------------------------------------------------------------*/ #homeFeatures { padding: 50px 0 0 22px; } .homeCol { float: left; width: 250px; } .Bubble { float: left; margin-right: -5px; margin-bottom: -4px; padding-top: 8px; background: url(../images/BubbleTop.gif) 1px top no-repeat; } .Bubble > div { padding-bottom: 17px; background: url(../images/BubbleBot.gif) 1px bottom no-repeat; } .Bubble > div > div { width: 248px; background: url(../images/Bubble.gif); } .BubbleSm { float: left; margin-right: -5px; margin-bottom: -4px; padding-top: 8px; background: url(../images/BubbleSmTop.gif) 1px top no-repeat; } .BubbleSm > div { padding-bottom: 17px; background: url(../images/BubbleSmBot.gif) 1px bottom no-repeat; } .BubbleSm > div > div { width: 127px; background: url(../images/BubbleSm.gif); } .Bubble a, .BubbleSm a { display: block; padding: 0 7px 0 5px; } .Bubble .section { width: 220px; } .BubbleSm .section { width: 99px; } .Bubble .section, .BubbleSm .section { position: relative; float: left; padding: 6px 8px; margin: -4px 0 2px 0; height: 100px; color: white; font: 10pt/13pt 'sans-serif', 'Arial'; text-shadow:rgba(0,0,0,0.5) 0 1px 1px; } /* 'BoBold' */ .Bubble .section, .BubbleSm .section { color:#000; text-shadow:rgba(255,255,255,0.5) 0 1px 1px; } .Bubble .section p, .BubbleSm .section p { visibility:hidden; } .Bubble a:hover p, .BubbleSm a:hover p { visibility:visible; } .Bubble img, .BubbleSm img, .Bubble .imgWrap, .BubbleSm .imgWrap { position: absolute; top: 0; left: 0; border: 4px solid white; border-bottom-width: 5px; overflow: hidden; } .Bubble a:hover img, .BubbleSm a:hover img, .Bubble a:hover .imgWrap, .BubbleSm a:hover .imgWrap { opacity: 0.15; } .Bubble p, .BubbleSm p { padding-bottom: 9px; z-index:9999;} .Bubble .section span, .BubbleSm .section span { font: 9pt/10pt 'Arial'; } .Bubble.art .section, .BubbleSm.art .section { background-color: rgb(130,193,85); } .Bubble.drama .section, .BubbleSm.drama .section, .Bubble.theatre .section, .BubbleSm.theatre .section { background-color: rgb(248,156,62); } .Bubble.music .section, .BubbleSm.music .section { background-color: rgb(99,185,210); } .Bubble.dance .section, .BubbleSm.dance .section { background-color: rgb(240,86,90); } .Bubble.design .section, .BubbleSm.design .section { background-color: rgb(29,185,162); } .Bubble.film .section, .BubbleSm.film .section { background-color: rgb(147,74,129); } .Bubble.lit .section, .BubbleSm.lit .section, .Bubble.literature .section, .BubbleSm.literature .section { background-color: rgb(190,57,109); } .Bubble h5, .BubbleSm h5 { position: relative; padding: 0 24px 4px 4px; font: 8pt/8pt 'Trade18', 'Arial'; } .Bubble.art h5, .BubbleSm.art h5 { color: rgb(130,193,85); } .Bubble.drama h5, .BubbleSm.drama h5, .Bubble.theatre h5, .BubbleSm.theatre h5 { color: rgb(248,156,62); } .Bubble.music h5, .BubbleSm.music h5 { color: rgb(99,185,210); } .Bubble.dance h5, .BubbleSm.dance h5 { color: rgb(240,86,90); } .Bubble.design h5, .BubbleSm.design h5 { color: rgb(29,185,162); } .Bubble.film h5, .BubbleSm.film h5 { color: rgb(147,74,129); } .Bubble.lit h5, .BubbleSm.lit h5, .Bubble.literature h5, .BubbleSm.literature h5 { color: rgb(190,57,109); } .Bubble h5 span, .BubbleSm h5 span { display: inline-block; padding-right: 6px; text-transform: uppercase; } .Bubble h5 em, .BubbleSm h5 em { color: rgb(87,87,87) !important; white-space: nowrap; font-family: 'BoBold', 'Arial'; font-style: normal; font-size: 7pt; } .Bubble small, .BubbleSm small { background: url(../images/icons-arrows.gif); display: block; position: absolute; right: 6px; bottom: 3px; width: 12px; height: 8px; text-indent: -9999px; } .Bubble.art small, .BubbleSm.art small { background-position: left 0; } .Bubble.drama small, .BubbleSm.drama small, .Bubble.theatre small, .BubbleSm.theatre small { background-position: left -8px; } .Bubble.music small, .BubbleSm.music small { background-position: left -16px; } .Bubble.dance small, .BubbleSm.dance small { background-position: left -24px; } .Bubble.design small, .BubbleSm.design small { background-position: left -32px; } .Bubble.film small, .BubbleSm.film small { background-position: left -40px; } .Bubble.lit small, .BubbleSm.lit small, .Bubble.literature small, .BubbleSm.literature small { background-position: left -48px; } #homeFeatures .featured { float: left; clear: both; width: 238px; margin: 5px 0 8px 5px; padding: 3px 0; /* border-top: 1px dotted rgb(35,31,32); border-bottom: 1px dotted rgb(35,31,32); */ text-align: center; font: 12pt/13pt 'BoBold', 'Arial'; color: rgb(87,87,87); } #homeFeatures .featured > div { text-shadow:#f6da9c 0 1px 0; position: relative; /* height: 98px; */ padding: 6px; background-color: rgb(246,194,79); } #homeFeatures .featured > div > img { position: absolute; top: 0; left: 0; width: 14px; height: 12px; } #homeFeatures .featured a img { width: 228px; /* height: 80px; */ } /* Listing Styles -------------------------------------------------------------------------*/ #page { float: left; margin: 18px 0 11px 21px; padding-top: 9px; background: url(../images/PageTop.gif) no-repeat left top; } #page > div { padding-bottom: 22px; background: url(../images/PageBot.gif) no-repeat left bottom; } #page > div > div { width: 738px; padding: 7px 0 27px 33px; background: url(../images/Page.gif) repeat-y left top; } #page > div > div > div { float: left; width: 211px; margin-right: 35px; } #page h2 { float: left; clear: both; height: 21px; margin: 0 0 12px -24px; padding: 0 0 3px 13px; background: url(../images/effectsRibbon.gif) no-repeat left -144px; font: 12pt/14pt 'BoBook', 'Arial'; color: white; } body.Art #page h2 { background-position: left -24px; } body.Drama #page h2, body.Theatre #page h2 { background-position: left -48px; } body.Music #page h2 { background-position: left -72px; } body.Dance #page h2 { background-position: left -96px; } body.Design #page h2 { background-position: left -120px; } body.Film #page h2 { background-position: left -144px; } body.Literature #page h2 { background-position: left -168px; } #page h2 span { display: block; width: 210px; height: 18px; padding: 3px 0 0 12px; background-color: rgb(147,74,129); border-bottom: 1px solid rgba(147,74,129,.65); border-right: 1px solid rgba(147,74,129,.65); text-tranform: uppercase; } body.Art #page h2 span { background-color: rgb(130,193,85); border-color: rgba(130,193,85,.65); } body.Drama #page h2 span, body.Theatre #page h2 span { background-color: rgb(248,156,62); border-color: rgba(248,156,62,.65); } body.Music #page h2 span { background-color: rgb(99,185,210); border-color: rgba(99,185,210,.65); } body.Dance #page h2 span { background-color: rgb(240,86,90); border-color: rgba(240,86,90,.65); } body.Design #page h2 span { background-color: rgb(29,185,162); border-color: rgba(29,185,162,.65); } body.Film #page h2 span { background-color: rgb(147,74,129); border-color: rgba(147,74,129,.65); } body.Literature #page h2 span { background-color: rgb(190,57,109); border-color: rgba(190,57,109,.65); } #page ul { list-style: none; padding: 0; margin: 0; line-height: 14pt; } #page ul.events li { padding-bottom: 17px; } #page a { color: inherit; } #relatedSearches { margin: 0 11px 0 30px; } #relatedSearches h3 { padding-bottom: 3px; border-bottom: 1px dotted rgba(35,31,32,.65); } #relatedSearches ul { list-style: none; margin: 0; padding: 9px 0 0 8px; } #relatedSearches li { float: left; margin-bottom: 10px; } #relatedSearches li a { display: block; padding-left: 7px; background: url(../images/effectsChevron.gif) no-repeat left -810px; color: inherit; } body.Art #relatedSearches li a { background-position: left -837px; color: rgb(130,193,85); } body.Drama #relatedSearches li a, body.Theatre #relatedSearches li a { background-position: left -864px; color: rgb(248,156,62); } body.Music #relatedSearches li a { background-position: left -891px; color: rgb(99,185,210); } body.Dance #relatedSearches li a { background-position: left -918px; color: rgb(240,86,90); } body.Design #relatedSearches li a { background-position: left -945px; color: rgb(29,185,162); } body.Film #relatedSearches li a { background-position: left -972px; color: rgb(147,74,129); } body.Literature #relatedSearches li a { background-position: left -999px; color: rgb(190,57,109); } #relatedSearches a > span { display: block; padding-right: 7px; background: url(../images/effectsChevron.gif) no-repeat right -297px; } body.Art #relatedSearches a > span { background-position: right -324px; } body.Drama #relatedSearches a > span, body.Theatre #relatedSearches a > span { background-position: right -351px; } body.Music #relatedSearches a > span { background-position: right -378px; } body.Dance #relatedSearches a > span { background-position: right -405px; } body.Design #relatedSearches a > span { background-position: right -432px; } body.Film #relatedSearches a > span { background-position: right -459px; } body.Literature #relatedSearches a > span { background-position: right -486px; } #relatedSearches a > span > span { display: block; height: 17px; padding: 4px 2px 4px 7px; border-top: 1px solid rgb(186,186,185); border-bottom: 1px solid rgb(186,186,185); text-transform: uppercase; font: 11pt/13pt 'Trade18', 'Arial'; } body.Art #relatedSearches a > span > span { border-color: rgb(180,208,160); } body.Drama #relatedSearches a > span > span, body.Theatre #relatedSearches a > span > span { border-color: rgb(232,191,150); } body.Music #relatedSearches a > span > span { border-color: rgb(167,205,215); } body.Dance #relatedSearches a > span > span { border-color: rgb(229,161,162); } body.Design #relatedSearches a > span > span { border-color: rgb(132,204,193); } body.Film #relatedSearches a > span > span { border-color: rgb(189,156,180); } body.Literature #relatedSearches a > span > span { border-color: rgb(208,147,171); } /* Join Page -------------------------------------------------------------------------*/ #joinForm { margin: 15px 0 0 22px; color: rgb(87,87,87); } /* #joinForm section.inactive { opacity: 0.75; } */ #joinForm section { padding-top: 20px; background: url(../images/MembersJoin-Top.png) no-repeat left top; } #joinForm section > div { padding-bottom: 22px; background: url(../images/MembersJoin-Bot.png) no-repeat left bottom; } #joinForm section > div > div { position: relative; padding: 9px 300px 6px 21px; background-image: url(../images/MembersJoin.png); } #joinForm aside { position: absolute; top: 0; right: 20px; width: 212px; height: auto; padding-left: 35px; background: url(../images/MembersJoin-Pointer.png) no-repeat left center; font-size: 9pt; line-height: 14pt; } #joinForm hr { margin: 16px 0 19px 0; padding: 0; border: none; border-top: 1px dotted rgb(35,31,32); } #joinForm h3 { float: left; clear: both; position: relative; padding: 0 0 18px 44px; text-transform: uppercase; font: 12pt/14pt 'Trade18', 'Arial'; } #joinForm h3 span { display: block; position: absolute; left: -14px; top: -30px; width: 49px; height: 53px; background: url(../images/MembersJoin-Steps.png); text-indent: -9999px; } #joinForm .step2 h3 span { background-position: left -53px; } #joinForm .step3 h3 span { background-position: left -106px; } #joinForm h4 { float: left; margin: -7px 0 14px -10px; padding: 0 12px 2px 0; background: url(../images/effectsRibbon.gif) no-repeat right -192px; text-transform: uppercase; font: 12pt/14pt 'BoBold', 'Arial'; color: white; } #joinForm h4 span { display: block; width: 205px; height: 21px; padding: 1px 0 0 10px; border-bottom: rgba(85,85,85,.5); background-color: rgb(85,85,85); } #joinForm aside p { padding-bottom: 19px; } #joinForm label, #joinForm .label { display: block; float: left; width: 180px; padding-bottom: 3px; text-transform: uppercase; font: 9pt/11pt 'BoBook', 'Arial'; } #joinForm label.error, #joinForm .label.error { color: red; } #joinForm .step3 label, #joinForm .step3 .label { width: auto; } #joinForm .step1 label { margin-right: 22px; } #joinForm input[type='text'], #joinForm input[type='email'], #joinForm input[type='password'], #joinForm textarea { width: 100%; height: 16px; padding: 2px; border: 1px solid rgb(87,87,87); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; background-color: rgb(250,247,245); } #joinForm input[type='checkbox'], #joinForm input[type='radio'] { display: none; } #joinForm .checkbox { position: relative; display: block; float: left; width: 65px; margin: 0 10px 1px 0; padding-left: 15px; font: 8pt/10pt 'Trade18', 'Arial'; cursor: pointer; } #joinForm .step3 .checkbox { clear: both; width: inherit; } #joinForm .checkbox small { position: absolute; display: block; top: -1px; left: 0; width: 13px; height: 13px; background-image: url(../images/Forms-RadioButtons.png); } #joinForm .checkbox.active small { background-position: left -13px; } #joinForm .checkbox.active.Art small { background-position: left -26px; } #joinForm .checkbox.active.Drama small, #joinForm .checkbox.active.Theatre small { background-position: left -39px; } #joinForm .checkbox.active.Music small { background-position: left -52px; } #joinForm .checkbox.active.Dance small { background-position: left -65px; } #joinForm .checkbox.active.Design small { background-position: left -78px; } #joinForm .checkbox.active.Film small { background-position: left -91px; } #joinForm .checkbox.active.Literature small { background-position: left -104px; } #joinForm .checkbox em { display: inline-block; width: 36px; font-style: normal; } #joinForm textarea { height: 135px; } #joinForm button, .form_button { position: relative; float: left; height: 23px; padding: 2px 14px 4px 14px; border: none; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background-color: rgb(87,87,87); box-shadow: 2px 2px .7em rgba(0,0,0,.3) inset; -webkit-box-shadow: 2px 2px .7em rgba(0,0,0,.3) inset; -moz-box-shadow: 2px 2px .7em rgba(0,0,0,.3) inset; font: 11pt/13pt 'BoBold', 'Arial'; text-transform: lowercase; color: rgb(250,247,245); } #joinForm div > button, #joinForm .option { margin-top: 19px; } #joinForm button.arrow { padding-right: 36px; } #joinForm button small { display: block; position: absolute; right: 10px; top: 7px; width: 17px; height: 11px; background-image: url(../images/icons-arrowBW.png); text-indent: -9999px; } #joinForm .option { display: block; float: left; padding: 3px 9px; font: 12pt/14pt 'Trade18', 'Arial'; } #joinForm p.bracket { float: right; width: 200px; height: 73px; margin-top: 23px; padding: 50px 6px 0 28px; background: url(../images/icons-curlyBracket.png) no-repeat; text-transform: uppercase; font: 7pt/9pt 'Trade18', 'Arial'; } #joinForm h5 { clear: both; float: left; width: 100%; /* width: 453px; */ margin: 9px 0 9px -4px; padding-left: 4px; border-bottom: 1px dotted rgb(87,87,87); text-transform: uppercase; font: bold 12pt/15pt 'Trade18', 'Arial'; } #joinForm h6 { position: relative; float: right; width: 200px; padding-right: 6px; text-transform: uppercase; font: 7pt/9pt 'Trade18', 'Arial'; } #joinForm h6 small { display: block; position: absolute; left: -28px; top: 6px; width: 17px; height: 11px; background: url(../images/icons-arrowBW.png) left bottom; text-indent: -9999px; } #joinForm .picBox { float: right; width: 59px; height: 71px; margin-right: -6px; padding-top: 28px; padding: 28px 20px 0 20px; border: 1px solid rgb(87,87,87); text-align: center; font: 7pt/9pt 'Trade18', 'Arial'; text-transform: lowercase; } #joinForm .select { position: relative; float: left; height: 20px; margin-right: 6px; padding: 0 22px 0 0; border: 1px solid rgb(87,87,87); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; background-color: rgb(250,247,245); overflow: hidden; font: 8pt/10pt Arial; color: rgb(87,87,87); cursor: pointer; } #joinForm .select.active { overflow: visible; padding-right: 0; } #joinForm .select ul { float: left; margin: 0; padding: 0; list-style: none; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } #joinForm .select.active ul { background-color: rgb(250,247,245); } #joinForm .select ul li { padding: 4px 4px 3px 4px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } #joinForm .select.active ul li { padding-right: 26px; } #joinForm .select button { position: absolute; top: -1px; right: -1px; padding: 0; margin: 0; border: none; border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; width: 23px; height: 21px; background: url(../images/Forms-SelectArrow.gif) no-repeat center center rgb(87,87,87); text-indent: -9999px; cursor: pointer; } #joinForm .select.active button { display: none; } #joinForm button, .button {} /* Profiles Landing Page -------------------------------------------------------------------------*/ #browseArtists ul.pro { /* display: none; */ margin: 19px 0 0 17px; list-style: none; float:left; width:724px; } #browseArtists ul.pro.active { display: block; } #browseArtists ul.pro li { position: relative; float: left; width: 110px; height: 110px; margin: 0 8px 8px 0; background: no-repeat center center; } #browseArtists ul.pro a { display: block; width: inherit; height: inherit; color: transparent; } #browseArtists ul.pro a { -webkit-transition:all 300ms ease-in-out; } #browseArtists ul.pro a:hover { background-color: rgba(0,0,0,.75); color: white; } #browseArtists ul.pro li.Art a:hover { background-color: rgba(130,193,85,.75); } #browseArtists ul.pro li.Drama a:hover, #browseArtists ul.pro li.Theatre a:hover { background-color: rgba(248,156,62,.75); } #browseArtists ul.pro li.Music a:hover { background-color: rgba(99,185,210,.75); } #browseArtists ul.pro li.Dance a:hover { background-color: rgba(240,86,90,.75); } #browseArtists ul.pro li.Design a:hover { background-color: rgba(29,185,162,.75); } #browseArtists ul.pro li.Film a:hover { background-color: rgba(147,74,129,.75); } #browseArtists ul.pro li.Literature a:hover { background-color: rgba(190,57,109,.75); } #browseArtists ul.pro span { position: absolute; display: block; right: 5px; bottom: 3px; width: 100px; } #browseArtists ul.pro h6 { padding-top: 12px; font-size: 12pt; line-height: 13pt; text-transform: uppercase; overflow:hidden; text-overflow:ellipsis; } #browseArtists li.clicker { width: 108px; height: 108px; border: 2px solid rgb(246,194,79); background-color: rgba(246,194,79,.35); } #browseArtists li.clicker img { opacity: .35; } #browseArtists li.clicker small { position: absolute; top: 38px; left: 31px; width: 45px; height: 29px; background: url(../images/profiles-ui.gif) left top; text-indent: -9999px; } /* Profiles Landing Page -------------------------------------------------------------------------*/ #workViewer { opacity: 0; position: relative; float: left; width: 741px; height: 310px; overflow: hidden; margin: 14px 0 14px 26px; } #workViewer ul { width: 1120px; position: absolute; list-style: none; margin: 0; } #workViewer li { position: relative; float: left; margin-right: 3px; } #workViewer img { height: 310px; opacity: .2; } #workViewer li.active img { opacity: 1; } #workViewer li p { position: absolute; top: 96px; width: 100%; text-align: center; } #workViewer li button.controllers { display: none; width: 103px; height: 103px; margin: 0; border: none; background: url(../images/profiles-play.png); text-indent: -9999px; cursor: pointer; } #workViewer li.active { display: inline-block; } #workViewer > button { position: relative; width: 45px; height: 29px; margin-top: 129px; border: none; background: url(../images/profiles-arrows.png); text-indent: -9999px; } #workViewer button.previous { float: left; margin-left: 9px; } #workViewer button.next { float: right; margin-right: 9px; background-position: right top; } #workViewer button.previous:hover { background-position: left bottom; } #workViewer button.next:hover { background-position: right bottom; } #profileHeader { position: relative; float: left; padding-right: 14px; margin: 20px 0 0 18px; background: url(../images/profiles-infoBoxHeader.gif) no-repeat top right; } #profileHeader > div { width: 580px; height: 61px; background-color: rgb(205,207,196); } #profileHeader h1 { float: left; width: 185px; margin-top: 8px; font-size: 21pt; line-height: 19pt; font-weight: bold; text-transform: uppercase; } #profileHeader.group h1 { float: right; width: 423px; margin-top: 10px; } #profileHeader h2 { float: left; margin: -17px 8px 0 -13px; background: no-repeat 7px 5px; } #profileHeader h2 span { display: block; height: 96px; width: 92px; background: url(../images/MembersSticker.png) left -358px; text-indent: -9999px; } #profileHeader h2.noAvatar span { background-position: left -262px; } #profileHeader h4 { float: left; margin-top: 36px; font: 13pt/15pt 'Trade18', 'Arial'; text-transform: uppercase; color: black; } #profileHeader.group h4 { float: right; width: 221px; margin-top: 1px; } #profileHeader h4 span { float: left; } #profileHeader ul { float: left; margin: 0 6px 0 0; list-style: none; } #profileHeader li { float: left; width: 17px; height: 17px; margin-right: 2px; background: url(../images/profiles-dots.gif); text-indent: -9999px; } #profileHeader li.Art { background-position: left -34px; } #profileHeader li.Drama, #profileHeader li.Theatre { background-position: left -51px; } #profileHeader li.Music { background-position: left -68px; } #profileHeader li.Dance { background-position: left -85px; } #profileHeader li.Design { background-position: left -102px; } #profileHeader li.Film { background-position: left -119px; } #profileHeader li.Literature { background-position: left -136px; } #profileHeader h4 em { font-style: normal; } #profileHeader h4.Art em { color: rgb(130,193,85); } #profileHeader h4.Drama em, #profileHeader h4.Theatre em { color: rgb(248,156,62); } #profileHeader h4.Music em { color: rgb(99,185,210); } #profileHeader h4.Dance em { color: rgb(240,86,90); } #profileHeader h4.Design em { color: rgb(29,185,162); } #profileHeader h4.Film em { color: rgb(147,74,129); } #profileHeader h4.Literature em { color: rgb(190,57,109); } #profileHeader h5 { position: absolute; right: -160px; top: -26px; width: 100px; height: 100px; background: url(../images/MembersSticker.png) left -536px; } #profileHeader h5 a { display: block; width: 100px; height: 100px; background: url(../images/effectsStickerText.gif) left -100px; text-indent: -9999px; } #profileHeader h6 { position: absolute; right: -211px; top: 30px; width: 58px; height: 62px; background: url(../images/effectsSpeechBubble-were_a_group.png); text-indent: -9999px; } #profileBasicInfo { float: left; margin: -95px 0 0 -4px; padding-top: 8px; background: url(../images/profiles-infoBoxTop.png) no-repeat left top; text-align: right; font-size: 10pt; line-height: 14pt; color: rgb(151,151,151); } #profileBasicInfo > div { padding-bottom: 37px; background: url(../images/profiles-infoBoxBot.png) no-repeat left bottom; } #profileBasicInfo > div > div { width: 268px; padding: 74px 18px 0 9px; background: url(../images/profiles-infoBox.png) repeat-y left top; } #profileBasicInfo section { padding: 12px 20px 10px 0; border-bottom: 2px dotted rgb(151,151,151); } #profileBasicInfo section.events { border: none;} #profileBasicInfo h5 { clear: both; font-size: 10pt; line-height: 14pt; text-transform: uppercase; color: rgb(87,87,87); } #profileBasicInfo .socialNetworks h5 { float: right; padding-top: 5px; } #profileBasicInfo ul { clear: both; margin: 0; list-style: none; } #profileBasicInfo .socialNetworks ul { float: right; } #profileBasicInfo .socialNetworks li { float: left; margin-left: 4px; } #profileBasicInfo .events li { padding-bottom: 7px; } #profileBasicInfo img { float: right; clear: both; margin-bottom: 13px; } #profileBasicInfo a { font-weight: bold; color: inherit; } #profileBasicInfo a:hover { color: rgb(65,64,66); } #profileBasicInfo .twitter a, #profileBasicInfo .fb a, #profileBasicInfo .google a, #profileBasicInfo .behance a, #profileBasicInfo .flickr a, #profileBasicInfo .tumblr a { display: block; width: 26px; height: 26px; background: url(../images/icons-socialMedia_26by26.gif); text-indent: -9999px; color: transparent; overflow:hidden; } #profileBasicInfo .fb a { background-position: 0 -26px; } #profileBasicInfo .google a { background-position: left bottom; } #profileBasicInfo h6 { float: right; margin-bottom: -13px; font: 11pt/13pt 'Trade18', 'Arial'; text-transform: uppercase; color: rgb(87,87,87); } #profileBasicInfo h6 a { float: left; display: block; padding-left: 7px; background: url(../images/effectsChevron.gif) no-repeat left -810px; } #profileBasicInfo h6 a > span { float: left; display: block; padding-right: 7px; background: url(../images/effectsChevron.gif) no-repeat right -297px; } #profileBasicInfo h6 span span { float: left; display: block; height: 21px; padding: 4px 3px 0 5px; border-top: 1px solid rgb(190,190,190); border-bottom: 1px solid rgb(190,190,190); } #profile { float: right; width: 450px; margin: -18px 15px 0 0; font-size: 9pt; line-height: 11pt; } #profile h2 { float: left; clear: both; margin: 15px 0 10px -12px; padding: 0 13px 3px 0; background: url(../images/effectsRibbon.gif) no-repeat right -192px; font: 12pt/14pt 'BoBook', 'Arial'; text-tranform: uppercase; color: white; } #profile h2 span { display: block; width: 457px; height: 18px; padding: 3px 0 0 12px; background-color: rgb(86,87,87); border-bottom: 1px solid rgba(86,87,87,.65); border-right: 1px solid rgba(86,87,87,.65); } #profile p { padding-bottom: 14px; } #profile ul { list-style: none; margin: 0 0 14px 0; } /* Classifieds -------------------------------------------------------------------------*/ .featuredClassifiedsWrap { margin: 18px 0 0 27px; } .featuredClassified { display: block; float: left; border: 2px dotted rgb(151,151,151); border-top: none; border-left: none; color: rgb(87,87,87); } .featuredClassified.lastRow { border-bottom: none; } .featuredClassified.last { border-right: none; } .featuredClassified > div { float: left; margin: 1px 1px 1px 3px; padding-top: 9px; background: url(../images/AdvertSmTop.gif) left top no-repeat; } .featuredClassified.firstRow > div { margin-top: -4px; } .featuredClassified.lastRow > div { margin-bottom: -6px; } .featuredClassified.first > div { margin-left: -4px; } .featuredClassified.last > div { margin-right: -6px; } .featuredClassified:hover > div { background-position: right top; } .featuredClassified > div > div { padding-bottom: 21px; background: url(../images/AdvertSmBot.gif) left bottom no-repeat; } .featuredClassified:hover > div > div { background-position: right bottom; } .featuredClassified > div > div > div { position: relative; width: 159px; height: 225px; padding: 1px 13px 0 11px; background: url(../images/AdvertSm.gif) left top repeat-y; } .featuredClassified:hover > div > div > div { background-position: right top; } .featuredClassified a { color: rgb(87,87,87); } .featuredClassified a.listing { position: absolute; display: block; left: 14px; bottom: 37px; width: 153px; } .featuredClassified.pic a.listing { bottom: 31px; } .featuredClassified.pic a.listing:after { bottom: 137px; } .featuredClassified a.listing span.nopic { display: block; width: 144px; margin: 0 9px 27px -4px; padding: 7px 0 3px 0; background-color: rgba(202,202,186,1); font-size: 12pt; line-height: 14pt; text-transform: uppercase; text-align: center; font-weight: bold; content:'No Photo'; } .featuredClassified a.listing span.nopic:after { display: block; position: absolute; top: 1px; right: -7px; width: 19px; height: 30px; background: url(../images/effectsRibbonLrg.png) no-repeat top left; content: ' '; text-indent: -9999px; } .featuredClassified h6 { padding-bottom: 6px; font-size: 12pt; line-height: 14pt; font-weight: bold; }/* dasfasdfsfd */ .featuredClassified p { padding-bottom: 13px; font-size: 9pt; line-height: 11pt; } .featuredClassified img { width: 160px; margin: 0 0 8px -4px; } .featuredClassified a.viewAll { position: absolute; display: block; left: 18px; bottom: -3px; width: 138px; height: 25px; background-color: rgba(205,207,196,1); border: 1px solid rgb(175,177,169); border-left: none; border-right: none; white-space: nowrap; text-align: center; text-transform: uppercase; font: 11pt/20pt 'Trade18', 'Arial'; } .featuredClassified a.viewAll:hover { background-color: rgb(246,194,79); } .featuredClassified a.viewAll:before, .featuredClassified a.viewAll:after { position: absolute; display: block; top: -1px; width: 7px; height: 27px; background: url(../images/effectsChevron.gif) no-repeat; content:' '; text-indent:-9999px; } .featuredClassified a.viewAll:before { left: -7px; background-position: left -513px; } .featuredClassified a.viewAll:hover:before { background-position: left -567px; } .featuredClassified a.viewAll:after { right: -7px; background-position: left top; } .featuredClassified a.viewAll:hover:after { background-position: left -54px; } a.viewAll { position: absolute; display: block; left: 18px; bottom: -3px; width: 138px; height: 25px; background-color: rgba(205,207,196,1); border: 1px solid rgb(175,177,169); border-left: none; border-right: none; white-space: nowrap; text-align: center; text-transform: uppercase; font: 11pt/20pt 'Trade18', 'Arial'; } a.viewAll:hover { background-color: rgb(246,194,79); } a.viewAll:before, a.viewAll:after { position: absolute; display: block; top: -1px; width: 7px; height: 27px; background: url(../images/effectsChevron.gif) no-repeat; content:' '; text-indent:-9999px; } a.viewAll:before { left: -7px; background-position: left -513px; } a.viewAll:hover:before { background-position: left -567px; } a.viewAll:after { right: -7px; background-position: left top; } a.viewAll:hover:after { background-position: left -54px; } /* Classified - Jobs -------------------------------------------------------------------------*/ #jobListings { margin: 17px 19px 0 16px; } #jobListings .header { margin-bottom: 4px; padding: 2px 0 3px 11px; font: 11pt/13pt 'Trade18', 'Arial'; text-transform: uppercase; font-weight: bold; background-color: rgb(246,194,79); } #jobListings .header span { display: block; float: left; margin-right: 10px; } #jobListings .header span.title { width: 328px; padding-left: 5px; } #jobListings .header span.org { width: 178px; } #jobListings .header span.location { width: 113px; } #jobListings .header span.date { width: 64px; margin-right: 0; text-align: right; } #jobListings .position { border-bottom: 1px dotted rgb(87,87,87); } #jobListings .position > div { float: left; margin: 5px 0 4px -4px; padding-top: 9px; background: url(../images/AdvertTop.gif) no-repeat left top; font-size: 10pt; line-height: 13pt; color: rgb(87,87,87); } #jobListings a:hover .position > div { background-position: right top; } #jobListings .position > div > div { padding-bottom: 21px; background: url(../images/AdvertBot.gif) no-repeat left bottom; } #jobListings a:hover .position > div > div { background-position: right bottom; } #jobListings .position > div > div > div { width: 718px; min-height: 76px; padding: 3px 17px 0 15px; background: url(../images/Advert.gif) repeat-y left top; } #jobListings a:hover .position > div > div > div { background-position: right top; } #jobListings .position h3 { margin: 3px 0 12px 0; } #jobListings .position span { display: block; float: left; margin-right: 10px; } #jobListings .position span.title { width: 333px; font-size: 12pt; } #jobListings .position span.org { width: 178px; } #jobListings .position span.location { width: 113px; } #jobListings .position span.date { width: 64px; margin-right: 0; text-align: right; } /* Classified - Materials -------------------------------------------------------------------------*/ #smAdvertWrap { margin: 18px 0 0 27px; } .advertSm { display: block; float: left; border: 2px dotted rgb(151,151,151); border-top: none; border-left: none; color: rgb(87,87,87); } .advertSm.lastRow { border-bottom: none; } .advertSm.last { border-right: none; } .advertSm > div { float: left; margin: 1px 1px 1px 3px; padding-top: 9px; background: url(../images/AdvertSmTop.gif) left top no-repeat; } .advertSm.firstRow > div { margin-top: -4px; } .advertSm.lastRow > div { margin-bottom: -6px; } .advertSm.first > div { margin-left: -4px; } .advertSm.last > div { margin-right: -6px; } .advertSm:hover > div { background-position: right top; } .advertSm > div > div { padding-bottom: 21px; background: url(../images/AdvertSmBot.gif) left bottom no-repeat; } .advertSm:hover > div > div { background-position: right bottom; } .advertSm > div > div > div { width: 159px; height: 225px; padding: 1px 13px 0 11px; background: url(../images/AdvertSm.gif) left top repeat-y; } .advertSm:hover > div > div > div { background-position: right top; } .advertSm img { width: 159px; margin-bottom: 7px; } .advertSm .noPhoto { float: left; display: block; height: 32px; margin: 50px 0 43px 0; padding-right: 20px; background: url(../images/AdvertRibbon.png) no-repeat top right; } .advertSm .noPhoto em { float: left; display: block; width: 139px; height: 22px; padding-top: 7px; text-align: center; background-color: rgba(204,205,195,.96); font-size: 12pt; line-height: 14pt; text-transform: uppercase; font-weight: bold; } .advertSm h6 { padding-bottom: 9px; text-align: right; font-size: 8pt; line-height: 10pt; } .advertSm h5 { padding-bottom: 6px; font-size: 11pt; line-height: 13pt; font-weight: bold; } .advertSm p { max-height: 64px; overflow: hidden; font-size: 10pt; line-height: 12pt; } /* Classifieds - Materials - Post -------------------------------------------------------------------------*/ .materialsListing { float: left; margin: 17px 0 8px 15px; padding-top: 9px; background: url(../images/AdvertTop.gif) no-repeat left top; font-size: 9pt; line-height: 11pt; color: rgb(87,87,87); } .materialsListing > div { padding-bottom: 21px; background: url(../images/AdvertBot.gif) no-repeat left bottom; } .materialsListing > div > div { width: 710px; padding: 0 21px 0 19px; background: url(../images/Advert.gif) repeat-y left top; } .materialsListing .imageWrap { width: 724px; } .materialsListing h3 { margin: 0 0 8px -3px; padding: 23px 3px 14px 3px; border-bottom: 1px dotted rgb(87,87,87); font-size: 11pt; line-height: 13pt; } .materialsListing p { padding-bottom: 17px; } .materialsListing p:last-child { padding-bottom: 0; } .materialsListing a { color: inherit; text-decoration: underline; } .materialsListing img { float: left; /* width: 165px; height: 119px; */ margin: 10px 10px 0 0; } .otherListings { float: left; width: 488px; margin-left: 39px; } .otherListings h3 { margin: 0 0 13px -6px; padding: 4px 10px; border-bottom: 1px dotted rgb(115,115,115); } .otherListings section { float: left; width: 108px; margin-right: 14px; font-size: 8pt; line-height: 10pt; color: rgb(87,87,87); } .otherListings h6 { padding-bottom: 2px; font-weight: bold; text-transform: uppercase; } .otherListings img { /* width: 110px; height: 76px; */ margin-left: -2px; } .otherListings a.previous { float: left; clear: both; margin: 22px 0 0 -14px; } /* About - Bios -------------------------------------------------------------------------*/ #bioWrap { position: relative; width: 736px; height: 197px; overflow: hidden; margin: 19px 23px 7px 16px; } #bioWrap a { color: rgb(87,87,87); } #bioSlider { position: absolute; height: 197px; } .bio { position: relative; float: left; margin-right: 11px; padding-top: 16px; background: url(../images/BioTop.gif) no-repeat left top; opacity: .4; text-align: center; color: rgb(87,87,87); } .bio.active, a:hover .bio { background-position: right top; opacity: 1; } .bio > div { padding-bottom: 7px; background: url(../images/BioBot.gif) no-repeat left bottom; } .bio.active > div, a:hover .bio > div { background-position: right bottom; } .bio > div > div { width: 130px; height: 174px; padding: 0 10px 0 8px; background: url(../images/Bio.gif) repeat-y left top; } .bio.active > div > div, a:hover .bio > div > div { background-position: right top; } .bio img { float: left; clear: both; width: 130px; height: 142px; margin: -7px 0 2px 0; } .bio h5 { clear: both; margin-bottom: 2px; white-space: nowrap; font: 10pt/12pt 'BoBold', 'Arial'; text-transform: lowercase; border-bottom: 1px dotted rgb(172,172,172); } .bio h6 { clear: both; white-space: nowrap; font: 10pt/12pt 'Trade18', 'Arial'; text-transform: uppercase; } .bio span { display: block; position: absolute; left: 3px; top: 3px; width: 13px; height: 12px; background: url(../images/BioCorner.gif); } body.bios #mainSection h3 { position: relative; float: right; clear: both; width: 83px; height: 82px; margin: -38px -14px -44px 0; background: url(../images/MembersSticker.png) left -454px; } body.bios #mainSection h3 span { display: block; width: inherit; height: inherit; background: url(../images/Bio-JobTitles.gif); text-indent: -9999px; } body.bios #mainSection h3.ExecutiveDirector span { background-position: left top; } body.bios #mainSection h3.OutreachManager span { background-position: left -82px; } body.bios #mainSection h3.GraphicDesigner span { background-position: left -164px; } body.bios #mainSection h3.ArtDirector span { background-position: left -246px; } body.bios #mainSection h3.VolunteerCoordinator span { background-position: left -328px; } body.bios #mainSection h3.AdministrativeAssistant span { background-position: left -410px; } body.bios #mainSection h3.ATHTeam span { background-position: left -498px; } body.bios #mainSection h3.BTCTeam span { background-position: left -574px; } body.bios #mainSection h3.Curator span { background-position: left -656px; } body.bios #mainSection h3.TheaterTeam span { background-position: left -738px; } body.bios #mainSection h3.MusicTeam span { background-position: left -820px; } body.bios #mainSection h3.FilmTeam span { background-position: left -902px; } body.bios #mainSection h3.DevelopmentChair span { background-position: left -984px; } body.bios #mainSection h3.BoardPresident span { background-position: left -1066px; } body.bios #mainSection h3.BoardVicePresident span { background-position: left -1148px; } body.bios #mainSection h3.BoardTreasurer span { background-position: left -1230px; } body.bios #mainSection h3.BoardSecretary span { background-position: left -1312px; } body.bios #mainSection h3.BoardMember span{ background-position: left -1394px; } body.bios #mainSection h3.MediaTeam span { background-position: left -1476px; } /* Events - Calendar -------------------------------------------------------------------------*/ #specialEvent { float: left; background: url(../images/Box710Top.gif) no-repeat left top; padding-top: 9px; margin-left: 28px; color: rgb(87,87,87); } a:hover #specialEvent { background-position: right top; } #specialEvent > div { background: url(../images/Box710Bot.gif) no-repeat left bottom; padding-bottom: 21px; } a:hover #specialEvent > div { background-position: right bottom; } #specialEvent > div > div { width: 612px; padding: 5px 28px 0 80px; background: url(../images/Box710.gif) left top; } a:hover #specialEvent > div > div { background-position: right top; } #specialEvent img { float: left; margin: 3px 50px 0 -62px; } #specialEvent h2 { float: right; clear: right; margin: 0 10px 10px -62px; } #specialEvent p { padding-bottom: 6px; } #specialEvent h6 { display: block; float: left; clear: right; width: 55px; margin-left: -60px; text-align: right; font-weight: bold; } #specialEvent .arrowOutline { float: right; margin: 20px 12px 0 0; } #calendarToggler { float: left; margin: 22px 0 0 44px; color: rgb(87,87,87); } #calendarToggler h6 { float: left; margin-right: 5px; padding-top: 8px; font: 9pt/11pt 'Trade18', 'Arial'; text-transform: uppercase; } #calendarToggler ul { float: right; margin: 0; list-style: none; } #calendarToggler li { float: left; margin-right: 5px; } #calendarToggler a { display: block; width: 30px; height: 29px; background: url(../images/CalendarToggler.gif); text-indent: -9999px; } #calendarToggler li.calendar a { background-position: left top; } #calendarToggler li.calendar.active a { background-position: right top; } #calendarToggler li.list a { background-position: left -29px; } #calendarToggler li.list.active a { background-position: right -29px; } #calendarToggler li.single a { background-position: left -58px; } #calendarToggler li.single.active a { background-position: right -58px; } /* Events - Calendar - Normal View -------------------------------------------------------------------------*/ .Calendar { position: relative; float: left; padding-top: 11px; background: url(../images/CalendarTop.gif) no-repeat 1px top; } .Calendar > div { padding-bottom: 27px; background: url(../images/CalendarBot.gif) no-repeat left bottom; } .Calendar > div > div { width: 711px; padding: 0 8px 0 5px; background: url(../images/Calendar.gif) repeat-y left top; } .Calendar .corner { background: url(../images/CalendarCorner.gif); position: absolute; right: 0; bottom: 2px; display: block; width: 31px; height: 22px; } .Calendar h2 { padding: 4px 0 9px 0; border-bottom: 3px solid rgb(94,94,94); text-align: center; font: 20pt/22pt 'BoBold', 'Arial'; text-transform: uppercase; } .Calendar h2 a { display: block; width: 26px; height: 25px; margin: 1px 9px; background: url(../images/CalendarArrows.gif); text-indent: -9999px; } .Calendar h2 a.calPrevious { float: left; background-position: left top; } .Calendar h2 a.calNext { float: right; background-position: right top; } .Calendar .cal { float: left; margin: 0 0 -19px 0; list-style: none; font-size: 9pt !important; line-height: 11pt !important; } .Calendar .cal > li { position: relative; float: left; width: 100px; height:100px; padding-bottom:6px; border: 2px dotted rgb(151,151,151); border-top: none; border-left: none; } .Calendar .cal > li.last { width: 99px; border-right: none; } .Calendar .cal > li.lastRow { border-bottom: none; } .Calendar .clicker { display: block; width: 88px; height: 73px; padding: 2px 6px; color: inherit; } .Calendar .last .clicker { width: 87px; } .Calendar .active .clicker { background-color: rgba(246,194,79,.5); } .Calendar .clicker > h4 { margin-bottom: 4px; font-size: 10pt; line-height: 12pt; } .Calendar .cal .clicker > h6.art { color: rgb(130,193,85); } .Calendar .cal .clicker > h6.drama, .Calendar .cal .clicker > h6.theatre { color: rgb(248,156,62); } .Calendar .cal .clicker > h6.music { color: rgb(99,185,210); } .Calendar .cal .clicker > h6.dance { color: rgb(240,86,90); } .Calendar .cal .clicker > h6.design { color: rgb(29,185,162); } .Calendar .cal .clicker > h6.film { color: rgb(147,74,129); } .Calendar .cal .clicker > h6.lit, .Calendar .cal .clicker > h6.literature { color: rgb(190,57,109); } .Calendar .cal { float: left; margin: 0 0 -19px 0; list-style: none; font-size: 7pt; line-height: 9pt; } .Calendar .cal > li { position: relative; float: left; width: 100px; height: 77px; border: 2px dotted rgb(151,151,151); border-top: none; border-left: none; } .Calendar .cal > li.last { width: 99px; border-right: none; } .Calendar .cal > li.lastRow { border-bottom: none; } .Calendar .clicker { display: block; width: 88px; height: 73px; padding: 2px 6px; color: inherit; } .Calendar .last .clicker { width: 87px; } .Calendar .active .clicker { background-color: rgba(246,194,79,.5); } .Calendar .clicker > h4 { margin-bottom: 4px; font-size: 10pt; line-height: 12pt; } .Calendar .cal .clicker > h6.art { color: rgb(130,193,85); } .Calendar .cal .clicker > h6.drama, .Calendar .cal .clicker > h6.theatre { color: rgb(248,156,62); } .Calendar .cal .clicker > h6.music { color: rgb(99,185,210); } .Calendar .cal .clicker > h6.dance { color: rgb(240,86,90); } .Calendar .cal .clicker > h6.design { color: rgb(29,185,162); } .Calendar .cal .clicker > h6.film { color: rgb(147,74,129); } .Calendar .cal .clicker > h6.lit, .Calendar .cal .clicker > h6.literature { color: rgb(190,57,109); } /* Events - Calendar - List View -------------------------------------------------------------------------*/ .CalendarListingHeading { float: left; margin: 0 0 4px 1px; padding-left: 11px; background: url(../images/CalendarListingHeadingLeft.gif) no-repeat left 1px; } .CalendarListingHeading > div { padding-right: 11px; background: url(../images/CalendarListingHeadingRight.gif) no-repeat right 1px; } .CalendarListingHeading > div > div { width: 702px; height: 62px; background: url(../images/CalendarListingHeading.gif); } .CalendarListingHeading h2 { padding-top: 15px; text-align: center; font: 20pt/22pt 'BoBold', 'Arial'; text-transform: uppercase; } .CalendarListingHeading a { display: block; width: 26px; height: 25px; margin-top: 16px; background: url(../images/CalendarArrows.gif); text-indent: -9999px; } .CalendarListingHeading a.calPrevious { float: left; background-position: left top; } .CalendarListingHeading a.calNext { float: right; background-position: right top; } body.events_listview .dottedWrap hr { float: left; clear: both; width: 712px; margin: 2px 0 9px 11px; border: none; border-top: 1px dotted rgb(151,151,151); } .CalendarListing { position: relative; float: left; clear: both; width: 722px; margin-left: 6px; padding: 24px 0 18px 0; background: url(../images/CalendarListBot.gif) no-repeat left bottom; font-size: 9pt; line-height: 11pt; } .CalendarListing:last-child { margin-bottom: -6px; } .CalendarListing > div { width: 710px; padding: 0 8px 0 4px; background: url(../images/CalendarList.gif) repeat-y left 24px; } .CalendarListing > div > span { position: absolute; right: 5px; bottom: 6px; display: block; width: 13px; height: 12px; background: url(../images/CalendarListCorner.gif); } .CalendarListing h3 { float: left; width: 684px; height: 22px; margin-top: -24px; padding: 1px 14px; background-color: rgba(210,143,0,.55); font: 12pt/15pt 'BoBold', 'Arial'; } .CalendarListing ul { margin: 0; padding-top: 8px; list-style: none; } .CalendarListing li { position: relative; } .CalendarListing li.none { padding: 1px 14px 2px 14px; font-style: italic; } .CalendarListing a.basicInfo { display: block; position: relative; float: left; width: 684px; padding: 1px 14px 2px 14px; color: rgb(87,87,87); } .CalendarListing li:last-child a.basicInfo { margin-bottom: -4px; } .CalendarListing li.active a.basicInfo, .CalendarListing li:hover a.basicInfo { background-color: rgb(204,205,195); } .CalendarListing li.art a.basicInfo { color: rgb(130,193,85); } .CalendarListing li.drama a.basicInfo, .CalendarListing theatre a.basicInfo { color: rgb(248,156,62); } .CalendarListing li.music a.basicInfo { color: rgb(99,185,210); } .CalendarListing li.dance a.basicInfo { color: rgb(240,86,90); } .CalendarListing li.design a.basicInfo { color: rgb(29,185,162); } .CalendarListing li.film a.basicInfo { color: rgb(147,74,129); } .CalendarListing li.lit a.basicInfo, .CalendarListing li.literature a.basicInfo { color: rgb(190,57,109); } .CalendarListing li.active a.basicInfo { background-color: rgb(204,205,195); } .CalendarListing a.basicInfo > span { display: block; float: left; margin-right: 5px; } .CalendarListing span.time { width: 100px; } .CalendarListing span.title { width: 205px; } .CalendarListing span.description { width: 340px; } .CalendarListing small { display: block; float: right; width: 15px; height: 9px; margin-top: 3px; background-image: url(../images/icons-arrows15by9.png); text-indent: -9999px; } .CalendarListing li.art small { background-position: left -9px; } .CalendarListing li.drama small, .CalendarListing li.theatre small { background-position: left -18px; } .CalendarListing li.music small { background-position: left -27px; } .CalendarListing li.dance small { background-position: left -36px; } .CalendarListing li.design small { background-position: left -45px; } .CalendarListing li.film small { background-position: left -54px; } .CalendarListing li.lit small { background-position: left -63px; } /* Events - Calendar - Detailed Listing (on Calendar and Listing page) -------------------------------------------------------------------------*/ .CalEvent { display: none; position: absolute; z-index: 100; padding-top: 6px; background: url(../images/CalEventTop.png) no-repeat 1px top ; } .CalEventList .list li .CalEvent { left: -150px; top: -9px; } .CalendarListing li .CalEvent { left: 56px; top: -54px; } .CalEventList .list li.active .CalEvent, .CalendarListing li.active .CalEvent { display: block; } .CalEvent > div { padding-bottom: 8px; background: url(../images/CalEventBot.png) no-repeat left bottom; } .CalEvent > div > div { position: relative; width: 389px; width: 341px; min-height: 71px; padding: 0 25px 0 23px; background: url(../images/CalEvent.png) repeat-y; } .CalEvent .pointer { display: block; position: absolute; right: -13px; top: 43px; width: 20px; height: 29px; background: url(../images/CalEventCorner.png); } .CalEvent h4 { float: left; margin: 6px 0 8px -12px; padding: 0 13px 2px 0; background: url(../images/effectsRibbon.gif) no-repeat right -192px; font: 12pt/14pt 'BoBold', 'Arial'; color: white; } li.art .CalEvent h4 { background-position: right -216px; } li.drama .CalEvent h4, li.theatre .CalEvent h4 { background-position: right -240px; } li.music .CalEvent h4 { background-position: right -264px; } li.dance .CalEvent h4 { background-position: right -288px; } li.design .CalEvent h4 { background-position: right -312px; } li.film .CalEvent h4 { background-position: right -336px; } li.lit .CalEvent h4 { background-position: right -360px; } .CalEvent h4 span { display: block; width: 343px !important; height: 21px; padding: 1px 0 0 10px; border-bottom: rgba(85,85,85,.5); background-color: rgb(85,85,85); } li.art .CalEvent h4 span { background-color: rgb(130,193,85); border-color: rgba(130,193,85,.65); } li.drama .CalEvent h4 span, li.theatre .CalEvent h4 span { background-color: rgb(248,156,62); border-color: rgba(248,156,62,.65); } li.music .CalEvent h4 span { background-color: rgb(99,185,210); border-color: rgba(99,185,210,.65); } li.dance .CalEvent h4 span { background-color: rgb(240,86,90); border-color: rgba(240,86,90,.65); } li.design .CalEvent h4 span { background-color: rgb(29,185,162); border-color: rgba(29,185,162,.65); } li.film .CalEvent h4 span { background-color: rgb(147,74,129); border-color: rgba(147,74,129,.65); } li.lit .CalEvent h4 span { background-color: rgb(190,57,109); border-color: rgba(190,57,109,.65); } .CalEvent h6 { float: left; clear: left; width: 35px; margin-bottom: 14px; text-align: right; white-space: nowrap; font-weight: bold; } .CalEvent p { float: right; clear: right; width: 300px; margin-bottom: 14px; } .CalEvent .nextLrg { float: left; margin: 0 -10px 2px 0; } .CalEvent a.arrow { display: block; float: right; margin-top: -2px; padding-left: 7px; background: url(../images/effectsChevron.gif) no-repeat left -810px; color: inherit; } li.art .CalEvent a.arrow { background-position: left -837px; /* color: rgb(130,193,85); */ } li.drama .CalEvent a.arrow, li.theatre .CalEvent a.arrow { background-position: left -864px; /* color: rgb(248,156,62); */ } li.music .CalEvent a.arrow { background-position: left -891px; /* color: rgb(99,185,210); */ } li.dance .CalEvent a.arrow { background-position: left -918px; /* color: rgb(240,86,90); */ } li.design .CalEvent a.arrow { background-position: left -945px; /* color: rgb(29,185,162); */ } li.film .CalEvent a.arrow { background-position: left -972px; /* color: rgb(147,74,129); */ } li.lit .CalEvent a.arrow { background-position: left -999px; /* color: rgb(190,57,109); */ } .CalEvent a.arrow > span { display: block; padding-right: 7px; background: url(../images/effectsChevron.gif) no-repeat right -297px; } li.art .CalEvent a.arrow > span { background-position: right -324px; } li.drama .CalEvent a.arrow > span, li.theatre .CalEvent a.arrow > span { background-position: right -351px; } li.music .CalEvent a.arrow > span { background-position: right -378px; } li.dance .CalEvent a.arrow > span { background-position: right -405px; } li.design .CalEvent a.arrow > span { background-position: right -432px; } li.film .CalEvent a.arrow > span { background-position: right -459px; } li.lit .CalEvent a.arrow > span { background-position: right -486px; } .CalEvent a.arrow > span > span { display: block; height: 17px; padding: 4px 2px 4px 7px; border-top: 1px solid rgb(186,186,185); border-bottom: 1px solid rgb(186,186,185); text-transform: uppercase; font: 11pt/13pt 'Trade18', 'Arial'; } li.art .CalEvent a.arrow > span > span { border-color: rgb(180,208,160); } li.drama .CalEvent a.arrow > span > span, li.theatre .CalEvent a.arrow > span > span { border-color: rgb(232,191,150); } li.music .CalEvent a.arrow > span > span { border-color: rgb(167,205,215); } li.dance .CalEvent a.arrow > span > span { border-color: rgb(229,161,162); } li.design .CalEvent a.arrow > span > span { border-color: rgb(132,204,193); } li.film .CalEvent a.arrow > span > span { border-color: rgb(189,156,180); } li.lit .CalEvent a.arrow > span > span { border-color: rgb(208,147,171); } /* Events - Calendar - On click list of events -------------------------------------------------------------------------*/ .CalEventList { display: none; position: absolute; z-index: 100; right: 97px; top: -26px; padding-top: 9px; background: url(../images/CalEventListTop.png) no-repeat left top; } .Calendar .cal > li.active .CalEventList { display: block; } .CalEventList > div { padding-bottom: 9px; background: url(../images/CalEventListBot.png) no-repeat left bottom; } .CalEventList > div > div { position: relative; width: 238px; width: 190px; min-height: 71px; padding: 0 25px 0 23px; background: url(../images/CalEventList.png) repeat-y; } .CalEventList > div > div > .pointer { display: block; position: absolute; right: -14px; top: 43px; width: 20px; height: 29px; background: url(../images/CalEventListPointer.png); } .CalEventList h4 { float: left; margin: 6px 0 6px -12px; padding: 0 13px 2px 0; background: url(../images/effectsRibbon.gif) no-repeat right -192px; font: 12pt/14pt 'BoBold', 'Arial'; color: white; } .CalEventList h4 span { display: block; width: 191px; height: 21px; padding: 1px 0 0 10px; border-bottom: rgba(85,85,85,.5); background-color: rgb(85,85,85); } .CalEventList .list { list-style: none; width: 227px; margin: 0 0 0 -18px; padding-bottom: 8px; font-size: 8pt; line-height: 10pt; } .CalEventList .list > li > a { display: block; padding: 2px 17px 1px; color: inherit; } .CalEventList .list > li > a:hover { background-color: rgba(204,205,195,1); } .CalEventList .list > li.art > a { color: rgb(130,193,85); } .CalEventList .list > li.drama > a, .CalEventList .list > li.theatre > a { color: rgb(248,156,62); } .CalEventList .list > li.music > a { color: rgb(99,185,210); } .CalEventList .list > li.dance > a { color: rgb(240,86,90); } .CalEventList .list > li.design > a { color: rgb(29,185,162); } .CalEventList .list > li.film > a { color: rgb(147,74,129); } .CalEventList .list > li.lit > a { color: rgb(190,57,109); } .CalEventList .list > li > a > small { display: inline-block; width: 15px; height: 9px; background-image: url(../images/icons-arrows15by9.png); text-indent: -9999px; } .CalEventList .list li.art > a > small { background-position: left -9px; } .CalEventList .list li.drama > a > small, .CalEventList .list li.theatre > a > small { background-position: left -18px; } .CalEventList .list li.music > a > small { background-position: left -27px; } .CalEventList .list li.dance > a > small { background-position: left -36px; } .CalEventList .list li.design > a > small { background-position: left -45px; } .CalEventList .list li.film > a > small { background-position: left -54px; } .CalEventList .list li.lit > a > small { background-position: left -63px; } /* Events - Individual Event Page -------------------------------------------------------------------------*/ #event { float: right; padding-top: 8px; background: url(../images/EventTop.png) no-repeat left top; } #event > div { padding-bottom: 8px; background: url(../images/EventBot.png) no-repeat left bottom; } #event > div > div { position: relative; width: 479px; padding: 0 14px 0 12px; background: url(../images/Event.png); } #event .pointer { display: block; position: absolute; top: 92px; right: -13px; width: 20px; height: 29px; background: url(../images/EventPointer.png); } #event h2 { float: left; margin: 4px 0 18px; padding: 0 13px 2px 0; background: url(../images/effectsRibbon.gif) no-repeat right -192px; font: 12pt/14pt 'BoBold', 'Arial'; text-transform: uppercase; color: white; } body.art #event h2 { background-position: right -216px; } body.drama #event h2, body.theatre #event h2 { background-position: right -240px; } body.music #event h2 { background-position: right -264px; } body.dance #event h2 { background-position: right -288px; } body.design #event h2 { background-position: right -312px; } body.film #event h2 { background-position: right -336px; } body.lit #event h2 { background-position: right -360px; } #event h2 span { display: block; width: 455px; height: 21px; padding: 1px 0 0 10px; border-bottom: rgba(85,85,85,.5); background-color: rgb(85,85,85); } body.art #event h2 span { background-color: rgb(130,193,85); border-color: rgba(130,193,85,.65); } body.drama #event h2 span, body.theatre #event h2 span { background-color: rgb(248,156,62); border-color: rgba(248,156,62,.65); } body.music #event h2 span { background-color: rgb(99,185,210); border-color: rgba(99,185,210,.65); } body.dance #event h2 span { background-color: rgb(240,86,90); border-color: rgba(240,86,90,.65); } body.design #event h2 span { background-color: rgb(29,185,162); border-color: rgba(29,185,162,.65); } body.film #event h2 span { background-color: rgb(147,74,129); border-color: rgba(147,74,129,.65); } body.lit #event h2 span { background-color: rgb(190,57,109); border-color: rgba(190,57,109,.65); } #event h4 { position: absolute; right: 27px; top: 35px; width: 100px; height: 100px; background: url(../images/MembersSticker.png) left -536px; } #event h4 a { display: block; width: inherit; height: inherit; background: url(../images/effectsStickerText.gif) left -100px; text-indent: -9999px; } #event h6 { float: left; width: 55px; text-align: right; font-weight: bold; } #event p { float: left; width: 396px; padding-bottom: 20px; margin-left: 8px; line-height:1.5em; } #event img { margin: -2px 17px 19px 0; } #EventSidebarWrap { float: right; margin: 0 20px 0 -7px; } #EventSidebar { clear: both; width: 235px; padding-top: 9px; background: url(../images/EventSidebar.png) no-repeat left top; text-align: right; color: white; font-size: 9pt; line-height: 14pt; } body.art #EventSidebar { background-position: -470px top; } body.drama #EventSidebar, body.theatre #EventSidebar { background-position: -940px top; } body.music #EventSidebar { background-position: -1410px top; } body.dance #EventSidebar { background-position: -2115px top; } body.design #EventSidebar { background-position: -2350px top; } body.film #EventSidebar { background-position: -2820px top; } body.lit #EventSidebar { background-position: -3290px top; } #EventSidebar > div { padding-bottom: 9px; background: url(../images/EventSidebar.png) no-repeat -235px bottom; } body.art #EventSidebar > div { background-position: -705px bottom; } body.drama #EventSidebar > div, body.theatre #EventSidebar > div { background-position: -1175px bottom; } body.music #EventSidebar > div { background-position: -1644px bottom; } body.dance #EventSidebar > div { background-position: -1880px bottom; } body.design #EventSidebar > div { background-position: -2585px bottom; } body.film #EventSidebar > div { background-position: -3055px bottom; } body.lit #EventSidebar > div { background-position: -3525px bottom; } #EventSidebar > div > div { width: 216px; padding: 0 6px 0 13px; background-color: rgba(0,0,0,.6); } body.art #EventSidebar > div > div { background-color: rgba(66,152,69,.6); } body.drama #EventSidebar > div > div, body.theatre #EventSidebar > div > div { background-color: rgba(243,123,33,.6); } body.music #EventSidebar > div > div { background-color: rgba(1,114,147,.6); } body.dance #EventSidebar > div > div { background-color: rgba(215,31,38,.6); } body.design #EventSidebar > div > div { background-color: rgba(0,163,138,.6); } body.film #EventSidebar > div > div { background-color: rgba(101,22,78,.6); } body.lit #EventSidebar > div > div { background-color: rgba(185,30,76,.6); } #EventSidebar .segment { padding: 12px 12px 9px; border-top: 1px dotted white; } #EventSidebar .segment:first-child { border: none; } #EventSidebar .socialMedia h6 { float: right; margin-top: 4px; } #EventSidebar .eventcopia h6 { float: right; clear: both; margin-top: -11px; } #EventSidebar ul { margin: 0; list-style: none; } #EventSidebar .similar ul { float: right; margin-bottom: -6px; } #EventSidebar li { } #EventSidebar a { font-weight: bold; color: inherit; } #EventSidebar .socialMedia a { display: block; float: right; width: 26px; height: 26px; margin-left: 5px; background: url(../images/icons-socialMedia_26by26.png); text-indent: -9999px; color: transparent; } #EventSidebar .socialMedia a.fb { background-position: left bottom; } #EventSidebar .eventcopia a { float: right; display: block; margin-top: 7px; padding-left: 7px; background: url(https://www.artsinmilwaukee.org/assets/images/effectsChevronOld.png) no-repeat left -486px; } #EventSidebar .eventcopia a > span { float: left; display: block; padding-right: 7px; background: url(https://www.artsinmilwaukee.org/assets/images/effectsChevronOld.png) no-repeat right top; } #EventSidebar .eventcopia span span { float: left; display: block; height: 20px; padding: 5px 3px 0 5px; border-top: 1px solid rgb(190,190,190); border-bottom: 1px solid rgb(190,190,190); background-color: white; font: 11pt/13pt Trade18, Arial; color: rgb(85,85,85); } /* Programs - Workshops -------------------------------------------------------------------------*/ .workshops { clear: both; margin: 0 !important; padding: 0 0 10px 10px !important; } .workshops li { } .workshops .art { color: rgb(130,193,85); } .workshops .theatre { color: rgb(248,156,62); } .workshops .music { color: rgb(99,185,210); } .workshops .dance { color: rgb(240,86,90); } .workshops .design { color: rgb(29,185,162); } .workshops .film { color: rgb(147,74,129); } .workshops .literature { color: rgb(190,57,109); } .workshops a { color: inherit; text-decoration: none; } .workshops h6 { display: inline-block; padding-right: 8px; font-size: 9pt; font-weight: bold; } .workshops em { display: inline-block; padding-right: 8px; font-size: 9pt; font-style: italic; color: rgb(87,87,87) !important; } .workshops span.addy { font-size: 9pt; color: rgb(87,87,87) !important; } .workshops small { display: block; float: right; width: 15px; height: 9px; margin: 4px -10px 0 0; background-image: url(../images/icons-arrows15by9.png); text-indent: -9999px; } .workshops li.art small { background-position: left -9px; } .workshops li.drama small, .workshops li.theatre small { background-position: left -18px; } .workshops li.music small { background-position: left -27px; } .workshops li.dance small { background-position: left -36px; } .workshops li.design small { background-position: left -45px; } .workshops li.film small { background-position: left -54px; } .workshops li.lit small { background-position: left -63px; } /* Subscribe -------------------------------------------------------------------------*/ #subscribe { width: 324px; } #subscribe label { display: block; clear: left; padding-bottom: 8px; text-transform: uppercase; font: 11pt/13pt 'Trade18', 'Arial'; } #subscribe .error { color: red; } #subscribe label.split { float: left; padding-right: 10px; clear: none; float: left; } #subscribe label.checkbox { font-size: 10pt; line-height: 12pt; } #subscribe input { display: block; width: 312px; margin-left: -4px; } #subscribe label.split input { width: 150px; } #subscribe label.checkbox input { position: relative; display: inline; top: -2px; width: auto; margin-left: 0; } #subscribe button { float: right; margin: 3px 10px 0 0; } /* Non-semantic helper classes -------------------------------------------------------------------------*/ /** * Non-semantic helper classes: please define your styles before this section. */ /* For image replacement */ .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } /* Hide for both screenreaders and browsers: css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden { display: none; visibility: hidden; } /* Hide only visually, but have it available for screenreaders: by Jon Neal. www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. j.mp/bestclearfix */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ .clearfix { zoom: 1; } .clear { clear: both; margin: 0; padding: 0; height: 0px; width: 0px; } /** * Media queries for responsive design. * * These follow after primary styles so they will successfully override. */ @media all and (orientation:portrait) { /* Style adjustments for portrait mode goes here */ } @media all and (orientation:landscape) { /* Style adjustments for landscape mode goes here */ } /* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ @media screen and (max-device-width: 480px) { /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */ /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ } /** * Print styles. * * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ a, a:visited { color: #444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } } #listing p.none_found { padding:2px 3px 2px 3px; margin:3px 0 0 0; text-shadow: 0 1px 0px rgba(255,255,255, 0.25); } #listing li a { padding: 2px 3px 2px 3px; text-shadow: 0 1px 0px rgba(255,255,255, 0.25); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .specialityWrap li a { display: block; padding: 2px 3px 2px 3px; border-radius:2px; } .specialityWrap { position:relative; padding-bottom:30px; margin-bottom:15px; } #leftNav h1 a { z-index: 1; } .specialityWrap .changer { position: absolute; bottom: 0; left: 0px; margin: 0; font-weight: normal; display: block; width: 100%; background: rgba(0, 0, 0, 0.3); padding: 5px; width: 769px; text-align: right; color:rgba(255,255,255,0.4); } #listing .changer { position: absolute; bottom: 0; left: 0px; margin: 0; font-weight: normal; display: block; width: 100%; background: rgba(0, 0, 0, 0.3); padding: 5px; width: 769px; text-align: right; color:rgba(255,255,255,0.4); } #listing .changer a { display:inline; color:white; } .specialityWrap .changer a { color:white; } #listing > div > #AWrap { display:block; } #AWrap .set1 { display:block; } .specialityWrap a { color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }