/*
LU LU LU
Mess of colour stuff moved into and then out of blue.less and maimed horribly courtesy of your friendly neighbourhood cranky designer
Seriously, please clean this up somehow. If you can.
NOTE: image URLs use a _seemingly_ incorrect relative path (like "../images/what.ever"),
but it's actually correct because of the way how *this* file is imported by
the files in the /resources/css/theme/ directory, so paths in this file need to
be relative to that directory instead of the directory in which this file
resides!
*/
/* Fixed header */
@header-color: @nav-bg;
@header-border-bottom-color: @nav-accent;
/* generic */
@body-bg-color: @generic-grey-65;
@a-color: @a;
@a-new-color: @a-new;
/*
and the like */
@text-header-bg-color: @generic-grey-7;
@text-header-color: @header-text;
/* Custom .button class */
@button-bg-color: @generic-grey-8;
@button-border-color: @generic-grey-6;
@button-color: @generic-grey-4;
@button-primary-bg-color: @nav-text;
@button-primary-border-color: @nav-text;
@button-primary-color: @button-bg-color;
@button-primary-hover-bg-color: @nav-bg;
@button-primary-hover-border-color: @nav-bg;
@button-secondary-color: @button-color;
@button-secondary-bg-color: @button-bg-color;
@button-secondary-hover-border-color: @nav-accent;
@button-secondary-hover-color: @nav-text;
@button-disabled-general-color: @generic-grey-6;
/* Search button -- this should be a shade or two darker than the header */
@search-button-background-color: @nav-button;
@search-button-color: @nav-text-highlight;
/* Search button hover effect -- should be _even_ darker than the one above */
@search-button-hover-background-color: @nav-button-accent;
@search-button-hover-color: @button-bg-color;
/* The actual area where the user types the keyword(s) they want to search for; should be lighter than #header */
@search-input-border-color: @nav-accent;
@search-input-background-color: @generic-grey-7;
@search-input-text-color: @generic-grey-3;
/* The border of the four menus in the #header when one of the menus is open */
@menu-bg-color: @generic-grey-7;
@menu-open-border-color: @nav-accent;
/* ...and when they're not open */
@menu-border-left-color: @nav-accent;
@menu-border-color: @nav-highlight;
/* Admin options menu */
@admin-options-menu-color: @a;
@admin-options-menu-hover-color: @generic-grey-8;
/* Link background color in the four menus */
@menu-link-bg-color: @nav-accent;
@menu-hover-color: @generic-grey-8;
/* Four menus' default text color */
@menu-default-text-color: @generic-grey-1;
/* What is this I don't even... */
@header-menu-hover-nav-color: @generic-grey-8;
/* Color when active/open */
@header-menu-bg-color: @nav-accent;
@header-menu-color: @nav-accent;
/* Keep the color in sync with #header's color */
@footer-color: @nav-bg;
@footer-border-top-color: @nav-accent;
/* DA CRAP IS THIS */
@generic-red-1: #c00;
@generic-red-2: #e00;
@generic-reddish: #fdfcde;
@generic-reddish-1: #cba;
@generic-reddish-2: #dfdacd;
@generic-reddish-3: #f2f0eb;
@generic-reddish-4: #ddc;
@generic-blue-1: #79b;
@generic-blue-2: #28e;
@generic-blue-3: #bcd;
@button-red-hover-border-color: #f11c1c;
@button-red-hover-color: #f11c1c;
@searchbox-bg-color: #bcd;
@searchbox-color: #445;
/* LU LU Actual skin stuff LU */
html, body { height: 100%; }
body, h1, h2, h3, h4, p, input[type=text], li , textarea {
font-family: Helvetica, arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
img {
border: none;
}
* {
margin: 0;
padding: 0;
}
/* no stupid outlines */
:focus {
outline: none;
}
::-moz-focus-inner {
border: 0;
}
body {
background-color: @body-bg-color;
color: @body-text;
margin: 0px;
padding: 0px;
font-size: 1em;
}
a {
color: @a-color;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.anchor {
padding-top: 28px;
visibility: hidden;
}
ol {
padding: 0;
}
h1 {
font-size: 35px;
color: @text-header-color;
line-height: normal;
margin: 0;
text-align: left;
}
h1 a:hover {
text-decoration: none;
}
h2, legend {
font-size: 20px;
font-weight: bold;
margin: 0px 0px 10px 0px;
padding: 0;
color: @text-header-color;
line-height: 18px;
}
legend {
color: @generic-grey-4;
}
.section h2 {
/*position: absolute;*/
top: 0;
width: 100%;
left: 0;
line-height: 62px;
background-color: @text-header-bg-color;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
z-index: 3;
}
h3, h4 {
font-size: 20px;
font-weight: bold;
color: @text-header-color;
line-height: 18px;
width: 100%;
background-color: @text-header-bg-color;
}
.section h3 {
z-index: 3;
left: 0;
top: 0px;
line-height: 29px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: @text-header-bg-color;
}
/* for those sticky headers */
.section h2.sticking, .section h3.sticking, .tool div.sticking {
position: fixed;
top: 39px;
margin-left: -27px;
width: 723px;
left: auto;
z-index: 998;
}
.tool div.sticking {
margin-left: 0;
width: 675px;
}
div.thumbnail img {
min-width: 120px;
min-height: 120px;
}
div.thumbnail div.text {
min-width: 120px;
min-height: 30px;
}
.altblock {
height: 18px;
width: 18px;
background-color: @generic-blue-1;
float: left;
margin-right: 8px;
}
.section .altblock {
margin: 21px 8px 0 25px;
}
#ingredients .altblock {
margin: 17px 8px 0 0;
}
h4 .altblock {
filter: alpha(opacity=40);
opacity: 0.40;
}
h4 {
font-weight: normal;
line-height: 29px;
margin: -21px 0 0 -27px;
}
#dialog-box h3, #dialog-box h4 {
background: none;
}
h5 {
font-size: .9em;
color: @text-header-color;
}
sup {
line-height: normal;
}
.hidden {
display: none;
}
.article_inner h4 {
margin: 20px -15px 15px -15px;
}
p {
margin: 0;
padding: 0;
}
.clearall {
clear: both;
}
.clearleft {
clear: left;
}
.hide {
display: none;
}
textarea, select {
border: 2px solid @generic-grey-5;
padding: 5px;
font-size: 14px;
color: @generic-grey-1;
}
input[type="checkbox"] {
margin-right: .4em;
}
.button {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
border: 0px;
color: @button-color;
padding: 12px 16px;
font-size: 12px;
margin-right: 10px;
cursor: pointer;
font-weight: bold;
/*line-height: 33px;
^ let's do this on an as-needed basis */
border: 1px solid @button-border-color;
background-color:@button-bg-color;
}
.button.small {
padding: 2px 6px;
font-size: 10px;
height: 20px;
}
.button:hover {
text-decoration: none;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-ms-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
}
/** for links that are in a row with buttons **/
a.new { color: @a-new-color; } /** Broken links **/
.button.large {
font-size: 16px;
padding: 0 15px;
}
a.button.disabled, input.button.disabled, a.button.clickfail,
input.button.clickfail {
background: @button-disabled-general-color;
cursor: default;
}
a.button.disabled {
border-color: @button-disabled-general-color;
}
a.button.disabled:hover, input.button.disabled:hover, a.button.clickfail:hover,
input.button.clickfail:hover {
background: @button-disabled-general-color;
/*color: @button-color;*/
}
.button.primary {
background-color: @button-primary-bg-color;
border: 1px solid @button-primary-border-color;
color: @button-primary-color;
}
.button.primary:hover {
background-color: @button-primary-hover-bg-color;
border: 1px solid @button-primary-hover-border-color;
}
.button.secondary {
color: @button-secondary-color;
background-color: @button-secondary-bg-color;
}
.button.secondary:hover {
color: @button-secondary-hover-color;
border: 1px solid @button-secondary-hover-border-color;
}
.button.red:hover {
color: @button-red-hover-color;
border: 1px solid @button-red-hover-border-color;
}
.buttonright { float: right; }
.buttonleft { float: left; }
.input_med, #wpCaptchaWord {
font-size: 1.3em;
padding: 11px;
border: 1px solid @generic-reddish-3;
margin-bottom: 5px;
border-radius: 5px; /* CSS3 */
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari, Chrome */
-khtml-border-radius: 5px; /* KHTML */
}
.noborder {
border: 0px;
}
#article_shell {
margin-right: 325px;
position: relative;
float: left;
width: 725px;
}
#main_container, #footer {
width: 1050px;
margin: 0 auto;
}
#header {
max-width: 1050px;
min-width: 935px;
margin: 0 auto;
}
#main_container {
position: relative;
min-height: 100%;
padding: 0 20px; /* to ensure there's some padding on the smallest browsers and specifically tablet */
}
#container.no_sidebar {
background: none;
}
.no_sidebar #article_shell {
width: 1050px;
}
.no_sidebar #article_shell {
margin-right: 0px;
}
.mw-label, #userloginForm label {
font-weight: bold;
padding-right: 1em;
text-align: right;
}
.mw-info, .mw-error {
/* @embed */
background: url(../../images/bkg_error_bottom.png) bottom left no-repeat;
overflow: hidden;
width: 243px;
margin: -45px 0 0 265px;
position: absolute;
z-index: 2;
}
.mw-info {
display: none;
}
.mw-error-top {
/* @embed */
background: url(../../images/bkg_error_top.png) top left no-repeat;
width: 183px;
margin-bottom: 10px;
padding: 10px 20px 0 40px;
font-size: 11px;
}
.wpMark {
display: none;
vertical-align: middle;
margin-left: 8px;
}
.wpMark:hover {
cursor: pointer;
}
#mw-content-text h1,
#mw-content-text h2,
#mw-content-text h3,
#mw-content-text h4,
#mw-content-text h5,
#mw-content-text h6,
#mw-content-text dt {
background: transparent;
line-height: 1.1em;
margin-bottom: .25em;
margin: 1.5em 0 .5em;
}
#mw-content-text h1 .mw-editsection,
#mw-content-text h2 .mw-editsection,
#mw-content-text h3,
#mw-content-text h4,
#mw-content-text h5,
#mw-content-text h6,
#mw-content-text dt {
font-variant: normal;
}
#mw-content-text h1 {
font-size: 190%;
}
#mw-content-text h2 {
font-size: 160%;
}
#mw-content-text h3 {
font-size: 125%;
}
#mw-content-text h4 {
font-size: 120%;
}
#mw-content-text h5 {
font-size: 108%;
}
#mw-content-text h6, #mw-content-text dt {
font-size: 100%;
}
/****** Header styles ******/
#header_outer {
position: fixed;
*position: relative;
z-index: 100000006; /* set z-index one higher than guided tour balloon z-index */
top: 0;
width: 100%;
background-color: @header-color;
border-bottom: solid 1px @header-border-bottom-color;
}
/* Offsets page for fixed header */
#header_space {
height: 72px;
*display: none;
}
#header {
background-color: @header-color;
height: 72px;
position: relative;
}
#header a h2 {
color: @nav-text-highlight;
text-shadow: 0 1px 0 @nav-accent;
}
#header a:hover {
text-decoration: none;
}
#header #logo_link {
height: 42px;
width: 182px;
float: left;
}
#header.shrunk #logo_link {
height: 27px;
overflow: hidden;
margin-top: 5px;
}
#header .logo {
height: 42px;
width: 162px;
margin: 15px 20px 15px 0;
}
#header.shrunk .logo {
margin: 0 20px 0 0;
}
#header a#logo_link h2.logo-text {
margin-top: 15px;
}
#header.shrunk a#logo_link h2.logo-text {
margin-top: 6px;
height: 18px;
overflow: hidden;
}
#header a#logo_link h2.logo-text {
text-transform: uppercase;
}
#cse-search-box, #header #bubble_search {
padding: 15px 15px 15px 0;
white-space: nowrap;
}
#header.shrunk #cse-search-box, #header.shrunk #bubble_search {
padding: 4px 15px 5px 0;
}
#header #actions {
float: right;
padding: 0px;
margin: 0px;
border-right: 1px solid @menu-border-color;
border-left: 1px solid @menu-border-left-color;
}
#header #actions li {
border-left: 1px solid @menu-border-color;
border-right: 1px solid @menu-border-left-color;
padding: 0px;
height: 72px;
*width: 74px;
float: right;
list-style: none !important;
margin: 0px;
overflow: hidden;
cursor: pointer;
}
#header #actions li:hover {
border-color: @menu-open-border-color;
background-color: @header-menu-bg-color;
color: @header-menu-color;
}
#header.shrunk #actions li {
height: 39px;
}
#header #actions li .nav {
font-size: 10px;
font-weight: bold;
color: @nav-text;
display: block;
padding-top: 47px;
position: relative;
text-align: center;
width: 73px;
z-index: 1;
}
#header #actions li:hover .nav {
color: @header-menu-hover-nav-color;
text-decoration: none;
}
#header.shrunk #actions li .nav {
padding: 0;
line-height: 36px;
}
.menu, .menu_login, .menu_messages {
font-size: 1em;
position: absolute;
border: 1px solid @menu-open-border-color;
margin: 0;
padding: 10px 0;
top: 72px;
z-index: 1000;
background-color: @menu-bg-color;
display: none;
}
#header.shrunk .menu, #header.shrunk .menu_login, #header.shrunk .menu_messages {
top: 39px;
}
.menu_login {
padding: 15px 25px;
}
.menu a {
display: block;
padding: 0 20px 0 15px;
line-height: 26px;
color: @menu-default-text-color; /* Black */
}
#AdminOptions.menu a {
color: @admin-options-menu-color;
}
.menu a:hover {
color: @menu-hover-color;
background-color: @menu-link-bg-color;
text-decoration: none;
}
#AdminOptions.menu a:hover {
color: @admin-options-menu-hover-color;
}
.admin_arrow {
/* @embed */
background: url(../../images/article_sprite.png) no-repeat -92px -43px;
height: 6px;
width: 6px;
display: inline-block;
margin-left: 3px;
}
.nav_icon {
/* @embed */
background: url(../../images/header_sprite.png) no-repeat 0 0;
position: relative;
margin: 13px auto -33px;
}
#header.shrunk .nav_icon {
display: none;
}
#nav_explore_li .nav_icon {
background-position: 0 -99px;
width: 27px;
height: 18px;
margin-top: 15px;
}
#nav_explore_li:hover .nav_icon {
background-position: -46px -99px;
}
#nav_messages_li .nav_icon {
background-position: 0 -19px;
width: 38px;
height: 20px;
}
#nav_messages_li:hover .nav_icon {
background-position: -46px -19px;
}
#nav_profile_li .nav_icon {
background-position: 0 -131px;
width: 22px;
height: 20px;
}
#nav_profile_li:hover .nav_icon {
background-position: -46px -131px;
}
#nav_help_li .nav_icon {
background-position: 0 -62px;
width: 25px;
height: 21px;
margin-top: 12px;
}
#nav_help_li:hover .nav_icon {
background-position: -46px -62px;
}
#nav_edit_li .nav_icon {
background-position: 0 -163px;
width: 21px;
height: 21px;
margin-top: 12px;
}
#nav_edit_li:hover .nav_icon {
background-position: -46px -163px;
}
#nav_edit_li .menu {
right: 301px;
}
#nav_help_li .menu {
right: 226px;
}
#nav_explore_li .menu {
right: 151px;
}
#nav_profile_li .menu, #nav_profile_li .menu_login {
right: 76px;
}
.notice {
color: @generic-grey-8;
background-color: @generic-red-1;
font-size: 10px;
font-weight: bold;
line-height: 16px;
min-width: 16px;
height: 16px;
display: block;
text-align: center;
position: absolute;
top: 0;
right: 0;
padding: 0 3px;
margin: 7px;
-moz-border-radius: 11px; /* Firefox */
-webkit-border-radius: 11px; /* Safari, Chrome */
-khtml-border-radius: 11px; /* KHTML */
border-radius: 11px; /* CSS3 */
}
#header.shrunk .notice {
margin-top: -3px;
}
.count {
float: right;
background-color: @generic-red-1;
font-size:10px;
line-height: 14px;
min-width: 14px;
color: @generic-grey-8;
margin: 6px -10px 0px 10px;
text-align: center;
-moz-border-radius: 7px; /* Firefox */
-webkit-border-radius: 7px; /* Safari, Chrome */
-khtml-border-radius: 7px; /* KHTML */
border-radius: 7px; /* CSS3 */
}
#actionbar {
height: 40px;
position: relative;
z-index: 2;
}
#actionbar.isTool {
height: 15px;
}
.search_box {
font-size: 1em;
border: none;
background-color: @searchbox-bg-color;
font-weight: bold;
color: @searchbox-color;
width: 30%;
min-width: 276px;
margin: 0 -5px 0 0;
padding: 10px 12px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-khtml-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
font: inherit; /*Mac-only font fix*/
}
.search_box.search_white {
background-color: @generic-grey-8;
}
#search_site_bubble, #search_site_footer, .search_button {
font-size: 1em;
background-color: @search-button-background-color;
border: none;
color: @search-button-color;
font-weight: bold;
padding: 10px 11px;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-khtml-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
cursor: pointer;
font: inherit; /*Mac-only font fix*/
vertical-align: top;
-webkit-appearance: none;
}
#header.shrunk .search_box, #header.shrunk #search_site_bubble,
#header.shrunk #cse-search-box .search_button {
padding: 6px 12px;
}
#search_site_bubble:hover, #search_site_footer:hover, .search_button:hover {
background-color: @search-button-hover-background-color; /* DarkBlue */
color: @search-button-hover-color;
}
div.suggestions {
/* has to be one higher than that of #header_outer for the suggestions list to display properly */
z-index: 100000007;
}
.search_input {
font-size: 1em;
padding: 9px;
height: 17px;
margin-right: .5em;
border: 1px solid @search-input-border-color;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
#searchInput {
background-color: @search-input-background-color;
color: @search-input-text-color;
}
/** Login dropdown **/
.userlogin_inputs {
margin: 10px 0 5px 0;
}
#wpName1_head, #wpPassword1_head {
color: @generic-grey-5;
}
.userlogin .input_med, #userloginForm .input_med, #mw-resetpass-table .mw-input input {
margin: 5px 0;
width: 65%;
border: 1px solid @generic-grey-65;
}
.userlogin .input_med {
width: 90%;
}
#mw-resetpass-table .mw-input input {
font-size: 0.8em;
padding: 11px;
}
#mw-resetpass-table .mw-input input[type=checkbox] {
width: auto;
}
#mw-resetpass-table .mw-input input[type=submit] {
padding: 12px 16px;
border: 1px solid @button-border-color;
width: auto;
margin: 3px;
}
#mw-resetpass-table .mw-input label[for=wpRemember] {
font-size: .9em;
}
.bc_submitlogin fieldset {
margin-top: 20px;
}
.bc_submitlogin fieldset legend {
color: @generic-grey-4;
font-size: 1.1em;
font-weight: normal;
margin: 0;
padding: 0px 3px 0px 3px;
}
#userloginForm h4, .modal_form h4 {
color: @generic-blue-1;
font-size: 1.1em;
font-weight: normal;
background: none;
padding: 0;
margin: 0;
}
#userloginForm .mw-error h4, #userloginForm .mw-info h4,
.modal_form .mw-error h4, .modal_form .mw-info h4 {
color: @generic-red-2;
font-size: 1.4em;
line-height: normal;
font-weight: bold;
padding: 0 0 .2em 0;
background: none;
margin: 0;
}
#userloginForm .mw-info h4 {
color: @admin-options-menu-color;
}
.menu_login {
font-size: .8em;
}
.login_button {
float: right;
padding: 9px 16px;
font-size: 1.1em;
font-weight: normal;
margin: 0;
}
.userlogin_links {
padding: 20px 14px 0 0;
font-weight: bold;
clear: both;
}
#forgot_pwd_head, #forgot_pwd {
float: right;
margin-left: 1.5em;
}
#fb_connect_head, #gplus_connect_head, #fb_connect, #gplus_connect {
float: left;
}
#fb_login_head, #gplus_login_head, #fb_login, #gplus_login {
/* @embed */
background: url(../../images/header_sprite.png) no-repeat 0 -197px;
height: 34px;
width: 127px;
margin: 5px 0 15px 0;
float: left;
}
#gplus_login, #gplus_login_head {
background-position: 0 -241px;
margin-left: 5px;
}
#fb_login_head span, #gplus_login_head span, #fb_login span, #gplus_login span {
height: 34px;
width: 127px;
position: absolute;
filter: alpha(opacity=15);
opacity: 0.15;
background: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
#fb_login_head:hover span, #gplus_login_head:hover span, #fb_login:hover span, #gplus_login:hover span {
background-color: @generic-grey-1;
}
/** Messages menu **/
.menu_messages {
right: 1px;
font-size: .8em;
width: 300px;
padding: 0 0 3px 0;
}
.menu_messages .mw-echo-state {
padding: 5px 0;
background-color: @generic-grey-6;
}
.menu_messages .mw-echo-state:hover {
background-color: @menu-bg-color;
}
.menu_messages .mw-echo-unread {
background-color: @menu-bg-color;
}
.menu_messages .mw-echo-content {
padding-right: .5em;
}
.menu_message_morelink {
text-align: center;
padding: 5px;
}
.note_row {
border-top: 1px solid @generic-blue-3;
padding: 15px 10px;
}
.first_note_row {
border: none;
}
.note_empty {
border: none;
text-align: center;
color: @generic-grey-5;
}
.note_icon_talk, .note_icon_kudo, .note_icon_thumb {
height: 20px;
width: 20px;
/* @embed */
background: url(../../images/header_sprite.png) no-repeat 0 -286px;
float: left;
margin-right: 6px;
}
.note_icon_kudo {
background-position: 0 -316px;
}
.note_icon_talk {
background-position: 0 -343px;
}
.th_avimg {
width: 20px;
height: 20px;
margin-bottom: -4px;
}
.th_close {
display: block;
/* @embed */
background: url(../../images/header_sprite.png) no-repeat 0 0;
width: 13px;
height: 15px;
float: right;
cursor: pointer;
margin-top: -5px;
}
.th_close:hover {
background-position: -46px 0;
background-color: @menu-bg-color;
}
.th_content {
padding: 0 15px 0 22px;
}
span.tooltip_span, .th_giver_ids {
display: none;
}
/****** Footer styles *******/
#clear_footer {
clear: both;
}
#footer_outer {
background-color: @footer-color;
border-top: solid 1px @footer-border-top-color;
width: 100%;
}
#footer {
padding: 0px 0px 0px 50px;
clear: both;
position: relative;
}
#footer a {
color: @nav-text-highlight;
}
#footer ul {
position: absolute;
top: 20px;
}
#footer ul li {
float: left;
padding: 0 12px 0 18px;
list-style-type: none;
margin: 0px;
}
#footer ul li a {
color: @nav-text;
}
#footer ul li.top {
background-image: none;
padding: 0 12px 0 0;
}
#footer_tag {
margin-bottom: 15px;
}
#footer_side {
height: 45px;
}
div#sub_footer div, #creative_commons, #mediawiki_p, #carbon_neutral {
display: inline-block;
*display: inline; /*ie7 hack*/
top: 40px;
padding: 0px 20px 10px 0;
font-size: 12px;
}
#footer .logo {
height: 36px;
width: 211px;
float: left;
margin: 15px 20px;
}
/**** Tabs ****/
ul#tabs {
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
}
ul#tabs li {
float: left;
list-style: none !important;
padding: 0px;
margin: 0px;
padding-right: 15px;
line-height: 42px;
}
ul#tabs li a {
font-size: 13px;
font-weight: 500;
}
#tabs a.on {
color: @generic-grey-3;
font-weight: bold;
}
#AdminOptions{
position: absolute;
top: 40px;
font-size: 1em;
border: 1px solid @menu-open-border-color;
color: @admin-options-menu-color;
margin: 0;
background-color: @menu-bg-color;
}
ul#AdminOptions li {
padding-left: 0px;
}
ul#breadcrumb {
float: right;
margin: 13px 0 0 0;
max-width: 700px;
max-height: 15px;
overflow: hidden;
}
ul#breadcrumb:hover {
overflow: visible;
}
ul#breadcrumb li {
float: left;
list-style: none !important;
padding: 0px;
margin: 0px;
margin-left: 3px;
font-size: 10px;
color: @generic-grey-5;
}
ul#breadcrumb li a, ul#breadcrumb li.bread_ellipsis {
font-size: 12px;
color: @generic-grey-4 !important;
}
ul#breadcrumb li.bread_ellipsis span {
font-size: 10px;
color: @generic-grey-5;
}
/***** Sidebar *****/
#sidebar {
width: 301px;
margin-left: -328px;
padding-top: 0px;
float: right;
padding-left: 27px;
}
.sidebox {
background-color: @text-header-bg-color;
padding: 16px;
margin: 0 0 15px 0;
position: relative;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
color: @button-color;
font-size: 13px;
border: 1px solid @button-border-color;
}
.sidebox.hydra_ad {
padding: 0;
height: 250px;
}
.notice_bgcolor {
background-color: @text-header-bg-color;
}
.notice_bgcolor_important {
background-color: @generic-reddish;
}
.notice_bgcolor_lo {
background-color: @generic-grey-8;
}
#site_notice_x {
float: right;
display: block;
width: 14px;
height: 14px;
/* @embed */
background: url(../../images/article_sprite.png) no-repeat -114px 0;
}
.userlogin h3, .sidebox h3 {
font-size: 13px;
font-weight: bold;
color: @button-color;
margin-bottom: 10px;
padding: 0px;
background: none;
}
.userlogin h3 {
clear: both;
}
.sidebox p {
font-size: 14px;
line-height: 17px;
margin: 12px 0px 0px 0px; /* !important;*/
}
#site_notice p {
margin: 0;
}
.sidebox p.bottom_button {
text-align: center;
padding: .5em;
}
.sidebox ul li {
font-size: 14px;
line-height: 18px;
color: @generic-grey-3;
margin: 0;
padding: 0 0 0 20px;
list-style: none;
/* @embed */
background: url(../../images/article_sprite.png) no-repeat -114px -16px;
}
.sidebox ul {
margin: 10px 0px 10px 0;
padding: 0px;
}
#top_links {
padding: 30px 15px;
}
#sidebar_share {
*display: none; /* IE7 hack */
}
#sidebar_share div {
float: left;
margin-right: 10px;
}
#sidebar_share div.gplus1_button {
margin: 2px 10px 0 17px;
}
#sidebar_share div.like_button {
margin-top: 1px;
}
#sidebar_share div#pinterest {
margin-top: 42px;
}
#gatWriteAnArticle {
margin-right: 0;
}
#staff_stats_box p {
margin: 0;
}
#side_new_articles h3 {
margin-bottom: 5px;
}
#side_new_articles .thumb img {
margin: 3px 5px 3px 0;
}
/** Follow Us widget **/
#follow_table {
margin-left: -3px;
}
#follow_table td {
padding: 8px 12px;
}
#follow_table td a {
display: block;
height: 32px;
width: 32px;
/* @embed */
background-image: url(../../images/follow_sprite.png);
}
#follow_table td a div {
height: 32px;
width: 32px;
position: absolute;
filter: alpha(opacity=15);
opacity: 0.15;
background: none;
}
#follow_table td a div:hover { background-color: @generic-grey-1; }
#gatFollowFacebook { background-position: -105px -35px; }
#gatFollowTwitter { background-position: 0 0; }
#gatFollowRss { background-position: -35px -35px; }
#ccsfg_btn { background-position: -70px -35px; }
#gatFollowPlus { background-position: 0 -70px; }
#gatFollowPinterest { background-position: -35px -70px; }
#gatFollowTumblr { background-position: -35px 0; }
#gatFollowStumbleupon { background-position: -70px 0; }
#gatFollowAndroid { background-position: -105px 0; }
#gatFollowApp { background-position: 0 -35px; }
/**** Recent Changes widget ****/
#rcElement_list {
border-top: 2px solid @generic-reddish-4;
border-bottom: 2px solid @generic-reddish-4;
padding: 0;
overflow: hidden;
margin: 10px 0 15px 0;
height: 300px;
}
#rcElement_list .even, #rcElement_list .odd {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
border: 0px;
background-color: @generic-grey-6;
padding: 10px;
color: @generic-grey-4;
font-size: 14px;
margin-top: 7px;
}
#rcElement_list .even {
background-color: @generic-grey-6;
}
.rc_widget_time {
font-size: 12px;
color: @generic-grey-5;
}
.weather {
float: right;
font-weight:bold;
height: 20px;
padding-left: 20px;
/* @embed */
background: url(../../images/widget_sprite.png) no-repeat;
}
.weather.sunny {
background-position: -25px -55px;
}
.weather.rainy {
background-position: -25px -15px;
}
.weather.partlysunny {
background-position: -25px -36px;
padding-left: 23px;
}
.weather.cloudy {
background-position: -25px -72px;
}
#play_pause_button {
/* @embed */
background: url(../../images/widget_sprite.png) no-repeat 0px 0px;
width: 21px;
height: 21px;
float: right;
display: block;
}
#play_pause_button:hover { background-position: 0 -23px; }
#play_pause_button:active { background-position: 0 -45px; }
#play_pause_button.play { background-position: 0 -70px; }
#play_pause_button.play:hover { background-position: 0 -93px; }
#play_pause_button.play:active { background-position: 0 -116px; }
/*** Category sidebar ***/
.sidebox .category_column {
list-style: none;
}
.sidebox .category_column ul {
margin: 0 0 10px 0;
}
.sidebox .category_column li {
font-weight: bold;
list-style: none;
margin: 0px;
}
.sidebox .category_column ul li {
font-weight: normal;
}
/* also in home.css */
.catbox, .cat_icon {
/* @embed */
background: url(../../images/cat_icon_sprite.png) no-repeat 0 0;
}
.cat_artsandentertainment { background-position: 9px 5px; }
.cat_carsandothervehicles { background-position: 9px -27px; }
.cat_computersandelectronics { background-position: 9px -60px; }
.cat_educationandcommunications { background-position: 9px -94px; }
.cat_familylife { background-position: 9px -134px; }
.cat_financeandbusiness { background-position: 9px -174px; }
.cat_foodandentertaining { background-position: 9px -216px; }
.cat_health { background-position: 9px -255px; }
.cat_hobbiesandcrafts { background-position: 9px -289px; }
.cat_holidaysandtraditions { background-position: 9px -323px; }
.cat_homeandgarden { background-position: 9px -357px; }
.cat_personalcareandstyle { background-position: 9px -388px; }
.cat_petsandanimals { background-position: 9px -420px; }
.cat_philosophyandreligion { background-position: 9px -456px; }
.cat_relationships { background-position: 9px -494px; }
.cat_sportsandfitness { background-position: 9px -523px; }
.cat_travel { background-position: 9px -554px; }
.cat_wikihow { background-position: 9px -586px; }
.cat_workworld { background-position: 9px -617px; }
.cat_youth { background-position: 9px -650px; }
/*** DEFAULT PAGE STYLES ***/
/* any? */
/*** Article styles ***/
.article_inner {
font-size: 16px;
line-height: 25px;
padding: 0 15px;
}
.section ul, .section ol { /* used in bullets in intro */
padding: 5px 5px 20px 25px;
}
.section li {
margin-bottom: 5px;
}
.section {
background-color: @text-header-bg-color;
padding: 62px 27px 27px 27px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
margin-bottom: 25px;
position: relative;
line-height: 25px;
border: 1px solid @button-border-color;
}
#bodycontents.section, .minor_section {
background-color: @text-header-bg-color;
padding: 22px 27px;
margin-bottom: 25px;
position: relative;
}
.section_text {
padding: 15px;
background-color: @generic-grey-8;
}
.section_text a {
word-wrap: break-word;
}
.steps .section_text {
background-color: inherit;
padding: 0;
border: none;
}
.minor_text {
font-size: .8em;
}
#ingredients h3, .section_text h3 {
position: relative;
background-color: inherit;
line-height: normal;
z-index: inherit;
}
#ingredients h3 span {
padding: 15px 0;
}
#intro, .wh_block {
padding: 27px;
margin-bottom: 25px;
word-wrap: break-word;
background-color: @generic-grey-8;
}
.section_text, .wh_block, #intro, .minor_section {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid @button-border-color;
}
#ingredients ul, #thingsyoullneed ul {
padding: 4px 5px 20px 0px;
}
#ingredients ul li, #thingsyoullneed ul li {
list-style-type: none;
margin-bottom: 10px;
}
#ingredients ul li li, #thingsyoullneed ul li li {
list-style-type: inherit;
}
#intro.article_inner {
border-bottom-right-radius: 0;
-moz-border-bottom-right-radius: 0px;
-webkit-border-bottom-right-radius: 0;
border-bottom-left-radius: 0px;
-moz-border-bottom-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
margin-top: 0px;
}
#video {
padding-top: 35px;
}
.article_inner {
margin-top: -72px;
padding: 25px;
margin: -35px 15px 15px 15px;
}
#article ol.steps_list_2 {
padding: 0 0 16px 0;
}
.steps_list_2 li {
margin-bottom: 30px;
font-size: 16px;
line-height: 25px;
color: @generic-grey-4;
list-style: none;
background-color: @generic-grey-8;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding: 20px;
border: 1px solid @button-border-color;
clear: both;
}
.steps_list_2 li.final_li {
margin-bottom: 0;
}
.mwimg {
border: 1px solid rgba(0, 0, 0, 0.1);
line-height: 0px; /* needed for new doc-type */
position: relative;
margin-bottom: 20px;
overflow: hidden;
}
.steps_list_2 .mwimg.largeimage {
margin-left: -21px;
margin-right: -21px;
margin-top: -21px;
}
.mwimg.largeimage.underwidth {
margin-left: auto;
margin-right: auto;
}
#article ol {
/*padding: 0 1em 1em 0;*/ /*took out for article page. may need it again */
}
#method_toc {
line-height:15px;
margin-bottom:5px;
}
#method_toc a {
font-size: 13px;
margin-right:20px;
background-image: url(data:image/gif;base64,R0lGODlhCgAKAIAAAJa6eQAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxMjNDN0VGMjdBRjExRTNBNkUwQTY5OUIxODI0MUQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxMjNDN0YwMjdBRjExRTNBNkUwQTY5OUIxODI0MUQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjEyM0M3RUQyN0FGMTFFM0E2RTBBNjk5QjE4MjQxRDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjEyM0M3RUUyN0FGMTFFM0E2RTBBNjk5QjE4MjQxRDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAACgAKAAACCISPqcvtD2MrADs=);
background-repeat: no-repeat;
background-position: 0px 2px;
padding-left: 15px;
}
.mwimg.tright {
float: right;
}
.mwimg.tleft {
float: left;
}
.mwimg.tcenter {
margin-left: auto;
margin-right: auto;
}
.mwimg.largeimage img {
width: 100%;
height: auto;
}
.thumbnail {
float: left;
position: relative;
margin-right: 4px;
margin-bottom: 4px;
border: 1px solid @generic-reddish-3;
}
.thumbnail a {
display: block;
}
#relatedwikihows .thumbnail {
margin-right: 10px;
margin-bottom: 10px;
}
.thumbnail div.text {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
line-height: normal;
z-index: 0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))), repeat; /* Chrome,Safari4+ */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%), repeat; /* FF3.6+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%), repeat; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%), repeat; /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%), repeat; /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%), repeat; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
}
.thumbnail p {
/*color: @button-color;*/
color: @generic-grey-8;
margin: 7px;
text-decoration: none;
font-size: 11px;
line-height: normal;
overflow: hidden;
}
.thumbnail a:hover div.text {
background: @generic-grey-8;
}
.thumbnail a:hover p {
color: @generic-blue-2;
}
.thumbnail p span {
font-weight: bold;
font-size: 16px;
word-break: normal;
word-wrap: normal;
}
#relatedwikihows .thumbnail p span, .sidebox .thumbnail p span {
font-size: 13px;
}
.caption {
position: absolute;
width: 96%;
bottom: 0;
left: 0;
background-color: @generic-grey-3;
opacity: 0.7;
text-align: left;
font-size: 12px;
line-height: normal;
padding: 5px 2%;
color: @generic-grey-8;
}
.steps_list_2 li li {
border: none;
margin: 0;
list-style: disc;
padding: 0;
}
.steps_list_2 li li .mwimg.largeimage {
margin-left: 0;
margin-right: 0;
margin-top: 0;
}
.steps_list_2 ul, .steps_list_2 ol {
padding-left: 55px;
padding-top: 5px;
}
.lone_p { /* this is for
tags that are outside a step but inside the steps section */
margin-bottom: 15px;
}
.step_num {
font-size: 43px;
color: @generic-grey-4;
padding: 8px 15px 3px 0;
float: left;
font-weight: bold;
}
.mw-editsection {
height: 25px;
font-size: 12px;
font-weight: normal;
color: transparent;
}
#tips ul li, #thingsyoullneed ul li, #warnings ul li {
line-height: 28px;
clear: both;
}
#article ul#end_options {
padding: 0;
}
#article ul#end_options li {
float: left;
margin-right: 20px;
list-style: none;
}
ul#end_options li span{
/* @embed */
background: url(../../images/article_sprite.png) no-repeat;
width: 10px;
height: 12px;
float: left;
margin: 7px 8px 0 0;
}
ul#end_options li.endop_discuss span { background-position: -64px 0; }
ul#end_options li.endop_print span { background-position: -64px -15px; }
ul#end_options li.endop_email span { background-position: -64px -29px; }
ul#end_options li.endop_watch span {
background-position: -64px -70px;
width: 15px;
}
ul#end_options li.endop_edit span { background-position: -64px -43px; }
ul#end_options li.endop_fanmail span { background-position: -64px -57px; }
ul#end_options li.endop_embed span { background: none; }
.info {
font-size: 16px;
padding-left: 0px;
margin: 0px 0px 10px 0px;
line-height: inherit;
}
#article_info {
padding: 27px;
position: relative;
}
.info {
color: @text-header-color;
margin-bottom: 10px;
}
.page_stats {
text-align: center;
font-size: 18px;
color: @generic-grey-1;
font-weight: bold;
margin-top: 30px;
}
#article_rating {
text-align: center;
font-size: 18px;
margin-top: 20px;
}
#article_rating p {
margin-bottom: 10px;
}
#feature_star { /* article page */
width: 52px;
height: 12px;
padding-top: 65px;
/* @embed */
background: url(../../images/article_sprite.png) no-repeat 0 0;
vertical-align: bottom;
font-size: 12px;
font-weight: bold;
text-align: center;
color: @generic-reddish-1;
float: right;
margin: -27px 0 5px 5px;
line-height: normal;
}
.fs_template { /* discussion page */
float: left !important;
margin-right: 30px !important;
margin-top: -10px !important;
}
.fs_template_text {
padding: 1.5em;
}
.fc_id_img {
float: left;
padding:0 10px 10px 0;
}
.image_map {
padding: 3px;
}
.side_ad {
margin-bottom: 15px;
}
.steps .wh_ad {
margin-top: 5px; /* need this 5px to account for the times when there's only 1 line of text. In that case the ad overlaps the step number */
}
.ad_label {
background-color: @admin-options-menu-color;
width: 18px;
padding: 2px;
line-height: normal;
color: @generic-grey-8;
font-size: 13px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
float: left;
clear: left;
}
.ad_label_long {
background-color: @admin-options-menu-color;
padding: 2px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
font-size: 13px;
color: @generic-grey-8;
clear: left;
display: inline-block;
line-height: normal;
}
/***** Signup/Login page *****/
.login_header {
padding: 15px 22px;
margin-bottom: 0;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}
.login_headline {
font-size: 2.2em;
font-weight: bold;
}
.login_top_link {
float: right;
font-size: .8em;
line-height: 3.3em;
}
#userloginForm { font-size: .8em; }
.userloginform div, .usercreateform div { padding-bottom: .5em; }
.userloginform { width: 340px; }
.usercreateform { width: 380px; }
#userloginForm table { border-spacing: 0; }
.userloginform .mw-info, .userloginform .mw-error {
margin: -50px 0 0 312px;
padding-bottom: 0;
}
.usercreateform .mw-info, .usercreateform .mw-error {
margin: -50px 0 0 342px;
padding-bottom: 0;
}
#userloginForm .mw-info#wpCaptchaWord_info { margin-top: -62px; }
.userlogin_label, .captcha_label {
display: block;
width: 64px;
float: left;
padding-top: .8em;
}
.captcha_label { padding-top: 1.5em; }
.mw-ui-checkbox-label { font-weight: normal; }
#userloginForm .input_med { font-size: 1.3em; }
.remember_pwd {
float: right;
padding-top: 1em;
}
#wpLoginAttempt, #wpCreateaccount, #realname_check, .fancycaptcha-image-container { margin-left: 78px; }
#realname_check label { font-weight: normal; font-size: .75em; }
.userlogin_option_row {
padding-bottom: .5em;
font-size: .85em;
}
.userlogin_captcha {
position: relative;
padding-top: 1em;
font-size: .85em;
}
.userlogin_captcha p { margin-bottom: 1em; }
#real_name_row { display: none; }
#userlogin_alt_logins {
font-size: .8em;
float: right;
background-color: @menu-bg-color;
padding: 15px;
margin-top: 30px;
border: 1px solid @generic-reddish-2;
width: 265px;
height: 65px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#userloginprompt { padding: .5em 0; }
.captcha_fineprint {
margin: 1em 0 0 78px;
font-size: .8em;
}
/***** MODAL WINDOWS (also in jquery-ui.css) *****/
#dialog-box { display: none; }
.ui-dialog-content::-webkit-scrollbar {
-webkit-appearance: none;
width: 11px;
height: 11px;
}
.ui-dialog-content::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid @generic-grey-8; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.ui-dialog-titlebar-close .ui-icon {
text-indent: 0;
width: auto;
height: auto;
background: none !important;
color: @admin-options-menu-color;
font-weight: normal;
font-size: .8em;
}
.modal2 .ui-dialog-content { background: none !important; }
/***** Random *****/
fieldset {
padding: 5px;
margin-bottom: 10px;
line-height: 20px;
}
fieldset h4 {
margin: 10px -7px;
}
#noarticletext div {
padding: 20px !important;
border: 1px solid @generic-reddish-3 !important;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#emaillink { font-size: .8em; }
#emaillink td { padding: 5px 10px; }
.noarticletext div {
border: none !important;
padding: 0px;
}
#quicknotecontent { display: none; }
.cse_search_page_block { padding-top: 0; }
.bc_credits {
line-height: 25px;
font-size: .9em;
}
.checkbox-text {
display: inline-block;
*display: inline; /*IE7 fix*/
width: 95%;
vertical-align: top;
line-height: 22px;
margin-top: -2px;
}
input[type=checkbox].css-checkbox {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=checkbox].css-checkbox + label.css-checkbox-label {
height: 17px;
width: 17px;
background-repeat: no-repeat;
background-position: -87px 0;
cursor: pointer;
display: inline-block;
margin-right: 5px;
}
input[type=checkbox].css-checkbox:checked + label.css-checkbox-label {
background-position: -87px -18px;
color: lightgray;
}
.css-checkbox-label {
/* @embed */
background-image: url(../../images/article_sprite.png);
}
.fading {
filter: alpha(opacity=40);
opacity: 0.4;
}
/* Templates */
.template_top.wh_block { padding: 10px; }
.tmp_li {
display: none;
}
/* Samples */
#sd_container {
background-color: @generic-grey-8;
padding-top:10px;
}
.sd_thumb { text-align: center; }
.sd_thumb img {
border: 1px solid @generic-grey-5;
padding: 5px;
margin: 8px 0 10px 0;
}
.sd_multiple_2 {
float: left;
padding: 0 12px 8px;
width: 45%;
min-width: 200px;
}
.sd_multiple_3 {
float: left;
padding: 0 12px 8px;
width: 29%;
min-width: 188px;
}
/* Article widgets */
.article_widget {
border: none;
height: 282px;
margin: 15px auto 5px auto;
overflow: hidden;
width: 674px;
float: right;
}
html>body li .article_widget { *margin-left: -60px; } /*dumb IE7*/
.widget_br { clear:both; }
.mw-userpage-userdoesnotexist {
display: none;
}
/** Turn the links in the top bar uppercase via CSS */
ul#actions li a.nav {
text-transform: uppercase;
}
/**
* Remove margin-top for the "You have new messages" bar (a.k.a Orange Bar of Death),
* because the default margin-top provided by commonInterface.css doesn't look
* good
*/
div.usermessage {
margin-top: 0px;
}
/* Miscellaneous disorderly stuff - please integrate this properly */
.mw-editsection-bracket {
display: none;
}
#breadcrumb {
font-size: 13px;
font-weight: 500;
color: @generic-grey-5;
}
#breadcrumb a {
color: @generic-grey-4;
}
.section {
padding: 27px 27px;
overflow-wrap: break-word;
word-wrap: break-word;
}
h2.section_head {
line-height: 24px;
}
#intro .editsection {
float: right;
font-size: 13px;
margin-top: -6px;
}
#top_links {
text-align: center;
}
.firstHeading, #firstHeading {
margin-bottom: 0;
}
#contentSub, #contentSub2, #info {
color: @generic-grey-4;
font-size: 11px;
line-height: 20px;
margin: 0;
width: auto;
}
#contentSub a, #contentSub2 a, #info a {
color: @generic-grey-3;
}
#contentSub2, #info {
display: inline;
}
#contentSub2 {
margin-left: 1em;
}
#info span {
padding-left: 1.8em;
display: inline-block;
margin-right: 1em;
}
#originators {
/* @embed */
background: url(../../images/edited.png) center left no-repeat;
}
#view_count {
/* @embed */
background: url(../../images/viewed.png) center left no-repeat;
}
#header_toc {
border: 1px @generic-grey-6;
border-style: solid none;
font-weight: bold;
font-size: 12px;
margin: 10px 0 0;
padding: 2px 0 0;
}
#header_toc a {
margin-left: 18px;
display: inline-block;
}
#header_toc a.toclevel-1 {
display: block;
margin-left: 0;
}
#header_toc a.toclevel-2,
#header_toc a.toclevel-3,
#header_toc a.toclevel-4,
#header_toc a.toclevel-5,
#header_toc a.toclevel-6{
font-weight: normal;
}
#header_toc a.toclevel-3,
#header_toc a.toclevel-4,
#header_toc a.toclevel-5,
#header_toc a.toclevel-6 {
font-size: 10px;
}
#header_toc a.toclevel-3:before,
#header_toc a.toclevel-4:before,
#header_toc a.toclevel-5:before,
#header_toc a.toclevel-6:before {
content: '(';
}
#header_toc a.toclevel-3:after,
#header_toc a.toclevel-4:after,
#header_toc a.toclevel-5:after,
#header_toc a.toclevel-6:after {
content: ')';
}
#toc {
display: none;
position: absolute;
top: -1000px;
}
#header_toc a.toclevel-1 .toc_square {
display: inline-block;
height: 9px;
border-left: 9px solid @nav-bg;
padding-left: 5px;
}
h1 .mw-headline,
h2 .mw-headline {
border-left: solid 10px @nav-bg;
padding-left: 6px;
}
#header_toc .toc_short a.toclevel-1 {
display: inline;
margin-left: 1em;
}
.toc_short {
display: inline;
}
p {
margin: 1em 0;
}
hr {
border: none;
background: @generic-grey-6;
height: 1px;
}
/* Screenplay extension */
.screenplay {
font-size: 13px;
margin: 0;
}