/*----------------------------------------------------------------------------- Axis Magazine Main Stylesheet author: Drive New Media, Inc. date: 8/12/09 -----------------------------------------------------------------------------*/ /* Colors: blue #0065CA; coolgrey #DBDFEC; warmgrey #998D84; */ /* =Reset Styles / Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;} /* Consistently resizes text and line-height across all browsers */ /*default font size from 16px to 10px */ body { font-size:62.5%; line-height:1.6em;text-align: center;color: #000;font-family: Helvetica, Arial, Verdana, sans-serif;background-color: #333;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ ins {text-decoration: none;} del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;} hr {border: none;border: 1px #ccc solid;margin: 10px 0;} a {color: #0065CA; text-decoration: none;} a:hover {color: #0065CA; text-decoration: underline;} /* -------------------------- HEADERS ------------------------------------ */ /*h1,h2,h3,h4,h5,h6 {text-transform:capitalize!important;}*/ h1 { font-size: 2.2em; line-height: 1em; color: #0065CA; } h2 { font-size: 1.7em; line-height: 1em; color: #000; } h2 a { color: #000; text-decoration:none; } h2 a:hover { color: #000; text-decoration:underline; } h3 { color: #0065CA; font-size: 1.5em; } h4 { color: #4d4d4d; font-size: 1.2em; font-weight: bold; } /* ------------------------- REUSED CLASSES ---------------------------- */ .left { float: left; } .right { float: right; padding-top:5px; } .clear { clear: both; } .generalpad { padding:20px; } .generalpadLR {padding:0 20px 10px 20px;} .generalpadLR p { line-height: 1.5em; } #posts .paginate { margin-left:20px;height:26px;} #photosMain .paginate { height:26px;} .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inherit; } /* for IE/Mac */ .frapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .d_block { display: block; } /* ------------------------- LAYOUT SECTIONS ------------------------------ */ /* wRapper Name */ #ODB { text-align: left; margin: 0 auto; padding:0 0 10px 0; width:958px; border:1px solid #333; background: #fff; } #container {text-align:left; margin:0 auto; width:940px; } #header { position: relative; width: 950px; height: 130px; margin-left: -10px; } #contentarea {clear:both; margin:0 auto; padding-top: 10px; width:940px;} #contentarea p {font-size:1.3em;padding:3px 0;} #maincolumn {float:left;width:640px;margin-right:20px;} #subcolumn {float:left;width:280px;} #homevideos { width: 640px; height: 386px; background-color: #CED0DB; display: block; margin-bottom:10px; } #posts { width: 640px; background-color: #CED0DB; margin-bottom:10px; padding-top:10px; } #pageHome #posts h1 {text-indent:-9999px;background:url(../images/h_axis_posts.gif) no-repeat left bottom;width:400px; margin:0 20px 10px 20px;} #posts h1 {margin:0 0 10px 0;} #posts .generalpadLR h1 {margin:10px 0 0 0;} #posts ul li {clear:both; padding:0 20px 10px 0px; margin: 0 20px; border-bottom: 1px #3A4370 solid; min-height:125px; margin-bottom:10px; } #posts ul li.last { border: none; } #posts li h2 {text-transform:uppercase; padding-bottom: 5px;} #posts li h2 span {text-transform:none;} #posts li h3 { font-size: 1.8em; font-weight: bold; } span.venue { font-style: italic; } #posts ul li img {float:left; margin:0 23px 10px 0; border:1px solid #666;} #posts div.hr { border:0; height:2px; width:640px; margin-bottom:10px;} #posts div.hr hr { display: none; } #photosMain { width: 640px; background-color: #dbdfec; margin-bottom:10px; padding:10px 0; } #photosMain h1 {margin:0 0 10px 0;} #photosMain .generalpadLR h1 {margin:10px 0 0 0;} #photosMain ul {padding:0 20px; } #photosMain ul li {display:inline; padding:0; margin-bottom:10px; } #photosMain li h2 {text-transform:uppercase;} #photosMain li h3 {padding:5px 0;} #photosMain ul li img { border:1px solid #666;margin:3px 1px 3px 0;} #photosMain div.hr {background: url(../images/bg_maincolumn_divider.gif) no-repeat top center;border:0;height:2px;width:640px;} #photosMain div.hr hr { display: none; } #flashcontent3 {padding-bottom:10px;} .pdfArchive { border-top: 40px #000 solid; margin-top: -20px; padding-top: 20px; } .comment {background-color:#fff;margin:0 5px;} #comment_entry {padding:10px 0;} #breadcrumbs { padding-left:20px;font-size:1.3em;padding-bottom:7px;} /* Search Fields */ #emailSignup { width: 280px; background: #61698D url(../images/css/bg_sidebarWidget.gif) top center repeat-y; margin-bottom:10px; } #email { padding:10px 10px 0 15px;width: 255px;} #emailinput {border: 1px;font-size: 10px;padding: 4px;width: 180px;} .go {background: url(../images/css/b_go.gif) no-repeat;border: 0;height: 27px;margin-left:10px;text-indent: -9999px;width: 38px; } input:focus {outline: 5px auto -webkit-focus-ring-color;outline-style: auto;outline-width: 5px;outline-color: -webkit-focus-ring; } #cover img {margin-left:11px;} #subcolumn hr { border:0;height:2px;width:280px;margin-bottom:10px;} /*#subcolumn #subsearch div.hr2 hr { display: none; }*/ #cover {padding:3px 0 23px 0;} #cover a img.example1 { padding: 5px; margin: 0 10px; } #cover a:hover img.example1 { background-color: #fff; } #subad { width: 280px;margin-bottom:10px; } #subphotos { width: 280px; background: #61698D url(../images/css/bg_sidebarWidget.gif) top center repeat-y; margin:10px 0; padding-bottom:0px; } #subphotos h1 {text-indent:-9999px;background:url(../images/h_onthescene.gif) no-repeat left bottom;margin:0 0 10px 12px;padding-top:10px;} #subphotos ul { padding:3px 12px; } #subphotos ul li { display:inline; padding-right:3px; } #subphotos hr { border-bottom: 1px #797067 solid; margin: 5px 12px 5px 12px; width: 255px; } #subphotos p {padding:3px 12px;} #subphotos a {color:#fff; font-size:.90em;} a.sideCol_ad { margin-bottom: 5px; display: block; } h7.sidebarWidgetBottom { background: url(../images/css/bg_sidebarWidget-bottom.gif) no-repeat bottom left; width: 280px; height: 11px; display: block; } #footer { font-size:1.3em;clear:both; width:940px; height:400px; background: url(../images/css/bg_footer.jpg); } #footer h3 {color:#fff;font-size:1.3em; margin-bottom:5px;} #footer a, #footer a:link, #footer a:visited { color:#fff; text-decoration:none; margin-bottom: 10px;} #footer a:hover { color:#fff; text-decoration:underline;} #footer a.padLeft { padding-left: 10px; } #footerad { margin-bottom:10px; } #network, #advertising { float:right; width:250px; margin-bottom: 15px; } #network h3, #advertising h3 {width:160px;} #social { float:left; width:940px;} #social h3 {width:570px;} #social .spacer { display: block; height: 300px; width: 55px; float: left; } #social img {vertical-align:middle;padding-right:5px;} #footer #footernav { clear:both;font-size:.88em;padding-top:10px; } #footer #footernav a { color:#000; font-weight:bold; } /*#### Main Navigation ####*/ ul#main_nav { text-align:left; background:url(../images/css/bg_navigation.jpg); position:absolute; width:665px; bottom: 35px; right: -13px; } ul#main_nav li { float:left; list-style-type:none; } ul#main_nav li a { height:33px; display:block; position:absolute; top:0; text-indent:-9999px; outline:none; } li#navHome a, li#navFestival a, li#navConference a, li#navMusic a, li#navFilm a, li#navSponsor a, li#navFaq a { background:url(../images/css/bg_navigation.jpg); } li#navHome a { background-position:0 0; width:75px; left:0; } li#navHome a:hover { background-position:0 33px; } body#pageHome li#navHome a { background-position:0 33px; } li#navFestival a { background-position:-75px 0; width:99px; left:75px; } li#navFestival a:hover { background-position:-75px 33px; } body#festival li#navFestival a { background-position:-75px 33px; } li#navConference a { background-position:-174px 0; width:133px; left:174px; } li#navConference a:hover { background-position:-174px 33px; } body#conference li#navConference a { background-position:-174px 33px; } li#navMusic a { background-position:-307px 0; width:105px; left:307px; } li#navMusic a:hover { background-position:-307px 33px; } body#music li#navMusic a { background-position:-307px 33px; } li#navFilm a { background-position:-412px 0; width:63px; left:412px; } li#navFilm a:hover { background-position:-412px 33px; } body#film li#navFilm a { background-position:-412px 33px; } li#navSponsor a { background-position:-475px 0; width:96px; left:475px; } li#navSponsor a:hover { background-position:-475px 33px; } body#sponsor li#navSponsor a { background-position:-475px 33px; } li#navFaq a { background-position:-571px 0; width:81px; left:571px; } li#navFaq a:hover { background-position:-571px 33px; } body#faq li#navFaq a { background-position:-571px 33px; } /*#### HEADING REPLACEMENT ####*/ h2#festival { background: url(../images/css/h_festival.gif) no-repeat top left; text-indent: -9999px; width: 170px; height: 16px; } h2#conference { background: url(../images/css/h_conference.gif) no-repeat top left; text-indent: -9999px; width: 205px; height: 16px; } h2#film { background: url(../images/css/h_film.gif) no-repeat top left; text-indent: -9999px; width: 110px; height: 16px; } h2#music { background: url(../images/css/h_music.gif) no-repeat top left; text-indent: -9999px; width: 125px; height: 17px; } h1#signUp { background: url(../images/css/h_signUp.gif) no-repeat top left; text-indent: -9999px; width: 280px; height: 27px; } h1#onTheScene { background: url(../images/css/h_pastFest.gif) no-repeat top left; text-indent: -9999px; width: 280px; height: 30px; margin: 0; } h3#joinNetwork { background: url(../images/css/h_joinNetwork.gif) no-repeat top left; text-indent: -9999px; width: 233px; height: 19px; } h3#axisNetwork { background: url(../images/css/h_axisNetwork.gif) no-repeat top left; text-indent: -9999px; width: 143px; height: 16px; } h3#advertising { background: url(../images/css/h_advertising.gif) no-repeat top left; text-indent: -9999px; width: 127px; height: 22px; float: left; } /* ------------------------- scrollable ------------------------------ */ /* root element for the scrollable. when scrolling occurs this element stays still. */ #scrollableWrapper { margin: 0 auto; padding-top: 20px; width: 600px; height:330px; } div.scrollable { position:relative; overflow:hidden; width: 600px; height:330px; } /* required settings root element for scrollable items. Must be absolutely positioned and it should have a super large width to accomodate scrollable items. it's enough that you set width and height for the root element and not for this element. */ div.scrollable ul.items { /* this cannot be too large */ width:20000em; position:absolute; } /* a single item. must be floated on horizontal scrolling typically this element is the one that *you* will style the most. */ div.scrollable ul.items li { float:left;width: 600px; position: relative;} div.scrollable ul.items li a { text-decoration: none; } div.scrollable ul.items li div.overlay { background: url(../images/scrollable/g_overlayBG.png) top right repeat; color: #fff; width: 205px; height: 330px; position: absolute; top: 0; right: 0; padding: 10px; } div.scrollable ul.items li h3 { font-size: 1.6em;line-height:1.4em;color: #fff; } div.scrollable ul.items li p { font-size: 1.2em; line-height: 1.4; color: #ccc; } div.scrollable ul.items li img {padding: 0; margin: 0;} /* you may want to setup some decorations to active item */ ul.items li.active { border:1px inset #ccc; background-color:#fff; } /* this makes it possible to add next button beside scrollable */ div.scrollable { float:left;} /* disabled navigational button */ a.disabled {visibility:hidden !important;} div.navi { float: right; padding: 10px 0 0 0; height: 20px; width: 70px; } div.navi a { background: url(../scripts/scrollable/arrow/navigator.png) 0 0 no-repeat; display: block; float: left; font-size: 1px; height:8px; margin: 3px; width: 8px; } div.navi a:hover { background-position:0 -8px; } div.navi a.active { background-position: 0px -16px; } h3.viewAllVideos { float: right; padding: 10px 10px 0 0;font-size:1.2em; } /*##### CALENDAR #####*/ #event_calendar { background: #fff; width: 248px; margin:0 auto;} #calendar { width:248px; text-align: center; border: 1px #fff solid; margin-bottom:10px; } #calendar .calendarHeader {text-align:center;color: #fff;text-transform:uppercase;font-size:1.2em;font-weight:bold;padding:6px 0 0;} .calendarHeaderRow {background-color:#B42B2F;} table#calendar td.calendarDayHeading {color:#000;font-size:0.88em;text-transform:uppercase;text-align:center;font-weight:bolder;border:none;background:#B42B2F;padding: 3px 0;height: 10px;border-bottom: 2px #fff solid; width: 33px;} table#calendar td {background:#d9d9d9 url(/images/css/calendar.gif) no-repeat center;padding:0;text-align: center;color:#000;width: 33px;height: 24px; border-top: 1px #fff solid; border-right: 1px #fff solid; } table#calendar td a { background: #bdb9b5 url(/images/css/calendar.gif) no-repeat top; display: block; width: 34px; height: 24px; } table#calendar tr td.calendarToday a, table#calendar tr td.calendarToday {background: #7b736c url(/images/css/calendar.gif) no-repeat bottom;color: #fff!important;width: 33px;height: 24px; font-weight:bold;} div.calendarMonthLinks a { color: #fff; font-weight:bold; } div.calendarMonthLinks a:hover { color: #000;font-weight:bold; text-decoration: none;}