ocStaff (admin)
|
Participation is very straight-forward. I post the global.css file here, and people just reply pointing out confusing points of it. I've still a lot to do, but I've done the main tidying up now. That means I can post it now. What I haven't yet done: - Removed the standard boxes (currently I've just pulled out the code, but something much simpler is going to go back in)
- Replaced image-based gradients with CSS ones
- Removed comcode_exp_ref stuff
- Possibly, some style updates in general (which is a different matter really)
Some things of note I have done: - Huge amount of reorganisation in the file
- Many things renamed
- Some CSS classes merged
- Created a new 'BETA_CSS_PROPERTY' symbol that automatically adds prefixes like "-webkit-" to CSS properties that need it (I gave this a lot of thought, we want the properties, we don't want messy CSS, and this symbol works as an effective marker for what areas are dodgy and gives us a vector for making quick emergency changes without having to change the CSS itself)
- Some stuff moved out to separate CSS files (e.g. all the forms CSS)
Code
/*
{$BRAND_NAME`}
Copyright (c) ocProducts, 2004-2012
*/
/*
=========================
===Overridden Elements===
=========================
*/
html, body {
border: 0;
{+START,IF,{$MOBILE}}
word-wrap: break-word;
{+END}
}
body, textarea, input, td, th {
font-family: 'Tahoma', 'Verdana', 'Arial', 'Helvetica', sans-serif;
}
tt, kbd, samp {
font-weight: bold;
}
abbr,acronym {
border-bottom: 1px dotted; /* For Safari, which does not have it by default */
}
/* Re-apply default styles non-HTML5-aware browsers */
aside,footer,header,nav,hgroup,article {
display: block;
}
textarea, input, code {
font-size: 1em;
}
input[type="text"]:focus, input[type="password"]:focus {
background: url('{$IMG;,keyboard}') right center no-repeat white;
}
input[type="text"],input[type="password"],input[type="color"],input[type="email"],input[type="number"],input[type="range"],input[type="search"],input[type="tel"],input[type="url"],textarea,select { /* Normally a browser default, but gets inherited on some phones */
background: white;
}
a:link, .button_hyperlink {
color: #123d7b; /* {$,a.link, 73% (seed sat_to 85) + 27% !W/B} */
}
a:visited {
color: #113871; /* {$,wizard, 67% (seed sat_to 85) + 33% !W/B} */
}
a:hover, .button_hyperlink:hover {
color: #051225; /* {$,a.hover, 30% a.link + 70% !W/B } */
}
a, .button_hyperlink {
{$BETA_CSS_PROPERTY,transition: color 1s linear;}
}
h1, h2, h3 {
font-weight: normal;
color: #325180; /* {$,wizard, 76% seed + 24% !W/B} */
border-bottom: 1px solid #c1cee3; /* {$,wizard, 100% lightborder} */
}
h1 {
font-size: 1.9em;
}
h2 {
font-size: 1.3em;
}
h3 {
font-size: 1.1em;
}
h3 a:link,
h3 a:active,
h3 a:visited,
h3 a:hover {
text-decoration: none;
}
h4 {
font-size: 1em;
font-weight: bold;
}
/* An iframe screen */
.opens_below h1 {
display: none;
}
td, th {
vertical-align: top;
}
th, .fake_th {
background-color: #a2b6d5; /* {$,th.bgcolor, 60% sb_color + 40% seed} */
color: #313740; /* {$,wizard, 30% th.bgcolor + 70% !W/B} */
font-weight: bold;
text-align: center;
}
/* .de_th makes a th look like a td, yet allows us to use correct markup */
td, th.de_th {
color: #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
font-weight: normal;
text-align: {!en_left};
background-color: transparent;
font-weight: normal;
border: 0;
}
hr {
height: 0;
border: 0;
border-bottom: 2px dotted #a2b6d5; /* {$,wizard, 60% sb_color + 40% seed} */
text-align: left; /* Fixes difference with Opera */
}
img {
display: inline;
border: 0;
}
iframe {
padding: 0;
margin: 0;
border: 0;
}
/*input[type="text"],textarea { So Comcode can be typed
unicode-bidi: bidi-override;
direction: ltr;
}*/
#htmlarea input[type="text"], #htmlarea textarea {
unicode-bidi: normal;
direction: {!dir};
}
{+START,IF,{$MOBILE}}
select {
max-width: 100px;
}
/* On mobiles we want maximum fluidity */
table, table.do_next_section {
table-layout: auto !important;
/* Allows wrapping */
overflow-x: visible !important;
overflow-y: visible !important;
}
col {
width: auto !important;
}
* {
white-space: normal !important;
word-wrap: break-word !important;
}
{+END}
/*
=========================
======Global Layout======
=========================
*/
/* Consider .website_body as 'body': it is just we cannot put our styles directly on body because sometimes this gets used in things we should not mess with such as the WYSIWYG editors frame (which is #htmlarea) and e-mails */
.website_body {
padding: 0 !important;
color: #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
background: #FFFFFF; /* {$,wizard, 100% W/B} */
}
/* htmlarea = WYSIWYG editor */
.website_body, #htmlarea {
margin: 0;
font-size: 0.88em;
}
{+START,IF,{$CONFIG_OPTION,fixed_width}}{+START,IF,{$NOT,{$MOBILE}}}
#main_website { /* #main_website targets only the main site screen, avoiding frames etc */
background-color: #e3eaf6 !important; /* {$,wizard, 11% (seed sat_to 100) + 89% W/B} */
/* Want to change the tiled background?
Try this Google search to get image ideas http://www.google.co.uk/search?tbm=isch&q=tile+background
Find how to edit the referenced "outer-background" theme image by doing an Admin Zone search for "outer-background"
*/
background: url('{$IMG;,outer-background}');
}
#main_website #body_inner {
width: 980px;
position: relative;
margin: 0 auto 0 auto;
border-left: 1px solid #8ba4ca; /* {$,wizard, 61% seed + 39% W/B} */
border-right: 1px solid #8ba4ca; /* {$,wizard, 61% seed + 39% W/B} */
border-bottom: 1px solid #8ba4ca; /* {$,wizard, 61% seed + 39% W/B} */
{$BETA_CSS_PROPERTY,box-shadow: 0 0 30px #6b81a1;} /* {$,wizard, 100% medborder.border} */
}
{+END}{+END}
header {
background-color: #e3e9f2; /* {$,topcolor, 100% bgcol } */
{+START,IF,{$NOT,{$CONFIG_OPTION,fixed_width}}}
{$BETA_CSS_PROPERTY,box-shadow: 0 0 2px 2px #426aa9;} /* {$,wizard, 100% seed} */
{+END}
}
header h1 {
margin: 0;
{+START,IF,{$MOBILE}}
width: 100%;
float: left;
text-align: center;
{+END}
}
{+START,IF,{$NOT,{$MOBILE}}}
.logo {
float: left;
}
/*
Commented out by default.
If you enable it will turn off the standard logo and replace it with a big header image.
Don't enable if banners addon is still installed
Find how to edit the referenced "header" theme image by doing an Admin Zone search for "header"
*/
/*
.logo_outer {
margin-bottom: 8px;
width: 980px;
height: 100px;
float: left;
background: url('{$IMG;,header}') no-repeat !important;
}
.logo_outer * {
display: none;
}
#global_navigation {
margin-top: 99px !important;
}
*/
{+END}
#global_navigation {
font-size: 0.95em;
{+START,IF,{$MOBILE}}
text-align: center !important;
margin: 0 auto;
padding: 8px 0px 9px 0;
{+END}
{+START,IF,{$NOT,{$MOBILE}}}
text-align: right;
margin-top: 59px;
padding: 6px 5px 8px 0;
background: url('{$IMG;,zone_gradient}') repeat-x;
{+END}
min-height: 15px;
font-weight: bold;
color: #edf2f9; /* {$,wizard, 15% zg_top + 85% W/B} */
background-color: #426aa9; /* {$,wizard, 100% seed} */
background-position: left bottom;
}
.global_banner {
position: absolute;
top: 0;
right: 0;
}
.text_banner {
width: 13.5em;
font-family: 'Arial', sans-serif;
background-color: white;
}
.text_banner a {
font-size: 1.4em;
}
.text_banner_l_text {
color: #008000; /* {$,wizard, 100% 008000} */ /* Google adwords style */
font-size: 0.9em;
}
/* This is applied to the screen title, which is specially included on each screen; in the case of Comcode pages it is the first level 1 title. The screen title is by default an h1, but we define the styles separately so we can style this special title independently (there are lots of cool things we could do to it) */
.screen_title {
margin-top: 0.35em;
margin-bottom: 0.8em;
min-width: 300px;
}
.global_breadcrumbs {
padding: 5px 0 0 0;
{+START,IF,{$NOT,{$MOBILE}}}
float: {!en_right};
margin-left: 5px;
{+END}
}
.global_breadcrumbs abbr {
white-space: nowrap;
}
.breadcrumbs {
font-weight: bold;
}
.breadcrumbs_img {
vertical-align: middle;
margin-{!en_right}: 4px;
}
.title_tagline, .subtitle_tagline {
font-size: 0.8em;
}
.title_tagline {
padding-bottom: 20px;
margin-top: -1.5em;
color: #444649; /* {$,wizard, 30% sb_color + 70% !W/B} */
}
.subtitle_tagline {
margin: -8px 0 0 19px;
}
#body_inner {
min-height: 450px;
overflow: hidden;
}
#main_website #body_inner, .fake_middle_continuation {
background-color: #ffffff; /* {$,maincolor, 100% W/B} */
/* Want to set a tiled background?
Uncomment the code below
Try this Google search to get image ideas http://www.google.co.uk/search?tbm=isch&q=tile+background
Find how to edit the referenced "inner-background" theme image by doing an Admin Zone search for "inner-background"
*/
/*background: url('{$IMG;,inner-background}');*/
}
.global_middle {
padding: 5px;
overflow: hidden;
}
#popup_spacer {
padding: 20px;
}
#popup_spacer h2 {
margin-top: 0;
}
/* Used in the Setup Wizard constructed block layouts in the start page */
.fp_col_block {
{+START,IF,{$NOT,{$MOBILE}}}
width: 48%;
{+END}
{+START,IF,{$MOBILE}}
margin: 0.5em 0;
width: 100%;
{+END}
}
.fake_middle_continuation {
padding: 1px; /* Needed to force border draw of inner-contents */
}
/* fake_middle_continuation is defined to make it easy for us to reapply the same styling that goes to global_middle to something else such as the contents of an iframe */
.global_middle, .fake_middle_continuation {
}
#panel_left {
float: {!en_left};
}
#panel_right {
float: {!en_right};
}
.global_side {
word-wrap: break-word;
padding-top: 1em;
padding-bottom: 10px;
}
.global_side .standardbox_wrap_panel {
font-size: 0.9em;
}
.global_side h2 {
border-bottom: 1px solid;
text-transform: lowercase;
font-weight: normal;
width: 50%;
padding-{!en_left}: 10px;
margin-{!en_left}: 10px;
}
.global_messages {
padding: 4px 4px 8px 4px;
}
.global_message {
margin: 3px 0;
}
.global_message strong {
text-shadow: 1px 1px 1px #4b5a71; /* {$,wizard, 70% medborder.border + 30% !W/B} */
font-weight: normal;
}
.global_message img {
margin-top: -3px;
margin-{!en_right}: 5px;
}
footer {
background-color: #6b81a1; /* {$,wizard, 100% medborder.border} */
color: #ffffff; /* {$,wizard, 100% W/B} */
padding: 10px;
{+START,IF,{$NOT,{$CONFIG_OPTION,fixed_width}}}
{$BETA_CSS_PROPERTY,box-shadow: 0 0 2px 2px #8ba4ca;} /* {$,footer_bg, 61% seed + 39% W/B} */
{+END}
{+START,IF,{$MOBILE}}
text-align: center;
{+END}
}
footer .button_hyperlink,
footer a:link,
footer a:visited,
footer a:active,
footer .linkcolor {
color: #000000; /* {$,wizard, 100% !W/B} */
}
footer a:hover {
color: #FFFFFF !important; /* {$,wizard, 100% W/B} */
}
footer .global_bottom {
{+START,IF,{$NOT,{$MOBILE}}}
float: {!en_left};
{+END}
}
footer .global_bottom img {
vertical-align: middle;
}
footer .global_bottom_button_ref_point {
position: absolute;
}
footer .global_bottom #special_page_type {
width: 17em;
}
footer .global_flagrant {
{+START,IF,{$NOT,{$MOBILE}}}
float: {!en_right};
{+END}
font-size: 0.9em;
color: #dbe6f7; /* {$,wizard, 35% footer_bg + 65% W/B} */
font-weight: bold;
padding-bottom: 4px;
text-shadow: 2px 2px 2px #6b81a1; /* {$,wizard, 100% medborder.border} */
}
footer .invisible_ref_point {
position: absolute;
width: 0px;
}
footer .global_copyright {
{+START,IF,{$NOT,{$MOBILE}}}
text-align: center;
{+END}
font-size: 0.85em;
}
footer .global_minilinks {
padding-top: 3px;
font-size: 0.9em;
white-space: nowrap; /* Stops logout link wrapping around in Firefox 3.6 */
}
footer .global_minilinks a {
white-space: nowrap;
{+START,IF,{$MOBILE}}
padding: 4px;
{+END}
}
footer .global_minilinks a:hover {
color: #97aed0; /* {$,wizard, 10% W/B + 90% footer_bg} */
}
/*
=========================
==With Special Meanings==
=========================
*/
.autocomplete { /* Membership of this class is used as a tag to allow form autocompletion */
}
.xhtml_validator_off { /* Membership of this class is used as a tag to turn off the XHTML-validator */
display: inline-block; /* To stop it breaking text-align: center */
width: 100%;
}
.img_thumb { /* Membership of this class is used as a tag to turn on the nereid blend effect */
opacity: 0.7;
}
.textarea_scroll { /* Turns off word-wrapping for a textarea: this has to be done using Javascript so that the invalid 'wrap' property isn't written into the XHTML */
}
body .accessibility_hidden { /* Contents should be made visible (or interpreted) for accessibly representation but hidden for normal visual display */
/* Shift it out of the viewport */
position: absolute;
top: -256000px;
left: 0;
display: block; /* stops browser bugs where it interacts with the layout flow incorrectly */
}
.non_accessibility_redundancy { /* Contents should be skipped by screen readers */
{+START,IF,{$MOBILE}}
display: none;
{+END}
}
/*
=========================
=====Reusable Styles=====
=========================
*/
.float_surrounder, .float_surrounder_precise {
width: 100%;
outline: 0;
overflow: hidden;
}
.nothing_here, .more_here {
font-size: 0.95em;
padding-{!en_left}: 15px;
margin-{!en_left}: 10px;
background-image: url('{$IMG;,edited}');
background-position: {!en_left} 4px;
background-repeat: no-repeat;
}
.edited {
font-size: 0.85em;
padding-{!en_left}: {$?,{$MOBILE},0.7,2}em;
font-style: italic;
}
div.edited {
padding-top: {$?,{$MOBILE},10,30}px;
}
.inline_image {
vertical-align: top !important;
}
.inline_image_2 {
vertical-align: middle !important;
}
.inline_image_3 {
vertical-align: baseline !important;
}
.inline_image_4 {
margin-top: -4px !important;
}
.media_box {
overflow: hidden;
width: 100%;
outline: 0;
margin: {$?,{$MOBILE},1,3}em 0;
text-align: center;
position: relative;
}
.media_box a {
outline: 0;
}
.media_box img, .img_thumb {
border: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
{$BETA_CSS_PROPERTY,box-shadow: 3px 3px 10px #6b81a1;} /* {$,wizard, 100% medborder.border} */
max-width: 100%;
box-sizing: border-box;
}
.scale_down { /* Membership of this class is used as a tag to turn on image scaling */
max-width: 100%;
box-sizing: border-box;
}
a.poster_member em {
text-shadow: 2px 2px 2px #8497b3; /* {$,wizard, 50% bordcolor + 50% W/B } */
padding: 4px 0;
letter-spacing: 1px;
}
a.poster_member:link, a.poster_member:active, a.poster_member:visited, a.poster_member:hover {
font-size: 1em;
font-weight: bold;
border: 1px dashed #8497b3; /* {$,wizard, 50% bordcolor + 50% W/B } */
border-left: 0;
border-right: 0;
display: block;
background-color: #f0f3f9; /* {$,wizard, 75% ocf_row2 + 25% W/B }*/
margin-bottom: 7px;
text-decoration: none;
padding: 2px 2px;
}
.post_poster a.poster_member:link, .post_poster a.poster_member:active, .post_poster a.poster_member:visited, .post_poster a.poster_member:hover {
display: inline-block;
}
a.poster_member:hover {
border-color: #072d65; /* {$,wizard, 100% bordcolor}*/
background-color: #f5f8fb; /* {$,wizard, 50% ocf_row2 + 50% W/B }*/ /*50% white over medborder color*/
}
input.button_hyperlink {
border-style: none;
background-color: transparent;
text-decoration: underline;
font-weight: bold;
border: 0;
margin: 0;
padding: 0;
cursor: pointer;
text-align: {!en_left};
}
/* Makes a link tag (a) look like it's not anything special (we use these tags as tab points sometimes) */
.non_link,
.non_link:link,
.non_link:visited,
.non_link:hover,
.non_link:active {
color: #0d1522 !important; /* {$,wizard, 20% seed + 80% !W/B} */
text-decoration: none;
cursor: default;
}
.hide_button {
vertical-align: middle;
{$BETA_CSS_PROPERTY,transition: opacity 0.2s linear !important;}
outline: 0;
font-weight: bold;
}
{+START,IF,{$NOT,{$MOBILE}}}
.hide_button_spacing {
padding-top: 20px;
}
{+END}
.pulldown_spacer {
padding-top: 20px;
}
.comcode_supported_icon {
vertical-align: middle;
}
.quick_self_edit_link {
font-size: 0.8em;
text-align: center;
}
#panel_top .quick_self_edit_link {
display: none;
}
.control_functions {
font-weight: bold;
}
.staff_actions {
margin-top: 2em;
font-size: 0.95em;
{+START,IF,{$MOBILE}}
border: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
{+END}
}
.staff_actions a {
white-space: nowrap !important;
}
.associated_links {
font-size: 0.8em;
text-align: center;
}
/* Panels made smaller already, so can't allow a font size to be too tiny */
.global_side .associated_links {
font-size: 0.9em;
}
.associated_breadcrumbs {
font-size: 0.8em;
color: #123d7b; /* {$,a.link, 73% (seed sat_to 85) + 27% !W/B} */
}
.associated_details {
font-size: 0.8em;
font-weight: normal;
}
div.associated_details {
margin: 5px;
}
.trinav_left {
float: left;
{+START,IF,{$NOT,{$MOBILE}}}
margin-left: 26px;
{+END}
{+START,IF,{$MOBILE}}
width: 33%;
{+END}
text-align: left;
}
.trinav_mid {
float: left;
{+START,IF,{$NOT,{$MOBILE}}}
margin-left: 26px;
{+END}
{+START,IF,{$MOBILE}}
width: 33%;
{+END}
text-align: center;
}
.trinav_right {
float: right;
{+START,IF,{$NOT,{$MOBILE}}}
margin-left: 10px;
margin-right: 26px;
{+END}
{+START,IF,{$MOBILE}}
width: 33%;
{+END}
text-align: right;
}
.nav_mid {
text-align: center;
{+START,IF,{$MOBILE}}
margin: 10px auto 0px;
width: 100%;
float: left;
{+END}
}
.red_alert {
color: #d91522; /* {$,red_highlights, 80% FF0000 + 20% seed} */
font-weight: bold;
}
div.red_alert {
text-align: center;
}
div.error, p.error {
background-color: #fff2f2; /* {$,wizard, 95% W/B + 5% FF0000} */
padding: 5px 0;
}
.field_name {
font-weight: bold;
}
.horiz_field_sep {
padding-{!en_left}: 30px;
}
th.meta_data_title {
font-weight: bold !important;
}
.inline_wip_message {
background-color: #F2F5F9; /* {$,wizard, 80% ocf_row2 + 20% W/B}*/
padding: 4px;
margin: 0;
border: 1px solid #EBE773; /* {$,wizard, 100% EBE773} */ /* Intentionally redish on all theme colours */
font-size: 0.9em;
}
#global_navigation .inline_wip_message {
background-color: #426aa9; /* {$,wizard, 100% seed} */
}
.inline_wip_message img {
float: {!en_left};
}
.inline_wip_message p {
margin: 1px 0 0 28px;
}
/*
=========================
========Spacing==========
=========================
*/
.not_too_tall {
max-height: 300px;
overflow: auto;
}
.horizontal_scrolling {
overflow: auto;
padding-right: 1px; /* For non-aligning table borders */
}
span.long_space {
padding-{!en_left}: 30px;
display: inline-block;
}
.tiny_linebreak {
line-height: 0.5em;
}
.tiny_paragraph {
margin: 0.5em 0;
}
.whitespace_visible {
width: 100%;
overflow: auto;
outline: 0;
white-space: pre;
}
.standard_indent {
padding-{!en_left}: 100px;
}
.mini_indent {
padding-{!en_left}: 20px;
}
hr.spaced_rule {
margin: 20px 0;
}
hr.long_break {
margin: 20px 0;
}
.arrow_ruler {
text-align: center;
}
.centered_inline_block {
text-align: center;
}
.inline_block {
text-align: {!en_left};
display: inline-block;
}
.inline_block .wide_table_wrap { /* Fixes Firefox bug */
overflow-x: visible;
overflow-y: visible;
}
.inline {
display: inline;
}
.left {
float: {!en_left};
}
.right {
float: {!en_right};
}
.float_separation {
padding-{!en_right}: 10px;
}
.lonely_preview {
text-align: center;
}
/*
=========================
=========Tables==========
=========================
*/
.table_cell_nowrap {
white-space: nowrap;
}
.autosized_table {
table-layout: auto !important;
}
.autosized_table img {
vertical-align: middle;
}
table.scrollable_inside {
table-layout: fixed; /* For permission setting stuff that can scroll off */
}
.wide_table_wrap {
overflow-x: auto;
overflow-y: hidden;
}
.wide_table {
width: 100%;
{+START,IF,{$NOT,{$MOBILE}}}
table-layout: fixed;
{+END}
}
.spaced_table th, .spaced_table td {
padding: 3px;
}
/* Undo for nested tables from WYSIWYG */
.solidborder table[cellpadding="0"] td, .solidborder table[cellpadding="0"] th {
padding: 0;
}
.highlighted_table_cell {
background-color: #c1cee3; /* {$,wizard, 100% lightborder} */
}
/*
=========================
=====Core Interfaces=====
=========================
*/
.question_ui_buttons {
text-align: center;
margin-top: 15px;
}
.tooltip {
font-size: 1em;
padding: 3px;
background-color: #f5f7fa; /* {$,wizard, 5% seed + 95% W/B} */
border: 1px solid #4b5a71; /* {$,wizard, 70% medborder.border + 30% !W/B} */
z-index: 1000;
opacity: 0.9;
word-wrap: break-word;
}
.tooltip img {
max-width: 100%;
}
.tooltip .shunted_button {
display: none;
}
.tooltip .whitespace_visible {
max-height: 5em;
overflow: auto;
}
.tooltip .standardbox_links_classic {
display: none;
}
.tooltip_img {
position: absolute;
right: 3px;
top: 3px;
}
.tooltip h2 {
margin-top: 0;
}
.tooltip a, .tooltip a:visited, .tooltip a:link, .tooltip a:active, .tooltip a:hover {
text-decoration: none !important;
color: inherit !important;
}
.tooltip_fields {
border-collapse: collapse;
font-size: 0.85em;
}
.tooltip_fields th {
border-right: 1px solid #4b5a71; /* {$,wizard, 70% medborder.border + 30% !W/B} */
font-weight: bold !important;
padding-right: 1em;
}
.tooltip_fields td {
padding-left: 1em;
}
.diff del {
color: red;
}
.diff ins {
font-weight: bold;
text-decoration: none;
}
.members_viewing {
padding: 4px;
text-indent: 25px;
padding-{!en_left}: 0;
}
.radio_list_picture {
float: {!en_left};
white-space: nowrap;
padding: 3px;
font-size: 0.8em;
min-height: 35px;
min-width: 35px;
}
#page_running_admin_themes .radio_list_picture {
float: none;
margin: 15px;
border: 1px solid #c1cee3; /* {$,wizard, 100% lightborder} */
}
.radio_list_picture img {
max-width: 100px;
}
.results_table {
font-size: 0.85em;
margin: 8px 0;
}
.results_table_sorter {
margin-bottom: 3px;
max-width: {$?,{$MOBILE},315,400}px;
float: left;
}
.results_browser_spacing {
padding: 10px 0;
}
.results_browser {
float: {$?,{$MOBILE},{!en_left},{!en_right}};
padding: 0;
margin: 2px 0 0 0;
/* max-width: 540px; Looks bad on forumview */
}
.alphabetical_jumper {
float: none !important;
margin-left: 2px !important;
margin-bottom: 10px !important;
max-width: 100% !important;
padding: 3px;
}
.results_continue, .results_page_num {
border-{!en_left}: 0;
}
.results_page_num {
font-weight: bold;
}
.results_browser_per_page {
{+START,IF,{$NOT,{$MOBILE}}}
display: inline;
padding: 0 20px;
{+END}
{+START,IF,{$MOBILE}}
float: left;
{+END}
}
.results_browser_pages {
display: inline;
}
/* See also medborder declaration near bottom and .ocf_on declaration above */
.results_browser a:link,
.results_browser a:visited,
.results_browser a:hover,
.results_browser a:active,
.results_browser span,
.results_launcher a:link,
.results_launcher a:visited,
.results_launcher a:hover,
.results_launcher a:active,
.results_launcher span {
display: inline-block;
text-decoration: none;
margin-top: 0;
{+START,IF,{$NOT,{$MOBILE}}}
margin-{!en_left}: -1px;
{+END}
}
.results_browser a:hover,
.results_launcher a:hover {
background-color: #d9e1ee; /* {$,wizard, 20% seed + 80% W/B} */
}
.results_browser a:link,
.results_browser a:visited,
.results_browser a:hover,
.results_browser a:active,
.results_browser span,
.results_launcher a:link,
.results_launcher a:visited,
.results_launcher a:hover,
.results_launcher a:active,
.results_launcher span {
padding: 2px {$?,{$MOBILE},10,5}px;
}
.results_launcher a:link,
.results_launcher a:visited,
.results_launcher a:hover,
.results_launcher a:active,
.results_launcher span {
padding: 0 3px;
}
.results_launcher {
font-size: 0.8em;
display: inline;
padding-{!en_left}: 20px;
}
.category_list {
margin: 0;
padding: 0 0 0 20px;
overflow: auto;
}
.category_entry {
padding: 6px 0;
margin: 6px 0;
clear: both;
overflow: hidden;
width: 100%;
}
.category_entry a img {
max-width: 150px;
}
.category_entry + .category_entry {
border-top: 1px solid #c1cee3; /* {$,wizard, 100% lightborder} */
}
.category_entry a {
font-size: 1.1em;
}
.category_entry .associated_details {
margin-bottom: 0;
}
.category_sorter {
text-align: center;
margin: 20px auto 0 auto;
padding: 5px;
}
.category_sorter label {
font-weight: bold;
}
.category_sorter br {
line-height: 1.3em;
}
.index_screen_fancier_screen_pre {
margin-bottom: 15px;
}
.index_screen_fancier_screen_post {
margin-top: 15px;
}
{+START,IF,{$NOT,{$MOBILE}}}
.index_screen_fancier_screen_entries {
margin-{!en_left}: 30px;
}
{+END}
.index_screen_fancier_entry {
margin: 3px;
padding: 3px;
}
.index_screen_fancier_entry_link {
font-weight: bold;
margin-bottom: 0.3em;
}
.index_screen_fancier_entry_count {
font-size: 0.8em;
font-weight: normal;
}
.index_screen_fancier_entry_description {
font-size: 0.8em;
margin-{!en_left}: 1.3em;
}
#splurgh {
font-weight: bold;
}
#splurgh ul {
list-style: none;
margin-{!en_left}: 0;
padding-{!en_left}: 0;
font-size: 1.5em;
}
#splurgh li {
margin-{!en_left}: 0;
padding-{!en_left}: 0;
}
#splurgh ul ul {
list-style: circle;
font-size: 0.9em;
padding-top: 6px;
}
#splurgh li li {
margin-{!en_left}: 40px;
padding-{!en_left}: 0;
}
#splurgh ul ul ul {
font-size: 0.8em;
}
#splurgh ul ul ul ul {
font-size: 1em;
}
div.wysiwyg_color_finder {
color: #EAEFF5; /* {$,barrier_a, 72% bgcol + 28% W/B} */
}
.fractional_edit {
margin: -3px;
border: 1px dashed #94979d; /* {$,wizard, 65% bgcol + 35% !W/B} */
padding: 2px;
}
.fractional_edit_nonover {
}
.ajax_tree_list_loading {
padding: 80px;
text-align: center;
}
#tree_list__root_tree_list {
padding-bottom: 4px;
}
.tree_list_highlighted a, .tree_list_nonhighlighted a {
background-color: white;
color: black;
}
.tree_list_highlighted a {
font-weight: bold;
}
.tree_list_nonhighlighted a {
}
/*
=========================
========Feedback=========
=========================
*/
{+START,IF,{$NOT,{$MOBILE}}}
.lined_up_boxes .ratings, .lined_up_boxes .trackbacks {
margin-top: 0;
}
.lined_up_boxes .right {
margin-left: 1em;
}
.lined_up_boxes .left {
margin-right: 1em;
}
{+END}
{+START,IF,{$MOBILE}}
.lined_up_boxes .right {
width: 100%;
}
.lined_up_boxes .left {
width: 100%;
}
{+END}
.ratings {
width: {$?,{$MOBILE},100%,10em};
margin-top: 1em;
}
.ratings .standardbox_spaced {
padding: 0 0 5px 5px;
}
.RATING_BOX .rating_inner {
text-align: center;
}
.RATING_INLINE_DYNAMIC .rating_inner, .RATING_INLINE_DYNAMIC form {
display: inline;
}
.post_action_link .RATING_INLINE_DYNAMIC {
padding-left: 20px;
}
.rating_inner {
white-space: nowrap;
}
.rating_inner img {
cursor: pointer;
}
.trackbacks {
width: {$?,{$MOBILE},100%,14em};
margin-top: 1em;
margin-left: 1em;
}
.trackback_inside {
white-space: nowrap;
}
.trackback_result {
padding: 5px;
}
.post .post_title {
font-weight: bold;
padding-left: 0;
margin-bottom: 0.2em;
}
.post .post_avatar {
float: right;
margin: 10px 0 0 20px;
width: 60px;
}
.post .post_subline {
margin-bottom: 1em;
font-size: 0.8em;
}
.post .post_poster {
font-weight: bold;
}
.post .post_time {
}
.post .post_action_link {
}
.post .post_thread_children {
margin-top: 1em;
{+START,IF,{$MOBILE}}
margin-left: 7px;
{+END}
{+START,IF,{$NOT,{$MOBILE}}}
margin-left: 20px;
{+END}
}
.post .post_buttons {
margin-top: 1.3em;
}
.post_buttons a {
opacity: 0.0;
{$BETA_CSS_PROPERTY,transition-property : opacity;}
{$BETA_CSS_PROPERTY,transition-duration : 0.5s;}
}
.post_buttons a[rel="add reply"] {
opacity: 1.0;
}
.post_buttons:hover a {
opacity: 1.0;
}
.post_show_more {
text-align: center;
border: 1px dashed #c1cee3; /* {$,wizard, 100% lightborder} */
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
padding: 15px;
font-weight: bold;
font-size: 0.85em;
}
.post .post_show_more {
margin-left: 20px;
}
.highlighted_post {
background-color: #fafbfd; /* {$,code_content, 25% ocf_row2 + 75% W/B} */
padding: 15px;
border: 1px dotted #6b81a1; /* {$,wizard, 100% medborder.border} */
{+START,IF,{$NOT,{$MOBILE}}}
margin-right: 70px;
{+END}
}
#comments_form .standardbox_wrap_internal {
margin: 0;
border: 0;
}
#comments_posting_form_outer .attachments {
text-align: {!en_left};
padding: 5px;
}
.comments_posting_form_inner {
text-align: {!en_left};
padding: 0px;
margin: 0 auto;
width: {$?,{$MOBILE},100%,525}px;
{+START,IF,{$MOBILE}}
overflow: hidden;
outline: 0;
{+END}
}
.comments_posting_form_inner textarea {
color: #94979d; /* {$,wizard, 65% bgcol + 35% !W/B} */
}
.comments_posting_form_inner table {
border-collapse: collapse;
}
.comments_posting_form_end {
overflow: hidden;
{+START,IF,{$MOBILE}}
margin: 4px 20px 10px 0px;
padding: 0;
text-align: center;
{+END}
{+START,IF,{$NOT,{$MOBILE}}}
margin-left: 160px;
{+END}
}
{+START,IF,{$MOBILE}}
.comments_posting_form_end .proceed_button button {
float: none;
}
{+END}
.comments_captcha img, .comments_captcha iframe, .comments_captcha input {
margin: 0 5px 2px 5px;
vertical-align: middle;
}
.comments_captcha {
width: 200px;
margin: 20px auto 0 auto;
font-size: 0.85em;
text-align: center;
}
.comments_posting_form_inner th {
font-weight: bold !important;
padding: 3px 15px 3px 0;
border-right: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
}
.comments_posting_form_inner td {
padding-left: 15px;
}
.comments_posting_form_emoticons {
float: {!en_left};
width: 120px;
padding-{!en_right}: 5px;
text-align: center;
padding-top: 5px;
font-size: 0.8em;
}
.comments_posting_form_emoticons p {
margin-bottom: 0;
}
.comments_posting_form_links {
text-align: right;
font-size: 0.85em;
font-weight: normal;
}
.reviews_average {
font-size: 0.8em;
opacity: 0.7;
}
/*
=========================
==========Lists==========
=========================
*/
ul.compact_list, ol.compact_list {
margin: 0;
padding: 0;
}
ul.compact_list li, ol.compact_list li {
margin: 0 0 0 17px;
padding: 0;
}
ul.spaced_list, .spaced_list ul, ol.spaced_list, .spaced_list ol {
margin: 0;
padding: 0 !important;
list-style-type: square;
}
.spaced_list li {
margin: 0 0 10px 25px !important;
padding: 0;
}
ul.tick_list, ul.tick_list li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.actions_list {
padding: 0 0 0 {$?,{$MOBILE},10,40}px;
margin: 0;
}
.global_side ul.actions_list {
padding-left: 15px;
}
ul.actions_list li, ul.actions_list_compact li, ul.actions_list_super_compact li {
padding: 0;
margin: 0;
list-style-type: none;
list-style-image: none;
}
ul.actions_list h4 {
display: inline;
line-height: 2em;
}
ul.actions_list_compact {
padding: 0 0 0 20px;
margin: 0;
}
ul.actions_list_super_compact {
padding: 0;
margin: 0;
}
li.actions_list_strong {
font-weight: bold;
}
/*
=========================
=======Misc Forms========
=========================
*/
.captcha {
font-size: 0.8em;
margin-bottom: 3px;
}
.captcha a {
float: {!en_right};
margin: 10px 0 0 5px;
}
/* This will push back 100% width elements that would cause CSS-overflows or table-stretches. Input fields do it a lot because they have built in borders. Doesn't happen for drop-downs and buttons */
.constrain_field {
padding-{!en_right}: 9px; /* Tested for precision on Firefox */
}
.quite_wide_field {
width: 88%;
}
.wide_field, .wide_button {
width: 100%;
}
input.input_box_label_within {
color: gray;
}
input[type="reset"].wide_button, input[type="reset"].button_micro, input[type="reset"].button_page, input[type="reset"].button_pageitem,
input[type="submit"].wide_button, input[type="submit"].button_micro, input[type="submit"].button_page, input[type="submit"].button_pageitem,
input[type="button"].wide_button, input[type="button"].button_micro, input[type="button"].button_page, input[type="button"].button_pageitem,
button.wide_button, button.button_micro, button.button_page, button.button_pageitem
{
{$BETA_CSS_PROPERTY,transition: opacity 0.5s linear;}
display: inline-block;
border: none;
cursor: pointer;
border: 1px solid #072d65; /* {$,wizard, 100% bordcolor}*/
background-color: #5a85c5; /* {$,wizard, 100% lgradcolor} */
color: #ffffff; /* {$,wizard, 100% W/B} */
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px;
background-image: url('{$IMG;,standardboxes/title_gradient}');
opacity: 0.85;
text-shadow: 1px 1px 1px #000000; /* {$,wizard, 100% !W/B} */
margin: 0 2px;
}
.button_pageitem_tall {
background-image: none !important;
}
.button_options_spacer {
margin-{!en_left}: {$?,{$MOBILE},10,30}px;
}
input[type="reset"].button_micro, input[type="submit"].button_micro, input[type="button"].button_micro, button.button_micro
{
padding: 0 3px 1px 3px !important;
opacity: 1.0; /* Needed for Opera */
}
input[type="reset"].wide_button, input[type="submit"].wide_button, input[type="button"].wide_button, button.wide_button, input[type="submit"].button_pageitem, input[type="button"].button_pageitem, button.button_pageitem
{
padding: 2px 4px 3px 4px !important;
}
input[type="reset"].button_page, input[type="submit"].button_page, input[type="button"].button_page, button.button_page
{
padding: 3px 5px 4px 5px !important;
min-width: {$?,{$MOBILE},5.8,9.8}em;
}
input[type="reset"].wide_button:hover, input[type="reset"].button_micro:hover, input[type="reset"].button_page:hover, input[type="reset"].button_pageitem:hover,
input[type="submit"].wide_button:hover, input[type="submit"].button_micro:hover, input[type="submit"].button_page:hover, input[type="submit"].button_pageitem:hover,
input[type="button"].wide_button:hover, input[type="button"].button_micro:hover, input[type="button"].button_page:hover, input[type="button"].button_pageitem:hover,
button.wide_button:hover, button.button_micro:hover, button.button_page:hover, button.button_pageitem:hover
{
opacity: 1.0;
}
input[type="reset"].wide_button:disabled, input[type="reset"].button_micro:disabled, input[type="reset"].button_page:disabled, input[type="reset"].button_pageitem:disabled,
input[type="submit"].wide_button:disabled, input[type="submit"].button_micro:disabled, input[type="submit"].button_page:disabled, input[type="submit"].button_pageitem:disabled,
input[type="button"].wide_button:disabled, input[type="button"].button_micro:disabled, input[type="button"].button_page:disabled, input[type="button"].button_pageitem:disabled,
button.wide_button:disabled, button.button_micro:disabled, button.button_page:disabled, button.button_pageitem:disabled
{
opacity: 0.4 !important;
cursor: default;
}
.button_page, .button_pageitem {
vertical-align: middle;
{+START,IF,{$MOBILE}}
margin-bottom: 5px;
{+END}
}
.proceed_button {
text-align: center;
padding: 15px 0; /* Can't be margin, as in Firefox it can collapse below the body */
margin: 0;
}
.global_side .proceed_button {
padding: 5px 0;
}
div.proceed_button_left {
text-align: {!en_left};
}
div.proceed_button_left_2 {
text-align: {!en_left};
margin-{!en_left}: -20px;
}
.mini_proceed_button {
padding-top: 20px;
}
.shunted_button {
text-align: {!en_right};
}
.button_panel_spaced {
margin-top: 10px;
}
.button_panel {
text-align: center;
}
.button_panel_left {
}
/*
=========================
====Frame Interfaces=====
=========================
*/
.dynamic_iframe {
width: 100%;
height: 900px; /* This is dynamically resized; 900px is referenced from JAVASCRIPT.tpl so don't change it */
}
.expandable_iframe {
width: 100%;
}
/*
=========================
=======Carousels=========
=========================
*/
.carousel {
overflow: hidden;
width: 100%;
white-space: nowrap;
position: relative;
}
.carousel .img_thumb {
max-width: 140px;
}
.carousel .move_left, .carousel .move_right {
min-height: 16px;
width: 17px;
}
.carousel .move_left {
margin-right: 20px;
padding-right: 5px;
float: left;
background: url('{$IMG;,carousel/button_left}') left center no-repeat;
border-right: 1px dotted #6b81a1; /* {$,wizard, 100% medborder.border} */
}
.carousel .move_left_hover {
background-image: url('{$IMG;,carousel/button_left_hover}');
}
.carousel .move_right {
margin-left: 20px;
padding-left: 5px;
float: right;
background: url('{$IMG;,carousel/button_right}') right center no-repeat;
border-left: 1px dotted #6b81a1; /* {$,wizard, 100% medborder.border} */
}
.carousel .move_right_hover {
background-image: url('{$IMG;,carousel/button_right_hover}');
}
.carousel .main {
overflow: hidden;
}
/*
=========================
===========Tabs==========
=========================
*/
.tab_surround {
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;
border-color: #b5b5b5; /* {$,wizard, 100% b5b5b5} */
padding: 8px;
margin-left: 1px;
}
.tabs {
border-left: 0;
border-right: 0;
border-top: 0;
border-bottom: 1px solid;
border-color: #b5b5b5; /* {$,wizard, 100% b5b5b5} */
height: 22px;
}
a.tab:link, a.tab:visited, a.tab:hover, a.tab:active {
text-decoration: none;
}
.tab {
float: left;
background: url('{$IMG;,tab}') !important;
padding: 3px 7px 0 7px !important;
height: 20px;
text-align: center;
cursor: pointer;
}
.tab_active {
font-weight: bold;
}
.tab:hover {
text-decoration: underline !important;
}
.tab strong {
font-weight: normal;
font-style: italic;
}
.tab_first {
}
.tab_last {
border-right: 1px solid;
border-color: #b5b5b5; /* {$,wizard, 100% b5b5b5} */
}
.tab_surround .tab { /* subtabs */
padding-top: 5px !important;
height: 18px;
font-size: 0.88em;
}
/*
=========================
==========Menus==========
=========================
*/
.nl, .nl ul {
display: block;
margin: 0;
padding-{!en_left}: 0;
}
.nl li {
display: block;
margin-{!en_left}: 0;
padding-{!en_left}: 0;
list-style-type: none;
list-style-image: none;
}
.menu_type__tree .has_no_img .drawer, .menu_type__popup .has_no_img .drawer {
background: url('{$IMG;,menus/menu_bullet_expand}') no-repeat 0 5px !important;
}
.menu_type__tree .has_no_img .drawer:hover, .menu_type__popup .has_no_img .drawer:hover {
background: url('{$IMG;,menus/menu_bullet_expand_hover}') no-repeat 0 5px !important;
}
.has_img a {
background: none !important;
padding-{!en_left}: 0 !important;
}
.has_img {
padding-{!en_left}: 25px !important;
}
.has_img img {
vertical-align: bottom;
}
.menu_type__dropdown .nlevel .has_img img, .menu_type__popup .has_img img {
width: 20px;
}
.menu_type__tree ul li a, .menu_type__popup ul li a, .menu_type__dropdown ul.nlevel li a { /* ul li added to ensure precedence over ".nl li" selector, whilst not forcing us to use up our only !important */
display: inline-block;
padding-{!en_left}: 14px;
}
.menu_type__tree .current a, .menu_type__popup .current a, .menu_type__dropdown .nlevel .current a {
background: transparent url('{$IMG;,menus/menu_bullet_current}') no-repeat 5px 6px !important;
}
.menu_type__popup .has_img.current a, .menu_type__dropdown .nlevel .has_img.current a {
background: none !important;
}
.menu_type__tree .non_current a, .menu_type__popup .non_current a, .menu_type__dropdown .nlevel .non_current a {
background: transparent url('{$IMG;,menus/menu_bullet}') no-repeat 5px 6px;
}
.menu_type__tree .non_current a:hover, .menu_type__popup .non_current a:hover, .menu_type__dropdown .nlevel .non_current a:hover {
background: transparent url('{$IMG;,menus/menu_bullet_hover}') no-repeat 5px 6px;
}
.menu_type__select li, .menu_type__dropdown .nlevel li {
padding: 3px 5px !important;
}
.menu_type__tree li, .menu_type__popup li {
padding: 3px 5px 3px 0 !important;
}
.menu_type__popup .nlevel li , .menu_type__dropdown .nlevel li {
white-space: nowrap;
}
.global_bottom img {
{$BETA_CSS_PROPERTY,transition: transform 0.5s linear;}
}
.global_bottom img:hover {/*, .menu_type__dropdown li:hover>img*/
{$BETA_CSS_PROPERTY,transform: rotate(10deg);}
}
.menu_type__popup {
min-width: 150px;
}
.menu_type__dropdown ul.nlevel, .menu_type__popup ul {
line-height: 1.4em;
border-top: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
border-left: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
border-right: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
}
.menu_type__dropdown ul.nlevel {
{$BETA_CSS_PROPERTY,box-shadow: 3px 3px 10px #6b81a1;} /* {$,wizard, 100% medborder.border} */
}
.menu_type__popup .menu_spacer, .menu_type__popup li, .menu_type__dropdown .nlevel li, .menu_type__dropdown .nlevel .menu_spacer {
border-bottom: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
}
.menu_type__popup .menu_spacer, .menu_type__popup li {
background-color: #eaeff6 !important; /* {$,mm_c_tab, 100% ocf_row2} */
}
.menu_type__popup li a:link, .menu_type__popup li a:visited, .menu_type__popup li a:active {
color: #123d7b; /* {$,wizard, 73% (seed sat_to 85) + 27% !W/B} */
}
.menu_type__popup li a:hover {
color: #9C202F !important; /* {$,wizard, 100% a.hover}*/
}
.menu_type__popup ul ul {
margin-top: -1px;
}
.menu_type__popup a:link, .menu_type__popup a:visited, .menu_type__popup a:active, .menu_type__dropdown .nlevel a:link, .menu_type__dropdown .nlevel a:visited, .menu_type__dropdown .nlevel a:active {
text-decoration: none;
}
.menu_type__popup a:hover, .menu_type__dropdown .nlevel a:hover {
text-decoration: underline;
cursor: pointer;
}
.menu_type__dropdown .nlevel li, .menu_type__dropdown .nlevel .menu_spacer {
background-color: #c1cee3; /* {$,wizard, 100% lightborder} */
}
.menu_type__dropdown .nlevel li:hover {
background-color: #d9e1ee; /* {$,wizard, 20% seed + 80% W/B} */
}
.menu_type__dropdown .nlevel .menu_spacer {
display: block;
padding-{!en_right}: 0;
}
.menu_type__dropdown .nlevel, .menu_type__dropdown .nlevel a:active, .menu_type__dropdown .nlevel a:link, .menu_type__dropdown .nlevel a:visited, .menu_type__dropdown .nlevel a:hover {
color: #0d1522 !important; /* {$,wizard, 20% seed + 80% !W/B} */
}
.menu_type__embossed, .menu_type__top, .menu_type__dropdown {
overflow: hidden;
outline: 0;
}
.menu_type__embossed, .menu_type__top, .menu_type__dropdown, .menu_type__embossed li, .menu_type__top li, .menu_type__dropdown li.toplevel {
background-color: #eaeff6 !important; /* {$,mm_c_tab, 100% ocf_row2} */
}
.menu_type__embossed .current, .menu_type__top .current, .menu_type__dropdown .toplevel.current {
color: #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
background-color: #c2d1e5 !important; /* {$,hover_bg, 93% (mm_c_tab sat_to 15) + 7% !W/B} */
}
.menu_type__embossed a:link, .menu_type__embossed a:visited, .menu_type__embossed a:hover, .menu_type__embossed a:active, .menu_type__top a:link, .menu_type__top a:visited, .menu_type__top a:hover, .menu_type__top a:active {
text-decoration: none;
}
.menu_type__embossed a:hover, .menu_type__top a:hover, .menu_type__dropdown a.toplevel_link:hover {
background-color: #c2d1e5 !important; /* {$,hover_bg, 93% (mm_c_tab sat_to 15) + 7% !W/B} */
{$BETA_CSS_PROPERTY,transition: color,background-color 0.5s linear;}
}
.menu_type__embossed a, .menu_type__top a, .menu_type__dropdown a.toplevel_link {
display: block;
padding: 3px 4px 5px 4px !important;
outline: 0;
}
.menu_type__top a, .menu_type__dropdown a.toplevel_link {
font-size: 0.9em;
}
{+START,IF,{$NEQ,{$LANG},EN}}
.menu_type__embossed a, .menu_type__top a, .menu_type__dropdown a.toplevel_link {
font-size: 0.72em;
}
{+END}
.menu_type__embossed {
border-left: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
border-right: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
border-bottom: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
}
.menu_type__embossed li {
border-top: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
}
.menu_type__top, .menu_type__dropdown {
border-top: 1px solid #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
border-bottom: 1px solid #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
border-{!en_right}: 1px solid #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
}
.menu_type__top li, .menu_type__dropdown li.toplevel {
float: {!en_left};
border-{!en_left}: 1px solid #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
margin-{!en_right}: -1px;
margin-bottom: 0;
{+START,IF,{$MOBILE}}
font-size: 0.8em;
{+END}
{$BETA_CSS_PROPERTY,transition: color,background-color 0.5s linear;}
}
.menu_type__top li.last, .menu_type__dropdown li.toplevel.last {
float: none !important; /* so it eats all space remaining */
overflow: hidden; /* so it is shunted against it's left-hand neighbours without overlapping */
margin-{!en_right}: 0 !important; /* as would cause wrapping with the overflow hidden */
position: relative; {!en_left}: -1px; /* In place of margin-right */
}
.menu_type__top li.last a, .menu_type__dropdown li.toplevel.last a {
border-left: 1px solid #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
}
.menu_type__top img, .menu_type__dropdown .toplevel_link img {
margin-top: -2px;
}
.menu_type__top img, .menu_type__dropdown img {
float: {!en_left};
padding: 0 8px 0 3px;
}
.menu_type__top .menu_spacer, .menu_type__dropdown li.toplevel.menu_spacer {
height: 1.15em;
width: 4em;
padding: 4px;
float: {!en_left};
}
.menu_type__tree ul, .menu_type__select ul {
margin: 2px 0 0 0 !important;
}
.menu_type__tree ul ul {
padding-{!en_left}: 5px;
}
.menu_type__zone {
font-size: 0.9em;
max-height: 15px;
}
.menu_type__zone ul {
display: inline;
margin: 0;
padding: 0;
{+START,IF,{$MOBILE}}
overflow:hidden;
height:auto;
text-align:center;
{+END}
}
{+START,IF,{$NEQ,{$LANG},EN}}
.menu_type__zone ul {
font-size: 0.85em;
}
{+END}
.menu_type__zone li {
display: inline;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menu_type__zone li * {
vertical-align: middle;
}
.menu_type__zone .divider {
color: #bdcbe1; /* {$,wizard, 35% seed + 65% W/B} */
}
#global_navigation .menu_type__zone a:link, #global_navigation .menu_type__zone a:visited, #global_navigation .menu_type__zone a:active {
color: #edf2f9; /* {$,wizard, 15% zg_top + 85% W/B} */
}
.menu_type__zone a:link, .menu_type__zone a:visited, .menu_type__zone a:active {
margin-{!en_right}: 1px;
text-decoration: none;
}
#global_navigation .menu_type__zone a:hover {
color: #ffffff; /* {$,global_navigation_hover, 100% W/B } */
}
.menu_type__zone a {
border-bottom: 1px transparent;
{$BETA_CSS_PROPERTY,transition: border-bottom-color 0.5s linear;}
border-bottom-color: #426aa9; /* {$,wizard, 100% seed} */
}
.menu_type__zone a:hover {
text-decoration: none;
border-bottom: 1px dashed;
}
.menu_type__zone .current {
border-bottom: 1px dashed;
border-bottom-color: #a5bde1; /* {$,wizard, 75% zg_top + 25% FFFFFF} */
}
.menu_type__zone .current:hover {
border-bottom: 1px dashed;
border-bottom-color: #ffffff; /* {$,wizard, 100% global_navigation_hover} */
}
.menu_type__zone .menu_spacer {
padding: 0 3em;
}
.edit_menu_link {
text-align: {!en_right};
font-size: 0.8em;
}
.menu_block .edit_menu_link a, #global_navigation .edit_menu_link_inline, #panel_top .edit_menu_link_inline, #panel_bottom .edit_menu_link_inline {
opacity: 0.4;
{$BETA_CSS_PROPERTY,transition: opacity 0.5s linear;}
}
.menu_block:hover .edit_menu_link a, #global_navigation:hover .edit_menu_link_inline, #panel_top:hover .edit_menu_link_inline, #panel_bottom:hover .edit_menu_link_inline {
opacity: 1.0;
}
*>.edit_menu_link_inline {
display: none;
}
*:hover>.edit_menu_link_inline {
display: block;
}
.edit_menu_link_inline {
position: absolute;
right: 1px;
z-index: 10000;
}
/*
=========================
=========Comcode=========
=========================
*/
.comcode_snapback {
text-align: {!en_right};
font-size: 0.7em;
}
.comcode_overlay {
padding: 15px;
margin: 0;
background-color: #fafbfd; /* {$,code_content, 25% ocf_row2 + 75% W/B} */
border: 1px solid #7f9ac5; /* {$,wizard, 68% seed + 32% W/B} */
}
.comcode_overlay_main {
margin-bottom: 3em;
}
.comcode_overlay_dismiss {
text-align: center;
position: absolute;
bottom: 0;
width: 90%;
}
.comcode_code_wrap {
width: 100%;
overflow-x: auto;
}
/* .comcode_quote is used where the [quote] tag is parsed. */
/* .comcode_code is used where the [code] tag is parsed. */
.comcode_quote, .comcode_code, .comcode_hide {
margin: 15px;
/* To prevent horizontal overlapping with floats */
outline: 0;
}
.comcode_quote, .comcode_code {
overflow: auto;
}
.comcode_hide {
overflow: hidden;
}
.comcode_quote_h4,
.comcode_code_h4 {
border: 1px solid #7f9ac5; /* {$,wizard, 68% seed + 32% W/B} */
padding: 4px;
margin-bottom: 0;
background: #8ea6cb url('{$IMG;,quote_gradient}') repeat-y; /* {$,comcode_code_h4, 60% seed + 40% W/B} */
}
.comcode_quote_content,
.comcode_code_content {
border: 1px solid #7f9ac5; /* {$,wizard, 68% seed + 32% W/B} */
display: block;
padding: 5px;
margin-{!en_left}: 8px;
background-color: #fafbfd; /* {$,code_content, 25% ocf_row2 + 75% W/B} */
color: #3f3f3f; /* {$,wizard, 25% code_content + 85% !W/B} */
overflow: hidden;
}
.comcode_quote_content_titled {
border-top: 0;
}
.comcode_code_content {
font-family: 'Courier New', 'Courier', monospace;
font-size: 1.1em;
border-top: 0;
white-space: nowrap;
overflow: auto;
}
.comcode_code_scroll {
max-height: 300px;
}
.comcode_highlight {
font-weight: bold;
color: #d91522; /* {$,wizard, 100% red_highlights} */
background-color: #ffffcc; /* {$,orange_highlights,100% #ffffcc} */
}
.cedi_link, .comcode_exp_ref {
color: #444649; /* {$,wizard, 30% sb_color + 70% !W/B} */
font-size: 0.85em;
}
.comcode_exp_ref a {
background-image: url('{$IMG;,arrow_box}') !important;
}
.cedi_link a {
background-image: url('{$IMG;,cedi_link}') !important;
}
.comcode_exp_ref a, .cedi_link a {
padding-{!en_right}: 17px !important;
background-repeat: no-repeat !important;
background-position: 100% 30% !important;
}
.comcode_exp_ref a:hover {
background-image: url('{$IMG;,arrow_box_hover}') !important;
}
.cedi_link a:hover {
background-image: url('{$IMG;,cedi_link_hover}') !important;
}
.comcode_exp_ref a:hover, .cedi_link a:hover {
padding-{!en_right}: 17px !important;
background-repeat: no-repeat !important;
background-position: 100% 30% !important;
}
.comcode_exp_thumb {
background-color: #eaeff6; /* {$,wizard, 100% ocf_row2} */
width: 10%;
padding: 0;
margin: 5px;
margin-{!en_left}: 0;
}
.comcode_exp_thumb td {
border: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
}
.comcode_exp_thumb p {
color: #325180; /* {$,wizard, 76% seed + 24% !W/B} */
font-size: 0.8em;
padding: 2px;
margin: 0;
margin-bottom: 3px;
}
.comcode_exp_thumb img {
margin: 1px;
}
.comcode_concept_inline, a.comcode_concept_inline:link, a.comcode_concept_inline:visited, a.comcode_concept_inline:hover, a.comcode_concept_inline:active {
border-bottom: 1px dashed #325180; /* {$,wizard, 76% seed + 24% !W/B} */
display: inline-block;
}
.comcode_concepts {
font-size: 0.85em;
border: 1px solid #bdcbe1; /* {$,wizard, 35% seed + 65% W/B} */
background-color: #eaeff6; /* {$,wizard, 100% ocf_row2} */
width: 80%;
margin: 0 auto;
}
.comcode_concepts_header {
font-weight: bold;
text-align: center;
background-color: #a2b6d5; /* {$,wizard, 60% sb_color + 40% seed} */
color: #313740; /* {$,wizard, 30% th.bgcolor + 70% !W/B} */
height: 1.8em;
}
.comcode_concepts_title {
background-image: url('{$IMG;,checklist/checklist1}');
background-repeat: no-repeat;
background-position: 1px 0;
vertical-align: top;
text-indent: 14px;
margin: 0;
}
.comcode_concepts_content {
padding-bottom: 0.8em;
}
.comcode_table_of_contents {
border: 1px solid #bdcbe1; /* {$,wizard, 35% seed + 65% W/B} */
background-color: #eaeff6; /* {$,wizard, 100% ocf_row2} */
display: inline-block;
padding-{!en_right}: 10px;
white-space: nowrap;
font-size: 0.9em;
}
.search_result .comcode_table_of_contents {
display: none;
}
.comcode_table_of_contents ol {
list-style-position: inside;
padding-{!en_left}: 12px;
margin: 0;
}
.comcode_table_of_contents li {
margin: 0;
padding: 0;
}
.comcode_table_of_contents a {
margin: 0;
}
.comcode_table_of_contents_title {
text-align: center;
color: #444649; /* {$,wizard, 30% sb_color + 70% !W/B} */
margin: 3px;
font-weight: bold;
}
.comcode_italic {
font-style: italic;
}
.comcode_bold {
font-weight: bold;
}
.comcode_underline {
text-decoration: underline;
}
.comcode_strike {
text-decoration: line-through;
}
.comcode_section_controller {
padding-top: 10px;
margin-bottom: 20px;
}
.ticker {
margin: 0 auto;
height: 15px;
white-space: nowrap;
overflow: hidden;
text-align: left;
}
.shocker {
text-align: right;
width: 100%;
font-size: 1.2em;
}
.shocker_left {
float: left;
font-weight: bold;
}
.shocker_right {
}
{+START,IF,{$NOT,{$MOBILE}}}
.attachment {
min-width: 450px;
margin: 1em 0;
border: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
}
.attachment legend {
border: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
padding: 0.15em 0.3em;
font-size: 0.9em;
font-style: italic;
}
{+END}
.attachment_details {
margin-top: 8px;
}
.attachment_left {
float: left;
margin: 0 15px 5px 0;
}
.attachment_right {
float: right;
margin: 0 0 5px 15px;
}
.attachment_left .attachment, .attachment_right .attachment {
width: 200px;
}
.attachment_action {
font-size: 0.8em;
}
.attachment_action a {
font-weight: bold;
}
.attachment_img {
max-width: 100%;
}
/*
=========================
====Link type display====
===Based on "Elements"===
==== by Ben Henschel ====
=========================
*/
a[href^="mailto:"] {
background: url('{$IMG;,filetypes/email_link}') no-repeat right top;
padding: 0 22px 5px 0;
}
a[href$=".pdf"], a[href$=".ps"], body div a.pdf_link {
background: url('{$IMG;,filetypes/page_pdf}') no-repeat right top;
padding: 0 22px 5px 0;
}
a[href$=".doc"], a[href$=".docx"], a[href$=".rtf"], body div a.doc_link {
background: url('{$IMG;,filetypes/page_doc}') no-repeat right top;
padding: 0 22px 5px 0;
}
a[href$=".xls"], a[href$=".xlsx"], body div a.xls_link {
background: url('{$IMG;,filetypes/page_xls}') no-repeat right top;
padding: 0 22px 5px 0;
}
a[href$=".ppt"], a[href$=".pptx"], body div a.ppt_link {
background: url('{$IMG;,filetypes/page_ppt}') no-repeat right top;
padding: 0 22px 5px 0;
}
a[href$=".log"], a[href$=".txt"], body div a.txt_link {
background: url('{$IMG;,filetypes/page_txt}') no-repeat right top;
padding: 0 22px 5px 0;
}
a[href$=".odt"], body div a.odt_link {
background: url('{$IMG;,filetypes/page_odt}') no-repeat right top;
padding: 0 22px 5px 0;
}
a[href$=".odp"], body div a.odp_link {
background: url('{$IMG;,filetypes/page_odt}') no-repeat right top;
padding: 0 22px 5px 0;
}
a[href$=".ods"], body div a.ods_link {
background: url('{$IMG;,filetypes/page_ods}') no-repeat right top;
padding: 0 22px 5px 0;
}
a[href$=".rss"], body div a.feed_link {
background: url('{$IMG;,filetypes/feed}') no-repeat right top;
padding: 0 22px 5px 0;
}
a[href$=".torrent"], body div a.torrent_link {
background: url('{$IMG;,filetypes/page_torrent}') no-repeat right top;
padding: 0 22px 5px 0;
}
a[href$=".zip"], a[href$=".gz"], a[href$=".bz2"], a[href$=".tar"], a[href$=".rar"], body div a.archive_link {
background: url('{$IMG;,filetypes/page_archive}') no-repeat right top;
padding: 0 22px 5px 0;
}
a[href$=".asf"], a[href$=".ra"], a[href$=".wma"], a[href$=".wav"], a[href$=".mp3"], a[href$=".ogg"], a[href$=".mid"], a[href$=".mov"], a[href$=".qt"], a[href$=".wmv"], a[href$=".ram"], a[href$=".rm"], a[href$=".avi"], a[href$=".mpg"], a[href$=".mpe"], a[href$=".mpeg"], a[href$=".mp4"], a[href$=".webm"], body div a.media_link {
background: url('{$IMG;,filetypes/page_media}') no-repeat right top;
padding: 0 22px 5px 0;
}
a[target="_blank"] {
background: url('{$IMG;,filetypes/external_link}') no-repeat right top;
padding-right:10px;
}
a[onclick$="window.open"], body div a.external_link {
background: url('{$IMG;,filetypes/external_link}') no-repeat right top !important;
padding-right:10px !important;
}
body a.link_exempt, body link_exempt_wrap a, body a[href*=".php"] {
background-image:none;
padding:0px;
}
body a.link_exempt2 {
background-image:none;
}
{+START,IF,{$ADDON_INSTALLED,recommend}}
.print_icon {
background: url('{$IMG;,recommend/print}') no-repeat left top !important;
padding: 0 0 5px 22px !important;
}
{+END}
a[title="{!VIRTUAL_ROOT}"]:hover {
color: #d91522; /* {$,red_highlights, 80% FF0000 + 20% seed} */
}
/*
=========================
=======Print rules=======
=========================
*/
@media print {
body {
background: none;
}
h1 {
display: none;
}
.wide_table_wrap {
overflow-y: visible !important;
}
.button_panel,
#screen_actions_outer,
.adminzone_search,
header,
.global_banner,
.hide_button,
footer,
.global_side,
.quick_self_edit_link, .control_functions, .staff_actions,
#comments_form,
.members_viewing,
.ratings, .trackbacks {
display: none;
}
#global_navigation {
visibility: hidden;
}
}
- If not, please let us know how we can do better (please make suggestions that are economically viable and scalable, not just requests to do more for free).
- If so, please let others know about ocPortal whenever you see the opportunity.
|
This information has not loaded yet. It will be generated in the background, please come back later.
|
If I answered something that you think should be in the documentation, please take the initiative and add it to the community documentation. We really need people to help out here and build a well-organised large support resource.
|
A symbol is missing: V. This usually happens when Comcode is written without placing template/PHP code within a code tag.
Last edit: by BobS
. I'm tidying this up too.
However, and please take the following remark from a non-pro coder point of view only, but it seems to me that the CSS code used by ocPortal should in the end also be as close as possible to what casual themers expect it to be, otherwise it might send more than a few into panic, thinking that the process of modifying CSS is just for professional coders.
