// Many themes depend on this file. The only notable exception is the Bootstrap themes, which have their own base styles // If you need to fix something for all themes, put it in "style-compat.scss" as it will be loaded for all themes. /* ================================================================ Reset CSS */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; &:not(.focus-visible) { outline: 0; } } /* =============================================================== Custom Side Bar */ BoxFilter BoxDiscussionFilter { background: $white; } Box BoxCategories { background: $white; } /* remember to define focus styles! */ :focus { outline-style: auto; } body { line-height: 1; color: $black; background: $white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } /*caption, th, td { text-align: left; font-weight: normal; }*/ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } textarea, input[type=text] { box-sizing: border-box; } .textarea-autosize { transition: height 0.1s ease; resize: none !important; } /* Elements that are disabled, make sure they reflect that with UX feedback. */ [disabled] { opacity: 0.50; pointer-events: none; } /* ===================================================================== Grid */ .Row { margin: auto; width: 960px; } .ContentColumn { margin: 0 0 0 230px } /* ==================== Pages that hide the panel and have full-width content */ body.NoPanel #Panel, body.Entry #Panel, body.Conversations.add #Panel, body.Vanilla.Post #Panel { display: none; } body.NoPanel #Content, body.Conversations.add #Content, body.Vanilla.Post #Content { width: auto; margin: 0; } body.NoPanel #Content { margin: auto; } body.NarrowForm #Content { max-width: 700px; } body.Entry #Content { float: none; margin: 0 auto; max-width: 600px; } /* ============================================== General Styles & Typography */ body { color: $black; font-family: 'lucida grande', 'Lucida Sans Unicode', tahoma, sans-serif; font-size: 75%; font-size: small; line-height: 1.7em; background: $white; margin: 0; padding: 0; } #Body { zoom: 1; /* hasLayout for IE6/7 */ } #Body:after { /* clearfix */ visibility: hidden; display: block; content: ""; clear: both; height: 0; } .Invisible { opacity: 0; } .ClearFix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .ClearFix { display: inline-table; } /* Hides from IE-mac \*/ * html .ClearFix { height: 1%; } .ClearFix { display: block; } /* End hide from IE-mac */ .nowrap { white-space: nowrap; } .Center { text-align: center; } .Right { text-align: right; } h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, arial, sans-serif; font-weight: bold; margin: 5px 0; } p { margin: 5px 0; } .P { margin: 5px 0; } h1 { font-size: 140%; } h2 { font-size: 120%; } h3 { font-size: 110%; } h4 { font-size: 110%; } h5 { font-size: 100%; } a { text-decoration: none; color: $vanilla-blue; } a:hover, a.TextColor:hover, a:hover .TextColor { color: $vanilla-pink; } a.TextColor, a .TextColor { color: $black; } img.Thumbnail { max-height: 300px; max-width: 100px; float: left; margin: 0 16px 0 0; } input.DateBox, input.InputBox, input.SmallInput, textarea { font-family: 'lucida grande', 'Lucida Sans Unicode', tahoma, sans-serif; color: $grey-1; font-size: 15px; padding: 3px; margin: 0; width: 250px; background: $white; border: 1px solid $grey-9; border: 1px solid rgba(0, 0, 0, 0.4); } .PasswordStrength { width: 250px; } .ui-datepicker { width: 17em; padding: 2px 20px 2px 10px; display: none; background: $grey-o; background: rgba(255, 255, 255, 0.9); border: 1px solid $grey-9; border: 1px solid rgba(0, 0, 0, 0.4); } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month-year { width: 100%; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } textarea.TextBox { width: 500px; height: 100px; min-height: 100px; } .TextBoxWrapper { width: auto; } .TextBoxWrapper textarea, .TextBoxWrapper input:not([type=radio]):not([type=checkbox]) { width: 100%; display: block; } .TextBoxWrapper .PasswordStrength { width: 100%; } #Popup textarea.TextBox { width: 100%; } input.SmallInput, input.InputBox { padding: 6px 3px; } input.SmallInput:focus, input.InputBox:focus, textarea:focus { background: $white-2; } input.BigInput { width: 100%; } textarea { line-height: 128%; } select { font-family: arial; font-size: 14px; color: $grey-k; margin: 0; padding: 3px; } .Button { display: inline-block; cursor: pointer; margin: 0; font-size: 12px; line-height: 1; font-weight: bold; padding: 4px 6px; background: $grey-a; border: 1px solid $grey-9; border-radius: 2px; white-space: nowrap; border-color: $grey-9; color: $grey-1; } .Button:hover { color: $grey-p; border-color: $grey-j; } .Button.Disabled { opacity: .5; } div.FileUpload .CurrentImage { display: block; margin: 5px 0; max-width: 100%; } .NavLabel { font-weight: bold; margin-right: 4px; } .NavBar > .Button { border-radius: 0; border-right-width: 0; } .NavBar > .Button:first-child { border-radius: 2px 0 0 2px; } .NavBar > .Button:last-child { border-radius: 0 2px 2px 0; border-right-width: 1px; } body:not(.dataDriven) { .Button.Active, .ButtonGroup.Open .Button.Handle, .Button:focus, .Button:active { border-color: $grey-b; color: $grey-1; background: $grey-g; } } .Button.FileInput > input { position: absolute; top: 0; right: 0; margin: 0; border: solid transparent; border-width: 0 0 100px 200px; opacity: 0; filter: alpha(opacity=0); transform: translate(-300px, 0) scale(4); direction: ltr; cursor: pointer; } .Button.FileInput { position: relative; overflow: hidden; } .BigButton { display: block; text-align: center; margin: 0 0 10px; font-size: 15px; font-weight: bold; padding: 8px 10px; } .Panel { .BoxButtons { .ButtonGroup + .BigButton { margin-top: 10px; } :last-child { margin-bottom: 0; } } } .Buttons { margin-top: 10px; } .Buttons-Confirm { text-align: center; } .Buttons-Confirm .Button { min-width: 65px; } .NavButton { color: $grey-1; display: inline-block; cursor: pointer; font-size: 13px; line-height: 16px; font-weight: bold; padding: 5px 8px; border: 1px solid $grey-9; border-radius: 2px; white-space: nowrap; background-color: $grey-c; } body:not(.dataDriven) { .ButtonGroup.Open .NavButton.Handle { color: $grey-1; background: $grey-5; } } /* Split Button Dropdown */ .ButtonGroup.Multi > .NavButton:first-child, .ButtonGroup.Multi > .Button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ButtonGroup.Multi > .NavButton.Handle, .ButtonGroup.Multi > .Button.Handle { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; } /*.Multi .Button:last { border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 12px; line-height: 1; border-left: 0; } .Multi .NavButton.Handle { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; margin: 0; }*/ .NavButton.Handle .Sprite, .Button.Handle .Sprite { display: inline-block; border-style: solid; border-width: 4px; border-color: $black transparent transparent transparent; position: relative; top: 2px; margin: 0; height: initial; width: initial; vertical-align: middle; } .ButtonGroup.Big .NavButton.Handle .Sprite, .ButtonGroup.Big .Button.Handle .Sprite { top: 0; } .ButtonGroup { position: relative; display: inline-block; } .ButtonGroup .Dropdown { display: none; font-size: 12px; position: absolute; top: 100%; left: 0; margin-top: 1px; z-index: 100; } .ButtonGroup.DropRight .Dropdown { right: 0; left: auto; } #Panel .ButtonGroup .Dropdown { right: 0; } .ProfileOptions .ButtonGroup .Dropdown { left: auto; right: 0; } .ButtonGroup.Open .Dropdown { display: block; } .ButtonGroup.Big .NavButton, .ButtonGroup.Big .Button { font-size: 15px; padding: 8px; text-align: center; } .ButtonGroup.Big { display: block; white-space: nowrap; } #Panel .ButtonGroup.Big > .NavButton:first-child, #Panel .ButtonGroup.Big > .Button:first-child { width: 78%; } .ActivateSlider { display: inline-block; background: $grey-d; box-shadow: 0 10px 30px $grey-1 inset; box-shadow: 0 10px 30px rgba(0, 0, 0, .5) inset; border: solid 1px $grey-e; width: 125px; border-radius: 4px; padding: 1px; position: relative; } .ActivateSlider-Active { text-align: right; } .Gloss { font-size: 80%; font-weight: normal; color: $grey-j; } .Loading { height: 100px; padding: 0 20px; background: url('images/progress.gif') center center no-repeat; } .Progress { padding: 10px 40px 10px 0; background: url('images/progress.gif') center center no-repeat; } .TinyProgress { padding: 10px 40px 10px 0; background: url('images/progress_sm.gif') center center no-repeat; } .InProgress { opacity: .5; cursor: progress; pointer-events: none; } .Conversations .Deleted { text-decoration: line-through; } .Deleted { background: $grey-8; border: 1px solid $grey-2; margin: 10px 0 0; padding: 6px 10px; border-radius: 3px; } /* Note: Warning, Alert & Info are simple boxes that can be used to wrap message strings & imply importance. */ span.Warning, div.Warning { background: $white-6; border: 2px solid $red-b; color: $red-c; padding: 6px 8px; margin: 10px 0; border-radius: 2px; } .Count { background-color: $grey-7; background-color: rgba(0, 0, 0, 0.6); border-radius: 3px; color: $white; font-size: 80%; font-weight: normal; padding: 1px .8ex; } .Alert { font-size: 80%; background: $red-c; color: $white; padding: 1px 3px; border-radius: .5ex; } .Alert a { color: $white; } .Alert a:hover { text-decoration: underline; } .Info { font-size: 13px; background: $grey-f; border: 2px solid $grey-5; border: 2px solid rgba(0, 0, 0, 0.1); color: $grey-6; border-radius: 2px; padding: 6px 8px; margin: 10px 0; } .Info strong { font-weight: bold; } .BreadcrumbWrap { clear: both; line-height: 2.4; font-size: 12px; } #PagerLess { border-radius-topright: 2px; border-radius-topleft: 2px; margin-bottom: 1px; text-align: left; } .MorePager { text-align: right; } .MorePager a.Loading { border: 0 !important; padding: 0 20px !important; background: url('images/progress.gif') center center no-repeat !important; } .Pager { font-weight: bold; float: right; } .Pager a, .Pager span { display: inline-block; margin: 0 3px; } .Pager span { color: $grey-3; } .Pager .Highlight { color: $black; } .MoreWrap { float: right; } .PagerNub { overflow: hidden; display: inline-block; width: 1px; margin-right: -1px; } /* Small UserPhoto() images */ a.Small:hover { text-decoration: none; } a.Small img { text-indent: -100px; background: $grey-2; display: inline-block; height: 24px; width: 24px; overflow: hidden; } /* Note: The MessageModule (in /applications/dashboard/modules) wraps all messages that it renders in a div with this DismissMessage class. */ /* Messages */ .DismissMessage a.Dismiss { font-family: arial; position: absolute; font-size: 16px; font-weight: bold; line-height: 1; color: $grey-3; top: -1px; right: -1px; padding: 1px 3px; text-decoration: none; } .DismissMessage a.Dismiss:hover { border: none; background: $grey-1; color: $white; } .DismissMessage strong, .DismissMessage b { font-weight: bold; } .DismissMessage { font-size: 13px; text-align: left; position: relative; color: $black; border: none; border-radius: 1px; margin: 10px 0; padding: 10px; } .DismissMessage.Info { background: $white-3; border: 1px solid $grey-2; } .DismissMessage.Warning { background: $white-4; border: 1px solid $red-d; } .DismissMessage.Box { background: $yellow-c; border: 1px solid $yellow-d; box-shadow: none; margin: 0 0 10px; /* Make sure that .Box definitions don't override the base DismissMessage margin! */ } .CasualMessage { background: $blue-a; border: 1px solid $blue-9; color: $vanilla-blue; } .InfoMessage { background: $grey-q; border: 1px solid $grey-2; } .AlertMessage { background: $yellow-c; border: 1px solid $yellow-e; } .WarningMessage { background: $white-4; border: 1px solid $red-d; } /* =================================================================== Header */ #Head { background: $blue-8; color: $white; } /* Targetting the padding on head in this way b/c it was causing problems in older themes */ body > #Frame > .Head { padding: 16px 3px 3px; } #Head a { color: $white; font-weight: bold; } .SiteTitle { font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; font-size: 24px; margin-right: 6px; } .SiteMenu { display: inline; white-space: nowrap; } .SiteMenu li { display: inline; } .SiteMenu a { font-size: 11px; padding: 6px; } .SiteMenu a:hover { text-decoration: underline; } .SiteSearch { position: relative; } .SiteSearch .InputBox { padding: 5px 125px 5px 5px; font-size: 11px; } .SiteSearch .Button { background: url('images/sprites.png') 0 -196px no-repeat transparent; height: 16px; width: 16px; overflow: hidden; line-height: 999px; color: transparent; font-size: 0; border: none; position: absolute; top: 4px; right: 4px; padding: 0; } #Head .SiteSearch { float: right; } #Head .SiteSearch .InputBox { border: none; width: 175px; } /* Option (dropdown) Menus, Bookmark stars, admin checkboxes */ .ControlOptions, .Options { float: right; } .CategoryLink { padding: 2px 4px; font-size: 11px; background: $blue-a; border-radius: 1px; } .PageTitle .Options { height: 10px; } .OptionsMenu { font-size: 10px; font-weight: normal; line-height: 100%; } .OptionsTitle { user-select: none; background: url("images/ui_sprites.png") no-repeat 0 -101px; padding: 0; width: 21px; height: 18px; display: inline-block; vertical-align: top; line-height: 999px; /* Set it higher than your image height */ overflow: hidden; /* Hide the text */ font-size: 0; /* FF2 doesn’t like the above */ cursor: pointer; } .Item .OptionsTitle { visibility: hidden; } .Item:hover .OptionsTitle, .Item.Open .OptionsTitle { visibility: visible; } .Flyout:before, .Flyout:after { border-bottom: 7px solid $grey-7; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ""; left: 9px; position: absolute; top: -7px; } .Flyout:after { border-bottom: 7px solid $white; top: -6px; } .OptionsMenu .Flyout:before, .OptionsMenu .Flyout:after { left: inherit; right: 14px; } .MenuItems { line-height: 100%; font-size: 11px; border: 1px solid $grey-9; border-radius: 2px; background: $white; padding: 5px 0; box-shadow: 0 5px 10px $grey-5; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .MenuItems a, .MenuItems a:link, .MenuItems a:visited, .MenuItems a:active { display: block; text-decoration: none; white-space: nowrap; color: $grey-1 !important; padding: 3px 15px; line-height: 18px; } .MenuItems a:hover { color: $white !important; text-decoration: none; background-color: $blue-e !important; } .MenuItems a:hover .Gloss { color: $white !important; } .MenuItems li > strong { font-size: 12px; padding: 3px 10px; line-height: 18px; } .MenuItems hr { border: 0; border-bottom: 1px solid $grey-2; } .MenuItems.Up:before, .MenuItems.Up:after { border-top: 7px solid $grey-7; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ""; left: 71px; position: absolute; bottom: -7px; } .MenuItems.Up:after { border-top: 7px solid $white; bottom: -6px; } .ToggleFlyout { position: relative; } .ToggleFlyout.Open { z-index: 110; /* above Item:hover */ } .ToggleFlyout .Flyout { position: absolute; top: 100%; /* right: -10px; This causes text overflows when flyout items are long */ display: none; } .OptionsMenu .Flyout { top: 18px; right: -9px; } .Flyout .Author .PhotoWrap { margin: 0; } .FlyoutMenu { width: 300px; background: $white; color: $black; border-radius: 2px; box-shadow: 0 5px 10px $grey-5; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); border: solid 1px $grey-9; } .FlyoutMenu a { color: $blue-f; } .FlyoutButton { cursor: pointer; } .FlyoutLeft .Flyout { right: inherit; } .DropHandle { display: inline-block; height: 0; width: 0; border-style: solid; border-width: 4px; border-color: $black transparent transparent transparent; position: relative; bottom: -2px; } .SelectFlyout { display: inline-block; cursor: pointer; } .SelectFlyout .Flyout:before, .SelectFlyout .Flyout:after { display: none; } .MeBox .Flyout { right: inherit; left: -4px; top: 150%; } .MeBox.FlyoutRight .Flyout { left: inherit; right: -4px; } .MeBox.FlyoutRight .Flyout:before, .MeBox.FlyoutRight .Flyout:after { left: auto; right: 9px; } a.Bookmark, a.Bookmarked, a.Bookmarking { display: inline-block; background: url('images/ui_sprites.png') 0 -2px no-repeat; height: 18px; width: 18px; /* margin: 0 4px;*/ vertical-align: top; overflow: hidden; text-indent: -1000px; font-size: 1px; } a.Bookmark:hover { background-position: 0 -22px; } a.Bookmarked { background-position: 0 -42px; } a.Bookmarked:hover { background-position: 0 -82px; } a.Bookmarking, a.Bookmarking:hover { background-position: 0 -62px; } .AdminCheck { vertical-align: top; line-height: 1; } td.CheckBoxColumn { text-align: center; } .HomepageTitle .AdminCheck { padding-left: 8px; } .ControlOptions .AdminCheck { display: block; padding: 6px 8px 0; } .Opts .ControlOptions .AdminCheck { padding: 0; } /* ======================================================== Full Page Errors */ .SplashMessage #Body h1 { font-size: 64px; line-height: 1.4; } .SplashMessage #Message { font-size: 18px; margin-bottom: 3em; } .SplashMessage .SplashInfo { max-width: 640px; margin: auto; } /* ======================================================== Panels / Sidebars */ #Panel { width: 200px; float: left; /* No overflow hidden on main elements. Causes too many bugs! overflow: hidden; */ } .Box { margin: 10px 0; } .Box dl { overflow: hidden; } .Box dl dt { font-size: 12px; float: left; width: 80px; color: $grey-4; overflow: hidden; white-space: nowrap; } .Box dl dd { font-size: 12px; margin-left: 80px; } /* Hiding until we figure out what to do with GuestWelcomeModule */ .MeBox-SignIn { display: none; } .Profile .MeBox { display: none; } .UserBox, .MeBox { margin: 10px 0; } .UserBox .PhotoWrap, .MeBox .PhotoWrap { float: left; margin-right: 5px; } .UserBox .WhoIs, .MeBox .WhoIs { min-height: 40px; line-height: 1.3; } .UserBox .Username, .MeBox .Username { font-weight: bold; vertical-align: top; font-size: 14px; } .UserBox .Email { white-space: nowrap; overflow: hidden; } .MeMenu { line-height: 24px; } .MeButton { padding: 3px 5px; border: solid 1px transparent; position: relative; line-height: 1; display: inline-block; } .MeButton:hover { background: $grey-5; background: rgba(0, 0, 0, 0.07); } .MeButton:hover { background: $grey-5; background: rgba(0, 0, 0, 0.07); } .MeButton .Alert { position: absolute; top: -2px; right: -1px; font-size: 9px; line-height: 1; padding: 2px; } .MeMenu em { display: none; } .MeBox.Inline, .MeBox.Inline .WhoIs, .MeBox.Inline .MeMenu { display: inline-block; line-height: 24px; margin: 0; vertical-align: top; min-height: 24px; } .MeBox.Inline > .PhotoWrap { float: none; } .MeBox.Inline > .PhotoWrap .ProfilePhoto { height: 24px; width: 24px; } .MeBox.Inline .Username { margin-right: 4px; } .MeBox-SignIn.Inline * { display: inline; } .MeBox.Inline .SignInIcons img { vertical-align: top; } .PanelActivity { border-top: 1px solid $blue-g; border-bottom: 0; } .PanelActivity li { background: $white-7; border-bottom: 1px solid $blue-g; padding: 2px 4px; color: $grey-4; font-size: 11px; line-height: 1.6; } .PanelActivity li a { font-size: 13px; } .PanelActivity li a.Name { margin-right: 2px; } .PanelActivity span { padding: 0 4px; } .PanelActivity p { padding: 0 4px; display: inline; font-size: 90%; } .PanelActivity li em { padding-left: 5px; color: $grey-3; font-size: 80%; } .PanelActivity li .Story { font-size: 85%; } /* Compatibility for old custom themes that overrode this value */ #Panel .PanelInfo li { text-align: left; } #Panel .FilterMenu li, .PanelInfo li { border-bottom: 1px solid $grey-2; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 2px 4px; } #Panel .FilterMenu li:first-child, .PanelInfo li:first-child { border-top: 1px solid $grey-2; border-top: 1px solid rgba(0, 0, 0, 0.1); } /** Make standard items a bit more condensed when in the panel. **/ .PanelColumn .Item { padding: 2px; } .PanelColumn .Item .Title { font-size: 13px; font-weight: normal; } .PanelColumn .Options { display: none; } #Panel .FilterMenu .Aside, .PanelInfo .Aside, .Item .Aside { float: right; } .PanelInfo .Heading { font-weight: bold; } .PanelInfo li strong { font-weight: normal; text-align: left; } .PanelInfo li .LastMessage { float: right; } .PanelInfo .Meta { font-size: 11px; } /* .PanelInfo .Meta span, .PanelInfo .Meta strong { margin-right: 8px; } */ .PanelInfo .Meta span a { margin-left: 8px; } .PanelInfo .Meta strong { display: inline; border-radius: 2px; background: $yellow-3; color: $black; font-size: 9px; font-weight: bold; padding: 3px; line-height: 1; } .PanelInfo .Parent { text-align: left; font-weight: bold; background: none; color: $grey-1; padding: 2px 0; } #Panel .FilterMenu .Active, .PanelInfo .Active { background: $grey-g; background: rgba(0, 0, 0, 0.03); font-weight: bold; } .PanelInfo .Active strong { font-weight: bold; } .PanelActivity .ShowAll, .PanelInfo .ShowAll { font-weight: bold; border: 0; text-align: right; background: none; } #Content .BoxFilter { margin: 0 0 6px; } #Panel .BoxFilter { margin: 10px 0; } #Content .FilterMenu { margin: 10px 0; } #Content .FilterMenu li, #Content .FilterMenu li.Active { display: inline-block; white-space: nowrap; margin: 0 6px; } #Content .FilterMenu li a { padding: 4px 0; } #Content .FilterMenu li.Active a { border-bottom: 2px solid $grey-2; border-bottom: 2px solid rgba(0, 0, 0, 0.1); } #Content .BoxFilter a { margin: 0 10px 0 0; padding: 4px 0; display: block; } #Content .BoxFilter .Active a { color: $black; border-bottom: 2px solid $grey-2; border-bottom: 2px solid rgba(0, 0, 0, 0.1); } #Content .BoxFilter { display: none; } /* Hide these by default, can be unhidden for backwards compat. */ /* End BoxFilter in #Content area */ #UserOptions { margin-bottom: 10px; } /* Category Depths */ .CategoryFilterOptions .CurrentFilter { font-weight: bold; } .PanelCategories .Depth2 { padding-left: 8px; } .PanelCategories .Depth3 { padding-left: 12px; } .PanelCategories .Depth4 { padding-left: 16px; } .PanelCategories .Depth5 { padding-left: 20px; } .PanelCategories .Depth6 { padding-left: 24px; } .PanelCategories .Depth7 { padding-left: 28px; } .PanelCategories .Depth8 { padding-left: 32px; } .PanelCategories .Depth9 { padding-left: 36px; } .PanelCategories .Depth10 { padding-left: 40px; } .PanelCategories .Depth11 { padding-left: 44px; } .PanelCategories .Depth12 { padding-left: 48px; } .CategoryList .Depth2 { padding-left: 25px !important; } .CategoryList .Depth3 { padding-left: 50px !important; } .CategoryList .Depth4 { padding-left: 75px !important; } .CategoryList .Depth5 { padding-left: 100px !important; } .CategoryList .Depth6 { padding-left: 125px !important; } .CategoryList .Depth7 { padding-left: 150px !important; } .CategoryList .Depth8 { padding-left: 175px !important; } .CategoryList .Depth9 { padding-left: 200px !important; } .CategoryList .Depth10 { padding-left: 225px !important; } .CategoryList .Depth11 { padding-left: 250px !important; } .CategoryList .Depth12 { padding-left: 275px !important; } .Box.RecentUsers { float: left; } .Icons a { display: block; margin: 0 2px 2px 0; float: left; } .Icons img { display: block; height: 44px; width: 44px; overflow: hidden; background: $blue-i; color: $blue-i; text-indent: 50px; } /* Page Controls (new discussion button, pagers, etc) */ #Content .BoxNewDiscussion { display: none; /* display: block to reveal this */ } .PageControls { margin: 5px 0; min-height: 24px; } /* ================================================ DataList */ /* Note: DataList is used in search results, vanilla discussions & drafts */ .SearchForm { margin: 20px auto; } .SearchForm .InputBox { width: 100%; box-sizing: border-box; font-size: 14px; padding: 6px 25px 6px 8px; border-radius: .35ex; border: solid 1px $grey-d; } .SearchForm .SiteSearch { max-width: 600px; margin: 0; } .SearchForm .SiteSearch .Button { top: 8px; right: 6px; } .Empty { margin: 10px 0; } .DataList .Item, .NarrowList .Item { margin: 0; padding: 8px; border: 0 solid $grey-2; border: 0 solid rgba(0, 0, 0, 0.1); border-bottom-width: 1px; position: relative; } .DataList .Item .Item { border: none; } .Item-Icon { float: left; margin: 0 10px 10px 0; } .Item h2, .Item h3, .Item h4, .Item h5 { margin: 0; } #latest { float: left; margin: -10px; } .DataList .Title { font-size: 14px; display: block; font-weight: bold; margin: 0; } .ItemDiscussion .Meta, .DataList .Meta { font-size: 11px; color: $blue-j; } .MItem { margin-left: 8px; margin-right: 8px; white-space: nowrap; } .MItem:first-child { margin-left: 0; } .MItem:last-child { margin-right: 0; } .CommentInfo { line-height: 1.5; } .Item .AuthorInfo { font-size: 11px; } .DataList .Excerpt { font-size: 12px; line-height: 1.4; margin: 5px 0; } .DataList .Excerpt p { display: inline; padding: 0; } .HasNew { border-radius: 2px; background: $yellow-3; color: $black; font-size: 9px; font-weight: bold; padding: 3px; line-height: 1; white-space: nowrap; } .JustNew { display: none; } .Item.Read { background: $grey-h; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); opacity: .9; } .Item.Read:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .Item.Read .Title, .Item.Read .BlockTitle { font-weight: normal; } .Item.Checked { background: $yellow-f; } .Item.Open { z-index: 200; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(enabled=false)" !important; filter: alpha(enabled=false) !important; opacity: 1 !important; } .DataList a.Delete { border-radius: 0; color: $grey-1; display: block; height: 14px; margin: 0; padding: 2px 4px; width: auto; font-family: arial; font-size: 16px; font-weight: bold; line-height: 1; visibility: hidden; } .DataList a.Delete:hover { text-decoration: none; border: none; background: $grey-1; color: $white; visibility: visible; } .Item:hover a.Delete { visibility: visible; } /* Condensed datalists make the main link & excerpt inline. */ .DataList .Unfollow { background: $grey-5; } .DataList .Unfollow a { color: $grey-6; } .Item .Inset { border-top: 1px solid $blue-h; padding: 5px 0; } .Item .Author a { font-size: 15px; font-weight: bold; } .Condensed .Title, .Condensed a.Title { display: inline; padding: 0; } .Condensed .Excerpt { display: inline; } .PopList .Item { padding: 4px; position: relative; overflow: hidden; border-bottom: 1px solid $grey-2; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .PopList .Item[rel] { cursor: pointer; } .PopList .ItemContent { margin: 0 0 0 48px; line-height: 1.4; } .PopList .Meta { color: $grey-3; font-size: 80%; } .PopList .Center { padding: 0; } .PopList .Center a { display: block; padding: 4px 0; } .PopList .Item:hover { background: $grey-5; background: rgba(0, 0, 0, 0.03); } .PopList .Item.Title:hover { background: inherit; } .PopList .Item.Title { font-size: 12px; padding: 2px 4px; } .PopList .Item.Title a { float: right; font-size: 11px; } .PopList .Empty { border: none; } /* /me actions */ .MeAction .AuthorAction { display: inline; margin: 0 6px; font-size: 15px; font-weight: bold; } .MeAction .Item-Header { margin-bottom: 8px; } .MeAction .Message { display: none; } .Hero { background: $grey-g; background: rgba(0, 0, 0, .03); padding: 20px; margin: 10px 0 20px; border-radius: 6px; } .Hero h3 { font-size: 24px; font-weight: normal; } .ChildCategoryList { overflow: hidden; margin-bottom: 8px; } .ChildCategoryList .Item { float: left; width: 50%; padding: 0; } .ChildCategoryList .Item:nth-child(odd) { clear: left; } .ChildCategoryList .ItemContent { padding: 8px 0 0; } /* =============================================================== Activities */ .Activities li.HasPhoto .Title { padding: 0; } .Activities a.Title, .Activities .Title, .Activities .Title a { font-size: 14px; } .Activities li.Condensed .Excerpt { color: $black; font-size: 13px; } .Activities ul.DataList { margin-left: 50px; } .Activities .ItemContent { margin: 0 0 0 53px; } .Activities .ActivityComments .ItemContent { margin: 0 0 0 42px; } .Activities .DataList li { background: $grey-h; background: rgba(0, 0, 0, 0.05); margin-bottom: 2px; padding: 6px; } .Activities .DataList a.Title, .Activities .DataList .Title, .Activities .DataList .Title a, .Activities .DataList .Excerpt p { font-size: 13px; line-height: 1; } .Activities .DataList .Photo img { height: 32px; width: 32px; } .Activities a.CommentLink, .Activities a.CommentLink:hover { font-size: 12px; cursor: text; background: $white; color: $grey-d !important; padding: 5px; text-decoration: none; border: 1px solid $grey-b; display: block; line-height: 100%; font-weight: normal; } /* ============================================================== MessageList */ .Author .PhotoWrap { margin: 0 10px 4px 0; float: left; /* overflow: hidden;*/ } .Popup .Preview { padding: 8px; margin: 0; } body.Post .Popup a.Close { color: $vanilla-blue; } .Message { line-height: 1.7; font-size: 100%; word-wrap: break-word; margin-top: 5px; } .Message h1, .Message h2, .Message h3, .Message p, .Message .P { margin: 10px 0; } blockquote { margin: 1em 0 1em 40px; } .emoji { margin-top: -2px; margin-bottom: -3px; /* account for image padding */ } blockquote.Quote, blockquote.UserQuote { padding: 1ex 16px; margin: 1em 0; background: $grey-h; background: rgba(0, 0, 0, 0.05); border-left: 4px solid $grey-5; border-left: 4px solid rgba(0, 0, 0, 0.1); min-width: 200px; overflow-y: initial; } .Message small { font-size: 11px; color: $grey-3; } .EmbeddedContent { overflow: hidden; } .Message img.LeftAlign, img.LeftAlign { float: left; margin: 0 10px 5px 0; max-width: 300px; } .Message dt { font-weight: bold; margin: 10px 0 4px; } .Message dd { margin-left: 30px; } .Message dd > p { margin-top: 4px; } .Message li { margin: 5px 0; } .ClearFix { clear: both; } .codeBlock, code, pre { background: $yellow-8; padding: 4px 8px; font-family: monospace; overflow: auto; border: 1px solid $yellow-9; } .code, code { white-space: pre-wrap; &.focus-visible { outline-offset: -1px; } } .codeBlock, pre { display: block; margin: 1em 0; white-space: pre; } pre code { border: none; padding: 0; white-space: pre; } mark { padding: 0 2px; color: inherit; background: $yellow-a; } .Message strong, .Message b { font-weight: bold; } .Message em, .Message i { font-style: oblique; } .Message ul, .Message ol { margin: 1em 0 1em 3em; } .Message ol li { list-style: decimal !important; } .Message ul li { list-style: disc !important; } .Message img { max-width: 100%; } .Message td, .Message th { padding: .5em; } /* =============================================================== Categories */ .ChildCategories { border-top: 1px dotted $grey-2; display: block; } .DataList .Meta .RSS { margin-right: 6px; } .Meta .RSS img { vertical-align: text-bottom; } .CategoryHeading .ItemContent { font-weight: bold; font-size: 14px; } .RssButton { display: inline-block; background: url(images/rss.gif) no-repeat center center; height: 16px; width: 16px; vertical-align: bottom; color: transparent; overflow: hidden; text-indent: -100px; } .DataTable .RssButton { float: right; } /* ============================================================= Profile Page */ a.ChangePicture { position: absolute; background: $grey-1; background: rgba(0, 0, 0, .7); color: $white; font-size: 11px; padding: 10px 0; width: 100%; display: none; text-align: center; } .PhotoWrap:hover a.ChangePicture { display: block; } a.ChangePicture:hover { color: $white; text-decoration: underline; } .ProfileOptions { float: right; position: relative; } /* Hiding form headings with CSS in case the forms get popped */ div.Popup .SmallPopup h1 { display: none; } /* BGColor on profile forms */ body.Profile.EditMode #Content form { padding: 10px 20px 20px; background: $grey-h; background: rgba(0, 0, 0, 0.05); } /*form.Activity { display: block; margin: 0 0 10px; overflow: hidden; } form.Activity textarea { width: 100%; margin-bottom: 2px; height: 60px; min-height: 60px; } form.Activity .Button { float: right; } .ActivityComments textarea { height: 60px; min-height: 60px; }*/ /* Invitations Form */ table.PreferenceGroup, #Form_Invitation table { width: 100%; border-collapse: collapse; margin: 10px 0; } table.PreferenceGroup th, table.PreferenceGroup td, #Form_Invitation th, #Form_Invitation td { padding: 2px 6px; border-bottom: 1px solid $grey-2; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } table.PreferenceGroup th, #Form_Invitation table th { font-weight: bold; text-align: left; } /* Preferences Form */ .Preferences h3 { margin: 0; padding: 10px 0 4px !important; } /* About in content area */ .ContentColumn .About h2 { display: none; } dl.About dt, dl.About dd { padding: 0; margin: 0; float: none; font-size: 11px; line-height: 14px; display: inline; } dl.About dt { color: $grey-j; background: url('images/profile-sprites.png') 2px -139px no-repeat transparent; padding-left: 14px; } dl.About dt.Name { background-position: 0 -26px; } dl.About dt.Email { background-position: 0 -53px; } dl.About dt.Joined, dl.About dt.LastActive { background-position: 0 3px; } dl.About dt.Roles { background-position: 1px -81px; } dl.About dt.Posts { background-position: 0 -113px; } dl.About dd { padding: 0 8px 0 0; } /* Invitations */ .Invitations.DataTable { margin: 15px 0; } .Invitations.DataTable th { text-align: left; } .Invitations.DataTable th { padding: 4px; border-bottom: 1px solid $grey-5; border-bottom: 1px solid rgba(0, 0, 0, 0.1); vertical-align: top; } .Invitations th.InviteMeta { width: 20%; } .InviteForm { margin: 5px 0; } .InviteForm label { display: block } /* ======================================================== Thumbnail Cropper */ .Popup .CurrentPicture { display: none; } .CurrentPicture table, form.Thumbnail table { width: 100%; } .CurrentPicture table td, form.Thumbnail table td { width: 50%; font-weight: normal; vertical-align: top; padding-right: 10px; } .CurrentPicture table thead td, form.Thumbnail table thead td { font-weight: bold; } form.Thumbnail .Warning { margin-bottom: 20px; } /* ================================================= CommentForm */ .Preview { background: $white; color: $black; padding: 4px; min-height: 100px; } .EditCommentForm .Buttons, .CommentForm .Buttons { position: relative; text-align: right; margin: 0; padding: 6px 0; } .CommentForm .WriteButton, .CommentForm .PreviewButton, .CommentForm .DraftButton { margin: 0 6px; } .Form-Header .Username { display: none; } .Form-Header .Author .PhotoWrap { margin: 10px 0 0 10px; } .EditCommentForm .FormWrapper { padding: 10px; } .CommentForm .FormWrapper { padding: 10px 10px 10px 60px; } .EditCommentForm textarea.TextBox, .CommentForm textarea.TextBox { min-height: 50px; height: 50px; } .EditCommentForm { margin: 10px 0; } /* =================================================================== Popups */ .Popup .Info { margin-top: 10px; } .Overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 998; background-color: rgba($black, .2); } .MSIE .Overlay { background: gray; filter: alpha(opacity=0); position: static; } div.Popup { position: absolute; width: 100%; top: 0; left: 0; text-align: center; } div.Popup .Border { margin: 0 auto; text-align: left; position: relative; width: 600px; max-width: 100vw; display: inline-block; } div.Popup .Body { background: $white; padding: 10px; } div.Popup .Loading { text-align: center; } div.Popup h1 { margin-top: 0; } a.Close { position: absolute; top: 16px; right: 20px; line-height: 1; color: $black; cursor: pointer; font-family: arial; font-size: 22px; font-weight: bold; padding: 0; } div.Popup .Footer { border: none; background: none; padding: 0; margin: 0; text-align: right; } div.Popup h3 { font-size: 120%; font-weight: bold; padding: 20px 0 10px; } div.Popup p { padding: 6px 10px 10px; } div.Popup .Legal p { padding: 6px 0 10px; } div.Popup small { font-size: 11px; } div.Popup form p, div.Popup .userContent p { padding: 0; } body.Profile.EditMode ul li label, div.Popup form ul li label { display: block; font-size: 14px; font-weight: bold; margin: 10px 0 0; } body.Entry form ul li.Gender label.RadioLabel, body.Profile.EditMode ul li.Gender label.RadioLabel, div.Popup form ul li.Gender label.RadioLabel { display: inline; padding-right: 20px; } li.Gender { margin-bottom: 10px; } body.Profile.EditMode ul li label.RadioLabel, body.Profile.EditMode ul li label.CheckBoxLabel, div.Popup form ul li label.RadioLabel, div.Popup form ul li label.CheckBoxLabel { font-weight: normal; } body.Profile.EditMode .Warning { margin: 10px 0; } div.Popup form ul li label.RadioLabel { font-size: 12px; } /* Serious Ajax Error Styles */ .AjaxError { white-space: pre; overflow: auto; padding: 10px; } /* ==================================================================== Legal */ .Legal h3 { padding: 0; margin: 20px 0 0; font-size: 120%; font-weight: bold; } .Legal ol { list-style-position: outside; list-style-type: decimal; margin: 0 30px 10px; } .Legal ul { list-style-position: outside; list-style-type: disc; margin: 0 30px 10px; } .Legal li { padding: 5px 0; } .Legal strong { font-weight: bold; } /* =================================================================== Footer */ #Foot { clear: both; text-align: center; margin: 20px 0 0; padding: 4px 9px; font-size: 13px; color: $grey-2; line-height: 1; } #Foot a { color: $grey-e; } #Foot a:hover { color: $grey-b; } .PoweredByVanilla { display: inline-block; height: 33px; width: 70px; background: url('images/vanilla-forums-dark-bg-70x33.png') center center no-repeat; background: url('images/vanilla-forums-light-bg-70x33.png') center center no-repeat; line-height: 999px; color: transparent; overflow: hidden; font-size: 0; } /* ================================ Vanilla ================================= */ /* ============================================================== Discussions */ /* Note: The Vanilla Discussion List has the following classes applied to individual list elements and can be styled: + Bookmarked: the user has bookmarked that topic + Announcement: the discussion has been announced + Mine: the user created the discussion + New: there are new comments since the last viewed the discussion */ .Tag { background: $grey-3; border-radius: 2px; color: $white; padding: 1px 4px; line-height: 14px; } .Tag a { color: $white; } .Tag.Closed { background: $grey-4; } .Tag.Category { background: $grey-i; font-weight: normal; } .Tag.Category a { color: $black; } .Tag.Tag-Banned { background-color: $red-a; } .Discussion .PageTitle h1 { font-size: 24px; line-height: 1.2; } .ItemDiscussion { margin-bottom: 12px; padding: 8px; } /* .ItemDiscussion .Message { margin-top: 20px; } .ItemDiscussion .MItem a { font-size: 11px; } .ItemDiscussion .ProfilePhotoMedium { height: 24px; width: 24px; margin: 0 5px 5px 0; } */ .ItemDiscussion .Message { margin-bottom: 5px; /* Consistency with when only h1 starts page */ font-size: 110%; } .DiscussionHeader { margin: 5px 0 10px; } .BeforeCommentHeading { float: right; } /* ======================================= Category & Discussions Table Views */ .DataTable { width: 100%; table-layout: fixed; } .DataTable td { padding: 4px; border-bottom: 1px solid $grey-2; border-bottom: 1px solid rgba(0, 0, 0, 0.1); vertical-align: top; } .DataTable thead td, .DataTable thead th { font-weight: bold; vertical-align: bottom; } .CheckBoxColumn { width: 24px; } .DataTable .BlockColumn { width: 25%; } tbody .BlockColumn { padding: 8px 4px; /* compensate for line-height 1 */ } .DataTable .BlockColumn-User { width: 15%; } td.BigCount { width: 90px; text-align: center; font-weight: bold; } .DiscussionsTable td.BigCount { width: 70px; } tbody td.BigCount { font-size: 16px; padding: 8px 4px; } .DataTable .Meta, .DataTable .MItem { font-size: 11px; } .DataTable .Title { font-size: 13px; font-weight: bold; } td.Opts { white-space: nowrap; text-align: right; width: 1px; } .MiniPager { display: inline-block; margin-left: 3px; font-size: 11px; color: $grey-1; } .MiniPager a, .MiniPager span { margin: 0 1px; } tr.CategoryHeading td { font-weight: bold; background: $grey-g; background: rgba(0, 0, 0, 0.03); } .CategoryTable .ChildCategories { font-size: 11px; } /* Discussion Sorter */ .DiscussionSorter { float: right; margin-right: 24px; font-size: 11px; } .DiscussionSorter:hover { cursor: pointer; background: $grey-h; } .DiscussionSorter .MenuItems { padding: 0; width: 130px; border-top: none; border-radius: 0; } .DiscussionSorter .Selected { padding: 0 0 0 15px; display: inline-block; width: 115px; border: 1px solid transparent; border-bottom: none; } .DiscussionSorter .Open .Selected { border: 1px solid $grey-9; border-bottom: none; } .DiscussionSorter .SpMenu { background-position: -32px -20px; height: 8px; width: 12px; margin-top: 8px; } .DiscussionSorter .Flyout:before, .DiscussionSorter .Flyout:after { border: none; } .DiscussionSorter .ToggleFlyout .Flyout { top: 18px; } /* ======================================= Blocks */ .Block { line-height: 1; } .BlockTitle { display: block; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 3px; font-size: 12px; } .Block .PhotoWrap { float: left; margin: 0 5px 0 0; } /*.Block img { height: 24px; width: 24px; }*/ .Block .MItem { font-size: 10px; margin: 0; } /* ================================= Conversation, Discussion & Comment Forms */ .SpNewConversation, .SpAskQuestion, .SpNewPoll, .SpNewDiscussion { display: inline-block; height: 16px; width: 16px; background: url('images/sprites.png') 0 -68px no-repeat; margin: 0 5px 2px 0; vertical-align: middle; } .SpNewConversation { background-position: -64px -68px; } .SpAskQuestion { background-position: -48px -68px; } .SpNewPoll { background-position: -32px -68px; } .SpRSS { background: url("images/sprites.png") no-repeat -27px -46px transparent; display: inline-block; height: 14px; vertical-align: middle; width: 14px; } .GroupForm, .DiscussionForm { label { font-size: 14px; font-weight: bold; color: $grey-j; } } .FormWrapper { background: $grey-g; background: rgba(0, 0, 0, 0.03); margin: 0; padding: 20px; } .FormWrapper-Condensed { padding: 10px; } .FormWrapper-Condensed .Buttons { text-align: right; } label.B { font-weight: bold; } .DiscussionForm textarea { width: 100%; height: 100px; min-height: 100px; margin: 0 0 6px; } .DiscussionForm .Category, .DiscussionForm input.InputBox { width: 100%; margin-bottom: 10px; } .DiscussionForm .Category label { padding: 0 8px 0 0; } .DiscussionForm .PostOptions li { display: inline; padding: 0 8px 0 0; } .DiscussionForm .PostOptions label { display: inline; font-weight: normal; font-size: 95%; } .FormWrapper.StructuredForm { padding-top: 5px; } .StructuredForm label { font-weight: bold; font-size: 14px; display: block; } .StructuredForm .P { margin: 15px 0; } .StructuredForm label.RadioLabel, .StructuredForm label.CheckBoxLabel, .StructuredForm label.Unstyled { font-size: 100%; font-weight: normal; } .StructuredForm input.hasDatepicker, .StructuredForm input.hasDatepicker:focus { background-image: url('images/calendar.png'); background-repeat: no-repeat; background-position: center right; padding-right: 24px; } .List.Inline { display: inline; } .List.Inline * { line-height: 16px; } /* ============================== Conversations ============================= */ textarea.MultiComplete { width: 100%; height: 20px; text-align: left; } #Panel input.InputBox, .AddPeople textarea.MultiComplete { width: 100%; margin-bottom: 2px; } .AddPeople form div { text-align: right; } .ac_results { padding: 0; border: 1px solid $white-1; border-top: 0; background-color: $white; overflow: hidden; z-index: 99999; } .ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; } .ac_results li { margin: 0; padding: 5px; cursor: default; display: block; /* if width will be 100% horizontal scrollbar will apear when scroll mode will be used */ /*width: 100%;*/ font-size: 12px; /* it is very important, if line-height not setted or setted in relative units scroll will be broken in firefox */ line-height: 16px; overflow: hidden; border-bottom: 1px solid $white-1; text-align: left; } .ac_lastitem { border-bottom: 0 !important; } .ac_results strong { font-weight: bold; background: $blue-7; } .ac_over strong { font-weight: bold; background: $blue-4; } .ac_over { background: $blue-5; color: $white; } .AddPeople h4 { border-bottom: 0; } /* ==================================================== New Conversation Form */ #ConversationForm label { display: block; text-align: left; color: $grey-j; font-size: 14px; font-weight: bold; } #ConversationForm .TextBox { width: 100%; height: 100px; min-height: 100px; margin: 8px 0 6px; } body.Conversations a.Cancel { margin-left: 20px; } /* Upload Progress Bar */ .UploadProgress { margin: 10px 0; background: url('images/upload-progress-back.gif') repeat; width: 200px; z-index: 0; color: $white; text-shadow: 0 1px 1px $grey-1; border: 1px solid $blue-6; border-radius: 2px; } .UploadProgress div { padding: 2px 0; } .UploadProgress div strong { font-weight: bold; } .UploadProgress .Foreground, .UploadProgress .Background { position: absolute; } .UploadProgress .Background { width: 0; background: url('images/upload-bg.gif') repeat; z-index: 1; } .UploadProgress .Foreground { text-indent: 6px; overflow: visible; white-space: nowrap; z-index: 2; } /* Container */ .Border { border-radius: 8px; background: $grey-2; background: rgba(82, 82, 82, 0.7); padding: 10px; } /* Tabs */ ul.Tabs { border-bottom: 1px solid $grey-b; text-align: left; padding-left: 4px; } ul.Tabs li { display: inline-block; } ul.Tabs li a { display: inline-block; margin-left: 4px; border: 1px solid $grey-b; border-width: 1px 1px 0 1px; border-radius: 3px 3px 0 0; background: $grey-5; color: $grey-6; position: relative; top: 1px; padding: 2px 8px 1px; } ul.Tabs li a:hover { background: $grey-8; color: $grey-7; } ul.Tabs li a.Active { padding: 2px 8px; background: $white; color: $black; } /* Icons */ ul.Tabs li a.EntryTabFor_password { padding-left: 22px; background-image: url('images/icon.png'); background-position: 3px 4px; background-repeat: no-repeat; } /* ============================================================ Entry Screens */ body.Entry form ul li label { font-size: 14px; font-weight: bold; padding: 6px 0 0; display: block; } body.Entry form ul li label.CheckBoxLabel, body.Entry form ul li label.RadioLabel { font-size: 12px; font-weight: normal; width: auto; } span.Incorrect { display: block; color: $red-1; } .SingleEntryMethod { margin: 0 auto; } .MultipleEntryMethods { margin: 0 auto; overflow: hidden; } .MultipleEntryMethods .MainForm { float: left; /* Fix mainform from shoving the other entry methods down when an error occurs during login */ width: 300px; } .MultipleEntryMethods .Methods { padding: 0 15px 5px; line-height: 1; margin-left: 300px; } body#dashboard_entry_password #Content input.Password, body#dashboard_entry_signin #Content input.Password, body#dashboard_entry_index #Content input.Password, .SignInPopup input.Password { width: 180px; } .PasswordStrength { position: relative; margin-top: 2px; padding-right: 8px; margin-bottom: 4px; height: 10px; } .PasswordStrength .Background { height: 4px; background-color: $grey-l; width: 100%; position: absolute; left: 0; } .PasswordStrength .Strength { height: 4px; background-color: $red-8; width: 0; position: absolute; left: 0; } .PasswordStrength .Separator { height: 4px; width: 2px; background-color: $white; position: absolute; left: 0; } .PasswordStrength .StrengthText { padding-top: 2px; text-align: right; font-size: 12px; margin-right: -8px; } .PasswordStrength.Score-0 .Strength { width: 0; } .PasswordStrength.Score-0 .StrengthText { color: $grey-6; } .PasswordStrength.Score-1 .Strength { background-color: $red-8; width: 20%; } .PasswordStrength.Score-1 .StrengthText { color: $red-8; } .PasswordStrength.Score-2 .Strength { background-color: $orange-1; width: 40%; } .PasswordStrength.Score-2 .StrengthText { color: $orange-1; } .PasswordStrength.Score-3 .Strength { background-color: $orange-2; width: 60%; } .PasswordStrength.Score-3 .StrengthText { color: $orange-2; } .PasswordStrength.Score-4 .Strength { background-color: $green-2; width: 80%; } .PasswordStrength.Score-4 .StrengthText { color: $green-2; } .PasswordStrength.Score-5 .Strength { background-color: $green-1; width: 100%; } .PasswordStrength.Score-5 .StrengthText { color: $green-1; } a.ForgotPassword { margin-left: 10px; } li.Buttons div a.ForgotPassword { margin: 0; } body#dashboard_entry_password ul li label.CheckBoxLabel, body#dashboard_entry_signin ul li label.CheckBoxLabel, body#dashboard_entry_index ul li label.CheckBoxLabel, .SignInPopup ul li label.CheckBoxLabel { display: inline; font-size: 12px; font-weight: normal; margin: 10px 0 0 10px; } .SignInPopup li.Buttons, body.Entry li.Buttons { text-align: left; padding: 0 0 10px; } .Methods .Method { margin: 5px 0; } .MainForm .InputBox { max-width: 250px; } /* Handshake */ body#dashboard_entry_handshake #Content { width: 720px; } body#dashboard_entry_handshake #Content form { padding: 20px 30px 26px; } body#dashboard_entry_handshake ul.NewAccount { float: left; width: 315px; margin-right: 44px; border-right: 1px solid $blue-2; } body#dashboard_entry_handshake ul.LinkAccount { margin-left: 315px; } ul.NewAccount h2, ul.LinkAccount h2 { padding-left: 36px !important; background: url('images/dashboard-sprites.png') 0 -542px no-repeat; } ul.LinkAccount h2 { padding-left: 84px !important; background-position: 45px -296px; } body#dashboard_entry_handshake .Info { border: 1px solid $blue-2; background: $blue-3; color: $blue-1; } body#dashboard_entry_handshake #Content h2 { border: none; color: $blue-1; font-size: 140%; font-weight: bold; padding: 6px 0; margin: 0; text-align: left; } /* Leaving Page */ body#dashboard_entry_leave p { margin: 0; padding: 20px 10px; } body#dashboard_entry_leave p.Leaving { background: url('images/progress.gif') left center no-repeat; margin: 0 0 0 14px; padding: 20px 0 20px 50px; } .Connect form ul li#ConnectPassword label, .SignInPopup form ul li#ConnectPassword label { padding: 10px 0 0; } .FinePrint { font-size: 11px; color: $grey-3; } /* Do not customize these unless you enjoy pain. */ /* Error messages that get displayed on forms throughout the application. */ .Errors { text-align: left; position: inherit; top: auto; left: auto; z-index: auto; margin: 0 0 10px !important; } * html .Errors { position: inherit; width: auto; top: auto; left: auto; overflow: auto; } .Errors ul { border: 1px solid $red-6 !important; background: $red-7 !important; padding: 6px 10px; display: block; border-radius: 2px; } .Errors a { color: $white; text-decoration: underline; } .Errors ul li { color: $white !important; background: $red-7 !important; text-align: left; } div.Popup .Errors ul { display: block; border-radius: 2px; border: 1px solid $red-6 !important; } div.Popup .Errors { text-align: left; position: inherit; top: auto; left: auto; z-index: auto; margin: 10px 0 !important; } .Errors pre { margin: 10px 0 5px; padding: 4px 8px; display: block; border-radius: 2px; white-space: pre; overflow: auto; } .Errors pre, .Errors pre * { background: $yellow-1 !important; font-size: 12px !important; font-weight: normal !important; font-family: monospace !important; text-shadow: none !important; color: $grey-1 !important; line-height: 1.4 !important; } .Errors pre * { margin: 0 !important; padding: 0 !important; } /* Note: InformMessages are "growl" style messages that appear in a fixed position on the page to notify users of things like drafts being saved, etc. */ .InformMessages { text-align: left; position: fixed; top: auto; bottom: 0; left: 0; z-index: 200; margin: 0; padding: 0; list-style: none; font-size: 12px; display: block; width: auto; } * html .InformMessages { position: absolute; top: auto; margin-left: 10px; overflow: visible; } .InformWrapper { display: block; margin: 10px; } .InformMessages .InformMessage { color: $white !important; text-shadow: 0 1px 1px $black; text-align: left !important; border-radius: 2px; background: $black !important; background: rgba(0, 0, 0, 0.7) !important; border: none !important; width: auto; max-width: 400px; padding: 9px 14px 8px; display: -moz-inline-stack; display: inline-block; zoom: 1; position: relative; line-height: 1.6; } .InformMessages .InformMessage:hover { background: $grey-1; background: rgba(0, 0, 0, 0.8) !important; } .InformMessages .InformMessage a { color: $blue-b; } .InformMessages .InformMessage a:hover { color: $blue-c; text-decoration: underline; } .InformMessages .InformMessage strong { font-weight: bold; } .InformMessages .InformMessage a.Close { border: none; background: transparent; border-top-right-radius: 2px; color: $grey-2; font-size: 14px; text-align: center; display: none; height: 12px; width: 12px; line-height: 1; text-decoration: none; position: absolute; top: 0; right: 0; } .InformMessages .InformMessage a.Close span { display: inline; } .InformMessages .InformMessage a.Close:hover { background: $black; color: $white; } .InformMessages .InformMessage:hover a.Close { display: block; } /* iPad/iPhone */ @media only screen and (device-width: 768px), only screen and (max-device-width: 480px) { .InformMessages .InformMessage a.Close { color: $white; display: block; } .Item .OptionsTitle { visibility: visible; } } /* Small screens */ @media (max-width: 500px) { .InformMessages { width: 100%; } .InformWrapper { margin: 5px; } .InformMessages .InformMessage { display: block; max-width: inherit; } } .InformMessages .Actions a { margin-right: 4px; } .InformMessages .Actions a:last-child { margin-right: 0; } .InformMessages .Actions a.CancelAction { color: $grey-b; } /* Inform Sprites */ .InformMessages .InformWrapper.HasIcon .InformMessage { padding-left: 42px !important; min-height: 20px; } .InformMessages .InformWrapper.HasSprite .InformMessage { padding-left: 40px !important; } .InformMessages .InformMessage a.Icon { display: block; position: absolute; top: 5px; left: 5px; height: 28px; width: 28px; } .InformMessages .InformMessage a.Icon img { height: 28px; width: 28px; } span.InformSprite { background: url('images/inform-sprites.png') -9px -9px no-repeat; display: block; position: absolute; top: 4px; left: 5px; height: 30px; width: 30px; } span.InformSprite.Refresh { background-position: -9px -9px; } span.InformSprite.Recycle { background-position: -57px -9px; } span.InformSprite.Infinity { background-position: -105px -9px; } span.InformSprite.Squiggle { background-position: -153px -9px; } span.InformSprite.Random { background-position: -200px -9px; } span.InformSprite.Magnify { background-position: -250px -9px; } span.InformSprite.Location { background-position: -298px -9px; } span.InformSprite.Bubble { background-position: -346px -9px; } span.InformSprite.ElipsisBubble { background-position: -394px -9px; } span.InformSprite.Plus { background-position: -442px -9px; } span.InformSprite.Time { background-position: -9px -57px; } span.InformSprite.Eye { background-position: -57px -57px; } span.InformSprite.Target { background-position: -105px -57px; } span.InformSprite.Redflag { background-position: -153px -57px; } span.InformSprite.Flags { background-position: -200px -57px; } span.InformSprite.Graph { background-position: -250px -57px; } span.InformSprite.Chart { background-position: -298px -57px; } span.InformSprite.Envelope { background-position: -346px -57px; } span.InformSprite.Gear { background-position: -394px -57px; } span.InformSprite.Gears { background-position: -442px -57px; } span.InformSprite.Skull { background-position: -9px -106px; } span.InformSprite.SkullBones { background-position: -57px -106px; } span.InformSprite.Bird { background-position: -105px -106px; } span.InformSprite.Present { background-position: -153px -106px; } span.InformSprite.Thundercloud { background-position: -200px -106px; } span.InformSprite.Bandaid { background-position: -250px -106px; } span.InformSprite.Saturn { background-position: -298px -106px; } span.InformSprite.Star { background-position: -346px -106px; } span.InformSprite.Heart { background-position: -394px -106px; } span.InformSprite.Key { background-position: -442px -106px; } span.InformSprite.Ipod { background-position: -9px -152px; } span.InformSprite.Iphone { background-position: -57px -152px; } span.InformSprite.Cabinet { background-position: -105px -152px; } span.InformSprite.Coffee { background-position: -153px -152px; } span.InformSprite.Briefcase { background-position: -200px -152px; } span.InformSprite.Toolcase { background-position: -250px -152px; } span.InformSprite.Suitcase { background-position: -298px -152px; } span.InformSprite.Airplane { background-position: -346px -152px; } span.InformSprite.Spraypaint { background-position: -394px -152px; } span.InformSprite.MailInbox { background-position: -442px -154px; } span.InformSprite.WallPicture { background-position: -9px -200px; } span.InformSprite.Photos { background-position: -57px -200px; } span.InformSprite.FilmRoll { background-position: -105px -200px; } span.InformSprite.Drawer { background-position: -153px -200px; } span.InformSprite.FilmStrip { background-position: -200px -200px; } span.InformSprite.FilmStrip2 { background-position: -250px -200px; } span.InformSprite.Gas { background-position: -298px -200px; } span.InformSprite.Cutlery { background-position: -346px -200px; } span.InformSprite.Battery { background-position: -394px -200px; } span.InformSprite.Beaker { background-position: -442px -200px; } span.InformSprite.Outlet { background-position: -9px -250px; } span.InformSprite.Pinetree { background-position: -57px -250px; } span.InformSprite.House { background-position: -105px -250px; } span.InformSprite.Padlock { background-position: -153px -250px; } span.InformSprite.Network { background-position: -200px -250px; } span.InformSprite.Cloud { background-position: -250px -250px; } span.InformSprite.Download { background-position: -298px -250px; } span.InformSprite.BookmarkRibbon { background-position: -346px -250px; } span.InformSprite.Flag { background-position: -394px -250px; } span.InformSprite.Signpost { background-position: -442px -250px; } span.InformSprite.Brightness { background-position: -9px -298px; } span.InformSprite.Contrast { background-position: -57px -298px; } span.InformSprite.Runner { background-position: -105px -298px; } span.InformSprite.Zap { background-position: -153px -298px; } span.InformSprite.MusicNote { background-position: -200px -298px; } span.InformSprite.Microphone { background-position: -250px -298px; } span.InformSprite.Tshirt { background-position: -298px -298px; } span.InformSprite.Paperclip { background-position: -346px -298px; } span.InformSprite.Monitor { background-position: -394px -298px; } span.InformSprite.Tv { background-position: -442px -297px; } span.InformSprite.Compass { background-position: -9px -346px; } span.InformSprite.Pin { background-position: -57px -346px; } span.InformSprite.Radar { background-position: -105px -346px; } span.InformSprite.Location { background-position: -153px -346px; } span.InformSprite.Telephone { background-position: -200px -346px; } span.InformSprite.Baby { background-position: -250px -346px; } span.InformSprite.Ekg { background-position: -298px -346px; } span.InformSprite.Stopwatch { background-position: -346px -346px; } span.InformSprite.MedicalBag { background-position: -394px -346px; } span.InformSprite.ShoppingCart { background-position: -442px -346px; } span.InformSprite.Dashboard { background-position: -9px -393px; } span.InformSprite.Dogpaw { background-position: -57px -393px; } span.InformSprite.Calendar { background-position: -105px -393px; } span.InformSprite.Lightbulb { background-position: -153px -393px; } span.InformSprite.Trophy { background-position: -200px -393px; } span.InformSprite.Camera { background-position: -250px -393px; } span.InformSprite.Wineglass { background-position: -298px -393px; } span.InformSprite.Beerglass { background-position: -346px -391px; } span.InformSprite.Dumbbells { background-position: -394px -393px; } span.InformSprite.Buoy { background-position: -442px -393px; } span.InformSprite.Beaker2 { background-position: -9px -440px; } span.InformSprite.Testtube { background-position: -57px -440px; } span.InformSprite.Thermometer { background-position: -105px -440px; } span.InformSprite.Pill { background-position: -153px -440px; } span.InformSprite.Equalizer { background-position: -200px -440px; } span.InformSprite.Book { background-position: -250px -440px; } span.InformSprite.Puzzle { background-position: -298px -440px; } span.InformSprite.Palette { background-position: -346px -440px; } span.InformSprite.Umbrella { background-position: -394px -440px; } span.InformSprite.CoffeeCup { background-position: -442px -440px; } span.InformSprite.Gameplan { background-position: -9px -490px; } span.InformSprite.Walk { background-position: -57px -490px; } span.InformSprite.Map { background-position: -105px -490px; } span.InformSprite.IndexCards { background-position: -153px -490px; } span.InformSprite.Piano { background-position: -200px -490px; } span.InformSprite.Sliders { background-position: -250px -490px; } span.InformSprite.Widescreen { background-position: -298px -490px; } span.InformSprite.Badge { background-position: -346px -490px; } span.InformSprite.Chicken { background-position: -394px -490px; } span.InformSprite.Bug { background-position: -442px -490px; } span.InformSprite.SingleUser { background-position: -9px -539px; } span.InformSprite.Group { background-position: -57px -537px; } span.InformSprite.Navigation { background-position: -105px -537px; } span.InformSprite.Balloon { background-position: -153px -537px; } span.InformSprite.Bowandarrow { background-position: -200px -537px; } span.InformSprite.Controller { background-position: -250px -537px; } span.InformSprite.Check { background-position: -298px -537px; } span.InformSprite.Hanger { background-position: -346px -537px; } span.InformSprite.Piggybank { background-position: -394px -537px; } span.InformSprite.Headphones { background-position: -442px -537px; } span.InformSprite.Landscape { background-position: -9px -586px; } span.InformSprite.Stats { background-position: -57px -586px; } span.InformSprite.Idcard { background-position: -105px -586px; } span.InformSprite.Bullhorn { background-position: -153px -586px; } span.InformSprite.Food { background-position: -200px -586px; } span.InformSprite.Moon { background-position: -250px -586px; } span.InformSprite.Sock { background-position: -298px -586px; } span.InformSprite.Bone { background-position: -346px -586px; } span.InformSprite.Golf { background-position: -394px -586px; } span.InformSprite.Dice { background-position: -442px -586px; } .Sprite16 { background: url('images/sprites.png') 0 0 no-repeat; display: inline-block; height: 16px; width: 16px; vertical-align: top; } /* 16px Sprites White */ .SpDashboard, .SpOptions, .SpCog { background-position: 0 -148px; } .SpSettings { background-position: -16px -212px; } .SpNotifications, .SpGlobe { background-position: -32px -212px; } .SpSignOut, .SpExit { background-position: -48px -212px; } .SpMarker { background-position: -64px -212px; } .SpDocuments { background-position: -80px -212px; } .SpInbox, .SpEnvelope { background-position: 0 -228px; } .SpInmail { background-position: -16px -228px; } .SpRoundBubble { background-position: -32px -228px; } .SpSquareBubble { background-position: -48px -228px; } .SpRoundBubbles { background-position: -64px -228px; } .SpSquareBubbles { background-position: -80px -228px; } .SpTag { background-position: 0 -244px; } .SpWrite { background-position: -16px -244px; } .SpLock { background-position: -32px -244px; } .SpRoundAlert { background-position: -48px -244px; } .SpTriangleAlert { background-position: -64px -244px; } .SpBookmarks, .SpStar { background-position: -80px -244px; } .SpSearch { background-position: 0 -260px; } .SpTrash { background-position: -16px -260px; } .SpUser { background-position: -32px -260px; } .SpRefresh { background-position: -48px -260px; } .SpPencil { background-position: -64px -260px; } .SpPlus { background-position: -80px -260px; } /* 16px Sprites White Transparent */ .SpDashboard, .SpCog { background-position: 0 -276px; } .SpSettings { background-position: -16px -276px; } .SpNotifications, .SpGlobe { background-position: -32px -276px; } .SpSignOut, .SpExit { background-position: -48px -276px; } .SpMarker { background-position: -64px -276px; } .SpDocuments { background-position: -80px -276px; } .SpInbox, .SpEnvelope { background-position: 0 -292px; } .SpInmail { background-position: -16px -292px; } .SpRoundBubble { background-position: -32px -292px; } .SpSquareBubble { background-position: -48px -292px; } .SpRoundBubbles { background-position: -64px -292px; } .SpSquareBubbles { background-position: -80px -292px; } .SpTag { background-position: 0 -308px; } .SpWrite { background-position: -16px -308px; } .SpLock { background-position: -32px -308px; } .SpRoundAlert { background-position: -48px -308px; } .SpTriangleAlert { background-position: -64px -308px; } .SpBookmarks, .SpStar { background-position: -80px -308px; } .SpSearch { background-position: 0 -324px; } .SpTrash { background-position: -16px -324px; } .SpUser { background-position: -32px -324px; } .SpRefresh { background-position: -48px -324px; } .SpPencil { background-position: -64px -324px; } .SpPlus { background-position: -80px -324px; } /* 16px Sprites Black */ .SpDashboard, .SpCog { background-position: 0 -84px; } .SpSettings { background-position: -16px -84px; } .SpNotifications, .SpGlobe { background-position: -32px -84px; } .SpSignOut, .SpExit { background-position: -48px -84px; } .SpMarker { background-position: -64px -84px; } .SpDocuments { background-position: -80px -84px; } .SpInbox, .SpEnvelope { background-position: 0 -100px; } .SpInmail { background-position: -16px -100px; } .SpRoundBubble { background-position: -32px -100px; } .SpSquareBubble { background-position: -48px -100px; } .SpRoundBubbles { background-position: -64px -100px; } .SpSquareBubbles { background-position: -80px -100px; } .SpTag { background-position: 0 -116px; } .SpWrite { background-position: -16px -116px; } .SpLock { background-position: -32px -116px; } .SpRoundAlert { background-position: -48px -116px; } .SpTriangleAlert { background-position: -64px -116px; } .SpBookmarks, .SpStar { background-position: -80px -116px; } .SpSearch { background-position: 0 -132px; } .SpTrash { background-position: -16px -132px; } .SpUser { background-position: -32px -132px; } .SpRefresh { background-position: -48px -132px; } .SpPencil { background-position: -64px -132px; } .SpPlus { background-position: -80px -132px; } /* 16px Sprites Black Transparent */ .SpDashboard, .SpCog { background-position: 0 -148px; } .SpSettings { background-position: -16px -148px; } .SpNotifications, .SpGlobe { background-position: -32px -148px; } .SpSignOut, .SpExit { background-position: -48px -148px; } .SpMarker { background-position: -64px -148px; } .SpDocuments { background-position: -80px -148px; } .SpInbox, .SpEnvelope { background-position: 0 -164px; } .SpInmail { background-position: -16px -164px; } .SpRoundBubble { background-position: -32px -164px; } .SpSquareBubble { background-position: -48px -164px; } .SpRoundBubbles { background-position: -64px -164px; } .SpSquareBubbles { background-position: -80px -164px; } .SpTag { background-position: 0 -180px; } .SpWrite { background-position: -16px -180px; } .SpLock { background-position: -32px -180px; } .SpRoundAlert { background-position: -48px -180px; } .SpTriangleAlert { background-position: -64px -180px; } .SpBookmarks, .SpStar { background-position: -80px -180px; } .SpSearch { background-position: 0 -196px; } .SpTrash { background-position: -16px -196px; } .SpUser { background-position: -32px -196px; } .SpRefresh { background-position: -48px -196px; } .SpPencil { background-position: -64px -196px; } .SpPlus { background-position: -80px -196px; } /* ============================= Embedded Discussion & Comment Customizations */ body.embed #Content { float: none; margin: 0; width: auto; } body.embed .InformMessages { display: none; } .EmbedCommentForm { padding: 0; border-top: 1px solid $white; } .EmbedCommentForm .TextBox { width: 100%; height: 50px; min-height: 50px; padding: 3px; border-radius: 0; font-size: 12px; } .Embed .Buttons { font-size: 11px; text-align: right; } .EmbedCommentForm .Author { display: inline-block; font-size: 11px; color: $grey-3; padding: 0 8px 0 0; } .Embed .CommentForm input.Button { font-size: 12px; } .Embed .Foot { background: none; border: none; text-align: right; } .Embed .MorePager a { background: none; border: none; padding: 0; } .Embed .MorePager a.Loading, .Embed .MorePager a.Loading:hover { text-decoration: none !important; } .Embed .Administration { display: none; } .Embed .MorePager { padding: 2px 8px 4px; } /* ============================================================ Regarding */ .RegardingEvent { padding: 10px; position: relative; padding-left: 38px; color: $white !important; text-shadow: 0 1px 1px $black; text-align: left !important; border-radius: 4px; background: $black !important; background: rgba(0, 0, 0, 0.7) !important; } .RegardingEvent span.InformSprite { top: 5px; left: 5px; } .RegardingEvent a.ReportedUser, .RegardingEvent a.ReportingUser { color: $blue-a; } .RegardingEvent .ReportedReason { padding: 5px; font-style: italic; } .RegardingEvent .RegardingTime { font-size: 9px; text-transform: uppercase; color: $grey-m; } .RegardingActions { position: relative; overflow: hidden; height: 100%; padding: 0 10px; margin-bottom: 10px; } .RegardingActions .ActionButton { padding: 0 5px 2px 5px; display: inline-block; margin-right: 4px; color: $white !important; text-shadow: 0 1px 1px $black; text-align: left !important; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background: $black !important; background: rgba(0, 0, 0, 0.7) !important; } .RegardingActions .ActionButton a { color: $blue-a; font-size: 10px; text-transform: uppercase; } .PhotoWrap { position: relative; display: inline-block; line-height: 1; } .ProfilePhoto { height: 40px; width: 40px; vertical-align: bottom; } .ProfilePhotoSmall { height: 24px; width: 24px; vertical-align: bottom; } .ProfilePhotoMedium { height: 40px; width: 40px; } .ProfilePhotoLarge { width: 200px; } .PhotoGrid { line-height: 32px; margin: 2px -2px; } .PhotoGrid img { margin: 2px; vertical-align: text-bottom; height: 32px; width: 32px; } .PhotoGridSmall { line-height: 24px; margin: 1px -1px; } .PhotoGridSmall img { margin: 1px; vertical-align: text-bottom; height: 24px; width: 24px; } .CategoryPhoto { max-height: 64px; } .PhotoGrid .UserPicture { display: inline-block; } .PhotoGrid .UserPicture * { vertical-align: bottom; } .PhotoGrid .Username { display: inline-block; line-height: 32px; } .PhotoGridSmall .Username { line-height: 24px; } /* Reaction Buttons */ .Reactions { position: relative; font-size: 11px; line-height: 18px; margin: 15px 0 0; } .ReactButton { display: inline-block; margin: 0 2px; line-height: 18px; vertical-align: top; } .Reactions > a.React { margin: 0 10px; padding: 0; } .Reactions > a.React > .ReactSprite { margin-right: 2px; } .Flyout.Flags { top: 25px; z-index: 997; } .Reactions .FlagMenu .MenuItems .ReactButton { margin: 0; padding: 0 15px; } .SpEditProfile { background-image: url("images/sprites-14-000000.png"); background-position: -245px -29px; } .Handle > .SpEditProfile, .NavButton > .SpEditProfile { display: inline-block; width: 14px; height: 14px; line-height: 14px; vertical-align: top; } /* === Reaction Sprites === */ .ReactSprite { display: inline-block; width: 16px; height: 16px; margin-right: .3em; line-height: 18px; vertical-align: top; background-image: url("images/sprites-14-000000.png"); background-position: 16px 16px; background-repeat: no-repeat; } input + .ReactSprite { vertical-align: middle; } .ReactEverything { background-position: -197px -53px; } .ReactAwesome { background-position: -269px -6px; } .ReactFeature { background-position: -280px -60px; } .ReactFlag { background-position: -54px -52px; } .ReactInsightful { background-position: -149px -6px; } .ReactOffTopic { background-position: -173px -6px; } .ReactAbuse { background-position: -6px -52px; } .ReactSpam { background-position: -125px -6px; } .ReactTroll { background-position: -101px -6px; } .ReactPromote { background-position: -50px -29px; } .ReactDisagree { background-position: -28px -5px; } .ReactAgree { background-position: -4px -5px; } .ReactDislike { background-position: -28px -28px; } .ReactLike { background-position: -4px -31px; } .ReactDown { background-position: -220px -29px; } .ReactUp { background-position: -195px -30px; } .ReactWTF { background-position: -76px -5px; } .ReactLOL { background-position: -52px -5px; } .ReactQuote { background-position: -316px -6px; } .ReactInfraction { background-position: -100px -53px; } .ReactAccept { background-position: -6px -102px; } .ReactReject { background-position: -342px -6px; } .ReactFacebook { background-position: -29px -124px; } .ReactTwitter { background-position: -53px -124px; } .ReactGooglePlus { background-position: -77px -124px; } .ReactMessage { background-position: -101px -102px; } .ReactWarn { background-position: -222px -6px; } /* Switch to the white icons when hovering over a menuitem sprite */ .MenuItems a:hover .ReactSprite, .MenuItems a:hover .Sprite { background-image: url('https://images.v-cdn.net/sprites-14-fff.png'); } /* Switch to bordered icons for user reaction overlays */ .UserReactionWrap .ReactSprite { background-image: url('https://images.v-cdn.net/sprites-14-000-bordered.png'); } .ActionBlock { margin: 15px 0 5px; font-style: italic; } /* Embedded Video Preview Hide/Reveal */ .Video.YouTube .VideoPlayer { display: none; } .Video.YouTube .VideoPreview { cursor: pointer; position: relative; max-width: 100%; display: inline-block; height: auto; } .Video.YouTube .VideoPreview:after { background: url('https://images.v-cdn.net/youtube-overlay-button.png') 0 -44px no-repeat transparent; position: absolute; display: block; content: ''; top: 50%; left: 50%; margin-left: -30px; margin-top: -22px; height: 44px; width: 60px; } .Video.YouTube .VideoPreview:hover:after { background-position: 0 0; } .Video.YouTube .VideoPreview img { max-width: 100%; height: auto !important; } /* For vimeo/other embeds */ .Section-Discussion .Message iframe, .Section-BestOf iframe { max-width: 100%; } .Section-BestOf iframe { height: auto; } /* Media */ .Media { margin: 5px 0 10px; } .Media, .Media .Media-Body { overflow: hidden; zoom: 1; } .Media .Img { float: left; margin-right: 10px; } .Media .Img img { display: block; } .Media .ImgExt { float: right; margin-left: 10px; } .Item h2 + .Media, .Item h3 + .Media { margin-top: 0; } /* Overrides */ .Hidden { display: none; } /* Screen readers only, as part of Section 508 compliance. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Token input */ ul.token-input-list { box-sizing: border-box; border: 1px solid $grey-b; color: $grey-1; font-size: 15px; margin: 0 !important; padding: 3px; overflow: hidden; height: auto !important; height: 1%; width: 100%; cursor: text; min-height: 1px; z-index: 999; background-color: $white; list-style-type: none; } ul.token-input-list-focus, ul.token-input-list-focus input { background: $white-2; } ul.token-input-list li input { border: 0; width: 100px; padding: 3px 3px; margin: 2px 0; } li.token-input-token { overflow: hidden; height: auto !important; height: 1%; margin-right: 3px; padding: 1px 5px; line-height: 20px; cursor: default; border: 1px solid $grey-9; border-radius: 2px; float: left; font-size: 13px; } li.token-input-token.not-allowed { background-color: $red-4; color: $red-2; border: 1px solid $red-3; } li.token-input-token.not-allowed span { color: $red-2; } li.token-input-token p { display: inline; padding: 0; margin: 0; line-height: 1.4; vertical-align: middle; } li.token-input-token span { margin-left: 5px; font-weight: bold; cursor: pointer; font-family: arial; font-size: 13px; vertical-align: middle; } li.token-input-selected-token { background-color: $grey-5; } li.token-input-selected-token.not-allowed { background-color: $red-1; color: $white; border: 1px solid $red-3; } li.token-input-selected-token.not-allowed span { color: $white; } li.token-input-input-token { float: left; } div.token-input-dropdown { position: absolute; background-color: $white; overflow: hidden; border: 1px solid $grey-b; border-top-width: 0; cursor: default; z-index: 1001; padding: 0 3px; } div.token-input-dropdown p { margin: 0; padding: 5px; } div.token-input-dropdown ul { margin: 0 -3px !important; padding: 0; } div.token-input-dropdown ul li { background-color: $white; padding: 3px 6px; } div.token-input-dropdown ul li.token-input-dropdown-item { background-color: $white; } div.token-input-dropdown ul li.token-input-dropdown-item2 { background-color: $white; } div.token-input-dropdown ul li em { font-weight: bold; font-style: none; } div.token-input-dropdown ul li.token-input-selected-dropdown-item { background-color: $grey-5; } /** * At mentions in core, moved from advanced editor. */ .atwho-view { font: normal 14px/1.7em 'lucida grande', 'Lucida Sans Unicode', tahoma, sans-serif; position: absolute; top: 0; left: 0; display: none; margin-top: 18px; background: $white; min-width: 120px; z-index: 100010; /* So high because a client actually had 99999 in a theme */ border-radius: 2px; overflow: hidden; box-shadow: 0 5px 10px $grey-5; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .atwho-view .cur { background: $vanilla-blue; color: $white; } .atwho-view .cur small { color: $white; } .atwho-view strong { color: $vanilla-blue; } .atwho-view .cur strong { color: $white; font-weight: bold; } .atwho-view ul { list-style: none; padding: 0; margin: auto; } .atwho-view ul li { display: block; border-bottom: 1px solid $grey-5; border-bottom: 1px solid rgba(0, 0, 0, 0.05); cursor: pointer; padding: 0 5px; line-height: 34px; } .atwho-view ul li:last-child { border: 0; } .atwho-view small { font-size: smaller; color: $grey-3; font-weight: 400; } .at-suggest-emoji .emoji-wrap { display: inline-block; width: 34px; overflow: hidden; line-height: 34px; text-align: center; vertical-align: top; } .at-suggest-emoji .emoji-wrap > * { display: inline-block; line-height: 34px; } .at-suggest-emoji .emoji-name { display: inline-block; line-height: 34px; vertical-align: top; } /** * Text formatting alignment */ .AlignLeft { margin: 0 10px 10px 0; text-align: left; } .AlignCenter, .bbcode_center { margin: 0 auto; display: block; text-align: center; } .AlignRight { margin: 0 0 10px 10px; text-align: right; } // BBCode editor doesn't insert breaks after aligned items // So they don't get or get margins .bbcode_left { text-align: left; } .bbcode_right { text-align: right; } /** * Socialcons */ .SocialIcon { display: inline-block; overflow: hidden; font-weight: bold; line-height: 24px; color: $white !important; text-decoration: none; vertical-align: middle; } .SocialIcon.HasText { min-width: 210px; line-height: 32px; } .SocialIcon .Icon { width: 24px; height: 24px; } .SocialIcon.HasText .Icon { width: 32px; height: 32px; } .SocialIcon .Text { padding: 0 15px 0 10px; border-left: 1px solid $grey-5; border-left: 1px solid rgba(0, 0, 0, 0.1); } .SocialIcon { transition: background-color 100ms; } .SocialIcon .Icon, .SocialIcon .Text { display: block; float: left; vertical-align: top; } .SocialIcon .Icon { background-image: url('images/socialcons-small.png'); background-repeat: no-repeat; background-size: 24px 192px; } .SocialIcon.HasText .Icon { background-size: 32px 256px; background-image: url('images/socialcons.png'); } @media (min-device-pixel-ratio: 2) { .SocialIcon .Icon { background-image: url('images/socialcons-small@2x.png'); } .SocialIcon.HasText .Icon { background-image: url('images/socialcons@2x.png'); } } .SocialIcon-Facebook .Icon { background-position: 0 -24px; } .SocialIcon-Facebook.HasText .Icon { background-position: 0 -32px; } .SocialIcon-Facebook, .SocialIcon-Facebook.HasText .Icon { background-color: $facebook; } .SocialIcon-Facebook:hover { background-color: $facebook-hover; } .SocialIcon-Twitter .Icon { background-position: 0 -144px; } .SocialIcon-Twitter.HasText .Icon { background-position: 0 -192px; } .SocialIcon-Twitter, .SocialIcon-Twitter.HasText .Icon { background-color: $twitter; } .SocialIcon-Twitter:hover { background-color: $twitter-hover; } .SocialIcon:not(.SocialIcon-OpenID).SocialIcon-Google, .SocialIcon-Google { background-color: $google; &:hover { background-color: $google-hover; } &:not(.SocialIcon-OpenID) .Icon, .Icon { background-position: center; background-color: $white; &:before { content: ''; } background-size: cover; background-image: url(https://images.v-cdn.net/sso/google-border.svg); } .Text { border: none; } } .SocialIcon-OpenID .Icon { background-position: 0 -120px; } .SocialIcon-OpenID.HasText .Icon { background-position: 0 -160px; } .SocialIcon-OpenID, .SocialIcon-OpenID.HasText .Icon { background-color: $openid; } .SocialIcon-OpenID:hover { background-color: $openid-hover; } .SocialIcon-LinkedIn .Icon { background-position: 0 -96px; } .SocialIcon-LinkedIn.HasText .Icon { background-position: 0 -128px; } .SocialIcon-LinkedIn, .SocialIcon-LinkedIn.HasText .Icon { background-color: $linkedin; } .SocialIcon-LinkedIn:hover { background-color: $linkedin-hover; } .SocialIcon-Disqus .Icon { background-position: 0 0; } .SocialIcon-Disqus, .SocialIcon-Disqus.HasText .Icon { background-color: $disqus; } .SocialIcon-Disqus:hover { background-color: $disqus-hover; } .SocialIcon-GitHub .Icon { background-position: 0 -48px; } .SocialIcon-GitHub.HasText .Icon { background-position: 0 -64px; } .SocialIcon-GitHub, .SocialIcon-GitHub.HasText .Icon { background-color: $github; } .SocialIcon-GitHub:hover { background-color: $github-hover; } /* Woe unto whoever caused this */ .MeBox-SignIn.Inline .SocialIcon { display: inline-block; } /* # Attachments Components for Attachments. Styleguide Attachments */ /* ## Utilities Styleguide Attachments.Utilities */ .pull-right { float: right !important; } .pull-left { float: left !important; } /* ## Definition lists Styleguide Definitions */ .item-attachment dl { margin-top: 0; margin-bottom: 20px; } .item-attachment dt { font-weight: 700; } .item-attachment dd { margin-left: 0; } .item-attachment dt, .item-attachment dd { line-height: 20px; } /* Horizontal layout */ .item-attachment .dl-horizontal dt { float: left; width: 160px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-attachment .dl-horizontal dd { margin-left: 180px; } /* Column layout */ .item-attachment .dl-columns { overflow: hidden; margin-right: -10px; margin-left: -10px; } .item-attachment .dl-columns:before, .item-attachment .dl-columns:after { display: table; content: " "; } .item-attachment .dl-columns:after { clear: both; } .item-attachment .dl-columns dt { width: 20%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-attachment .dl-columns dd { width: 30%; } .item-attachment .dl-columns dt, .item-attachment .dl-columns dd { float: left; padding: 0 10px; box-sizing: border-box; } /* ## Media objects Styleguide Media */ .item-attachment .media { overflow: hidden; } .item-attachment .media:before, .item-attachment .media:after { display: table; content: " "; } .item-attachment .media:after { clear: both; } .item-attachment .media > .pull-left { margin-right: 10px; } .item-attachment .media > .pull-right { margin-right: 10px; } .item-attachment .media-body { overflow: hidden; zoom: 1; } .item-attachment .media-object { display: block; } .item-attachment .media-heading { margin: 0 0 5px !important; /* Hack */ } .item-attachment .media-list { padding-left: 0; list-style: none; } /* ## Alerts .alert-info - Informative alert .alert-warning - Warning alert .alert-danger - Danger alert Styleguide Alerts */ .item-attachment .alert { padding: 12px; margin-bottom: 20px; color: $grey-k; background-color: $white-5; border-color: $white-5; border-style: solid; border-width: 1px; border-radius: 2px; } .item-attachment .alert a { color: $grey-n; } .item-attachment .alert hr { border-top-color: $blue-d; } .item-attachment .alert h4 { margin-top: 0; color: inherit; } .item-attachment .alert p, .item-attachment .alert ul { margin-bottom: 0; } .item-attachment .alert p + p { margin-top: 5px; } /* Informative alert */ .item-attachment .alert-info { color: $grey-k; background-color: $yellow-4; border-color: $yellow-4; } .item-attachment .alert-info a { color: $grey-n; } .item-attachment .alert-info hr { border-top-color: $yellow-5; } /* Warning alert */ .item-attachment .alert-warning { color: $grey-k; background-color: $yellow-6; border-color: $yellow-6; } .item-attachment .alert-warning a { color: $grey-n; } .item-attachment .alert-warning hr { border-top-color: $yellow-7; } /* Danger alert */ .item-attachment .alert-danger { color: $white; background-color: $red-5; border-color: $red-5; } .item-attachment .alert-danger a { color: $grey-o; } .item-attachment .alert-danger hr { border-top-color: $red-6; } /* ## Base item Styleguide Item */ .item-attachment .item-heading { margin-bottom: 0 !important; /* Hack */ font-weight: 600; } .item-attachment .item-body { overflow: hidden; } .item-attachment .item-body:before, .item-attachment .item-body:after { display: table; content: " "; } .item-attachment .item-body:after { clear: both; } .item-attachment .item-body > *:first-child { margin-top: 0; } .item-attachment .item-body > *:last-child { margin-bottom: 0; } .item-attachment .item-header + .item-body { margin-top: 5px; } .item-attachment .item-meta { font-size: 12px; line-height: 20px; color: $grey-9; } .item-attachment .item-meta > span { padding-right: 5px; padding-left: 5px; } .item-attachment .item-meta > span:first-child { padding-left: 0; } .item-attachment .item-meta > span:last-child { padding-right: 0; } /* ## Item attachments Styleguide Attachments */ .item-attachment { margin-top: 20px; } .item-attachment .alert { margin-bottom: 0; } .item-attachment .media-object .icon { display: block; min-width: 32px; font-size: 32px; text-align: center; line-height: 1; } /** * Twitter card embed. */ .twitter-card-preload { opacity: 0; } .twitter-card-loaded { transition: all 0.2s ease; opacity: 1; } /* Effects */ @keyframes highlight { 0% {background-color: $yellow-8;} 10% {background-color: $yellow-8;} } .highlight-effect{ animation: highlight .8s; } /* Groups section tweaks */ .Groups.Section-DiscussionList .Group-Header, .Section-Group.Section-Discussion .Group-Header { margin-bottom: 0; } .Groups.Section-DiscussionList #Panel, .Section-Group.Section-Discussion #Panel { float: none; position: absolute; } .Groups.Section-DiscussionList .HomepageTitle { display: none; } // Special case for editor compatibility. The Bootstrap 3 derived themes have .InputBox that we can use // for the border style. If we set a default in style-compat.scss, it won't inherit the styles from // Bootstrap 3, so we need to set it before so it gets overwritten. .InputBox { background: #fff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.4); } /* * These styles apply ONLY to the header and footer assets. */ * { padding: 0; margin: 0; box-sizing: border-box; } .footer { background: #f5f5f6; color: #555a62; font-size: 14px; line-height: 1.5; padding: 18px 0; } .footer-wrap { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin: 0 auto; } .footer a { color: #d63d00; } .footer a:hover { color: #d63d00; } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: -3px; } .footer-col { padding: 0 3px; } .footer-col-copyRight { justify-content: flex-start; } .footer-col-logo { justify-content: flex-end; } .footer-col-copyRight, .footer-col-logo { flex: 1; display: flex; } .logo { width: 120px; height: 28px; opacity: 0.6; } @media screen and (max-width: 768px) { .footer-row { display: block; } .footer-col { width: 100%; text-align: center; margin: 6px 0; } .footer-col:first-child { margin-top: 0; } .footer-col:last-child { margin-bottom: 0; } .footer-col-copyRight, .footer-col-logo { justify-content: center; } .logo { margin: 0 auto; } } /*# sourceMappingURL=styles.css.map */ window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-YV89Y0SMDB');

eLBX Online 2021 | June 22 - 24

Join us for a FREE, 3-day virtual conference featuring industry experts and eLearning thought leaders. Learn about critical topics such as eLearning accessibility, learning experience design, course authoring, virtual reality, and gamification. Register today!
CHECK IT OUT

eLearning ROCKSTARS Community

Are you ready to be an eLearning ROCKSTAR? Get up on the main stage of our eLearning community and meet with your fellow eLearning ROCKSTARS, share your creations, learn tips and tricks, and so much more!

Student Last name

sirwise23 24 views 4 comments 0 points Most recent by andrew-robertson May 26, 2021Lectora Desktop
Lectora Desktop21 Beta is Live!

chris_willis 67 views 9 comments 0 points Most recent by Manishjaiswal_mca May 26, 2021Lectora Discussions
Who to contact to get an upgrade?

Answered changhsuliu 25 views 2 comments 0 points Most recent by Manishjaiswal_mca May 26, 2021Lectora Discussions
2

Up

mousewheel zoom in / out

Open For Voting AMue 2 views 0 comments 2 points Started by AMue May 26, 2021 Lectora Feature Requests
Background image is not showing

Answered Bdmontag 12 views 5 comments 0 points Most recent by chris_willis May 25, 2021Lectora Desktop
Save to PDF or Export as PDF

pottski 2 views 5 comments 0 points Most recent by TCW15 May 25, 2021Lectora Feature Requests
SCORM Submission

Accepted Answer andrew-robertson 33 views 4 comments 0 points Most recent by andrew-robertson May 25, 2021Lectora Desktop
Refresh/Reload button?

Answered mcrawford1829 21 views 2 comments 0 points Most recent by mcrawford1829 May 24, 2021Lectora Desktop
Character Counts in Entry Fields

cbagby5306 11 views 6 comments 0 points Most recent by carlfink May 24, 2021Lectora Desktop
Visited State

mmalhotra-9265 11 views 3 comments 0 points Most recent by cainam May 24, 2021Lectora Desktop
When learner logs in - not seeing the content

Answered myra_rhodes 32 views 3 comments 0 points Most recent by myra_rhodes May 23, 2021Rockstar Learning Platform Discussions
Lectora Desktop

mmalhotra-9265 32 views 6 comments 0 points Most recent by mmalhotra-9265 May 23, 2021Lectora Desktop
6

Up

Duplicate selected object(s)

Open For Voting cainam 12 views 2 comments 6 points Most recent by jkellner5456 May 21, 2021Lectora Feature Requests
Workaround for the non-working Exit button (as defined in Lectora) for Edge or Chrome browsers?

Answered timsantoro 34 views 7 comments 0 points Most recent by carlfink May 21, 2021Lectora Desktop
Animation

mmalhotra-9265 15 views 2 comments 0 points Most recent by mmalhotra-9265 May 21, 2021✫ Announcements
BreadCrumbs

mmalhotra-9265 12 views 3 comments 0 points Most recent by cainam May 20, 2021Lectora Desktop
Alt Tags not Showing

rboyd4570-ok 139 views 36 comments 0 points Most recent by vicki May 20, 2021Web Accessibility
Let's Talk Surveys

Answered struitt 23 views 4 comments 0 points Most recent by andrew-robertson May 20, 2021Lectora Discussions
Table Header Not Identified Programmatically

vicki 15 views 4 comments 0 points Most recent by vicki May 19, 2021Web Accessibility
Music Background Missing from Library

Answered tlcwithval 12 views 1 comment 0 points Most recent by jeckhart May 19, 2021AssetLibrary Discussions
Action - Concern

Answered mmalhotra-9265 12 views 1 comment 0 points Most recent by jeckhart May 19, 2021Lectora Desktop
Color Change - Visited Tab

mmalhotra-9265 13 views 5 comments 0 points Most recent by mmalhotra-9265 May 19, 2021Lectora Desktop
Item was not found

Answered JZoller 22 views 6 comments 0 points Most recent by johnb May 18, 2021CenarioVR Discussions
Lectora Desktop 21 Launched Today!

AndrewTownsend 73 views 0 comments 2 points Started by AndrewTownsend May 18, 2021 Lectora Desktop
Bootstrap Styles

Accepted Answer andrew-robertson 22 views 2 comments 0 points Most recent by andrew-robertson May 18, 2021Lectora Desktop
CENARIOVR Licensing

Accepted Answer andrew-robertson 23 views 5 comments 0 points Most recent by andrew-robertson May 18, 2021CenarioVR Discussions
Can Articulate 360/Storyline files be converting to Lectora

Answered rrat 16 views 1 comment 0 points Most recent by wheels May 18, 2021Lectora Desktop
How to prevent text size change when importing from Powerpoint

Answered Bdmontag 12 views 1 comment 0 points Most recent by ethomas May 18, 2021Lectora Desktop
Laser pointers enabled simultaneously?

Answered Sidnman1 13 views 1 comment 0 points Most recent by johnb May 17, 2021CenarioVR Discussions
Geo location in Lectora

Accepted Answer Grover 22 views 4 comments 0 points Most recent by Grover May 16, 2021Lectora Discussions
Text Variable

mmalhotra-9265 24 views 6 comments 0 points Most recent by mmalhotra-9265 May 15, 2021Lectora Desktop
Weird Information Showing in Screen

Answered aereaut-1399 31 views 4 comments 0 points Most recent by raung-naing May 13, 2021Lectora Desktop
ELB - Images

mmalhotra-9265 13 views 1 comment 0 points Most recent by jholland May 13, 2021Lectora Desktop
Embedding YouTube videos with CC

jorchin-3930 32 views 7 comments 0 points Most recent by cdckaren May 13, 2021Lectora Online
Disable 'Changes you made may not be saved' notification from browser

Accepted Answer GuillaumeC 11 views 3 comments 0 points Most recent by jholland May 13, 2021Lectora Desktop
Randomized Quizzes (A Different Approach)

jcarter8154 15 views 2 comments 0 points Most recent by TCW15 May 13, 2021♪ The Green Room
How do I get recent titles to appear in the Recent files list in the start-up pop-up?

Answered crenzullo-7852 13 views 3 comments 0 points Most recent by cainam May 12, 2021Lectora Desktop
Accessibility Simultaneous Text Blocks on MouseClick

Answered web-foley 43 views 7 comments 0 points Most recent by wheels May 12, 2021Web Accessibility
Background audio

GuillaumeC 21 views 2 comments 0 points Most recent by nmaharaj May 11, 2021Lectora Online
CenarioVR iOS App - login issues

zsiejka7588 1 view 6 comments 0 points Most recent by johnb May 11, 2021CenarioVR Discussions
WCAG issues

Answered ssoni 51 views 3 comments 0 points Most recent by wheels May 11, 2021Web Accessibility
LSDX Session Resources

Question chris_willis 22 views 0 comments 2 points Started by chris_willis May 10, 2021 Lectora Discussions
New! Lectora Desktop 21: The Big List of new features

Question chris_willis 63 views 0 comments 1 point Started by chris_willis May 9, 2021 Lectora Discussions
JavaScript / JQuery

Accepted Answer andrew-robertson 21 views 2 comments 0 points Most recent by andrew-robertson May 7, 2021Lectora Desktop
Grouping - Action

mmalhotra-9265 21 views 5 comments 0 points Most recent by mmalhotra-9265 May 7, 2021Lectora Desktop
Importing 360 video from Insta360

Answered BBO 11 views 1 comment 0 points Most recent by johnb May 7, 2021CenarioVR Discussions
1

Up

Exit function for hotspots?

Open For Voting Sidnman1 12 views 2 comments 1 point Most recent by Sidnman1 May 6, 2021CenarioVR Feature Requests
Flip the card

mmalhotra-9265 46 views 11 comments 0 points Most recent by andrew-robertson May 6, 2021Lectora Desktop
Assessment - Certificate

mmalhotra-9265 14 views 0 comments 0 points Started by mmalhotra-9265 May 6, 2021 Lectora Desktop
Menu Tab

mmalhotra-9265 31 views 7 comments 0 points Most recent by mmalhotra-9265 May 6, 2021Lectora Desktop

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!

Sign In Register

Categories

// Many themes depend on this file. The only notable exception is the Bootstrap themes, which have their own base styles // If you need to fix something for all themes, put it in "style-compat.scss" as it will be loaded for all themes. /* ================================================================ Reset CSS */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; &:not(.focus-visible) { outline: 0; } } /* =============================================================== Custom Side Bar */ BoxFilter BoxDiscussionFilter { background: $white; } Box BoxCategories { background: $white; } /* remember to define focus styles! */ :focus { outline-style: auto; } body { line-height: 1; color: $black; background: $white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } /*caption, th, td { text-align: left; font-weight: normal; }*/ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } textarea, input[type=text] { box-sizing: border-box; } .textarea-autosize { transition: height 0.1s ease; resize: none !important; } /* Elements that are disabled, make sure they reflect that with UX feedback. */ [disabled] { opacity: 0.50; pointer-events: none; } /* ===================================================================== Grid */ .Row { margin: auto; width: 960px; } .ContentColumn { margin: 0 0 0 230px } /* ==================== Pages that hide the panel and have full-width content */ body.NoPanel #Panel, body.Entry #Panel, body.Conversations.add #Panel, body.Vanilla.Post #Panel { display: none; } body.NoPanel #Content, body.Conversations.add #Content, body.Vanilla.Post #Content { width: auto; margin: 0; } body.NoPanel #Content { margin: auto; } body.NarrowForm #Content { max-width: 700px; } body.Entry #Content { float: none; margin: 0 auto; max-width: 600px; } /* ============================================== General Styles & Typography */ body { color: $black; font-family: 'lucida grande', 'Lucida Sans Unicode', tahoma, sans-serif; font-size: 75%; font-size: small; line-height: 1.7em; background: $white; margin: 0; padding: 0; } #Body { zoom: 1; /* hasLayout for IE6/7 */ } #Body:after { /* clearfix */ visibility: hidden; display: block; content: ""; clear: both; height: 0; } .Invisible { opacity: 0; } .ClearFix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .ClearFix { display: inline-table; } /* Hides from IE-mac \*/ * html .ClearFix { height: 1%; } .ClearFix { display: block; } /* End hide from IE-mac */ .nowrap { white-space: nowrap; } .Center { text-align: center; } .Right { text-align: right; } h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, arial, sans-serif; font-weight: bold; margin: 5px 0; } p { margin: 5px 0; } .P { margin: 5px 0; } h1 { font-size: 140%; } h2 { font-size: 120%; } h3 { font-size: 110%; } h4 { font-size: 110%; } h5 { font-size: 100%; } a { text-decoration: none; color: $vanilla-blue; } a:hover, a.TextColor:hover, a:hover .TextColor { color: $vanilla-pink; } a.TextColor, a .TextColor { color: $black; } img.Thumbnail { max-height: 300px; max-width: 100px; float: left; margin: 0 16px 0 0; } input.DateBox, input.InputBox, input.SmallInput, textarea { font-family: 'lucida grande', 'Lucida Sans Unicode', tahoma, sans-serif; color: $grey-1; font-size: 15px; padding: 3px; margin: 0; width: 250px; background: $white; border: 1px solid $grey-9; border: 1px solid rgba(0, 0, 0, 0.4); } .PasswordStrength { width: 250px; } .ui-datepicker { width: 17em; padding: 2px 20px 2px 10px; display: none; background: $grey-o; background: rgba(255, 255, 255, 0.9); border: 1px solid $grey-9; border: 1px solid rgba(0, 0, 0, 0.4); } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month-year { width: 100%; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } textarea.TextBox { width: 500px; height: 100px; min-height: 100px; } .TextBoxWrapper { width: auto; } .TextBoxWrapper textarea, .TextBoxWrapper input:not([type=radio]):not([type=checkbox]) { width: 100%; display: block; } .TextBoxWrapper .PasswordStrength { width: 100%; } #Popup textarea.TextBox { width: 100%; } input.SmallInput, input.InputBox { padding: 6px 3px; } input.SmallInput:focus, input.InputBox:focus, textarea:focus { background: $white-2; } input.BigInput { width: 100%; } textarea { line-height: 128%; } select { font-family: arial; font-size: 14px; color: $grey-k; margin: 0; padding: 3px; } .Button { display: inline-block; cursor: pointer; margin: 0; font-size: 12px; line-height: 1; font-weight: bold; padding: 4px 6px; background: $grey-a; border: 1px solid $grey-9; border-radius: 2px; white-space: nowrap; border-color: $grey-9; color: $grey-1; } .Button:hover { color: $grey-p; border-color: $grey-j; } .Button.Disabled { opacity: .5; } div.FileUpload .CurrentImage { display: block; margin: 5px 0; max-width: 100%; } .NavLabel { font-weight: bold; margin-right: 4px; } .NavBar > .Button { border-radius: 0; border-right-width: 0; } .NavBar > .Button:first-child { border-radius: 2px 0 0 2px; } .NavBar > .Button:last-child { border-radius: 0 2px 2px 0; border-right-width: 1px; } body:not(.dataDriven) { .Button.Active, .ButtonGroup.Open .Button.Handle, .Button:focus, .Button:active { border-color: $grey-b; color: $grey-1; background: $grey-g; } } .Button.FileInput > input { position: absolute; top: 0; right: 0; margin: 0; border: solid transparent; border-width: 0 0 100px 200px; opacity: 0; filter: alpha(opacity=0); transform: translate(-300px, 0) scale(4); direction: ltr; cursor: pointer; } .Button.FileInput { position: relative; overflow: hidden; } .BigButton { display: block; text-align: center; margin: 0 0 10px; font-size: 15px; font-weight: bold; padding: 8px 10px; } .Panel { .BoxButtons { .ButtonGroup + .BigButton { margin-top: 10px; } :last-child { margin-bottom: 0; } } } .Buttons { margin-top: 10px; } .Buttons-Confirm { text-align: center; } .Buttons-Confirm .Button { min-width: 65px; } .NavButton { color: $grey-1; display: inline-block; cursor: pointer; font-size: 13px; line-height: 16px; font-weight: bold; padding: 5px 8px; border: 1px solid $grey-9; border-radius: 2px; white-space: nowrap; background-color: $grey-c; } body:not(.dataDriven) { .ButtonGroup.Open .NavButton.Handle { color: $grey-1; background: $grey-5; } } /* Split Button Dropdown */ .ButtonGroup.Multi > .NavButton:first-child, .ButtonGroup.Multi > .Button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ButtonGroup.Multi > .NavButton.Handle, .ButtonGroup.Multi > .Button.Handle { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; } /*.Multi .Button:last { border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 12px; line-height: 1; border-left: 0; } .Multi .NavButton.Handle { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; margin: 0; }*/ .NavButton.Handle .Sprite, .Button.Handle .Sprite { display: inline-block; border-style: solid; border-width: 4px; border-color: $black transparent transparent transparent; position: relative; top: 2px; margin: 0; height: initial; width: initial; vertical-align: middle; } .ButtonGroup.Big .NavButton.Handle .Sprite, .ButtonGroup.Big .Button.Handle .Sprite { top: 0; } .ButtonGroup { position: relative; display: inline-block; } .ButtonGroup .Dropdown { display: none; font-size: 12px; position: absolute; top: 100%; left: 0; margin-top: 1px; z-index: 100; } .ButtonGroup.DropRight .Dropdown { right: 0; left: auto; } #Panel .ButtonGroup .Dropdown { right: 0; } .ProfileOptions .ButtonGroup .Dropdown { left: auto; right: 0; } .ButtonGroup.Open .Dropdown { display: block; } .ButtonGroup.Big .NavButton, .ButtonGroup.Big .Button { font-size: 15px; padding: 8px; text-align: center; } .ButtonGroup.Big { display: block; white-space: nowrap; } #Panel .ButtonGroup.Big > .NavButton:first-child, #Panel .ButtonGroup.Big > .Button:first-child { width: 78%; } .ActivateSlider { display: inline-block; background: $grey-d; box-shadow: 0 10px 30px $grey-1 inset; box-shadow: 0 10px 30px rgba(0, 0, 0, .5) inset; border: solid 1px $grey-e; width: 125px; border-radius: 4px; padding: 1px; position: relative; } .ActivateSlider-Active { text-align: right; } .Gloss { font-size: 80%; font-weight: normal; color: $grey-j; } .Loading { height: 100px; padding: 0 20px; background: url('images/progress.gif') center center no-repeat; } .Progress { padding: 10px 40px 10px 0; background: url('images/progress.gif') center center no-repeat; } .TinyProgress { padding: 10px 40px 10px 0; background: url('images/progress_sm.gif') center center no-repeat; } .InProgress { opacity: .5; cursor: progress; pointer-events: none; } .Conversations .Deleted { text-decoration: line-through; } .Deleted { background: $grey-8; border: 1px solid $grey-2; margin: 10px 0 0; padding: 6px 10px; border-radius: 3px; } /* Note: Warning, Alert & Info are simple boxes that can be used to wrap message strings & imply importance. */ span.Warning, div.Warning { background: $white-6; border: 2px solid $red-b; color: $red-c; padding: 6px 8px; margin: 10px 0; border-radius: 2px; } .Count { background-color: $grey-7; background-color: rgba(0, 0, 0, 0.6); border-radius: 3px; color: $white; font-size: 80%; font-weight: normal; padding: 1px .8ex; } .Alert { font-size: 80%; background: $red-c; color: $white; padding: 1px 3px; border-radius: .5ex; } .Alert a { color: $white; } .Alert a:hover { text-decoration: underline; } .Info { font-size: 13px; background: $grey-f; border: 2px solid $grey-5; border: 2px solid rgba(0, 0, 0, 0.1); color: $grey-6; border-radius: 2px; padding: 6px 8px; margin: 10px 0; } .Info strong { font-weight: bold; } .BreadcrumbWrap { clear: both; line-height: 2.4; font-size: 12px; } #PagerLess { border-radius-topright: 2px; border-radius-topleft: 2px; margin-bottom: 1px; text-align: left; } .MorePager { text-align: right; } .MorePager a.Loading { border: 0 !important; padding: 0 20px !important; background: url('images/progress.gif') center center no-repeat !important; } .Pager { font-weight: bold; float: right; } .Pager a, .Pager span { display: inline-block; margin: 0 3px; } .Pager span { color: $grey-3; } .Pager .Highlight { color: $black; } .MoreWrap { float: right; } .PagerNub { overflow: hidden; display: inline-block; width: 1px; margin-right: -1px; } /* Small UserPhoto() images */ a.Small:hover { text-decoration: none; } a.Small img { text-indent: -100px; background: $grey-2; display: inline-block; height: 24px; width: 24px; overflow: hidden; } /* Note: The MessageModule (in /applications/dashboard/modules) wraps all messages that it renders in a div with this DismissMessage class. */ /* Messages */ .DismissMessage a.Dismiss { font-family: arial; position: absolute; font-size: 16px; font-weight: bold; line-height: 1; color: $grey-3; top: -1px; right: -1px; padding: 1px 3px; text-decoration: none; } .DismissMessage a.Dismiss:hover { border: none; background: $grey-1; color: $white; } .DismissMessage strong, .DismissMessage b { font-weight: bold; } .DismissMessage { font-size: 13px; text-align: left; position: relative; color: $black; border: none; border-radius: 1px; margin: 10px 0; padding: 10px; } .DismissMessage.Info { background: $white-3; border: 1px solid $grey-2; } .DismissMessage.Warning { background: $white-4; border: 1px solid $red-d; } .DismissMessage.Box { background: $yellow-c; border: 1px solid $yellow-d; box-shadow: none; margin: 0 0 10px; /* Make sure that .Box definitions don't override the base DismissMessage margin! */ } .CasualMessage { background: $blue-a; border: 1px solid $blue-9; color: $vanilla-blue; } .InfoMessage { background: $grey-q; border: 1px solid $grey-2; } .AlertMessage { background: $yellow-c; border: 1px solid $yellow-e; } .WarningMessage { background: $white-4; border: 1px solid $red-d; } /* =================================================================== Header */ #Head { background: $blue-8; color: $white; } /* Targetting the padding on head in this way b/c it was causing problems in older themes */ body > #Frame > .Head { padding: 16px 3px 3px; } #Head a { color: $white; font-weight: bold; } .SiteTitle { font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; font-size: 24px; margin-right: 6px; } .SiteMenu { display: inline; white-space: nowrap; } .SiteMenu li { display: inline; } .SiteMenu a { font-size: 11px; padding: 6px; } .SiteMenu a:hover { text-decoration: underline; } .SiteSearch { position: relative; } .SiteSearch .InputBox { padding: 5px 125px 5px 5px; font-size: 11px; } .SiteSearch .Button { background: url('images/sprites.png') 0 -196px no-repeat transparent; height: 16px; width: 16px; overflow: hidden; line-height: 999px; color: transparent; font-size: 0; border: none; position: absolute; top: 4px; right: 4px; padding: 0; } #Head .SiteSearch { float: right; } #Head .SiteSearch .InputBox { border: none; width: 175px; } /* Option (dropdown) Menus, Bookmark stars, admin checkboxes */ .ControlOptions, .Options { float: right; } .CategoryLink { padding: 2px 4px; font-size: 11px; background: $blue-a; border-radius: 1px; } .PageTitle .Options { height: 10px; } .OptionsMenu { font-size: 10px; font-weight: normal; line-height: 100%; } .OptionsTitle { user-select: none; background: url("images/ui_sprites.png") no-repeat 0 -101px; padding: 0; width: 21px; height: 18px; display: inline-block; vertical-align: top; line-height: 999px; /* Set it higher than your image height */ overflow: hidden; /* Hide the text */ font-size: 0; /* FF2 doesn’t like the above */ cursor: pointer; } .Item .OptionsTitle { visibility: hidden; } .Item:hover .OptionsTitle, .Item.Open .OptionsTitle { visibility: visible; } .Flyout:before, .Flyout:after { border-bottom: 7px solid $grey-7; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ""; left: 9px; position: absolute; top: -7px; } .Flyout:after { border-bottom: 7px solid $white; top: -6px; } .OptionsMenu .Flyout:before, .OptionsMenu .Flyout:after { left: inherit; right: 14px; } .MenuItems { line-height: 100%; font-size: 11px; border: 1px solid $grey-9; border-radius: 2px; background: $white; padding: 5px 0; box-shadow: 0 5px 10px $grey-5; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .MenuItems a, .MenuItems a:link, .MenuItems a:visited, .MenuItems a:active { display: block; text-decoration: none; white-space: nowrap; color: $grey-1 !important; padding: 3px 15px; line-height: 18px; } .MenuItems a:hover { color: $white !important; text-decoration: none; background-color: $blue-e !important; } .MenuItems a:hover .Gloss { color: $white !important; } .MenuItems li > strong { font-size: 12px; padding: 3px 10px; line-height: 18px; } .MenuItems hr { border: 0; border-bottom: 1px solid $grey-2; } .MenuItems.Up:before, .MenuItems.Up:after { border-top: 7px solid $grey-7; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ""; left: 71px; position: absolute; bottom: -7px; } .MenuItems.Up:after { border-top: 7px solid $white; bottom: -6px; } .ToggleFlyout { position: relative; } .ToggleFlyout.Open { z-index: 110; /* above Item:hover */ } .ToggleFlyout .Flyout { position: absolute; top: 100%; /* right: -10px; This causes text overflows when flyout items are long */ display: none; } .OptionsMenu .Flyout { top: 18px; right: -9px; } .Flyout .Author .PhotoWrap { margin: 0; } .FlyoutMenu { width: 300px; background: $white; color: $black; border-radius: 2px; box-shadow: 0 5px 10px $grey-5; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); border: solid 1px $grey-9; } .FlyoutMenu a { color: $blue-f; } .FlyoutButton { cursor: pointer; } .FlyoutLeft .Flyout { right: inherit; } .DropHandle { display: inline-block; height: 0; width: 0; border-style: solid; border-width: 4px; border-color: $black transparent transparent transparent; position: relative; bottom: -2px; } .SelectFlyout { display: inline-block; cursor: pointer; } .SelectFlyout .Flyout:before, .SelectFlyout .Flyout:after { display: none; } .MeBox .Flyout { right: inherit; left: -4px; top: 150%; } .MeBox.FlyoutRight .Flyout { left: inherit; right: -4px; } .MeBox.FlyoutRight .Flyout:before, .MeBox.FlyoutRight .Flyout:after { left: auto; right: 9px; } a.Bookmark, a.Bookmarked, a.Bookmarking { display: inline-block; background: url('images/ui_sprites.png') 0 -2px no-repeat; height: 18px; width: 18px; /* margin: 0 4px;*/ vertical-align: top; overflow: hidden; text-indent: -1000px; font-size: 1px; } a.Bookmark:hover { background-position: 0 -22px; } a.Bookmarked { background-position: 0 -42px; } a.Bookmarked:hover { background-position: 0 -82px; } a.Bookmarking, a.Bookmarking:hover { background-position: 0 -62px; } .AdminCheck { vertical-align: top; line-height: 1; } td.CheckBoxColumn { text-align: center; } .HomepageTitle .AdminCheck { padding-left: 8px; } .ControlOptions .AdminCheck { display: block; padding: 6px 8px 0; } .Opts .ControlOptions .AdminCheck { padding: 0; } /* ======================================================== Full Page Errors */ .SplashMessage #Body h1 { font-size: 64px; line-height: 1.4; } .SplashMessage #Message { font-size: 18px; margin-bottom: 3em; } .SplashMessage .SplashInfo { max-width: 640px; margin: auto; } /* ======================================================== Panels / Sidebars */ #Panel { width: 200px; float: left; /* No overflow hidden on main elements. Causes too many bugs! overflow: hidden; */ } .Box { margin: 10px 0; } .Box dl { overflow: hidden; } .Box dl dt { font-size: 12px; float: left; width: 80px; color: $grey-4; overflow: hidden; white-space: nowrap; } .Box dl dd { font-size: 12px; margin-left: 80px; } /* Hiding until we figure out what to do with GuestWelcomeModule */ .MeBox-SignIn { display: none; } .Profile .MeBox { display: none; } .UserBox, .MeBox { margin: 10px 0; } .UserBox .PhotoWrap, .MeBox .PhotoWrap { float: left; margin-right: 5px; } .UserBox .WhoIs, .MeBox .WhoIs { min-height: 40px; line-height: 1.3; } .UserBox .Username, .MeBox .Username { font-weight: bold; vertical-align: top; font-size: 14px; } .UserBox .Email { white-space: nowrap; overflow: hidden; } .MeMenu { line-height: 24px; } .MeButton { padding: 3px 5px; border: solid 1px transparent; position: relative; line-height: 1; display: inline-block; } .MeButton:hover { background: $grey-5; background: rgba(0, 0, 0, 0.07); } .MeButton:hover { background: $grey-5; background: rgba(0, 0, 0, 0.07); } .MeButton .Alert { position: absolute; top: -2px; right: -1px; font-size: 9px; line-height: 1; padding: 2px; } .MeMenu em { display: none; } .MeBox.Inline, .MeBox.Inline .WhoIs, .MeBox.Inline .MeMenu { display: inline-block; line-height: 24px; margin: 0; vertical-align: top; min-height: 24px; } .MeBox.Inline > .PhotoWrap { float: none; } .MeBox.Inline > .PhotoWrap .ProfilePhoto { height: 24px; width: 24px; } .MeBox.Inline .Username { margin-right: 4px; } .MeBox-SignIn.Inline * { display: inline; } .MeBox.Inline .SignInIcons img { vertical-align: top; } .PanelActivity { border-top: 1px solid $blue-g; border-bottom: 0; } .PanelActivity li { background: $white-7; border-bottom: 1px solid $blue-g; padding: 2px 4px; color: $grey-4; font-size: 11px; line-height: 1.6; } .PanelActivity li a { font-size: 13px; } .PanelActivity li a.Name { margin-right: 2px; } .PanelActivity span { padding: 0 4px; } .PanelActivity p { padding: 0 4px; display: inline; font-size: 90%; } .PanelActivity li em { padding-left: 5px; color: $grey-3; font-size: 80%; } .PanelActivity li .Story { font-size: 85%; } /* Compatibility for old custom themes that overrode this value */ #Panel .PanelInfo li { text-align: left; } #Panel .FilterMenu li, .PanelInfo li { border-bottom: 1px solid $grey-2; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 2px 4px; } #Panel .FilterMenu li:first-child, .PanelInfo li:first-child { border-top: 1px solid $grey-2; border-top: 1px solid rgba(0, 0, 0, 0.1); } /** Make standard items a bit more condensed when in the panel. **/ .PanelColumn .Item { padding: 2px; } .PanelColumn .Item .Title { font-size: 13px; font-weight: normal; } .PanelColumn .Options { display: none; } #Panel .FilterMenu .Aside, .PanelInfo .Aside, .Item .Aside { float: right; } .PanelInfo .Heading { font-weight: bold; } .PanelInfo li strong { font-weight: normal; text-align: left; } .PanelInfo li .LastMessage { float: right; } .PanelInfo .Meta { font-size: 11px; } /* .PanelInfo .Meta span, .PanelInfo .Meta strong { margin-right: 8px; } */ .PanelInfo .Meta span a { margin-left: 8px; } .PanelInfo .Meta strong { display: inline; border-radius: 2px; background: $yellow-3; color: $black; font-size: 9px; font-weight: bold; padding: 3px; line-height: 1; } .PanelInfo .Parent { text-align: left; font-weight: bold; background: none; color: $grey-1; padding: 2px 0; } #Panel .FilterMenu .Active, .PanelInfo .Active { background: $grey-g; background: rgba(0, 0, 0, 0.03); font-weight: bold; } .PanelInfo .Active strong { font-weight: bold; } .PanelActivity .ShowAll, .PanelInfo .ShowAll { font-weight: bold; border: 0; text-align: right; background: none; } #Content .BoxFilter { margin: 0 0 6px; } #Panel .BoxFilter { margin: 10px 0; } #Content .FilterMenu { margin: 10px 0; } #Content .FilterMenu li, #Content .FilterMenu li.Active { display: inline-block; white-space: nowrap; margin: 0 6px; } #Content .FilterMenu li a { padding: 4px 0; } #Content .FilterMenu li.Active a { border-bottom: 2px solid $grey-2; border-bottom: 2px solid rgba(0, 0, 0, 0.1); } #Content .BoxFilter a { margin: 0 10px 0 0; padding: 4px 0; display: block; } #Content .BoxFilter .Active a { color: $black; border-bottom: 2px solid $grey-2; border-bottom: 2px solid rgba(0, 0, 0, 0.1); } #Content .BoxFilter { display: none; } /* Hide these by default, can be unhidden for backwards compat. */ /* End BoxFilter in #Content area */ #UserOptions { margin-bottom: 10px; } /* Category Depths */ .CategoryFilterOptions .CurrentFilter { font-weight: bold; } .PanelCategories .Depth2 { padding-left: 8px; } .PanelCategories .Depth3 { padding-left: 12px; } .PanelCategories .Depth4 { padding-left: 16px; } .PanelCategories .Depth5 { padding-left: 20px; } .PanelCategories .Depth6 { padding-left: 24px; } .PanelCategories .Depth7 { padding-left: 28px; } .PanelCategories .Depth8 { padding-left: 32px; } .PanelCategories .Depth9 { padding-left: 36px; } .PanelCategories .Depth10 { padding-left: 40px; } .PanelCategories .Depth11 { padding-left: 44px; } .PanelCategories .Depth12 { padding-left: 48px; } .CategoryList .Depth2 { padding-left: 25px !important; } .CategoryList .Depth3 { padding-left: 50px !important; } .CategoryList .Depth4 { padding-left: 75px !important; } .CategoryList .Depth5 { padding-left: 100px !important; } .CategoryList .Depth6 { padding-left: 125px !important; } .CategoryList .Depth7 { padding-left: 150px !important; } .CategoryList .Depth8 { padding-left: 175px !important; } .CategoryList .Depth9 { padding-left: 200px !important; } .CategoryList .Depth10 { padding-left: 225px !important; } .CategoryList .Depth11 { padding-left: 250px !important; } .CategoryList .Depth12 { padding-left: 275px !important; } .Box.RecentUsers { float: left; } .Icons a { display: block; margin: 0 2px 2px 0; float: left; } .Icons img { display: block; height: 44px; width: 44px; overflow: hidden; background: $blue-i; color: $blue-i; text-indent: 50px; } /* Page Controls (new discussion button, pagers, etc) */ #Content .BoxNewDiscussion { display: none; /* display: block to reveal this */ } .PageControls { margin: 5px 0; min-height: 24px; } /* ================================================ DataList */ /* Note: DataList is used in search results, vanilla discussions & drafts */ .SearchForm { margin: 20px auto; } .SearchForm .InputBox { width: 100%; box-sizing: border-box; font-size: 14px; padding: 6px 25px 6px 8px; border-radius: .35ex; border: solid 1px $grey-d; } .SearchForm .SiteSearch { max-width: 600px; margin: 0; } .SearchForm .SiteSearch .Button { top: 8px; right: 6px; } .Empty { margin: 10px 0; } .DataList .Item, .NarrowList .Item { margin: 0; padding: 8px; border: 0 solid $grey-2; border: 0 solid rgba(0, 0, 0, 0.1); border-bottom-width: 1px; position: relative; } .DataList .Item .Item { border: none; } .Item-Icon { float: left; margin: 0 10px 10px 0; } .Item h2, .Item h3, .Item h4, .Item h5 { margin: 0; } #latest { float: left; margin: -10px; } .DataList .Title { font-size: 14px; display: block; font-weight: bold; margin: 0; } .ItemDiscussion .Meta, .DataList .Meta { font-size: 11px; color: $blue-j; } .MItem { margin-left: 8px; margin-right: 8px; white-space: nowrap; } .MItem:first-child { margin-left: 0; } .MItem:last-child { margin-right: 0; } .CommentInfo { line-height: 1.5; } .Item .AuthorInfo { font-size: 11px; } .DataList .Excerpt { font-size: 12px; line-height: 1.4; margin: 5px 0; } .DataList .Excerpt p { display: inline; padding: 0; } .HasNew { border-radius: 2px; background: $yellow-3; color: $black; font-size: 9px; font-weight: bold; padding: 3px; line-height: 1; white-space: nowrap; } .JustNew { display: none; } .Item.Read { background: $grey-h; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); opacity: .9; } .Item.Read:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .Item.Read .Title, .Item.Read .BlockTitle { font-weight: normal; } .Item.Checked { background: $yellow-f; } .Item.Open { z-index: 200; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(enabled=false)" !important; filter: alpha(enabled=false) !important; opacity: 1 !important; } .DataList a.Delete { border-radius: 0; color: $grey-1; display: block; height: 14px; margin: 0; padding: 2px 4px; width: auto; font-family: arial; font-size: 16px; font-weight: bold; line-height: 1; visibility: hidden; } .DataList a.Delete:hover { text-decoration: none; border: none; background: $grey-1; color: $white; visibility: visible; } .Item:hover a.Delete { visibility: visible; } /* Condensed datalists make the main link & excerpt inline. */ .DataList .Unfollow { background: $grey-5; } .DataList .Unfollow a { color: $grey-6; } .Item .Inset { border-top: 1px solid $blue-h; padding: 5px 0; } .Item .Author a { font-size: 15px; font-weight: bold; } .Condensed .Title, .Condensed a.Title { display: inline; padding: 0; } .Condensed .Excerpt { display: inline; } .PopList .Item { padding: 4px; position: relative; overflow: hidden; border-bottom: 1px solid $grey-2; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .PopList .Item[rel] { cursor: pointer; } .PopList .ItemContent { margin: 0 0 0 48px; line-height: 1.4; } .PopList .Meta { color: $grey-3; font-size: 80%; } .PopList .Center { padding: 0; } .PopList .Center a { display: block; padding: 4px 0; } .PopList .Item:hover { background: $grey-5; background: rgba(0, 0, 0, 0.03); } .PopList .Item.Title:hover { background: inherit; } .PopList .Item.Title { font-size: 12px; padding: 2px 4px; } .PopList .Item.Title a { float: right; font-size: 11px; } .PopList .Empty { border: none; } /* /me actions */ .MeAction .AuthorAction { display: inline; margin: 0 6px; font-size: 15px; font-weight: bold; } .MeAction .Item-Header { margin-bottom: 8px; } .MeAction .Message { display: none; } .Hero { background: $grey-g; background: rgba(0, 0, 0, .03); padding: 20px; margin: 10px 0 20px; border-radius: 6px; } .Hero h3 { font-size: 24px; font-weight: normal; } .ChildCategoryList { overflow: hidden; margin-bottom: 8px; } .ChildCategoryList .Item { float: left; width: 50%; padding: 0; } .ChildCategoryList .Item:nth-child(odd) { clear: left; } .ChildCategoryList .ItemContent { padding: 8px 0 0; } /* =============================================================== Activities */ .Activities li.HasPhoto .Title { padding: 0; } .Activities a.Title, .Activities .Title, .Activities .Title a { font-size: 14px; } .Activities li.Condensed .Excerpt { color: $black; font-size: 13px; } .Activities ul.DataList { margin-left: 50px; } .Activities .ItemContent { margin: 0 0 0 53px; } .Activities .ActivityComments .ItemContent { margin: 0 0 0 42px; } .Activities .DataList li { background: $grey-h; background: rgba(0, 0, 0, 0.05); margin-bottom: 2px; padding: 6px; } .Activities .DataList a.Title, .Activities .DataList .Title, .Activities .DataList .Title a, .Activities .DataList .Excerpt p { font-size: 13px; line-height: 1; } .Activities .DataList .Photo img { height: 32px; width: 32px; } .Activities a.CommentLink, .Activities a.CommentLink:hover { font-size: 12px; cursor: text; background: $white; color: $grey-d !important; padding: 5px; text-decoration: none; border: 1px solid $grey-b; display: block; line-height: 100%; font-weight: normal; } /* ============================================================== MessageList */ .Author .PhotoWrap { margin: 0 10px 4px 0; float: left; /* overflow: hidden;*/ } .Popup .Preview { padding: 8px; margin: 0; } body.Post .Popup a.Close { color: $vanilla-blue; } .Message { line-height: 1.7; font-size: 100%; word-wrap: break-word; margin-top: 5px; } .Message h1, .Message h2, .Message h3, .Message p, .Message .P { margin: 10px 0; } blockquote { margin: 1em 0 1em 40px; } .emoji { margin-top: -2px; margin-bottom: -3px; /* account for image padding */ } blockquote.Quote, blockquote.UserQuote { padding: 1ex 16px; margin: 1em 0; background: $grey-h; background: rgba(0, 0, 0, 0.05); border-left: 4px solid $grey-5; border-left: 4px solid rgba(0, 0, 0, 0.1); min-width: 200px; overflow-y: initial; } .Message small { font-size: 11px; color: $grey-3; } .EmbeddedContent { overflow: hidden; } .Message img.LeftAlign, img.LeftAlign { float: left; margin: 0 10px 5px 0; max-width: 300px; } .Message dt { font-weight: bold; margin: 10px 0 4px; } .Message dd { margin-left: 30px; } .Message dd > p { margin-top: 4px; } .Message li { margin: 5px 0; } .ClearFix { clear: both; } .codeBlock, code, pre { background: $yellow-8; padding: 4px 8px; font-family: monospace; overflow: auto; border: 1px solid $yellow-9; } .code, code { white-space: pre-wrap; &.focus-visible { outline-offset: -1px; } } .codeBlock, pre { display: block; margin: 1em 0; white-space: pre; } pre code { border: none; padding: 0; white-space: pre; } mark { padding: 0 2px; color: inherit; background: $yellow-a; } .Message strong, .Message b { font-weight: bold; } .Message em, .Message i { font-style: oblique; } .Message ul, .Message ol { margin: 1em 0 1em 3em; } .Message ol li { list-style: decimal !important; } .Message ul li { list-style: disc !important; } .Message img { max-width: 100%; } .Message td, .Message th { padding: .5em; } /* =============================================================== Categories */ .ChildCategories { border-top: 1px dotted $grey-2; display: block; } .DataList .Meta .RSS { margin-right: 6px; } .Meta .RSS img { vertical-align: text-bottom; } .CategoryHeading .ItemContent { font-weight: bold; font-size: 14px; } .RssButton { display: inline-block; background: url(images/rss.gif) no-repeat center center; height: 16px; width: 16px; vertical-align: bottom; color: transparent; overflow: hidden; text-indent: -100px; } .DataTable .RssButton { float: right; } /* ============================================================= Profile Page */ a.ChangePicture { position: absolute; background: $grey-1; background: rgba(0, 0, 0, .7); color: $white; font-size: 11px; padding: 10px 0; width: 100%; display: none; text-align: center; } .PhotoWrap:hover a.ChangePicture { display: block; } a.ChangePicture:hover { color: $white; text-decoration: underline; } .ProfileOptions { float: right; position: relative; } /* Hiding form headings with CSS in case the forms get popped */ div.Popup .SmallPopup h1 { display: none; } /* BGColor on profile forms */ body.Profile.EditMode #Content form { padding: 10px 20px 20px; background: $grey-h; background: rgba(0, 0, 0, 0.05); } /*form.Activity { display: block; margin: 0 0 10px; overflow: hidden; } form.Activity textarea { width: 100%; margin-bottom: 2px; height: 60px; min-height: 60px; } form.Activity .Button { float: right; } .ActivityComments textarea { height: 60px; min-height: 60px; }*/ /* Invitations Form */ table.PreferenceGroup, #Form_Invitation table { width: 100%; border-collapse: collapse; margin: 10px 0; } table.PreferenceGroup th, table.PreferenceGroup td, #Form_Invitation th, #Form_Invitation td { padding: 2px 6px; border-bottom: 1px solid $grey-2; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } table.PreferenceGroup th, #Form_Invitation table th { font-weight: bold; text-align: left; } /* Preferences Form */ .Preferences h3 { margin: 0; padding: 10px 0 4px !important; } /* About in content area */ .ContentColumn .About h2 { display: none; } dl.About dt, dl.About dd { padding: 0; margin: 0; float: none; font-size: 11px; line-height: 14px; display: inline; } dl.About dt { color: $grey-j; background: url('images/profile-sprites.png') 2px -139px no-repeat transparent; padding-left: 14px; } dl.About dt.Name { background-position: 0 -26px; } dl.About dt.Email { background-position: 0 -53px; } dl.About dt.Joined, dl.About dt.LastActive { background-position: 0 3px; } dl.About dt.Roles { background-position: 1px -81px; } dl.About dt.Posts { background-position: 0 -113px; } dl.About dd { padding: 0 8px 0 0; } /* Invitations */ .Invitations.DataTable { margin: 15px 0; } .Invitations.DataTable th { text-align: left; } .Invitations.DataTable th { padding: 4px; border-bottom: 1px solid $grey-5; border-bottom: 1px solid rgba(0, 0, 0, 0.1); vertical-align: top; } .Invitations th.InviteMeta { width: 20%; } .InviteForm { margin: 5px 0; } .InviteForm label { display: block } /* ======================================================== Thumbnail Cropper */ .Popup .CurrentPicture { display: none; } .CurrentPicture table, form.Thumbnail table { width: 100%; } .CurrentPicture table td, form.Thumbnail table td { width: 50%; font-weight: normal; vertical-align: top; padding-right: 10px; } .CurrentPicture table thead td, form.Thumbnail table thead td { font-weight: bold; } form.Thumbnail .Warning { margin-bottom: 20px; } /* ================================================= CommentForm */ .Preview { background: $white; color: $black; padding: 4px; min-height: 100px; } .EditCommentForm .Buttons, .CommentForm .Buttons { position: relative; text-align: right; margin: 0; padding: 6px 0; } .CommentForm .WriteButton, .CommentForm .PreviewButton, .CommentForm .DraftButton { margin: 0 6px; } .Form-Header .Username { display: none; } .Form-Header .Author .PhotoWrap { margin: 10px 0 0 10px; } .EditCommentForm .FormWrapper { padding: 10px; } .CommentForm .FormWrapper { padding: 10px 10px 10px 60px; } .EditCommentForm textarea.TextBox, .CommentForm textarea.TextBox { min-height: 50px; height: 50px; } .EditCommentForm { margin: 10px 0; } /* =================================================================== Popups */ .Popup .Info { margin-top: 10px; } .Overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 998; background-color: rgba($black, .2); } .MSIE .Overlay { background: gray; filter: alpha(opacity=0); position: static; } div.Popup { position: absolute; width: 100%; top: 0; left: 0; text-align: center; } div.Popup .Border { margin: 0 auto; text-align: left; position: relative; width: 600px; max-width: 100vw; display: inline-block; } div.Popup .Body { background: $white; padding: 10px; } div.Popup .Loading { text-align: center; } div.Popup h1 { margin-top: 0; } a.Close { position: absolute; top: 16px; right: 20px; line-height: 1; color: $black; cursor: pointer; font-family: arial; font-size: 22px; font-weight: bold; padding: 0; } div.Popup .Footer { border: none; background: none; padding: 0; margin: 0; text-align: right; } div.Popup h3 { font-size: 120%; font-weight: bold; padding: 20px 0 10px; } div.Popup p { padding: 6px 10px 10px; } div.Popup .Legal p { padding: 6px 0 10px; } div.Popup small { font-size: 11px; } div.Popup form p, div.Popup .userContent p { padding: 0; } body.Profile.EditMode ul li label, div.Popup form ul li label { display: block; font-size: 14px; font-weight: bold; margin: 10px 0 0; } body.Entry form ul li.Gender label.RadioLabel, body.Profile.EditMode ul li.Gender label.RadioLabel, div.Popup form ul li.Gender label.RadioLabel { display: inline; padding-right: 20px; } li.Gender { margin-bottom: 10px; } body.Profile.EditMode ul li label.RadioLabel, body.Profile.EditMode ul li label.CheckBoxLabel, div.Popup form ul li label.RadioLabel, div.Popup form ul li label.CheckBoxLabel { font-weight: normal; } body.Profile.EditMode .Warning { margin: 10px 0; } div.Popup form ul li label.RadioLabel { font-size: 12px; } /* Serious Ajax Error Styles */ .AjaxError { white-space: pre; overflow: auto; padding: 10px; } /* ==================================================================== Legal */ .Legal h3 { padding: 0; margin: 20px 0 0; font-size: 120%; font-weight: bold; } .Legal ol { list-style-position: outside; list-style-type: decimal; margin: 0 30px 10px; } .Legal ul { list-style-position: outside; list-style-type: disc; margin: 0 30px 10px; } .Legal li { padding: 5px 0; } .Legal strong { font-weight: bold; } /* =================================================================== Footer */ #Foot { clear: both; text-align: center; margin: 20px 0 0; padding: 4px 9px; font-size: 13px; color: $grey-2; line-height: 1; } #Foot a { color: $grey-e; } #Foot a:hover { color: $grey-b; } .PoweredByVanilla { display: inline-block; height: 33px; width: 70px; background: url('images/vanilla-forums-dark-bg-70x33.png') center center no-repeat; background: url('images/vanilla-forums-light-bg-70x33.png') center center no-repeat; line-height: 999px; color: transparent; overflow: hidden; font-size: 0; } /* ================================ Vanilla ================================= */ /* ============================================================== Discussions */ /* Note: The Vanilla Discussion List has the following classes applied to individual list elements and can be styled: + Bookmarked: the user has bookmarked that topic + Announcement: the discussion has been announced + Mine: the user created the discussion + New: there are new comments since the last viewed the discussion */ .Tag { background: $grey-3; border-radius: 2px; color: $white; padding: 1px 4px; line-height: 14px; } .Tag a { color: $white; } .Tag.Closed { background: $grey-4; } .Tag.Category { background: $grey-i; font-weight: normal; } .Tag.Category a { color: $black; } .Tag.Tag-Banned { background-color: $red-a; } .Discussion .PageTitle h1 { font-size: 24px; line-height: 1.2; } .ItemDiscussion { margin-bottom: 12px; padding: 8px; } /* .ItemDiscussion .Message { margin-top: 20px; } .ItemDiscussion .MItem a { font-size: 11px; } .ItemDiscussion .ProfilePhotoMedium { height: 24px; width: 24px; margin: 0 5px 5px 0; } */ .ItemDiscussion .Message { margin-bottom: 5px; /* Consistency with when only h1 starts page */ font-size: 110%; } .DiscussionHeader { margin: 5px 0 10px; } .BeforeCommentHeading { float: right; } /* ======================================= Category & Discussions Table Views */ .DataTable { width: 100%; table-layout: fixed; } .DataTable td { padding: 4px; border-bottom: 1px solid $grey-2; border-bottom: 1px solid rgba(0, 0, 0, 0.1); vertical-align: top; } .DataTable thead td, .DataTable thead th { font-weight: bold; vertical-align: bottom; } .CheckBoxColumn { width: 24px; } .DataTable .BlockColumn { width: 25%; } tbody .BlockColumn { padding: 8px 4px; /* compensate for line-height 1 */ } .DataTable .BlockColumn-User { width: 15%; } td.BigCount { width: 90px; text-align: center; font-weight: bold; } .DiscussionsTable td.BigCount { width: 70px; } tbody td.BigCount { font-size: 16px; padding: 8px 4px; } .DataTable .Meta, .DataTable .MItem { font-size: 11px; } .DataTable .Title { font-size: 13px; font-weight: bold; } td.Opts { white-space: nowrap; text-align: right; width: 1px; } .MiniPager { display: inline-block; margin-left: 3px; font-size: 11px; color: $grey-1; } .MiniPager a, .MiniPager span { margin: 0 1px; } tr.CategoryHeading td { font-weight: bold; background: $grey-g; background: rgba(0, 0, 0, 0.03); } .CategoryTable .ChildCategories { font-size: 11px; } /* Discussion Sorter */ .DiscussionSorter { float: right; margin-right: 24px; font-size: 11px; } .DiscussionSorter:hover { cursor: pointer; background: $grey-h; } .DiscussionSorter .MenuItems { padding: 0; width: 130px; border-top: none; border-radius: 0; } .DiscussionSorter .Selected { padding: 0 0 0 15px; display: inline-block; width: 115px; border: 1px solid transparent; border-bottom: none; } .DiscussionSorter .Open .Selected { border: 1px solid $grey-9; border-bottom: none; } .DiscussionSorter .SpMenu { background-position: -32px -20px; height: 8px; width: 12px; margin-top: 8px; } .DiscussionSorter .Flyout:before, .DiscussionSorter .Flyout:after { border: none; } .DiscussionSorter .ToggleFlyout .Flyout { top: 18px; } /* ======================================= Blocks */ .Block { line-height: 1; } .BlockTitle { display: block; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 3px; font-size: 12px; } .Block .PhotoWrap { float: left; margin: 0 5px 0 0; } /*.Block img { height: 24px; width: 24px; }*/ .Block .MItem { font-size: 10px; margin: 0; } /* ================================= Conversation, Discussion & Comment Forms */ .SpNewConversation, .SpAskQuestion, .SpNewPoll, .SpNewDiscussion { display: inline-block; height: 16px; width: 16px; background: url('images/sprites.png') 0 -68px no-repeat; margin: 0 5px 2px 0; vertical-align: middle; } .SpNewConversation { background-position: -64px -68px; } .SpAskQuestion { background-position: -48px -68px; } .SpNewPoll { background-position: -32px -68px; } .SpRSS { background: url("images/sprites.png") no-repeat -27px -46px transparent; display: inline-block; height: 14px; vertical-align: middle; width: 14px; } .GroupForm, .DiscussionForm { label { font-size: 14px; font-weight: bold; color: $grey-j; } } .FormWrapper { background: $grey-g; background: rgba(0, 0, 0, 0.03); margin: 0; padding: 20px; } .FormWrapper-Condensed { padding: 10px; } .FormWrapper-Condensed .Buttons { text-align: right; } label.B { font-weight: bold; } .DiscussionForm textarea { width: 100%; height: 100px; min-height: 100px; margin: 0 0 6px; } .DiscussionForm .Category, .DiscussionForm input.InputBox { width: 100%; margin-bottom: 10px; } .DiscussionForm .Category label { padding: 0 8px 0 0; } .DiscussionForm .PostOptions li { display: inline; padding: 0 8px 0 0; } .DiscussionForm .PostOptions label { display: inline; font-weight: normal; font-size: 95%; } .FormWrapper.StructuredForm { padding-top: 5px; } .StructuredForm label { font-weight: bold; font-size: 14px; display: block; } .StructuredForm .P { margin: 15px 0; } .StructuredForm label.RadioLabel, .StructuredForm label.CheckBoxLabel, .StructuredForm label.Unstyled { font-size: 100%; font-weight: normal; } .StructuredForm input.hasDatepicker, .StructuredForm input.hasDatepicker:focus { background-image: url('images/calendar.png'); background-repeat: no-repeat; background-position: center right; padding-right: 24px; } .List.Inline { display: inline; } .List.Inline * { line-height: 16px; } /* ============================== Conversations ============================= */ textarea.MultiComplete { width: 100%; height: 20px; text-align: left; } #Panel input.InputBox, .AddPeople textarea.MultiComplete { width: 100%; margin-bottom: 2px; } .AddPeople form div { text-align: right; } .ac_results { padding: 0; border: 1px solid $white-1; border-top: 0; background-color: $white; overflow: hidden; z-index: 99999; } .ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; } .ac_results li { margin: 0; padding: 5px; cursor: default; display: block; /* if width will be 100% horizontal scrollbar will apear when scroll mode will be used */ /*width: 100%;*/ font-size: 12px; /* it is very important, if line-height not setted or setted in relative units scroll will be broken in firefox */ line-height: 16px; overflow: hidden; border-bottom: 1px solid $white-1; text-align: left; } .ac_lastitem { border-bottom: 0 !important; } .ac_results strong { font-weight: bold; background: $blue-7; } .ac_over strong { font-weight: bold; background: $blue-4; } .ac_over { background: $blue-5; color: $white; } .AddPeople h4 { border-bottom: 0; } /* ==================================================== New Conversation Form */ #ConversationForm label { display: block; text-align: left; color: $grey-j; font-size: 14px; font-weight: bold; } #ConversationForm .TextBox { width: 100%; height: 100px; min-height: 100px; margin: 8px 0 6px; } body.Conversations a.Cancel { margin-left: 20px; } /* Upload Progress Bar */ .UploadProgress { margin: 10px 0; background: url('images/upload-progress-back.gif') repeat; width: 200px; z-index: 0; color: $white; text-shadow: 0 1px 1px $grey-1; border: 1px solid $blue-6; border-radius: 2px; } .UploadProgress div { padding: 2px 0; } .UploadProgress div strong { font-weight: bold; } .UploadProgress .Foreground, .UploadProgress .Background { position: absolute; } .UploadProgress .Background { width: 0; background: url('images/upload-bg.gif') repeat; z-index: 1; } .UploadProgress .Foreground { text-indent: 6px; overflow: visible; white-space: nowrap; z-index: 2; } /* Container */ .Border { border-radius: 8px; background: $grey-2; background: rgba(82, 82, 82, 0.7); padding: 10px; } /* Tabs */ ul.Tabs { border-bottom: 1px solid $grey-b; text-align: left; padding-left: 4px; } ul.Tabs li { display: inline-block; } ul.Tabs li a { display: inline-block; margin-left: 4px; border: 1px solid $grey-b; border-width: 1px 1px 0 1px; border-radius: 3px 3px 0 0; background: $grey-5; color: $grey-6; position: relative; top: 1px; padding: 2px 8px 1px; } ul.Tabs li a:hover { background: $grey-8; color: $grey-7; } ul.Tabs li a.Active { padding: 2px 8px; background: $white; color: $black; } /* Icons */ ul.Tabs li a.EntryTabFor_password { padding-left: 22px; background-image: url('images/icon.png'); background-position: 3px 4px; background-repeat: no-repeat; } /* ============================================================ Entry Screens */ body.Entry form ul li label { font-size: 14px; font-weight: bold; padding: 6px 0 0; display: block; } body.Entry form ul li label.CheckBoxLabel, body.Entry form ul li label.RadioLabel { font-size: 12px; font-weight: normal; width: auto; } span.Incorrect { display: block; color: $red-1; } .SingleEntryMethod { margin: 0 auto; } .MultipleEntryMethods { margin: 0 auto; overflow: hidden; } .MultipleEntryMethods .MainForm { float: left; /* Fix mainform from shoving the other entry methods down when an error occurs during login */ width: 300px; } .MultipleEntryMethods .Methods { padding: 0 15px 5px; line-height: 1; margin-left: 300px; } body#dashboard_entry_password #Content input.Password, body#dashboard_entry_signin #Content input.Password, body#dashboard_entry_index #Content input.Password, .SignInPopup input.Password { width: 180px; } .PasswordStrength { position: relative; margin-top: 2px; padding-right: 8px; margin-bottom: 4px; height: 10px; } .PasswordStrength .Background { height: 4px; background-color: $grey-l; width: 100%; position: absolute; left: 0; } .PasswordStrength .Strength { height: 4px; background-color: $red-8; width: 0; position: absolute; left: 0; } .PasswordStrength .Separator { height: 4px; width: 2px; background-color: $white; position: absolute; left: 0; } .PasswordStrength .StrengthText { padding-top: 2px; text-align: right; font-size: 12px; margin-right: -8px; } .PasswordStrength.Score-0 .Strength { width: 0; } .PasswordStrength.Score-0 .StrengthText { color: $grey-6; } .PasswordStrength.Score-1 .Strength { background-color: $red-8; width: 20%; } .PasswordStrength.Score-1 .StrengthText { color: $red-8; } .PasswordStrength.Score-2 .Strength { background-color: $orange-1; width: 40%; } .PasswordStrength.Score-2 .StrengthText { color: $orange-1; } .PasswordStrength.Score-3 .Strength { background-color: $orange-2; width: 60%; } .PasswordStrength.Score-3 .StrengthText { color: $orange-2; } .PasswordStrength.Score-4 .Strength { background-color: $green-2; width: 80%; } .PasswordStrength.Score-4 .StrengthText { color: $green-2; } .PasswordStrength.Score-5 .Strength { background-color: $green-1; width: 100%; } .PasswordStrength.Score-5 .StrengthText { color: $green-1; } a.ForgotPassword { margin-left: 10px; } li.Buttons div a.ForgotPassword { margin: 0; } body#dashboard_entry_password ul li label.CheckBoxLabel, body#dashboard_entry_signin ul li label.CheckBoxLabel, body#dashboard_entry_index ul li label.CheckBoxLabel, .SignInPopup ul li label.CheckBoxLabel { display: inline; font-size: 12px; font-weight: normal; margin: 10px 0 0 10px; } .SignInPopup li.Buttons, body.Entry li.Buttons { text-align: left; padding: 0 0 10px; } .Methods .Method { margin: 5px 0; } .MainForm .InputBox { max-width: 250px; } /* Handshake */ body#dashboard_entry_handshake #Content { width: 720px; } body#dashboard_entry_handshake #Content form { padding: 20px 30px 26px; } body#dashboard_entry_handshake ul.NewAccount { float: left; width: 315px; margin-right: 44px; border-right: 1px solid $blue-2; } body#dashboard_entry_handshake ul.LinkAccount { margin-left: 315px; } ul.NewAccount h2, ul.LinkAccount h2 { padding-left: 36px !important; background: url('images/dashboard-sprites.png') 0 -542px no-repeat; } ul.LinkAccount h2 { padding-left: 84px !important; background-position: 45px -296px; } body#dashboard_entry_handshake .Info { border: 1px solid $blue-2; background: $blue-3; color: $blue-1; } body#dashboard_entry_handshake #Content h2 { border: none; color: $blue-1; font-size: 140%; font-weight: bold; padding: 6px 0; margin: 0; text-align: left; } /* Leaving Page */ body#dashboard_entry_leave p { margin: 0; padding: 20px 10px; } body#dashboard_entry_leave p.Leaving { background: url('images/progress.gif') left center no-repeat; margin: 0 0 0 14px; padding: 20px 0 20px 50px; } .Connect form ul li#ConnectPassword label, .SignInPopup form ul li#ConnectPassword label { padding: 10px 0 0; } .FinePrint { font-size: 11px; color: $grey-3; } /* Do not customize these unless you enjoy pain. */ /* Error messages that get displayed on forms throughout the application. */ .Errors { text-align: left; position: inherit; top: auto; left: auto; z-index: auto; margin: 0 0 10px !important; } * html .Errors { position: inherit; width: auto; top: auto; left: auto; overflow: auto; } .Errors ul { border: 1px solid $red-6 !important; background: $red-7 !important; padding: 6px 10px; display: block; border-radius: 2px; } .Errors a { color: $white; text-decoration: underline; } .Errors ul li { color: $white !important; background: $red-7 !important; text-align: left; } div.Popup .Errors ul { display: block; border-radius: 2px; border: 1px solid $red-6 !important; } div.Popup .Errors { text-align: left; position: inherit; top: auto; left: auto; z-index: auto; margin: 10px 0 !important; } .Errors pre { margin: 10px 0 5px; padding: 4px 8px; display: block; border-radius: 2px; white-space: pre; overflow: auto; } .Errors pre, .Errors pre * { background: $yellow-1 !important; font-size: 12px !important; font-weight: normal !important; font-family: monospace !important; text-shadow: none !important; color: $grey-1 !important; line-height: 1.4 !important; } .Errors pre * { margin: 0 !important; padding: 0 !important; } /* Note: InformMessages are "growl" style messages that appear in a fixed position on the page to notify users of things like drafts being saved, etc. */ .InformMessages { text-align: left; position: fixed; top: auto; bottom: 0; left: 0; z-index: 200; margin: 0; padding: 0; list-style: none; font-size: 12px; display: block; width: auto; } * html .InformMessages { position: absolute; top: auto; margin-left: 10px; overflow: visible; } .InformWrapper { display: block; margin: 10px; } .InformMessages .InformMessage { color: $white !important; text-shadow: 0 1px 1px $black; text-align: left !important; border-radius: 2px; background: $black !important; background: rgba(0, 0, 0, 0.7) !important; border: none !important; width: auto; max-width: 400px; padding: 9px 14px 8px; display: -moz-inline-stack; display: inline-block; zoom: 1; position: relative; line-height: 1.6; } .InformMessages .InformMessage:hover { background: $grey-1; background: rgba(0, 0, 0, 0.8) !important; } .InformMessages .InformMessage a { color: $blue-b; } .InformMessages .InformMessage a:hover { color: $blue-c; text-decoration: underline; } .InformMessages .InformMessage strong { font-weight: bold; } .InformMessages .InformMessage a.Close { border: none; background: transparent; border-top-right-radius: 2px; color: $grey-2; font-size: 14px; text-align: center; display: none; height: 12px; width: 12px; line-height: 1; text-decoration: none; position: absolute; top: 0; right: 0; } .InformMessages .InformMessage a.Close span { display: inline; } .InformMessages .InformMessage a.Close:hover { background: $black; color: $white; } .InformMessages .InformMessage:hover a.Close { display: block; } /* iPad/iPhone */ @media only screen and (device-width: 768px), only screen and (max-device-width: 480px) { .InformMessages .InformMessage a.Close { color: $white; display: block; } .Item .OptionsTitle { visibility: visible; } } /* Small screens */ @media (max-width: 500px) { .InformMessages { width: 100%; } .InformWrapper { margin: 5px; } .InformMessages .InformMessage { display: block; max-width: inherit; } } .InformMessages .Actions a { margin-right: 4px; } .InformMessages .Actions a:last-child { margin-right: 0; } .InformMessages .Actions a.CancelAction { color: $grey-b; } /* Inform Sprites */ .InformMessages .InformWrapper.HasIcon .InformMessage { padding-left: 42px !important; min-height: 20px; } .InformMessages .InformWrapper.HasSprite .InformMessage { padding-left: 40px !important; } .InformMessages .InformMessage a.Icon { display: block; position: absolute; top: 5px; left: 5px; height: 28px; width: 28px; } .InformMessages .InformMessage a.Icon img { height: 28px; width: 28px; } span.InformSprite { background: url('images/inform-sprites.png') -9px -9px no-repeat; display: block; position: absolute; top: 4px; left: 5px; height: 30px; width: 30px; } span.InformSprite.Refresh { background-position: -9px -9px; } span.InformSprite.Recycle { background-position: -57px -9px; } span.InformSprite.Infinity { background-position: -105px -9px; } span.InformSprite.Squiggle { background-position: -153px -9px; } span.InformSprite.Random { background-position: -200px -9px; } span.InformSprite.Magnify { background-position: -250px -9px; } span.InformSprite.Location { background-position: -298px -9px; } span.InformSprite.Bubble { background-position: -346px -9px; } span.InformSprite.ElipsisBubble { background-position: -394px -9px; } span.InformSprite.Plus { background-position: -442px -9px; } span.InformSprite.Time { background-position: -9px -57px; } span.InformSprite.Eye { background-position: -57px -57px; } span.InformSprite.Target { background-position: -105px -57px; } span.InformSprite.Redflag { background-position: -153px -57px; } span.InformSprite.Flags { background-position: -200px -57px; } span.InformSprite.Graph { background-position: -250px -57px; } span.InformSprite.Chart { background-position: -298px -57px; } span.InformSprite.Envelope { background-position: -346px -57px; } span.InformSprite.Gear { background-position: -394px -57px; } span.InformSprite.Gears { background-position: -442px -57px; } span.InformSprite.Skull { background-position: -9px -106px; } span.InformSprite.SkullBones { background-position: -57px -106px; } span.InformSprite.Bird { background-position: -105px -106px; } span.InformSprite.Present { background-position: -153px -106px; } span.InformSprite.Thundercloud { background-position: -200px -106px; } span.InformSprite.Bandaid { background-position: -250px -106px; } span.InformSprite.Saturn { background-position: -298px -106px; } span.InformSprite.Star { background-position: -346px -106px; } span.InformSprite.Heart { background-position: -394px -106px; } span.InformSprite.Key { background-position: -442px -106px; } span.InformSprite.Ipod { background-position: -9px -152px; } span.InformSprite.Iphone { background-position: -57px -152px; } span.InformSprite.Cabinet { background-position: -105px -152px; } span.InformSprite.Coffee { background-position: -153px -152px; } span.InformSprite.Briefcase { background-position: -200px -152px; } span.InformSprite.Toolcase { background-position: -250px -152px; } span.InformSprite.Suitcase { background-position: -298px -152px; } span.InformSprite.Airplane { background-position: -346px -152px; } span.InformSprite.Spraypaint { background-position: -394px -152px; } span.InformSprite.MailInbox { background-position: -442px -154px; } span.InformSprite.WallPicture { background-position: -9px -200px; } span.InformSprite.Photos { background-position: -57px -200px; } span.InformSprite.FilmRoll { background-position: -105px -200px; } span.InformSprite.Drawer { background-position: -153px -200px; } span.InformSprite.FilmStrip { background-position: -200px -200px; } span.InformSprite.FilmStrip2 { background-position: -250px -200px; } span.InformSprite.Gas { background-position: -298px -200px; } span.InformSprite.Cutlery { background-position: -346px -200px; } span.InformSprite.Battery { background-position: -394px -200px; } span.InformSprite.Beaker { background-position: -442px -200px; } span.InformSprite.Outlet { background-position: -9px -250px; } span.InformSprite.Pinetree { background-position: -57px -250px; } span.InformSprite.House { background-position: -105px -250px; } span.InformSprite.Padlock { background-position: -153px -250px; } span.InformSprite.Network { background-position: -200px -250px; } span.InformSprite.Cloud { background-position: -250px -250px; } span.InformSprite.Download { background-position: -298px -250px; } span.InformSprite.BookmarkRibbon { background-position: -346px -250px; } span.InformSprite.Flag { background-position: -394px -250px; } span.InformSprite.Signpost { background-position: -442px -250px; } span.InformSprite.Brightness { background-position: -9px -298px; } span.InformSprite.Contrast { background-position: -57px -298px; } span.InformSprite.Runner { background-position: -105px -298px; } span.InformSprite.Zap { background-position: -153px -298px; } span.InformSprite.MusicNote { background-position: -200px -298px; } span.InformSprite.Microphone { background-position: -250px -298px; } span.InformSprite.Tshirt { background-position: -298px -298px; } span.InformSprite.Paperclip { background-position: -346px -298px; } span.InformSprite.Monitor { background-position: -394px -298px; } span.InformSprite.Tv { background-position: -442px -297px; } span.InformSprite.Compass { background-position: -9px -346px; } span.InformSprite.Pin { background-position: -57px -346px; } span.InformSprite.Radar { background-position: -105px -346px; } span.InformSprite.Location { background-position: -153px -346px; } span.InformSprite.Telephone { background-position: -200px -346px; } span.InformSprite.Baby { background-position: -250px -346px; } span.InformSprite.Ekg { background-position: -298px -346px; } span.InformSprite.Stopwatch { background-position: -346px -346px; } span.InformSprite.MedicalBag { background-position: -394px -346px; } span.InformSprite.ShoppingCart { background-position: -442px -346px; } span.InformSprite.Dashboard { background-position: -9px -393px; } span.InformSprite.Dogpaw { background-position: -57px -393px; } span.InformSprite.Calendar { background-position: -105px -393px; } span.InformSprite.Lightbulb { background-position: -153px -393px; } span.InformSprite.Trophy { background-position: -200px -393px; } span.InformSprite.Camera { background-position: -250px -393px; } span.InformSprite.Wineglass { background-position: -298px -393px; } span.InformSprite.Beerglass { background-position: -346px -391px; } span.InformSprite.Dumbbells { background-position: -394px -393px; } span.InformSprite.Buoy { background-position: -442px -393px; } span.InformSprite.Beaker2 { background-position: -9px -440px; } span.InformSprite.Testtube { background-position: -57px -440px; } span.InformSprite.Thermometer { background-position: -105px -440px; } span.InformSprite.Pill { background-position: -153px -440px; } span.InformSprite.Equalizer { background-position: -200px -440px; } span.InformSprite.Book { background-position: -250px -440px; } span.InformSprite.Puzzle { background-position: -298px -440px; } span.InformSprite.Palette { background-position: -346px -440px; } span.InformSprite.Umbrella { background-position: -394px -440px; } span.InformSprite.CoffeeCup { background-position: -442px -440px; } span.InformSprite.Gameplan { background-position: -9px -490px; } span.InformSprite.Walk { background-position: -57px -490px; } span.InformSprite.Map { background-position: -105px -490px; } span.InformSprite.IndexCards { background-position: -153px -490px; } span.InformSprite.Piano { background-position: -200px -490px; } span.InformSprite.Sliders { background-position: -250px -490px; } span.InformSprite.Widescreen { background-position: -298px -490px; } span.InformSprite.Badge { background-position: -346px -490px; } span.InformSprite.Chicken { background-position: -394px -490px; } span.InformSprite.Bug { background-position: -442px -490px; } span.InformSprite.SingleUser { background-position: -9px -539px; } span.InformSprite.Group { background-position: -57px -537px; } span.InformSprite.Navigation { background-position: -105px -537px; } span.InformSprite.Balloon { background-position: -153px -537px; } span.InformSprite.Bowandarrow { background-position: -200px -537px; } span.InformSprite.Controller { background-position: -250px -537px; } span.InformSprite.Check { background-position: -298px -537px; } span.InformSprite.Hanger { background-position: -346px -537px; } span.InformSprite.Piggybank { background-position: -394px -537px; } span.InformSprite.Headphones { background-position: -442px -537px; } span.InformSprite.Landscape { background-position: -9px -586px; } span.InformSprite.Stats { background-position: -57px -586px; } span.InformSprite.Idcard { background-position: -105px -586px; } span.InformSprite.Bullhorn { background-position: -153px -586px; } span.InformSprite.Food { background-position: -200px -586px; } span.InformSprite.Moon { background-position: -250px -586px; } span.InformSprite.Sock { background-position: -298px -586px; } span.InformSprite.Bone { background-position: -346px -586px; } span.InformSprite.Golf { background-position: -394px -586px; } span.InformSprite.Dice { background-position: -442px -586px; } .Sprite16 { background: url('images/sprites.png') 0 0 no-repeat; display: inline-block; height: 16px; width: 16px; vertical-align: top; } /* 16px Sprites White */ .SpDashboard, .SpOptions, .SpCog { background-position: 0 -148px; } .SpSettings { background-position: -16px -212px; } .SpNotifications, .SpGlobe { background-position: -32px -212px; } .SpSignOut, .SpExit { background-position: -48px -212px; } .SpMarker { background-position: -64px -212px; } .SpDocuments { background-position: -80px -212px; } .SpInbox, .SpEnvelope { background-position: 0 -228px; } .SpInmail { background-position: -16px -228px; } .SpRoundBubble { background-position: -32px -228px; } .SpSquareBubble { background-position: -48px -228px; } .SpRoundBubbles { background-position: -64px -228px; } .SpSquareBubbles { background-position: -80px -228px; } .SpTag { background-position: 0 -244px; } .SpWrite { background-position: -16px -244px; } .SpLock { background-position: -32px -244px; } .SpRoundAlert { background-position: -48px -244px; } .SpTriangleAlert { background-position: -64px -244px; } .SpBookmarks, .SpStar { background-position: -80px -244px; } .SpSearch { background-position: 0 -260px; } .SpTrash { background-position: -16px -260px; } .SpUser { background-position: -32px -260px; } .SpRefresh { background-position: -48px -260px; } .SpPencil { background-position: -64px -260px; } .SpPlus { background-position: -80px -260px; } /* 16px Sprites White Transparent */ .SpDashboard, .SpCog { background-position: 0 -276px; } .SpSettings { background-position: -16px -276px; } .SpNotifications, .SpGlobe { background-position: -32px -276px; } .SpSignOut, .SpExit { background-position: -48px -276px; } .SpMarker { background-position: -64px -276px; } .SpDocuments { background-position: -80px -276px; } .SpInbox, .SpEnvelope { background-position: 0 -292px; } .SpInmail { background-position: -16px -292px; } .SpRoundBubble { background-position: -32px -292px; } .SpSquareBubble { background-position: -48px -292px; } .SpRoundBubbles { background-position: -64px -292px; } .SpSquareBubbles { background-position: -80px -292px; } .SpTag { background-position: 0 -308px; } .SpWrite { background-position: -16px -308px; } .SpLock { background-position: -32px -308px; } .SpRoundAlert { background-position: -48px -308px; } .SpTriangleAlert { background-position: -64px -308px; } .SpBookmarks, .SpStar { background-position: -80px -308px; } .SpSearch { background-position: 0 -324px; } .SpTrash { background-position: -16px -324px; } .SpUser { background-position: -32px -324px; } .SpRefresh { background-position: -48px -324px; } .SpPencil { background-position: -64px -324px; } .SpPlus { background-position: -80px -324px; } /* 16px Sprites Black */ .SpDashboard, .SpCog { background-position: 0 -84px; } .SpSettings { background-position: -16px -84px; } .SpNotifications, .SpGlobe { background-position: -32px -84px; } .SpSignOut, .SpExit { background-position: -48px -84px; } .SpMarker { background-position: -64px -84px; } .SpDocuments { background-position: -80px -84px; } .SpInbox, .SpEnvelope { background-position: 0 -100px; } .SpInmail { background-position: -16px -100px; } .SpRoundBubble { background-position: -32px -100px; } .SpSquareBubble { background-position: -48px -100px; } .SpRoundBubbles { background-position: -64px -100px; } .SpSquareBubbles { background-position: -80px -100px; } .SpTag { background-position: 0 -116px; } .SpWrite { background-position: -16px -116px; } .SpLock { background-position: -32px -116px; } .SpRoundAlert { background-position: -48px -116px; } .SpTriangleAlert { background-position: -64px -116px; } .SpBookmarks, .SpStar { background-position: -80px -116px; } .SpSearch { background-position: 0 -132px; } .SpTrash { background-position: -16px -132px; } .SpUser { background-position: -32px -132px; } .SpRefresh { background-position: -48px -132px; } .SpPencil { background-position: -64px -132px; } .SpPlus { background-position: -80px -132px; } /* 16px Sprites Black Transparent */ .SpDashboard, .SpCog { background-position: 0 -148px; } .SpSettings { background-position: -16px -148px; } .SpNotifications, .SpGlobe { background-position: -32px -148px; } .SpSignOut, .SpExit { background-position: -48px -148px; } .SpMarker { background-position: -64px -148px; } .SpDocuments { background-position: -80px -148px; } .SpInbox, .SpEnvelope { background-position: 0 -164px; } .SpInmail { background-position: -16px -164px; } .SpRoundBubble { background-position: -32px -164px; } .SpSquareBubble { background-position: -48px -164px; } .SpRoundBubbles { background-position: -64px -164px; } .SpSquareBubbles { background-position: -80px -164px; } .SpTag { background-position: 0 -180px; } .SpWrite { background-position: -16px -180px; } .SpLock { background-position: -32px -180px; } .SpRoundAlert { background-position: -48px -180px; } .SpTriangleAlert { background-position: -64px -180px; } .SpBookmarks, .SpStar { background-position: -80px -180px; } .SpSearch { background-position: 0 -196px; } .SpTrash { background-position: -16px -196px; } .SpUser { background-position: -32px -196px; } .SpRefresh { background-position: -48px -196px; } .SpPencil { background-position: -64px -196px; } .SpPlus { background-position: -80px -196px; } /* ============================= Embedded Discussion & Comment Customizations */ body.embed #Content { float: none; margin: 0; width: auto; } body.embed .InformMessages { display: none; } .EmbedCommentForm { padding: 0; border-top: 1px solid $white; } .EmbedCommentForm .TextBox { width: 100%; height: 50px; min-height: 50px; padding: 3px; border-radius: 0; font-size: 12px; } .Embed .Buttons { font-size: 11px; text-align: right; } .EmbedCommentForm .Author { display: inline-block; font-size: 11px; color: $grey-3; padding: 0 8px 0 0; } .Embed .CommentForm input.Button { font-size: 12px; } .Embed .Foot { background: none; border: none; text-align: right; } .Embed .MorePager a { background: none; border: none; padding: 0; } .Embed .MorePager a.Loading, .Embed .MorePager a.Loading:hover { text-decoration: none !important; } .Embed .Administration { display: none; } .Embed .MorePager { padding: 2px 8px 4px; } /* ============================================================ Regarding */ .RegardingEvent { padding: 10px; position: relative; padding-left: 38px; color: $white !important; text-shadow: 0 1px 1px $black; text-align: left !important; border-radius: 4px; background: $black !important; background: rgba(0, 0, 0, 0.7) !important; } .RegardingEvent span.InformSprite { top: 5px; left: 5px; } .RegardingEvent a.ReportedUser, .RegardingEvent a.ReportingUser { color: $blue-a; } .RegardingEvent .ReportedReason { padding: 5px; font-style: italic; } .RegardingEvent .RegardingTime { font-size: 9px; text-transform: uppercase; color: $grey-m; } .RegardingActions { position: relative; overflow: hidden; height: 100%; padding: 0 10px; margin-bottom: 10px; } .RegardingActions .ActionButton { padding: 0 5px 2px 5px; display: inline-block; margin-right: 4px; color: $white !important; text-shadow: 0 1px 1px $black; text-align: left !important; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background: $black !important; background: rgba(0, 0, 0, 0.7) !important; } .RegardingActions .ActionButton a { color: $blue-a; font-size: 10px; text-transform: uppercase; } .PhotoWrap { position: relative; display: inline-block; line-height: 1; } .ProfilePhoto { height: 40px; width: 40px; vertical-align: bottom; } .ProfilePhotoSmall { height: 24px; width: 24px; vertical-align: bottom; } .ProfilePhotoMedium { height: 40px; width: 40px; } .ProfilePhotoLarge { width: 200px; } .PhotoGrid { line-height: 32px; margin: 2px -2px; } .PhotoGrid img { margin: 2px; vertical-align: text-bottom; height: 32px; width: 32px; } .PhotoGridSmall { line-height: 24px; margin: 1px -1px; } .PhotoGridSmall img { margin: 1px; vertical-align: text-bottom; height: 24px; width: 24px; } .CategoryPhoto { max-height: 64px; } .PhotoGrid .UserPicture { display: inline-block; } .PhotoGrid .UserPicture * { vertical-align: bottom; } .PhotoGrid .Username { display: inline-block; line-height: 32px; } .PhotoGridSmall .Username { line-height: 24px; } /* Reaction Buttons */ .Reactions { position: relative; font-size: 11px; line-height: 18px; margin: 15px 0 0; } .ReactButton { display: inline-block; margin: 0 2px; line-height: 18px; vertical-align: top; } .Reactions > a.React { margin: 0 10px; padding: 0; } .Reactions > a.React > .ReactSprite { margin-right: 2px; } .Flyout.Flags { top: 25px; z-index: 997; } .Reactions .FlagMenu .MenuItems .ReactButton { margin: 0; padding: 0 15px; } .SpEditProfile { background-image: url("images/sprites-14-000000.png"); background-position: -245px -29px; } .Handle > .SpEditProfile, .NavButton > .SpEditProfile { display: inline-block; width: 14px; height: 14px; line-height: 14px; vertical-align: top; } /* === Reaction Sprites === */ .ReactSprite { display: inline-block; width: 16px; height: 16px; margin-right: .3em; line-height: 18px; vertical-align: top; background-image: url("images/sprites-14-000000.png"); background-position: 16px 16px; background-repeat: no-repeat; } input + .ReactSprite { vertical-align: middle; } .ReactEverything { background-position: -197px -53px; } .ReactAwesome { background-position: -269px -6px; } .ReactFeature { background-position: -280px -60px; } .ReactFlag { background-position: -54px -52px; } .ReactInsightful { background-position: -149px -6px; } .ReactOffTopic { background-position: -173px -6px; } .ReactAbuse { background-position: -6px -52px; } .ReactSpam { background-position: -125px -6px; } .ReactTroll { background-position: -101px -6px; } .ReactPromote { background-position: -50px -29px; } .ReactDisagree { background-position: -28px -5px; } .ReactAgree { background-position: -4px -5px; } .ReactDislike { background-position: -28px -28px; } .ReactLike { background-position: -4px -31px; } .ReactDown { background-position: -220px -29px; } .ReactUp { background-position: -195px -30px; } .ReactWTF { background-position: -76px -5px; } .ReactLOL { background-position: -52px -5px; } .ReactQuote { background-position: -316px -6px; } .ReactInfraction { background-position: -100px -53px; } .ReactAccept { background-position: -6px -102px; } .ReactReject { background-position: -342px -6px; } .ReactFacebook { background-position: -29px -124px; } .ReactTwitter { background-position: -53px -124px; } .ReactGooglePlus { background-position: -77px -124px; } .ReactMessage { background-position: -101px -102px; } .ReactWarn { background-position: -222px -6px; } /* Switch to the white icons when hovering over a menuitem sprite */ .MenuItems a:hover .ReactSprite, .MenuItems a:hover .Sprite { background-image: url('https://images.v-cdn.net/sprites-14-fff.png'); } /* Switch to bordered icons for user reaction overlays */ .UserReactionWrap .ReactSprite { background-image: url('https://images.v-cdn.net/sprites-14-000-bordered.png'); } .ActionBlock { margin: 15px 0 5px; font-style: italic; } /* Embedded Video Preview Hide/Reveal */ .Video.YouTube .VideoPlayer { display: none; } .Video.YouTube .VideoPreview { cursor: pointer; position: relative; max-width: 100%; display: inline-block; height: auto; } .Video.YouTube .VideoPreview:after { background: url('https://images.v-cdn.net/youtube-overlay-button.png') 0 -44px no-repeat transparent; position: absolute; display: block; content: ''; top: 50%; left: 50%; margin-left: -30px; margin-top: -22px; height: 44px; width: 60px; } .Video.YouTube .VideoPreview:hover:after { background-position: 0 0; } .Video.YouTube .VideoPreview img { max-width: 100%; height: auto !important; } /* For vimeo/other embeds */ .Section-Discussion .Message iframe, .Section-BestOf iframe { max-width: 100%; } .Section-BestOf iframe { height: auto; } /* Media */ .Media { margin: 5px 0 10px; } .Media, .Media .Media-Body { overflow: hidden; zoom: 1; } .Media .Img { float: left; margin-right: 10px; } .Media .Img img { display: block; } .Media .ImgExt { float: right; margin-left: 10px; } .Item h2 + .Media, .Item h3 + .Media { margin-top: 0; } /* Overrides */ .Hidden { display: none; } /* Screen readers only, as part of Section 508 compliance. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Token input */ ul.token-input-list { box-sizing: border-box; border: 1px solid $grey-b; color: $grey-1; font-size: 15px; margin: 0 !important; padding: 3px; overflow: hidden; height: auto !important; height: 1%; width: 100%; cursor: text; min-height: 1px; z-index: 999; background-color: $white; list-style-type: none; } ul.token-input-list-focus, ul.token-input-list-focus input { background: $white-2; } ul.token-input-list li input { border: 0; width: 100px; padding: 3px 3px; margin: 2px 0; } li.token-input-token { overflow: hidden; height: auto !important; height: 1%; margin-right: 3px; padding: 1px 5px; line-height: 20px; cursor: default; border: 1px solid $grey-9; border-radius: 2px; float: left; font-size: 13px; } li.token-input-token.not-allowed { background-color: $red-4; color: $red-2; border: 1px solid $red-3; } li.token-input-token.not-allowed span { color: $red-2; } li.token-input-token p { display: inline; padding: 0; margin: 0; line-height: 1.4; vertical-align: middle; } li.token-input-token span { margin-left: 5px; font-weight: bold; cursor: pointer; font-family: arial; font-size: 13px; vertical-align: middle; } li.token-input-selected-token { background-color: $grey-5; } li.token-input-selected-token.not-allowed { background-color: $red-1; color: $white; border: 1px solid $red-3; } li.token-input-selected-token.not-allowed span { color: $white; } li.token-input-input-token { float: left; } div.token-input-dropdown { position: absolute; background-color: $white; overflow: hidden; border: 1px solid $grey-b; border-top-width: 0; cursor: default; z-index: 1001; padding: 0 3px; } div.token-input-dropdown p { margin: 0; padding: 5px; } div.token-input-dropdown ul { margin: 0 -3px !important; padding: 0; } div.token-input-dropdown ul li { background-color: $white; padding: 3px 6px; } div.token-input-dropdown ul li.token-input-dropdown-item { background-color: $white; } div.token-input-dropdown ul li.token-input-dropdown-item2 { background-color: $white; } div.token-input-dropdown ul li em { font-weight: bold; font-style: none; } div.token-input-dropdown ul li.token-input-selected-dropdown-item { background-color: $grey-5; } /** * At mentions in core, moved from advanced editor. */ .atwho-view { font: normal 14px/1.7em 'lucida grande', 'Lucida Sans Unicode', tahoma, sans-serif; position: absolute; top: 0; left: 0; display: none; margin-top: 18px; background: $white; min-width: 120px; z-index: 100010; /* So high because a client actually had 99999 in a theme */ border-radius: 2px; overflow: hidden; box-shadow: 0 5px 10px $grey-5; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .atwho-view .cur { background: $vanilla-blue; color: $white; } .atwho-view .cur small { color: $white; } .atwho-view strong { color: $vanilla-blue; } .atwho-view .cur strong { color: $white; font-weight: bold; } .atwho-view ul { list-style: none; padding: 0; margin: auto; } .atwho-view ul li { display: block; border-bottom: 1px solid $grey-5; border-bottom: 1px solid rgba(0, 0, 0, 0.05); cursor: pointer; padding: 0 5px; line-height: 34px; } .atwho-view ul li:last-child { border: 0; } .atwho-view small { font-size: smaller; color: $grey-3; font-weight: 400; } .at-suggest-emoji .emoji-wrap { display: inline-block; width: 34px; overflow: hidden; line-height: 34px; text-align: center; vertical-align: top; } .at-suggest-emoji .emoji-wrap > * { display: inline-block; line-height: 34px; } .at-suggest-emoji .emoji-name { display: inline-block; line-height: 34px; vertical-align: top; } /** * Text formatting alignment */ .AlignLeft { margin: 0 10px 10px 0; text-align: left; } .AlignCenter, .bbcode_center { margin: 0 auto; display: block; text-align: center; } .AlignRight { margin: 0 0 10px 10px; text-align: right; } // BBCode editor doesn't insert breaks after aligned items // So they don't get or get margins .bbcode_left { text-align: left; } .bbcode_right { text-align: right; } /** * Socialcons */ .SocialIcon { display: inline-block; overflow: hidden; font-weight: bold; line-height: 24px; color: $white !important; text-decoration: none; vertical-align: middle; } .SocialIcon.HasText { min-width: 210px; line-height: 32px; } .SocialIcon .Icon { width: 24px; height: 24px; } .SocialIcon.HasText .Icon { width: 32px; height: 32px; } .SocialIcon .Text { padding: 0 15px 0 10px; border-left: 1px solid $grey-5; border-left: 1px solid rgba(0, 0, 0, 0.1); } .SocialIcon { transition: background-color 100ms; } .SocialIcon .Icon, .SocialIcon .Text { display: block; float: left; vertical-align: top; } .SocialIcon .Icon { background-image: url('images/socialcons-small.png'); background-repeat: no-repeat; background-size: 24px 192px; } .SocialIcon.HasText .Icon { background-size: 32px 256px; background-image: url('images/socialcons.png'); } @media (min-device-pixel-ratio: 2) { .SocialIcon .Icon { background-image: url('images/socialcons-small@2x.png'); } .SocialIcon.HasText .Icon { background-image: url('images/socialcons@2x.png'); } } .SocialIcon-Facebook .Icon { background-position: 0 -24px; } .SocialIcon-Facebook.HasText .Icon { background-position: 0 -32px; } .SocialIcon-Facebook, .SocialIcon-Facebook.HasText .Icon { background-color: $facebook; } .SocialIcon-Facebook:hover { background-color: $facebook-hover; } .SocialIcon-Twitter .Icon { background-position: 0 -144px; } .SocialIcon-Twitter.HasText .Icon { background-position: 0 -192px; } .SocialIcon-Twitter, .SocialIcon-Twitter.HasText .Icon { background-color: $twitter; } .SocialIcon-Twitter:hover { background-color: $twitter-hover; } .SocialIcon:not(.SocialIcon-OpenID).SocialIcon-Google, .SocialIcon-Google { background-color: $google; &:hover { background-color: $google-hover; } &:not(.SocialIcon-OpenID) .Icon, .Icon { background-position: center; background-color: $white; &:before { content: ''; } background-size: cover; background-image: url(https://images.v-cdn.net/sso/google-border.svg); } .Text { border: none; } } .SocialIcon-OpenID .Icon { background-position: 0 -120px; } .SocialIcon-OpenID.HasText .Icon { background-position: 0 -160px; } .SocialIcon-OpenID, .SocialIcon-OpenID.HasText .Icon { background-color: $openid; } .SocialIcon-OpenID:hover { background-color: $openid-hover; } .SocialIcon-LinkedIn .Icon { background-position: 0 -96px; } .SocialIcon-LinkedIn.HasText .Icon { background-position: 0 -128px; } .SocialIcon-LinkedIn, .SocialIcon-LinkedIn.HasText .Icon { background-color: $linkedin; } .SocialIcon-LinkedIn:hover { background-color: $linkedin-hover; } .SocialIcon-Disqus .Icon { background-position: 0 0; } .SocialIcon-Disqus, .SocialIcon-Disqus.HasText .Icon { background-color: $disqus; } .SocialIcon-Disqus:hover { background-color: $disqus-hover; } .SocialIcon-GitHub .Icon { background-position: 0 -48px; } .SocialIcon-GitHub.HasText .Icon { background-position: 0 -64px; } .SocialIcon-GitHub, .SocialIcon-GitHub.HasText .Icon { background-color: $github; } .SocialIcon-GitHub:hover { background-color: $github-hover; } /* Woe unto whoever caused this */ .MeBox-SignIn.Inline .SocialIcon { display: inline-block; } /* # Attachments Components for Attachments. Styleguide Attachments */ /* ## Utilities Styleguide Attachments.Utilities */ .pull-right { float: right !important; } .pull-left { float: left !important; } /* ## Definition lists Styleguide Definitions */ .item-attachment dl { margin-top: 0; margin-bottom: 20px; } .item-attachment dt { font-weight: 700; } .item-attachment dd { margin-left: 0; } .item-attachment dt, .item-attachment dd { line-height: 20px; } /* Horizontal layout */ .item-attachment .dl-horizontal dt { float: left; width: 160px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-attachment .dl-horizontal dd { margin-left: 180px; } /* Column layout */ .item-attachment .dl-columns { overflow: hidden; margin-right: -10px; margin-left: -10px; } .item-attachment .dl-columns:before, .item-attachment .dl-columns:after { display: table; content: " "; } .item-attachment .dl-columns:after { clear: both; } .item-attachment .dl-columns dt { width: 20%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-attachment .dl-columns dd { width: 30%; } .item-attachment .dl-columns dt, .item-attachment .dl-columns dd { float: left; padding: 0 10px; box-sizing: border-box; } /* ## Media objects Styleguide Media */ .item-attachment .media { overflow: hidden; } .item-attachment .media:before, .item-attachment .media:after { display: table; content: " "; } .item-attachment .media:after { clear: both; } .item-attachment .media > .pull-left { margin-right: 10px; } .item-attachment .media > .pull-right { margin-right: 10px; } .item-attachment .media-body { overflow: hidden; zoom: 1; } .item-attachment .media-object { display: block; } .item-attachment .media-heading { margin: 0 0 5px !important; /* Hack */ } .item-attachment .media-list { padding-left: 0; list-style: none; } /* ## Alerts .alert-info - Informative alert .alert-warning - Warning alert .alert-danger - Danger alert Styleguide Alerts */ .item-attachment .alert { padding: 12px; margin-bottom: 20px; color: $grey-k; background-color: $white-5; border-color: $white-5; border-style: solid; border-width: 1px; border-radius: 2px; } .item-attachment .alert a { color: $grey-n; } .item-attachment .alert hr { border-top-color: $blue-d; } .item-attachment .alert h4 { margin-top: 0; color: inherit; } .item-attachment .alert p, .item-attachment .alert ul { margin-bottom: 0; } .item-attachment .alert p + p { margin-top: 5px; } /* Informative alert */ .item-attachment .alert-info { color: $grey-k; background-color: $yellow-4; border-color: $yellow-4; } .item-attachment .alert-info a { color: $grey-n; } .item-attachment .alert-info hr { border-top-color: $yellow-5; } /* Warning alert */ .item-attachment .alert-warning { color: $grey-k; background-color: $yellow-6; border-color: $yellow-6; } .item-attachment .alert-warning a { color: $grey-n; } .item-attachment .alert-warning hr { border-top-color: $yellow-7; } /* Danger alert */ .item-attachment .alert-danger { color: $white; background-color: $red-5; border-color: $red-5; } .item-attachment .alert-danger a { color: $grey-o; } .item-attachment .alert-danger hr { border-top-color: $red-6; } /* ## Base item Styleguide Item */ .item-attachment .item-heading { margin-bottom: 0 !important; /* Hack */ font-weight: 600; } .item-attachment .item-body { overflow: hidden; } .item-attachment .item-body:before, .item-attachment .item-body:after { display: table; content: " "; } .item-attachment .item-body:after { clear: both; } .item-attachment .item-body > *:first-child { margin-top: 0; } .item-attachment .item-body > *:last-child { margin-bottom: 0; } .item-attachment .item-header + .item-body { margin-top: 5px; } .item-attachment .item-meta { font-size: 12px; line-height: 20px; color: $grey-9; } .item-attachment .item-meta > span { padding-right: 5px; padding-left: 5px; } .item-attachment .item-meta > span:first-child { padding-left: 0; } .item-attachment .item-meta > span:last-child { padding-right: 0; } /* ## Item attachments Styleguide Attachments */ .item-attachment { margin-top: 20px; } .item-attachment .alert { margin-bottom: 0; } .item-attachment .media-object .icon { display: block; min-width: 32px; font-size: 32px; text-align: center; line-height: 1; } /** * Twitter card embed. */ .twitter-card-preload { opacity: 0; } .twitter-card-loaded { transition: all 0.2s ease; opacity: 1; } /* Effects */ @keyframes highlight { 0% {background-color: $yellow-8;} 10% {background-color: $yellow-8;} } .highlight-effect{ animation: highlight .8s; } /* Groups section tweaks */ .Groups.Section-DiscussionList .Group-Header, .Section-Group.Section-Discussion .Group-Header { margin-bottom: 0; } .Groups.Section-DiscussionList #Panel, .Section-Group.Section-Discussion #Panel { float: none; position: absolute; } .Groups.Section-DiscussionList .HomepageTitle { display: none; } // Special case for editor compatibility. The Bootstrap 3 derived themes have .InputBox that we can use // for the border style. If we set a default in style-compat.scss, it won't inherit the styles from // Bootstrap 3, so we need to set it before so it gets overwritten. .InputBox { background: #fff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.4); } /* * These styles apply ONLY to the header and footer assets. */ * { padding: 0; margin: 0; box-sizing: border-box; } .footer { background: #f5f5f6; color: #555a62; font-size: 14px; line-height: 1.5; padding: 18px 0; } .footer-wrap { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin: 0 auto; } .footer a { color: #d63d00; } .footer a:hover { color: #d63d00; } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: -3px; } .footer-col { padding: 0 3px; } .footer-col-copyRight { justify-content: flex-start; } .footer-col-logo { justify-content: flex-end; } .footer-col-copyRight, .footer-col-logo { flex: 1; display: flex; } .logo { width: 120px; height: 28px; opacity: 0.6; } @media screen and (max-width: 768px) { .footer-row { display: block; } .footer-col { width: 100%; text-align: center; margin: 6px 0; } .footer-col:first-child { margin-top: 0; } .footer-col:last-child { margin-bottom: 0; } .footer-col-copyRight, .footer-col-logo { justify-content: center; } .logo { margin: 0 auto; } } /*# sourceMappingURL=styles.css.map */