/* * Copyright (c) 2007 - 2009 Sulake Dynamoid * * $Id: style.css,v 1.794 2009/10/09 08:13:14 bro Exp $ * * * sizes, positions * fonts, 1em = 11px * * * GENERIC STYLES * ***** TYPE ***** * INDIVIDUAL PAGES * ***** page ***** * * element * */ /**************************/ /***** GENERIC STYLES *****/ /**************************/ /***** RESET *****/ * { margin: 0; padding: 0; border: none; vertical-align: baseline; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } :focus { outline: 0; } table { border-collapse: collapse; border-spacing: 0; } th { text-align: left; vertical-align: top; } td { vertical-align: top; } /***** /RESET *****/ /***** BASE ELEMENTS *****/ body { font: 68.75%/1.3em Verdana, sans-serif; } /* body font-size: 68.75% = 11px = 1em -> 2em = 22px etc */ a { text-decoration: none; color: inherit; } a:hover, a:active { text-decoration: underline; } h2 { font-size: 1.5em; font-weight: bold; } h3 { font-size: 1.15em; font-weight: bold; line-height: 1.4em; } h4 { font-size: 1.1em; font-weight: bold; line-height: 1.3em; margin: 1.2em 0; padding-bottom: 0.3em; } #left h4 { font-size: 1.1em; } h5 { font-size: 1em; font-weight: bold; line-height: 1.3em; margin-bottom: 0.3em; } #left h5 { font-size: 1em; } h6 { line-height: 0.5em; } abbr { cursor: help; font-variant: small-caps; } address, cite, em { font-style: italic; } code, kbd, tt, pre { font-family: "Courier New", Courier, monospace; } del { text-decoration: line-through; } dfn { font-style: italic; } strong { font-weight: 700; } img { display: inline-block; } ins { text-decoration: overline; } var { font-style: normal; } input[type=reset], input[type=submit], input[type=button], button { cursor: pointer; } .content p, .content div.paragraph { margin-bottom: 0.9em; } input[disabled] { opacity: 0.6; } .content p + p { margin-top: 0.9em; } h4 + p { margin-bottom: 10px; } dl { margin: 0 0 0.5em 0; } dt { margin-top: 1em; } dt.first { margin: 0; } dd { margin: 0 0 0.1em 1em; } h5:first-child { margin-top: 0; } .align-center { text-align: center; } /***** /BASE ELEMENTS *****/ /***** BASE LAYOUT *****/ #body { margin: 0 auto; position: relative; width: 980px; } #body-content { *z-index: -1; } .wide { clear: both; float: none; position: relative; width: 100%; } .column .wrap { width: 100%; } .spacer { clear: both; } #left { float: none; left: 0; padding-bottom: 15px; position: absolute; top: 0; width: 240px; } #center { left: 232px; position: relative; width: 748px; } #center-footer { font-size: 0.9em; margin-bottom: 10px; padding: 15px 0 0 8px; text-align: center; width: 748px; } #center-footer a { font-weight: bold; margin-left: 10px; } #center-top { margin-left: 8px; } #center-center { padding-left: 8px; position: relative; } #center-content { *overflow: hidden; } #center-shadow { bottom: 0; left: 0; position: absolute; top: 20px; width: 8px; } .site-warning { display: block; font-size: 1.1em; padding: 10px 20px; } /***** /BASE LAYOUT *****/ /***** BOXES *****/ .box { position: relative;} .box .header { min-height: 36px; position: relative; } .box .header h3, .box .header h4 { display: inline; padding-bottom: 2px; } .box .header .actions { padding: 10px 20px 0; } .box .header .actions ul { display: block; font-size: 0.9em; line-height: 26px; list-style: none; position: absolute; right: 18px; top: 10px; } .box .header .actions ul li { display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding-left: 10px; } .box .header .actions ul li a, .box .header .actions ul li span { display: block; padding-right: 10px; } .box .header .actions ul li a.first { padding-left: 11px; } .box .header li a:hover { text-decoration: none; } .box .center { display: block; clear: both; padding: 9px 20px 3px; position: relative; } .clear { display: inline-block; display: block; } .clear:after { clear: both; content: '.'; display: block; height: 0; visibility: hidden; } .clearbox { padding: 10px 20px 10px 20px; } .clearbox h3 { padding-bottom: 9px; } /* special center boxes */ #center .special { padding-top: 6px; } #center .special .header h3 { padding-bottom: 0; padding-top: 8px; } #center .special.flat { padding-top: 0px; } /* /special center boxes */ /* center-top boxes */ #center-top .box .actions { padding-top: 1px; } #center-top .box .header { min-height: 26px; } /* /center-top boxes */ /* divided center boxes */ #center .divided { padding: 10px 0 0; } #center .divided .header { min-height: 20px; } #center .divided .header h3 { font-size: 1.1em; } #center .divided .center { padding: 5px 0 0 25px; } #center .divided .box .header { min-height: 36px; } #center .divided .box .header h3 { font-size: 1.3em; } #center .divided .box .header .actions ul { top: 5px; } #center .divided .box .center { padding: 0 20px; } /* /divided center boxes */ /* tabbed center boxes */ #center .tabbed { position: relative; } #center .tabbed .header { z-index: 3; } #center .tabbed .header .actions { height: 30px; } #center .tabbed .header .actions ul { bottom: 0; right: 30px; top: auto; } #center .tabbed .header .actions ul li { margin-left: 3px; padding: 0 0 0 18px; position: relative; } #center .tabbed .header .actions ul li span, #center .tabbed .header .actions ul li a { display: block; float: left; padding-right: 18px; } #center .box.tabbed .header .actions ul.submenulist div.submenu_wrapper { margin-left: 24px; } #center .tabbed .center { height: 100%; margin: 0 14px; padding: 0 0 15px; } #center .tabbed .center .content { height: 100%; padding: 20px 20px 0; } #center .tabbed .footer { height: 15px; } #center .tabbed-last .footer { height: 5px; } #center .tabbed .content .footer { height: auto; } #center .tabbed-last .center .content { min-height: 250px; } #center .tabbed-last .center .content .content { min-height: 0; } #center .tabbed .header .actions ul li.haschildren span { cursor: pointer; padding-right: 30px; } #center .tabbed .header .actions ul.submenulist { bottom: auto; padding: 0; position: absolute; right: -7px; top: 26px; z-index: 10; } #center .tabbed .header .actions ul.submenulist div.submenu_wrapper { margin: 0 0 0 24px; padding: 0 30px 0 0; } #center .tabbed .header .actions ul.submenulist li { float: none; line-height: 1em; padding: 0; width: 100%; white-space: nowrap; } #center .tabbed .header .actions ul.submenulist li span, #center .tabbed .header .actions ul.submenulist li a { float: none; line-height: 1.5em; margin-left: 0.8em; padding: 0; } #center .box.tabbed .header .actions ul.submenulist li span { border-top: 1px solid #DCDCDC; font-weight: bold; line-height: 2em; margin: 9px 0 0 0; padding-top: 5px; } #center .tabbed .header .actions ul.submenulist li a:hover { text-decoration: underline; } #center .tabbed .header .actions ul.submenulist li.first { padding-top: 8px; } #center .tabbed .header .actions ul.submenulist li.first span { border: 0; margin: 0; padding: 0; } #center .tabbed .header .actions ul.submenulist li.last { padding-bottom: 19px; } #center .tabbed .header .actions ul li div.dropdown-marker { height: 7px; right: 16px; position: absolute; top: 9px; width: 7px; } #center .tabbed.under .footer { height: 11px; margin-top: 7px; } #center .tabbed.mirrortabs > .header .actions ul { left: 30px; right: auto; } #center .tabbed.mirrortabs > .header h3 { display: none; } /* /tabbed center boxes */ /* tabbed special center boxes */ #center .tabbed-special { position: relative; } #center .tabbed-special .header .actions { height: 30px; position: relative; } #center .tabbed-special .header .actions ul { bottom: 0; font-size: 0.95em; line-height: 28px; right: 30px; top: auto; } #center .tabbed-special .header .actions ul li { margin-left: 2px; padding: 0 0 0 16px; } #center .tabbed-special .header .actions ul li span, #center .tabbed-special .header .actions ul li a { display: block; float: left; padding-right: 16px; } #center .tabbed-special .header .actions ul li span, #center .tabbed-special .header .actions ul li a, #center .tabbed-special .header .actions ul li:hover a, #center .tabbed-special .header .actions ul li.last a, #center .tabbed-special .header .actions ul li.last:hover a{ padding-top: 4px; } #center .tabbed-special .center { height: 100%; margin: 0 20px; padding: 0 0 15px; } #center .tabbed-special .center .content { height: 100%; padding: 20px 20px 0; } #center .tabbed-special .footer { height: 20px; } #center .tabbed-special-last .footer { height: 10px; } #center .tabbed-special .content .footer { height: auto; } #center .tabbed-special-last .center .content { min-height: 250px; } #center .tabbed-special-last .center .content .content { min-height: 0; } /* /tabbed special center boxes */ /* common tabbed styles */ #center .tabbed-ingress, #center .tabbed-regress { margin: -5px -20px 0 -20px; padding: 0 20px; height: 45px; width: 672px; } #center .tabbed-regress { height: 30px; margin-top: 20px; } #center .tabbed-ingress button, #center .tabbed-regress button, #center .tabbed-ingress ul #center .tabbed-regress ul { float: left; margin-top: 0; } #center .tabbed-ingress ul, #center .tabbed-regress ul { clear: right; } #center .tabbed-ingress .inputhelp li, #center .tabbed-regress .inputhelp li { margin-top: 6px; } #center .tabbed-ingress span.ingress { line-height: 32px; } #center .tabbed-regress span.ingress { line-height: 43px; } #center .tabbed-special .tabbed-ingress, #center .tabbed-special .tabbed-regress { width: 660px; } #center .tabbed .center .content h4.first, #center .tabbed-special .center .content h4.first { margin-top: 0; } /* /common tabbed styles */ /* comments box */ #center .insider { padding: 10px 20px 0; } #center .insider .actions ul { right: 10px; } #center .insider .center { padding: 15px 20px; } #center .insider .footer { height: 10px; } #center .content ul.comments { padding-left: 0; margin: 0; } #center ul.comments li, .comments td { line-height: 1.4em; padding: 0 0 0.3em 0; } .comments .stamp { padding: 0.17em 0 0 0; white-space: nowrap; } .comments .sender { padding: 0 0.5em; white-space: nowrap; } .comments .deletecomment { min-width: 3.5em; padding-right: 10px; } .comments .deleted { opacity: 0.5; -moz-opacity: 0.5; } .comments .deleted .comment { text-decoration: line-through; } .comments .deletecomment a, .comments tr.admin, .comments table.adminmessage, .comments tr.moderator { font-weight: bold; } .comments td.comment img { vertical-align: top; } .comments .readonly, .form-comment, #form-comments { bottom: 15px; position: absolute; } .form-comment .input, #form-comments .input { margin-bottom: 0; } .form-comment button, #form-comments button { text-transform: capitalize; } .form-comment .checkbox #form-comments .checkbox { vertical-align: bottom; } #form-comments label.private { margin-top: 3px; } #center .form-comment ul.toolbar, #center #form-comment ul#toolbar { margin: 0 10px 0 0; } #center .form-comment .comment, #form-comment #comment { margin-top: 2px; width: 400px; } .form-comment .private-comment-receive { position: absolute; width: 660px; margin-top: 23px; font-size: 90%; } #center .comments #newcomments, #center .comments .newcomments { font-weight: bold; margin: 0.5em 0 0.3em; } /* ie6 / ie7 inner box haslayout trigger */ .box.chat #chatbox .outerborder, #center .box.insider, #center .box.insider .center .content, #center .box.insider.chat, #center .box.insider.chat .center .content { *height: 1%; } #center .insider.chat { padding-bottom: 20px; } #center .insider.chat .center .content { padding-bottom: 0; } /* ie6 / ie7 inner box haslayout trigger */ /* /comments box */ #center .insider.special-bottom .center .content { min-height: 60px; padding: 0 0 60px; } /* inner box actions */ #center .tabbed .inner { padding: 0px; } #center .tabbed .inner .footer { height: auto; margin-top: 0; } #center .tabbed .inner .header { min-height: 10px; z-index: 2; margin: 0 14px; } #center .tabbed .inner .header .actions ul { bottom: auto; display: block; margin: 0; padding: 0; right: 18px; top: 13px; z-index: 1; } #center .tabbed .inner .header .actions ul li, #center .tabbed .inner .header .actions ul li.last { font-size: 1.2em; font-weight: normal; line-height: 1.2em; margin: 0; padding: 0; position: relative; } #center .tabbed .inner .header .actions ul li a, #center .tabbed .inner .header .actions ul li:hover a, #center .tabbed .inner .header .actions ul li.last:hover a, #center .tabbed .inner .header .actions ul li.last a { margin: 0 0 0 5px; padding: 0 0 0 5px; } #center .tabbed .inner .header .actions ul li span { padding: 0; } /* ie6 / ie7 inner box haslayout trigger */ #center .tabbed .inner { *width: 712px; } /* /inner box actions */ /* inner center boxes */ #center .inner { margin: 0 -20px; padding: 0.5em 0 1.2em 1em; } #center .inner .header .actions { height: auto; padding: 10px 15px 0 0; } #center .inner .center, #center .inner .center .content { padding: 0; } /* /inner center boxes */ /* paginated boxes */ #center .paginated .header { height: 32px; padding-top: 4px; text-align: center; } #center ul.actions-left { font-weight: bold; left: 15px; position: absolute; top: 5px; } #center ul.actions-right { font-weight: bold; right: 15px; position: absolute; top: 5px; } #center .actions-left, #center .actions-right { font-size: 1em; top: 13px; } #center .paginated .prevnext { margin: 0 auto; padding-left: 6px; } #center .paginated .prevnext .wrap { height: 20px; padding: 12px 6px 0 0; text-align: center; } /* /paginated boxes */ /* light boxes */ #center .light { margin: 15px 0; width: 100%; } #center .light .header { height: auto; min-height: 0; padding-left: 10px; padding-top: 0; text-align: left; width: auto; } #center .light .header .actions { padding: 20px 10px 10px; } #center .light .header .actions ul { margin: 0; top: 14px; } #center .tabbed .light .center, #center .light .center { padding: 0 0 0 15px; height: 100%; margin: 0; } #center .light .center .content { padding: 1px 20px 10px 5px; height: 100%; } #center .centerleft { width: 480px; } #center .light .footer { padding-left: 10px; } #center .light .footer .footer-wrap { height: 10px; } /* /light boxes */ /* left boxes */ #left .box { margin: 0 0 6px 0; width: 245px; } #left .box .footer { min-height: 5px; } #left .box .center { padding-right: 25px; } #left .box .center .content { overflow: hidden; } #left .box .divider { height: 2px; margin: 1em 0; } #left .first .header { min-height: 26px; } #left .first .header .actions { padding-top: 1px; } #left .first .header ul { top: 0; } #left .box.under { margin-bottom: 17px; margin-top: -9px; padding-top: 12px; position: relative; } #left .box.under .center { padding-bottom: 0; } #left .box.under .footer { bottom: -11px; height: 11px; position: absolute; width: 100%; } /* /left boxes */ /* dark boxes */ .dark .center { padding: 5px 10px 10px; } /* /dark boxes */ /* peepbox */ .peepbox { margin-bottom: 20px; width: 235px; } .peepbox .header .actions { padding-top: 18px; } .peepbox .header .actions h3 { line-height: 1.2em; text-transform: none; } .peepbox .center { padding: 0 20px; } .peepbox .footer { height: 14px; position: absolute; width: 235px; } .peepbox .seen { line-height: 1.2em; } .peepbox .mood { overflow: hidden; } .peepbox .thumb { float: none; margin: 0 auto; padding-top: 0.5em; padding-left: 0; } .peepbox dl { margin: 0; } .peepbox dt { margin-top: 0.5em; } .peepbox .aphorism { margin: 0.5em 0 0; width: 200px; } .peepbox .community-network { margin-top: 0; } .action-peepbox .content { padding: 0.5em 0; } .action-peepbox select { width: 195px; } .action-peepbox form hr { height: 2px; margin: 1em 0; } .action-peepbox textarea { height: 100px; width: 190px; } .action-peepbox legend { font-weight: bold; } .peepbox { background: url(peepbox.png) no-repeat left top; color: #DAEEFF; } .peepbox .footer { background: url(peepbox_footer.png) no-repeat left top; } .peepbox .community-network { color: #EEF2E7; } .action-peepbox form hr { background: url(left_divider.gif) repeat-x; } /* /peepbox */ /* infobox */ .infobox2 { opacity: 0.95; width: 300px; z-index: 10; } .infobox2 .wrapper { margin: 0 25px; } .infobox2 .content { height: 100%; padding-top: 20px; } .infobox2 .bottom { height: 24px; } .infobox2 .infobox_text { padding-top: 0.9em; } .infobox2 .infobox_text p { margin: 0; padding-bottom: 0.9em; } .infobox2 .close_a { display: block; height: 11px; position: absolute; right: 21px; top: 18px; width: 11px; height: 11px; _margin-right: 10px; } .infobox2 .close_a span { display: none; } .infobox2 h1 { font-size: 1.1em; margin-bottom: 10px !important;} .infobox2 div.infobox_arrow_w { height: 47px; left: -3px; margin-top: -25px; position: absolute; top: 50%; width: 14px; z-index: 100000; } .infobox2 div.infobox_arrow_e { height: 47px; margin-top: -25px; right: -3px; position: absolute; top: 50%; width: 14px; } .infobox2 .infobox_text { margin: 0; padding: 0; } .infobox2 .infobox_text h1 { margin: 0; padding: 0 0 5px 0; } .infobox2 ul li { margin-bottom: 0; } .infobox2 ul.whereisthis { list-style: none; padding-left: 0; } .infobox2 ul.whereisthis li { padding-bottom: 11px; text-align: center; } .infobox2 ul.whereisthis li em { display: block; font-size: 0.9em; } .infobox2 ul.whereisthis li.first a { padding: 0 1em; } /* /infobox */ /* hoverbox */ #center .hoverbox { text-align: left; width: 307px; } #center .hoverbox .header { margin: 9px 8px 0; padding-left: 13px; } #center .hoverbox .header .actions { padding: 0; } #center .hoverbox .header .actions ul { margin: 0; right: 8px; top: 6px; } #center .hoverbox .header .actions h3 { line-height: 40px; } #center .hoverbox .center { padding-top: 17px; } #center .hoverbox .center .content input.text, #center .hoverbox .center .content textarea, #center .hoverbox .center .content select { width: 260px; } #center .hoverbox .footer { height: 15px; position: absolute; width: 307px; } /* /hoverbox */ /* top boxes */ #top table { margin-bottom: 1.5em; } #top table th, #top table td { padding: 0.2em 0.5em; } /* /top boxes */ /***** /BOXES *****/ /***** DIALOGS *****/ .overlay_dialog { background-color: black; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; } .dialog { color: #707070; display: block; position: absolute; } .dialog .table_window { border-spacing: 0; margin: 0; padding: 0; width: 100%; } .dialog .table_window td, .dialog .table_window th { padding: 0; } .alert_ne, .alert_nw, .alert_se, .alert_sw, .dialog_ne, .dialog_nw, .dialog_se, .dialog_sw { background: url(dialog_corners.png) no-repeat; height: 35px; width: 35px; } .alert_n, .alert_s, .dialog_n, .dialog_s { background: url(dialog_ns.png) repeat-x; height: 35px; } .alert_e, .alert_w, .dialog_e, .dialog_w { background: url(dialog_ew.png) repeat-y; width: 35px; } .alert_nw, .dialog_nw { background-position: right -35px; } .alert_ne, .dialog_ne, .alert_n, .dialog_n { background-position: left -35px; } .alert_se, .dialog_se, .alert_s, .dialog_s, .alert_e, .dialog_e { background-position: left top; } .alert_sw, .dialog_sw, .alert_w, .dialog_w { background-position: right top; } .dialog .dialog_sizer { background: url(dialog_resize.png) no-repeat right bottom; cursor: se-resize !important; height: 35px; width: 35px; } .dialog .dialog_nw.top_draggable { background: url(dialog_drag.png) no-repeat left top; } .dialog .top_draggable, .dialg .bottom_draggable { cursor: move; } .dialog .dialog_close { background: url(dialog_close.gif) no-repeat; cursor: pointer; height: 18px; position: absolute; right: 27px; top: 27px; width: 19px; } .dialog .title_window { colo
