/***************************************************************************************** ****************************************************************************************** ** ** ** iprotus.com / iprotus.eu / iprotus.ch ** ** CSS Stylesheet ** ** ** ** Copyright 2011-2014 iProtus ** ** http://www.iprotus.com ** ** ** ****************************************************************************************** ** ** ** Thanks particularly to: ** ** ** ** Shay Howe, http://learn.shayhowe.com/html-css/box-model ** ** for an excellent primer on CSS, ** ** ** ** Chris Coyier on @media types in CSS3 to make CSS responsive ** ** https://css-tricks.com/css-media-queries/ ** ** ** ** Inayaili de Leon for pointing out the finer details of CSS selectors, here: ** ** http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/ ** ** ** ** Noah Stokes, http://alistapart.com/article/css-positioning-101 ** ** for cutting a few basics out in an informative and entertaining way, ** ** ** ** and to W3C for their excellent validators: ** ** CSS: http://jigsaw.w3.org/css-validator/ ** ** HTML: http://validator.w3.org/ ** ** ** ** Mobile optimization guides: https://varvy.com/mobile/ ** ** and https://varvy.com/mobile/legible-font-size.html, ** ** also https://viljamis.com/2012/scaling-with-em-units/ ** ** ** ** And last but not least, this invaluable info on measuring HTML elements ** ** http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx ** ** ** ****************************************************************************************** *****************************************************************************************/ /***************************************************************************************** ** CSS reset ** *****************************************************************************************/ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; border: 0; padding: 0; vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} table {border-collapse: collapse; border-spacing: 0;} /* Stretch viewport to full width and float transparent scrollbars above the rendered page. */ /*@-webkit-viewport {width: device-width;} @-moz-viewport {width: device-width;} @-ms-viewport {width: device-width;} @viewport {width: device-width;} */ /* Media scaling (inspired from https://viljamis.com/2012/scaling-with-em-units/ */ * {margin: 0; border: 0; padding: 0;} html {min-width: 300px;} body {font-size: 80%;} /* Default */ @media (min-width: 400px) {body {font-size: 80%;}} @media (min-width: 600px) {body {font-size: 90%;}} @media (min-width: 900px) {body {font-size: 95%;}} @media (min-width: 1300px) {body {font-size: 100%;}} @media (min-width: 1800px) {body {font-size: 110%;}} @media (min-width: 2400px) {body {font-size: 120%;}} /***************************************************************************************** ** General priming. ** ** Textalign in DIV and BODY in order to cope with old browsers not centering properly. ** ** See http://www.maxdesign.com.au/presentation/center/ and a thanks to him. ** ** Includes (now possibly redundant) old priming styles. ** ** Font-size from http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/ ** *****************************************************************************************/ body { color: #BBBBBB; background-color: #111111; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; cursor: default; line-height: 1.2; /* Do not use a unit here, see https://developer.mozilla.org/en-US/docs/CSS/line-height */ } div {text-align: left; font-family: Verdana, Arial, Helvetica, sans-serif;} table {text-align: left; font-family: Verdana, Arial, Helvetica, sans-serif;} td {text-align: left; font-family: Verdana, Arial, Helvetica, sans-serif;} /***************************************************************************************** ** Text and formatting ** *****************************************************************************************/ h1 {font-weight: bold; font-size: 2em; color: #BBBB60;} h2 {font-weight: bold; font-size: 1.7em; color: #BBBB70;} h3 {font-weight: bold; font-size: 1.5em; color: #BBBB80;} h4 {font-weight: bold; font-size: 1.3em; color: #BBBB90;} h5 {font-weight: bold; font-size: 1.2em; color: #BBBBA0;} h6 {font-weight: bold; font-size: 1.1em; color: #BBBBB0;} p {font-weight: normal; font-size: 1.0em;} /***************************************************************************************** ** Tables and lists ** *****************************************************************************************/ table {margin: 0; padding: 0;} tr {margin: 0; padding: 0;} th {margin: 0; padding: 0;} td {margin: 0; padding: 0;} /***************************************************************************************** ** Links and related ** *****************************************************************************************/ a:link { color: rgb(225, 225, 0); text-decoration: none; cursor: pointer; transition: color 0.3s; -webkit-transition: color 0.3s; /* Safari */ } a:active {color: rgb(255, 255, 196);} a:visited {color: rgb(225, 225, 0);} a:hover {color: rgb(255, 255, 196);} /***************************************************************************************** ** Misc. ** *****************************************************************************************/ .Hr {left: 2px; right: 2px; height: 1px; display: block; border-width: 1px 1px 1px 1px; margin: 15px 2px 15px 2px; clear: both; border-color: #777777; background-color: #777777;} .Bold {font-weight: bold;} .Italic {font-style: italic;} .Underline {text-decoration: underline;} .TableCell {display: table-cell;} .TableCellCenter {text-align: center; vertical-align: middle;} .TextHCenter {text-align: center;} .TextVCenter {display: table-cell; vertical-align: middle;} .TextVAlign {vertical-align: baseline;} .TextVTopAlign {vertical-align: top;} .TextNoWrap {white-space: nowrap;} .TextFullWidth {width: 100%;} .TextFullHeight {height: 100%;} .TextFullSize {width: 100%; height: 100%;} .FitHWidth {left: 0px; right: 0px;} .FullPageWidth {clear: both; width: 100%; box-sizing: border-box;} .FullPageHeight {height: 100%; box-sizing: border-box;} .FullPageSize {clear: both; width: 100%; height: 100%; height: 100vh; box-sizing: border-box;} .ViewportFit {position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; box-sizing: border-box;} .Clear {clear: both;} .FloatLeft {float: left;} .FloatRight {float: right;} .Absolute {position: absolute;} .Fixed {position: fixed;} .Relative {position: relative;} .NoDisplay {display: none;} .NoVisibility {visibility: hidden;} .HoverPointer {cursor: pointer;} .Z5 {z-index: 5;} /* Body and content */ .Z10 {z-index: 10;} /* Header and menus */ .Z15 {z-index: 15;} /* Cookie warning */ .Z20 {z-index: 20;} /* Dialog boxes */ .Z25 {z-index: 25;} /* Error messages */ .Z30 {z-index: 30;} /* Expiry */ .Z35 {z-index: 35;} /* Debug buttons */ .Z40 {z-index: 40;} /* Async postback wait overlay */ .RoundLeftBottom10 {border-radius: 0 0 0 0.625em;} .RoundRightBottom10 {border-radius: 0 0 0.625em 0;} .RoundBothBottom10 {border-radius: 0 0 0.625em 0.625em;} .RoundLeftBottom20 {border-radius: 0 0 0 1.25em;} .RoundRightBottom20 {border-radius: 0 0 1.25em 0;} .RoundBothBottom20 {border-radius: 0 0 1.25em 1.25em;} /****************************************************************************************/ .TestTableBorder {border: 3px solid #00FFFF;} .TestTableBorder th {border: 3px solid #FF00FF;} .TestTableBorder td {border: 3px solid #FFFF00;} /****************************************************************************************/ .NoTextSelection { /* See also Slf.Js.EnableUserSelection() function in SlfContentPage.js CSS values: none | text | toggle | element | elements | all | inherit Needed too: */ -webkit-user-select: none; /* Chrome all & Safari all */ -khtml-user-select: none; -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ -o-user-select: none; /* Opera ... maybe */ user-select: none; /* see http://www.w3.org/TR/2000/WD-css3-userint-20000216 */ } /****************************************************************************************/ /* For older IEs */ body { /* scrollbar-base-color: rgb(0, 0, 0); */ scrollbar-face-color: rgb(96, 64, 64); scrollbar-shadow-color: rgb(96, 64, 64); scrollbar-highlight-color: rgb(96, 64, 64); /* scrollbar-3dlight-color: #00FF00; scrollbar-darkshadow-color: #00FF00; */ scrollbar-track-color: rgb(44, 44, 44); scrollbar-arrow-color: rgb(187, 187, 187); } /* TODO: For Chrome, Safari and Edge, see https://css-tricks.com/custom-scrollbars-in-webkit/ */ ::-webkit-scrollbar {width: 0.5em;} ::-webkit-scrollbar-button {background-color: rgb(96, 64, 64); color: rgb(187, 187, 187);} ::-webkit-scrollbar-track {background-color: rgb(44, 44, 44);} ::-webkit-scrollbar-track-piece {background-color: rgb(44, 44, 44);} ::-webkit-scrollbar-thumb {background-color: rgb(96, 64, 64);} ::-webkit-scrollbar-corner {} ::-webkit-resizer {} /***************************************************************************************** ** ** ** Hack to vertically center elements in a DIV also in IE. According to specs standards ** ** a simple style="display: table-cell; vertical-align: middle;" should suffice, but ** ** alas, not with IE, the usual suspect :p ** ** ** ** A lot of thanks for Bruno Fassino for this, saved me many hours :-) ** ** See: http://www.brunildo.org/test/img_center.html ** ** ** ** To use, insert an empty span as first child element of the "vertical-align: middle" ** ** DIV with the contents to be vertically centered. As in: ** ** ** **
** ** Blablabla... ** **
** ** ** ** --- or --- ** ** ** **
** ** Blablabla... ** **
** ** ** ** To center one DIV inside another DIV, use this constallation: ** ** ** ** ** ** ** **
** **
** ** ... content here... ** **
** **
** ** ** *****************************************************************************************/ .IeVCenterLayoutHack { width: 1px; height: 100%; display: inline-block; vertical-align: middle; } /***************************************************************************************** ** ** ** Hack to horizontally distribute elements. First, give the elements, for example ** ** DIVs, the styles: "display: inline-block; text-align: justify;". Then add a single ** ** span following the elements: "". found here: ** ** http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs. ** ** ** *****************************************************************************************/ .EvenSpaceHack { width: 100%; display: inline-block; font-size: 0; line-height: 0 } /***************************************************************************************** ** ** ** Brilliant little gem how to obfuscate an email address verbatim in the markup. From ** ** https://matt.berther.io/2009/01/15/hiding-an-email-address-from-spam-harvesters/. ** ** ** *****************************************************************************************/ .ReverseTextHack { unicode-bidi: bidi-override; direction: rtl; } /***************************************************************************************** ** ** ** Rotating image ** ** ** *****************************************************************************************/ @-webkit-keyframes RotatingImageFrames360 { 100% {-webkit-transform: rotate(360deg);} } @-moz-keyframes RotatingImageFrames360 { 100% {-moz-transform: rotate(360deg);} } @keyframes RotatingImageFrames360 { 100% { -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes RotatingImageFrames45 { 100% {-webkit-transform: rotate(45deg);} } @-moz-keyframes RotatingImageFrames45 { 100% {-moz-transform: rotate(45deg);} } @keyframes RotatingImageFrames45 { 100% { -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } } /***************************************************************************************** ** ** ** Debug buttons ** ** ** *****************************************************************************************/ /* Code-behind hide these if the user has no debug role or isn't logged in. */ .DebugButtons { display: block; position: fixed; z-index: 35; height: 30px; top: 30%; left: 30%; border: 5px solid rgba(0, 0, 0, 0.0); background-color: rgba(0, 0, 0, 0.5); z-index: 35; opacity: 0.1; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; /* Safari */ } .DebugButtons:hover {opacity: 1.0;} .DebugButton { display: inline-block; width: 20px; height: 19px; margin: 5px; padding-top: 1px; font-size: 14px; font-weight: bold; text-align: center; color: White; background-color: Red; float: left; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; /* Safari */ } .DebugButton:hover {opacity: 1.0;} /***************************************************************************************** ****************************************************************************************** ** ** ** ** ** MasterPage related ** ** ** ** ** ****************************************************************************************** *****************************************************************************************/ /***************************************************************************************** ** ** ** Header ** ** ** *****************************************************************************************/ .MasterHeader { position: fixed; top: 0px; left: 0px; right: 0px; border-bottom: 0.25em solid rgb(128, 0, 0); padding: 0.5em; background-color: rgb(44, 33, 33); white-space: nowrap; clear: both; } .MasterHeaderBar /* table */ { width: 100%; height: 3em; /* Keep same height as class MasterContentTop */ white-space: nowrap; color: rgb(225, 225, 225); } .MasterHeaderTitle /* td */ { padding-left: 0.5em; font-size: 1.1em; font-weight: bold; text-align: left; vertical-align: middle; } .MasterHeaderMenus /* td */ { text-align: right; vertical-align: middle; white-space: nowrap; } .MasterHeaderTitleLink /* span */ { color: rgb(225, 225, 0); cursor: pointer; transition: color 0.3s; -webkit-transition: color 0.3s; /* Safari */ } .MasterHeaderTitleLink:hover { color: rgb(255, 255, 196); } /***************************************************************************************** ** Menus ** *****************************************************************************************/ .MasterMenuTriggerHidden { width: 2em; height: 2em; padding: 0.5em; cursor: pointer; transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterMenuTriggerHidden:hover { background-color: rgb(128, 0, 0); } .MasterMenuTriggerShown { width: 2em; height: 2em; padding: 0.5em; background-color: rgb(128, 0, 0); cursor: pointer; } .MasterMenuTriggerImage /* img */ { width: 2em; height: 2em; } .MasterMenuLanguageFlag /* img */ { width: 1.5em; height: 1.5em; padding: 0.25em; } .MasterMenuPopup { border: 0.25em solid rgb(128, 0, 0); padding: 0.5em; background-color: rgb(44, 33, 33); } .MasterMenuScrollableSection { max-height: 12em; overflow-y: scroll; } /****************************************************************************************/ .MasterMenuItem { clear: both; padding: 0.5em 1em 0.5em 0.5em; cursor: pointer; transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterMenuItem:hover { background-color: rgb(128, 0, 0); } .MasterMenuItemStuck { clear: both; padding: 0.5em 1em 0.5em 0.5em; background-color: rgb(55, 55, 55); cursor: pointer; transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterMenuItemStuck:hover { background-color: rgb(128, 0, 0); } .MasterMenuItemDisabled { clear: both; padding: 0.5em 1em 0.5em 0.5em; opacity: 0.3; } .MasterMenuItemImage { padding-right: 1em; vertical-align: middle; } .MasterMenuItemImage img { width: 2em; height: 2em; vertical-align: middle; } .MasterMenuItemOperators { height: 2em; padding-right: 0.5em; vertical-align: middle; } .MasterMenuItemOperators img { width: 1em; height: 1em; clear: both; } .MasterMenuItemOperators img:hover { background-color: rgb(255, 0, 0); } .MasterMenuItemText { font-weight: bold; white-space: nowrap; vertical-align: middle; margin-bottom: 0.1em; } .MasterMenuItemText span { display: block; clear: both; font-size: 0.7em; font-weight: normal; white-space: nowrap; } .MasterMenuItemSpacer { clear: both; height: 2px; margin: 0.25em 0; background-color: rgb(128, 128, 128); } /****************************************************************************************/ .MasterMenuLanguageItem { width: 12em; /* Be sure no language string is longer, or a scrollbar appears on the bottom (looks ugly) */ padding-right: 0.5em; /* A bit of space between the item and the vertical scrollbar */ max-height: 12em; overflow: auto; overflow-x: hidden; overflow-y: auto; } .MasterMenuLanguageItemNormal { clear: both; white-space: nowrap; padding: 0.25em 0.5em; cursor: pointer; transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterMenuLanguageItemNormal:hover { background-color: rgb(128, 0, 0); } .MasterMenuLanguageItemStuck { clear: both; white-space: nowrap; padding: 0.25em 0.5em; background-color: rgb(55, 55, 55); cursor: pointer; transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterMenuLanguageItemStuck:hover { background-color: rgb(128, 0, 0); } .MasterMenuLanguageItemDisabled { clear: both; white-space: nowrap; padding: 0.25em 0.5em; opacity: 0.3; } .MasterMenuLanguageItemFlag { width: 1.5em; height: 1.5em; vertical-align: middle; } .MasterMenuLanguageItemText { margin: 0 0.5em 0 0.5em; font-weight: bold; white-space: nowrap; vertical-align: middle; } /***************************************************************************************** ** ** ** Dialog template ** ** ** *****************************************************************************************/ .MasterDialog { background-color: rgb(44, 33, 33); overflow: hidden; box-sizing: border-box; box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3); } .MasterDialogMaximized { background-color: rgb(44, 33, 33); overflow: hidden; box-sizing: border-box; } /****************************************************************************************/ .MasterDialogHeader { height: 2.0em; padding: 0.25em 0.5em; background-color: rgb(55, 44, 44); text-align: right; vertical-align: middle; overflow: hidden; } .MasterDialogHeader > table {width: 100%;} .MasterDialogHeaderTitle { padding-right: 0.5em; font-size: 1.5em; font-weight: bold; background-color: rgb(55, 44, 44); text-align: left; vertical-align: middle; } .MasterDialogHeaderX { width: 2.0em; height: 2.0em; background-color: rgb(55, 44, 44); text-align: center; vertical-align: middle; } .MasterDialogHeaderX img { display: inline-block; width: 1.5em; height: 1.5em; text-align: center; vertical-align: middle; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; } .MasterDialogHeaderX img:hover { opacity: 1.0; } .MasterDialogHeaderXDisabled { width: 2.0em; height: 2.0em; background-color: rgb(55, 44, 44); text-align: center; vertical-align: middle; } .MasterDialogHeaderXDisabled img { display: inline-block; width: 1.5em; height: 1.5em; text-align: center; vertical-align: middle; opacity: 0.3; } /****************************************************************************************/ .MasterDialogContent {overflow: auto;} .MasterDialogContent a:link { color: rgb(225, 225, 0); text-decoration: none; cursor: pointer; transition: color 0.3s; -webkit-transition: color 0.3s; } .MasterDialogContent a:active {color: rgb(255, 255, 196);} .MasterDialogContent a:visited {color: rgb(225, 225, 0);} .MasterDialogContent a:hover {color: rgb(255, 255, 196);} /* Keep both normal and maximized even if they are identical, due to CssClass ornamentation in the Slf.Cs framework */ .MasterDialogContentMaximized {overflow: auto;} .MasterDialogContentMaximized a:link { color: rgb(225, 225, 0); text-decoration: none; cursor: pointer; transition: color 0.3s; -webkit-transition: color 0.3s; } .MasterDialogContentMaximized a:active {color: rgb(255, 255, 196);} .MasterDialogContentMaximized a:visited {color: rgb(225, 225, 0);} .MasterDialogContentMaximized a:hover {color: rgb(255, 255, 196);} /****************************************************************************************/ .MasterDialogFooter { height: 4.0em; padding: 0 0.75em; overflow: hidden; } .MasterDialogFooter table {width: 100%;} .MasterDialogFooter td {text-align: center; white-space: nowrap;} .MasterDialogFooterMaximized { height: 4.0em; padding: 0 0.75em; overflow: hidden; } .MasterDialogFooterMaximized table {width: 100%;} .MasterDialogFooterMaximized td {text-align: center;} /****************************************************************************************/ .MasterDialogHr { height: 0.25em; width: 100%; margin: 1em 0 1em 0; clear: both; background-color: rgb(55, 44, 44); box-sizing: border-box; } /****************************************************************************************/ .MasterDialogButton { display: inline-block; margin: 0.25em; border: 0.15em solid rgb(128, 128, 128); border-radius: 1.5em; padding: 0.5em 1.5em; color: rgb(225, 225, 225); background-color: rgba(0, 0, 0, 0.1); text-align: center; cursor: pointer; transition: color 0.3s, border-color 0.3s, background-color 0.3s; -webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s; /* Safari */ } .MasterDialogButton:hover { border-color: rgb(255, 0, 0); color: rgb(255, 255, 255); background-color: rgba(191, 33, 33, 0.5); } .MasterDialogButtonStuck { display: inline-block; margin: 0.25em; border: 0.15em solid rgb(196, 32, 32); border-radius: 1.5em; padding: 0.5em 1.5em; color: rgb(225, 225, 225); background-color: rgba(191, 33, 33, 0.3); text-align: center; cursor: pointer; transition: color 0.3s, border-color 0.3s, background-color 0.3s; -webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s; /* Safari */ } .MasterDialogButtonStuck:hover { border-color: rgb(255, 0, 0); color: rgb(255, 255, 255); background-color: rgba(191, 33, 33, 0.5); } .MasterDialogButtonDisabled { display: inline-block; margin: 0.25em; border: 0.15em solid rgb(92, 92, 92); border-radius: 1.5em; padding: 0.5em 1.5em; color: rgb(128, 128, 128); background-color: rgb(66, 66, 66); text-align: center; } /****************************************************************************************/ .MasterDialogMiniButton { display: inline-block; margin: 0.25em; border: 0.15em solid rgb(128, 128, 128); border-radius: 1.5em; padding: 0.15em 0.35em; color: rgb(225, 225, 225); background-color: rgba(0, 0, 0, 0.1); text-align: center; cursor: pointer; transition: color 0.3s, border-color 0.3s, background-color 0.3s; -webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s; /* Safari */ } .MasterDialogMiniButton:hover { border-color: rgb(255, 0, 0); color: rgb(255, 255, 255); background-color: rgba(191, 33, 33, 0.5); } .MasterDialogMiniButtonStuck { display: inline-block; margin: 0.25em; border: 0.15em solid rgb(196, 32, 32); border-radius: 1.5em; padding: 0.15em 0.35em; color: rgb(225, 225, 225); background-color: rgba(191, 33, 33, 0.3); text-align: center; cursor: pointer; transition: color 0.3s, border-color 0.3s, background-color 0.3s; -webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s; /* Safari */ } .MasterDialogMiniButtonStuck:hover { border-color: rgb(255, 0, 0); color: rgb(255, 255, 255); background-color: rgba(191, 33, 33, 0.5); } .MasterDialogMiniButtonDisabled { display: inline-block; margin: 0.25em; border: 0.15em solid rgb(92, 92, 92); border-radius: 1.5em; padding: 0.15em 0.35em; color: rgb(128, 128, 128); background-color: rgb(66, 66, 66); text-align: center; } /****************************************************************************************/ .MasterDialogContent .MasterDialogLabel { /* Width = [defined width] + 2*0.25 + 2*0.5 = [defined width] + 1.5em */ /* Height = 2*0.25 + 2*0.5 + 1.0 = 2.5em */ margin: 0.25em; display: inline-block; padding: 0.5em; float: left; text-align: right; vertical-align: middle; font-size: 1em; } .MasterDialogContentMaximized .MasterDialogLabel { display: block; padding: 0.5em; clear: both; text-align: left; font-size: 1em; } /****************************************************************************************/ .MasterDialogTextBox { /* Width = [defined width] + 2*0.25 + 2*0.5 = [defined width] + 1.5em */ /* Height = 2*0.25 + 2*0.5 + 1.0 = 2.5em */ margin: 0.25em; border: 0px solid rgb(128, 128, 128); /* Needed in case the edit box decides for itself to use 3d borders */ padding: 0.5em; color: rgb(33, 177, 177); background-color: rgba(0, 0, 0, 0.1); vertical-align: middle; font-size: 1em; transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterDialogTextBox:hover {background-color: rgba(77, 33, 33, 0.5);} .MasterDialogContentMaximized .MasterDialogTextBox {display: block; clear: both;} .MasterDialogTextBoxLeadText { /* Width = [defined width] + 2*0.25 + 2*0.5 = [defined width] + 1.5em */ /* Height = 2*0.25 + 2*0.5 + 1.0 = 2.5em */ margin: 0.25em; border: 0px solid rgb(128, 128, 128); /* Needed in case the edit box decides for itself to use 3d borders */ padding: 0.5em; color: rgb(33, 77, 77); background-color: rgba(0, 0, 0, 0.1); vertical-align: middle; font-size: 1em; transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterDialogTextBoxLeadText:hover {background-color: rgba(77, 33, 33, 0.5);} .MasterDialogContentMaximized .MasterDialogTextBoxLeadText {display: block; clear: both;} .MasterDialogTextBoxDisabled { margin: 0.25em; border: 0px solid rgb(128, 128, 128); /* Needed in case the edit box decides for itself to use 3d borders */ padding: 0.5em; color: rgb(55, 55, 55); background-color: rgba(33, 33, 33, 0.1); vertical-align: middle; font-size: 1em; } .MasterDialogContentMaximized .MasterDialogTextBoxDisabled {display: block; clear: both;} /****************************************************************************************/ .MasterDialogCheckBox {margin: 0.5em; cursor: pointer;} .MasterDialogCheckBox td {vertical-align: middle;} .MasterDialogCheckBoxDisabled {opacity: 0.5;} .MasterDialogCheckBoxDisabled td {vertical-align: middle;} .MasterDialogCheckBoxCheck { margin: 0 0.5em; padding: 0.25em; cursor: pointer; background-color: rgba(0, 0, 0, 0.1); transition: background-color 0.3s; -webkit-transition: background-color 0.3s; } .MasterDialogCheckBoxCheck:hover {background-color: rgba(191, 33, 33, 0.5);} .MasterDialogCheckBoxCheckDisabled { margin: 0 0.5em; padding: 0.25em; cursor: default; background-color: rgb(66, 66, 66); } .MasterDialogCheckBoxLabel { color: rgb(225, 225, 0); cursor: pointer; transition: color 0.3s; -webkit-transition: color 0.3s; } .MasterDialogCheckBoxLabel:hover {color: rgb(255, 255, 196);} .MasterDialogCheckBoxLabelDisabled {color: rgb(177, 177, 177); cursor: default;} .MasterDialogCheckBox .MasterDialogCheckBoxCheck { margin: 0 0.5em; border: 0.15em solid rgb(128, 128, 128); padding: 0.25em; cursor: pointer; background-color: rgba(0, 0, 0, 0.1); transition: border-color 0.3s, background-color 0.3s; -webkit-transition: border-color 0.3s, background-color 0.3s; } .MasterDialogCheckBox:hover .MasterDialogCheckBoxCheck { border-color: rgb(255, 0, 0); background-color: rgba(191, 33, 33, 0.5); } .MasterDialogCheckBoxDisabled .MasterDialogCheckBoxCheck { margin: 0 0.5em; border: 0.15em solid rgb(92, 92, 92); padding: 0.25em; cursor: default; background-color: rgb(66, 66, 66); } .MasterDialogCheckBox .MasterDialogCheckBoxLabel { color: rgb(225, 225, 0); cursor: pointer; transition: color 0.3s; -webkit-transition: color 0.3s; } .MasterDialogCheckBox:hover .MasterDialogCheckBoxLabel {color: rgb(255, 255, 196);} .MasterDialogCheckBoxDisabled .MasterDialogCheckBoxLabel {color: rgb(177, 177, 177); cursor: default;} .MasterDialogCheckBoxTextStyleSizer { width: 0.75em; height: 0.75em; min-width: 0.75em; min-height: 0.75em; max-width: 0.75em; max-height: 0.75em; overflow: hidden; display: inline-block; } .MasterDialogCheckBox label { color: rgb(225, 225, 0); vertical-align: middle; padding-left: 0.5em; transition: color 0.3s; -webkit-transition: color 0.3s; } .MasterDialogCheckBox label:hover {color: rgb(255, 255, 196); cursor: pointer;} .MasterDialogCheckBox input[type="checkbox"] {vertical-align: middle;} .MasterDialogCheckBox input[type="checkbox"]:hover {cursor: pointer;} /****************************************************************************************/ .MasterDialogText {padding: 0.5em;} .MasterDialogText h1 {font-size: 1.5em;} .MasterDialogText p {margin: 0.5em 0;} .MasterDialogTextLink { color: rgb(225, 225, 0); cursor: pointer; transition: color 0.3s; -webkit-transition: color 0.3s; /* Safari */ } .MasterDialogTextLink:hover {color: rgb(255, 255, 196);} .MasterDialogTextLink h1 {font-size: 1.5em;} .MasterDialogTextLink p {margin: 0.5em 0;} .MasterDialogTextLinkDisabled {color: rgb(128, 128, 128); cursor: default;} .MasterDialogTextLinkDisabled h1 {font-size: 1.5em;} .MasterDialogTextLinkDisabled p {margin: 0.5em 0;} /****************************************************************************************/ .MasterDialogCaptcha { margin: 0.25em; border: 0.5em solid rgba(40, 30, 30, 1.0); } /****************************************************************************************/ .MasterDialogTabControl {} .MasterDialogTabControlTabRow { clear: both; display: block; position: relative; margin-left: 1em; margin-right: 1em; } .MasterDialogTabControlTabPanes { clear: both; display: block; background-color: rgba(55, 44, 44, 0.7); } .MasterDialogTabControlTab { float: left; display: inline-block; margin-top: 0.5em; border-radius: 0.5em 0.5em 0 0; padding: 0.5em 1.0em; color: rgb(128, 128, 128); background-color: rgba(51, 40, 40, 0.7); font-size: 1em; white-space: nowrap; transition: color 0.3s, background-color 0.3s; -webkit-transition: color 0.3s, background-color 0.3s; /* Safari */ } .MasterDialogTabControlTab:hover { color: rgb(255, 13, 13); background-color: rgba(55, 44, 44, 0.7); cursor: pointer; } .MasterDialogTabControlTabSelected { float: left; display: inline-block; border-radius: 0.5em 0.5em 0 0; padding: 0.8em 1.0em 0.7em 1.0em; background-color: rgba(55, 44, 44, 0.7); font-size: 1em; font-weight: bold; white-space: nowrap; } .MasterDialogTabControlTabDisabled { float: left; display: inline-block; margin-top: 0.5em; border-radius: 0.5em 0.5em 0 0; padding: 0.5em 1.0em; color: rgb(65, 65, 65); background-color: rgba(51, 40, 40, 0.7); font-size: 1em; white-space: nowrap; } .MasterDialogTabControlPane {overflow: auto; padding: 1em;} .MasterDialogTabControlPaneHidden {overflow: auto; display: none;} /****************************************************************************************/ .MasterDialogListbox {} .MasterDialogListboxCombo {} .MasterDialogListboxItemBox {} .MasterDialogListboxItemBoxSelected {} .MasterDialogListboxEditBox {} .MasterDialogListboxEditBoxSelected {} .MasterDialogListboxDownArrow {} .MasterDialogListboxDownArrowSelected {} .MasterDialogListboxList {border: 0px solid rgb(128, 128, 128); background-color: rgba(0, 0, 0, 0.1); overflow: auto;} .MasterDialogListboxItem {padding: 0.5em;} .MasterDialogListboxItem img {width: 3em; height: 3em; vertical-align: middle; padding-right: 1em;} .MasterDialogListboxItem span {font-weight: bold;} .MasterDialogListboxItem:hover {background-color: rgba(77, 33, 33, 0.5);} .MasterDialogListboxItemSelected {padding: 0.5em; color: rgb(33, 177, 177); background-color: rgba(55, 44, 44, 0.7);} .MasterDialogListboxItemSelected img {width: 3em; height: 3em; vertical-align: middle; padding-right: 1em;} .MasterDialogListboxItemSelected span {font-weight: bold;} .MasterDialogListboxItemSelected:hover {background-color: rgba(77, 33, 33, 0.5);} .MasterDialogListboxDisabled {} .MasterDialogListboxComboDisabled {} .MasterDialogListboxItemBoxDisabled {} .MasterDialogListboxEditBoxDisabled {} .MasterDialogListboxDownArrowDisabled {} .MasterDialogListboxListDisabled {border: 0px solid rgb(128, 128, 128); background-color: rgba(0, 0, 0, 0.1); overflow: auto;} .MasterDialogListboxItemDisabled {padding: 0.5em;} .MasterDialogListboxItemSelectedDisabled {padding: 0.5em; color: rgb(33, 177, 177); background-color: rgba(55, 44, 44, 0.7);} /****************************************************************************************/ .MasterDialogCombobox {} .MasterDialogComboboxCombo {height: 2em;} .MasterDialogComboboxItemBox { width: 100%; border: 0px solid rgb(128, 128, 128); /* Needed in case the edit box decides for itself to use 3d borders */ padding: 0.5em; box-sizing: border-box; color: rgb(33, 177, 177); background-color: rgba(0, 0, 0, 0.1); vertical-align: middle; font-size: 1em; transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterDialogComboboxItemBox:hover {background-color: rgba(77, 33, 33, 0.5);} .MasterDialogComboboxItemBoxSelected { width: 100%; border: 0px solid rgb(128, 128, 128); /* Needed in case the edit box decides for itself to use 3d borders */ padding: 0.5em; box-sizing: border-box; color: rgb(33, 177, 177); background-color: rgba(0, 0, 0, 0.1); vertical-align: middle; font-size: 1em; transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterDialogComboboxItemBoxSelected:hover {background-color: rgba(77, 33, 33, 0.5);} .MasterDialogComboboxEditBox { width: 100%; border: 0px solid rgb(128, 128, 128); /* Needed in case the edit box decides for itself to use 3d borders */ padding: 0.5em; box-sizing: border-box; color: rgb(33, 177, 177); background-color: rgba(0, 0, 0, 0.1); vertical-align: middle; font-size: 1em; transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterDialogComboboxEditBox:hover {background-color: rgba(77, 33, 33, 0.5);} .MasterDialogComboboxEditBoxSelected { width: 100%; border: 0px solid rgb(128, 128, 128); /* Needed in case the edit box decides for itself to use 3d borders */ padding: 0.5em; box-sizing: border-box; color: rgb(33, 177, 177); background-color: rgba(0, 0, 0, 0.1); vertical-align: middle; font-size: 1em; transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterDialogComboboxEditBoxSelected:hover {background-color: rgba(77, 33, 33, 0.5);} .MasterDialogComboboxDownArrow { background-image: url(/Images/Down_16x16.png); background-repeat: no-repeat no-repeat; background-position: center center; transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterDialogComboboxDownArrow:hover {background-color: rgb(55, 44, 44);} .MasterDialogComboboxDownArrowSelected { background-color: rgb(55, 44, 44); background-image: url(/Images/Down_16x16.png); background-repeat: no-repeat no-repeat; background-position: center center; transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterDialogComboboxDownArrowSelected:hover{background-color: rgb(55, 44, 44);} .MasterDialogComboboxList {border: 0px solid rgb(55, 44, 44); background-color: rgb(55, 44, 44); overflow: auto;} .MasterDialogComboboxItem {padding: 0.5em;} .MasterDialogComboboxItem img {width: 3em; height: 3em; vertical-align: middle; padding-right: 1em;} .MasterDialogComboboxItem span {font-weight: bold;} .MasterDialogComboboxItem:hover {background-color: rgba(77, 33, 33, 0.5);} .MasterDialogComboboxItemSelected {padding: 0.5em; color: rgb(33, 177, 177); background-color: rgba(55, 44, 44, 0.7);} .MasterDialogComboboxItemSelected img {width: 3em; height: 3em; vertical-align: middle; padding-right: 1em;} .MasterDialogComboboxItemSelected span {font-weight: bold;} .MasterDialogComboboxItemSelected:hover {background-color: rgba(77, 33, 33, 0.5);} .MasterDialogComboboxDisabled {} .MasterDialogComboboxComboDisabled {} .MasterDialogComboboxItemBoxDisabled { width: 100%; border: 0px solid rgb(128, 128, 128); /* Needed in case the edit box decides for itself to use 3d borders */ padding: 0.5em; box-sizing: border-box; color: rgb(33, 177, 177); background-color: rgba(0, 0, 0, 0.1); vertical-align: middle; font-size: 1em; } .MasterDialogComboboxEditBoxDisabled { width: 100%; border: 0px solid rgb(128, 128, 128); /* Needed in case the edit box decides for itself to use 3d borders */ padding: 0.5em; box-sizing: border-box; color: rgb(33, 177, 177); background-color: rgba(0, 0, 0, 0.1); vertical-align: middle; font-size: 1em; } .MasterDialogComboboxDownArrowDisabled { background-image: url(/Images/Down_16x16.png); background-repeat: no-repeat no-repeat; background-position: center center; } .MasterDialogComboboxListDisabled {border: 0px solid rgba(55, 44, 44, 0.9); background-color: rgba(55, 44, 44, 0.9); overflow: auto;} .MasterDialogComboboxItemDisabled {padding: 0.5em;} .MasterDialogComboboxItemSelectedDisabled {padding: 0.5em; color: rgb(33, 177, 177); background-color: rgba(55, 44, 44, 0.7);} /****************************************************************************************/ .MasterDialogOnlineMap { position: relative; border: 0.1em solid rgb(225, 225, 225); } .MasterDialogOnlineMapPosition { /* Values match the generated "(c) OpenStreetMaps contributors" element. */ position: absolute; border: 1px solid #999999; color: #333333; background-color: #EEEEEE; padding: 2px; top: 3px; right: 3px; font-size: 10px; font-weight: normal; filter: alpha(opacity = 60); opacity: 0.6; } /***************************************************************************************** ** ** ** Message Boxes ** ** ** *****************************************************************************************/ .MasterMessage {width: 25em;} .MasterMessage > div {display: table;} .MasterMessageMaximized {} .MasterMessage .MasterMessageIcon { display: table-cell; width: 4em; padding: 1em; text-align: center; vertical-align: top; } .MasterMessageMaximized .MasterMessageIcon { padding: 1em; text-align: left; } .MasterMessage .MasterMessageText { display: table-cell; width: 17em; padding: 1em; vertical-align: top; overflow: auto; } .MasterMessageMaximized .MasterMessageText {padding: 1em;} .MasterMessageIcon img {width: 4em; height: 4em;} .MasterMessageText h1 {font-size: 1.3em; margin: 0 0 0.5em 0;} .MasterMessageText p {font-size: 1.0em; margin: 0.5em 0 0 0;} /****************************************************************************************/ .MasterMiniMessage {} .MasterMiniMessageContent { position: fixed; padding: 1em; color: rgb(225, 225, 225); background-color: rgb(66, 55, 55); z-index: 25; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); } .MasterMiniMessageContent a:link { color: rgb(225, 225, 0); text-decoration: none; cursor: pointer; transition: color 0.3s; -webkit-transition: color 0.3s; /* Safari */ } .MasterMiniMessageContent a:active {color: rgb(255, 255, 196);} .MasterMiniMessageContent a:visited {color: rgb(225, 225, 0);} .MasterMiniMessageContent a:hover {color: rgb(255, 255, 196);} .MasterMiniMessageContent h1 {font-weight: bold;} .MasterMiniMessageContent p {} .MasterMiniMessageContent ul {margin-top: 0.25em; padding-left: 1.5em; list-style-type: disc; list-style-position: outside;} .MasterMiniMessageContent li {font-size: 0.8em;} .MasterMiniMessageModalPane {z-index: 25; opacity: 0.01;} /* Certain browsers does not render fully transparent elements */ .MasterMiniInfoMessage {border: 0.5em solid rgb(92, 139, 191);} .MasterMiniErrorMessage {border: 0.5em solid rgb(128, 0, 0);} .MasterBubbleNoCallout {border-radius: 1.5em;} .MasterBubbleTopLeftCallout {border-radius: 0 1.5em 1.5em 1.5em;} .MasterBubbleTopRightCallout {border-radius: 1.5em 0 1.5em 1.5em;} .MasterBubbleBottomLeftCallout {border-radius: 1.5em 1.5em 1.5em 0;} .MasterBubbleBottomRightCallout {border-radius: 1.5em 1.5em 0 1.5em;} /***************************************************************************************** ** ** ** Specific dialogs ** ** ** ** Width of Label + Textbox = [defined widths] + 1.5em (label) + 1.5em (textbox) ** ** Total width (label/text) = width label + width text + 5em (paddings) ** ** Add 0.1-0.2 to total width to allow browsers slack on accuracy (Chrome fails) ** ** ** ** Content height = total height - 2.5em (header) - 4.5em (footer) ** ** Total height = content height + 7.0em (header + footer) ** ** ** ** A little slack is added to the width to cope with certain browsers. ** ** ** *****************************************************************************************/ .MasterLogonForm {width: 35.1em;} /* Label + TextBox + 5 + slack */ .MasterLogonFormMaximized {} .MasterLogonFormContent {padding: 1.0em;} .MasterLogonFormContentMaximized {padding: 1.0em;} .MasterLogonFormContent .MasterLogonFormLabel {width: 10em;} .MasterLogonFormContentMaximized .MasterLogonFormLabel {} .MasterLogonFormContent .MasterLogonFormTextBox {width: 20em;} .MasterLogonFormContentMaximized .MasterLogonFormTextBox {width: 94%;} /****************************************************************************************/ .MasterRememberMeWarning {width: 27em;} .MasterRememberMeWarningMaximized {} .MasterRememberMeWarningContent {padding: 1.0em;} .MasterRememberMeWarningContentMaximized {padding: 1.0em;} /****************************************************************************************/ .MasterSignUpForm {width: 40.1em;} /* Label + TextBox + 5 + slack */ .MasterSignUpFormMaximized {} .MasterSignUpFormContent {padding: 1.0em;} .MasterSignUpFormContentMaximized {padding: 1.0em;} .MasterSignUpFormContent .MasterSignUpFormLabel {width: 10em;} .MasterSignUpFormContentMaximized .MasterSignUpFormLabel {} .MasterSignUpFormContent .MasterSignUpFormTextBox {width: 25em;} .MasterSignUpFormContentMaximized .MasterSignUpFormTextBox {width: 94%;} /****************************************************************************************/ .MasterSignUpApproval {width: 25em;} .MasterSignUpApprovalMaximized {} .MasterSignUpApprovalContent {padding: 1.0em;} .MasterSignUpApprovalContentMaximized {padding: 1.0em;} /****************************************************************************************/ .MasterRecoverPasswordForm {width: 40.1em;} /* Label + TextBox + 5 + slack */ .MasterRecoverPasswordFormMaximized {} .MasterRecoverPasswordFormContent {padding: 1.0em;} .MasterRecoverPasswordFormContentMaximized {padding: 1.0em;} .MasterRecoverPasswordFormContent .MasterRecoverPasswordFormLabel {width: 10em;} .MasterRecoverPasswordFormContentMaximized .MasterRecoverPasswordFormLabel {} .MasterRecoverPasswordFormContent .MasterRecoverPasswordFormTextBox {width: 25em;} .MasterRecoverPasswordFormContentMaximized .MasterRecoverPasswordFormTextBox {width: 94%;} /****************************************************************************************/ .MasterRecoverPasswordApproval {width: 45.1em;} /* Label + TextBox + 5 + slack */ .MasterRecoverPasswordApprovalMaximized {} .MasterRecoverPasswordApprovalContent {padding: 1.0em;} .MasterRecoverPasswordApprovalContentMaximized {padding: 1.0em;} .MasterRecoverPasswordApprovalContent .MasterRecoverPasswordApprovalLabel {width: 15em;} .MasterRecoverPasswordApprovalContentMaximized .MasterRecoverPasswordApprovalLabel {} .MasterRecoverPasswordApprovalContent .MasterRecoverPasswordApprovalTextBox {width: 25em;} .MasterRecoverPasswordApprovalContentMaximized .MasterRecoverPasswordApprovalTextBox {width: 94%;} /****************************************************************************************/ .MasterSettingsForm {width: 35.1em;} /* Label + TextBox + 5 + slack */ .MasterSettingsFormMaximized {} .MasterSettingsFormContent {padding: 1.0em;} .MasterSettingsFormContentMaximized {padding: 1.0em;} .MasterSettingsFormContent MasterSettingsFormLabel {width: 10em;} .MasterSettingsFormContentMaximized .MasterSettingsFormLabel {} .MasterSettingsFormContent .MasterSettingsFormTextBox {width: 20em;} .MasterSettingsFormContentMaximized .MasterSettingsFormTextBox {width: 94%;} /****************************************************************************************/ .MasterLegalForm {width: 53em;} .MasterLegalFormMaximized {} .MasterLegalFormContent {padding: 1.0em;} .MasterLegalFormContentMaximized {padding: 1.0em;} .MasterLegalFormContent .MasterLegalTextBox {height: 28em;} .MasterLegalFormContentMaximized .MasterLegalTextBox {} /****************************************************************************************/ .MasterSendMailError {width: 35em;} .MasterSendMailErrorMaximized {} .MasterSendMailError .MasterErrorMessageTextbox {width: 25em; max-height: 15em;} .MasterSendMailError .MasterErrorMessageButton {position: relative; text-align: center;} .MasterSendMailErrorMaximized .MasterErrorMessageTextbox {} .MasterSendMailErrorMaximized .MasterErrorMessageButton {} .MasterErrorMessageTextbox { margin: 1em 0; border: 0.5em solid rgba(0, 0, 0, 0.0); /* Fake padding so that the scrollbar is "padded" inside the box */ background-color: rgba(0, 0, 0, 0.1); font-family: Monospace; white-space: nowrap; overflow: auto; } /****************************************************************************************/ .MasterViewStateForm {width: 53em; opacity: 1.0;} .MasterViewStateFormMaximized {} .MasterViewStateFormContent {padding: 1.0em;} .MasterViewStateFormContentMaximized {padding: 1.0em;} .MasterViewStateFormContent .MasterViewStateFormCheckBox {width: 33%; float: left;} .MasterViewStateFormContent .MasterViewStateTextBox {width: 50em; height: 25em;} .MasterViewStateFormContentMaximized .MasterViewStateFormCheckBox {} .MasterViewStateFormContentMaximized .MasterViewStateTextBox {} .MasterViewStateTextBox { margin: 1em 0; border: 0.5em solid rgba(0, 0, 0, 0.0); /* Fake padding so that the scrollbar is "padded" inside the box */ background-color: rgba(0, 0, 0, 0.1); font-family: Monospace; white-space: nowrap; overflow: auto; } /***************************************************************************************** *****************************************************************************************/ .MasterChrManagementForm {width: 50em;} /* List + Detail + 2*(content padding) + 2*(tab padding) = 20 + 26 + 2 + 2 */ .MasterChrManagementFormMaximized {} .MasterChrManagementFormContent {padding: 1.0em;} .MasterChrManagementFormContentMaximized {padding: 1.0em;} .MasterChrManagementFormTab {} .MasterChrManagementFormAccountList {float: left; width: 20em;} .MasterChrManagementFormAccountListList {width: 20em; height: 12em;} .MasterChrManagementFormCharacterList {float: left; width: 20em;} .MasterChrManagementFormCharacterListList {width: 20em; height: 24em;} .MasterChrManagementFormAccountDetail {float: left; width: 26em; height: 12em;} .MasterChrManagementFormCharacterDetail {float: left; width: 26em; height: 20em;} .MasterChrManagementFormPane {padding: 1.0em;} .MasterChrManagementFormPaneHdr {width: 24em; height: 2em; text-align: left; font-weight: bold;} .MasterChrManagementFormPaneMsg {width: 24em; height: 8em; padding: 0.5em; overflow: auto; background-color: rgba(0, 0, 0, 0.1);} .MasterChrManagementFormLabel {display: inline-block; width: 6em; padding-right: 1em; text-align: right;} .MasterChrManagementFormTextBox {width: 16.5em;} .MasterChrManagementFormAccountButtons {padding-top: 1em; text-align: center;} .MasterChrManagementFormCharacterPanes {height: 16em;} .MasterChrManagementFormCharacterButtons {padding-top: 1em; text-align: center;} .MasterChrManagementFormPaneBtn {min-width: 6em;} .MasterChrManagementFormText {width: 46em; height: 6.5em; margin-top: 1em; padding-bottom: 1em; background-color: rgba(0, 0, 0, 0.1); overflow: auto;} .MasterChrManagementFormText p {padding: 1em 1em 0 1em;} /****************************************************************************************/ .MasterEveMissionsForm {width: 62em;} /* List + Detail + 2*(content padding) + 2*(tab padding) = 25 + 2 + 2 */ .MasterEveMissionsFormMaximized {} .MasterEveMissionsFormContent {padding: 1.0em;} .MasterEveMissionsFormContentMaximized {padding: 1.0em;} .MasterEveMissionsForm .MasterEveMissionsFormMissionList {width: 60em;} .MasterEveMissionsForm .MasterEveMissionsFormMissionListDisabled {width: 60em;} .MasterEveMissionsForm .MasterEveMissionsFormMissionListList {width: 60em; min-height: 2em; max-height: 13em;} /* Height is 2em per item plus a bit for IE, so 1 to 6 items displayed, more or less */ .MasterEveMissionsFormMaximized .MasterEveMissionsFormMissionList {} .MasterEveMissionsFormMaximized .MasterEveMissionsFormMissionListDisabled {} .MasterEveMissionsFormMaximized .MasterEveMissionsFormMissionListList {min-height: 2em; max-height: 13em;} /* Height is 2em per item plus a bit for IE, so 1 to 6 items displayed, more or less */ .MasterEveMissionsFormListHeader {padding: 0.5em 0 0.25em 0;} .MasterEveMissionsForm .MasterEveMissionsFormLevelTabTabPanes {width: 60em; height: 50vh; min-height: 20em; overflow: auto;} .MasterEveMissionsFormMaximized .MasterEveMissionsFormLevelTabTabPanes {} .MasterEveMissionsForm .MasterEveMissionsFormLevelDescription {width: 50em; height: 100%;} .MasterEveMissionsFormMaximized .MasterEveMissionsFormLevelDescription {} .MasterEveMissionsFormCopyrightNotice {position: relative; left: 0.5em; bottom: 2em; width: 10em; white-space: nowrap;} .MasterEveMissionsCopyright {width: 45em;} .MasterEveMissionsCopyright .MasterMessageText {width: 37em;} .MasterEveMissionsFormLevelDescription h1 {} .MasterEveMissionsFormLevelDescription h3 {} .MasterEveMissionsFormLevelDescription h4 {} .MasterEveMissionsFormLevelDescription .lastedit {} .MasterEveMissionsFormLevelDescription .ext {} .MasterEveMissionsFormLevelDescription .data {font-size: 0.75em;} .MasterEveMissionsFormLevelDescription .data td {padding: 2px 3px; white-space: nowrap; border: 1px solid #444444; text-align: center;} /***************************************************************************************** ** ** ** Master Legal Texts ** ** ** *****************************************************************************************/ .MasterLegalTextBox { padding-right: 0.5em; font-size: 1em; overflow: auto; } .MasterLegalTextBox h1 { margin-top: 1em; margin-bottom: 1em; font-size: 1em; font-weight: bold; } .MasterLegalTextBox h2 { display: block; margin-bottom: 1em; border: 0.25em solid rgb(128, 0, 0); border-radius: 0.5em; padding: 1em; color: rgb(244, 44, 44); font-size: 0.8em; font-weight: bold; } .MasterLegalTextBox p { margin-bottom: 0.5em; font-size: 0.8em; } .MasterLegalTextBox ul { padding-left: 2em; list-style-type: disc; list-style-position: outside; } .MasterLegalTextBox li { margin-bottom: 0.5em; font-size: 0.8em; } /***************************************************************************************** ** ** ** Screen splash ** ** ** *****************************************************************************************/ /* .MasterSplash {margin: 5em 0 5em 0; width: 200px; height: 61px; background: url(/Images/Splash/Splash_200x61.png) no-repeat scroll center center;} @media all and (min-width: 400px) {.MasterSplash {width: 300px; height: 91px; background: url(/Images/Splash/Splash_300x91.png) no-repeat scroll center center;}} @media all and (min-width: 600px) {.MasterSplash {width: 400px; height: 121px; background: url(/Images/Splash/Splash_400x121.png) no-repeat scroll center center;}} @media all and (min-width: 900px) {.MasterSplash {width: 500px; height: 152px; background: url(/Images/Splash/Splash_500x152.png) no-repeat scroll center center;}} @media all and (min-width: 1300px) {.MasterSplash {width: 600px; height: 182px; background: url(/Images/Splash/Splash_600x182.png) no-repeat scroll center center;}} @media all and (min-width: 1800px) {.MasterSplash {width: 700px; height: 212px; background: url(/Images/Splash/Splash_700x212.png) no-repeat scroll center center;}} @media all and (min-width: 2400px) {.MasterSplash {width: 800px; height: 243px; background: url(/Images/Splash/Splash_800x243.png) no-repeat scroll center center;}} */ /****************************************************************************************/ /* .MasterGnSplash {margin: 5em 0 5em 0; width: 200px; height: 61px; background: url(/Images/Splash/GnSplash_200x61.png) no-repeat scroll center center;} @media all and (min-width: 400px) {.MasterGnSplash {width: 300px; height: 92px; background: url(/Images/Splash/GnSplash_300x92.png) no-repeat scroll center center;}} @media all and (min-width: 600px) {.MasterGnSplash {width: 400px; height: 122px; background: url(/Images/Splash/GnSplash_400x122.png) no-repeat scroll center center;}} @media all and (min-width: 900px) {.MasterGnSplash {width: 500px; height: 152px; background: url(/Images/Splash/GnSplash_500x152.png) no-repeat scroll center center;}} @media all and (min-width: 1300px) {.MasterGnSplash {width: 600px; height: 183px; background: url(/Images/Splash/GnSplash_600x183.png) no-repeat scroll center center;}} @media all and (min-width: 1800px) {.MasterGnSplash {width: 700px; height: 213px; background: url(/Images/Splash/GnSplash_700x213.png) no-repeat scroll center center;}} @media all and (min-width: 2400px) {.MasterGnSplash {width: 800px; height: 243px; background: url(/Images/Splash/GnSplash_800x243.png) no-repeat scroll center center;}} */ .MasterGnSplash {width: 10em; height: 10em; background: url(/Images/AppIcons/Logo310x310.png) no-repeat scroll center center; background-size: contain;} /***************************************************************************************** ** ** ** Cookie warning ** ** ** *****************************************************************************************/ .MasterCookieWarningBox { position: fixed; left: 0px; right: 0px; bottom: 0px; border-top: 0.313em solid rgba(128, 0, 0, 0.9); /* 5px => 5px/16px => 0.313em */ padding: 2%; color: rgb(225, 225, 225); background-color: rgba(0, 0, 0, 0.9); font-size: 0.9em; z-index: 15; transition: border-top 0.3s, background-color 0.3s; -webkit-transition: border-top-color 0.3s, background-color 0.3s; /* Safari */ } .MasterCookieWarningBox:hover { border-top-color: rgba(128, 0, 0, 1.0); background-color: rgba(0, 0, 0, 1.0); } .MasterCookieWarningWrapper { display: table; width: 100%; } .MasterCookieWarningMessage { display: table-cell; padding-right: 1em; vertical-align: middle; } .MasterCookieWarningButtons { display: table-cell; text-align: center; vertical-align: middle; } @media (max-width: 400px) { .MasterCookieWarningWrapper { display: block; width: 100%; } .MasterCookieWarningMessage { display: block; padding-right: 0; padding-bottom: 1em; clear: both; } .MasterCookieWarningMessage h1 { text-align: center; } .MasterCookieWarningButtons { display: block; clear: both; } } /****************************************************************************************/ .MasterCookieWarningMessage h1 { font-size: 1.4em; font-weight: bold; margin-bottom: 0.5em; } .MasterCookieWarningMessage a { color: rgb(225, 225, 0); text-decoration: none; transition: color 0.3s; -webkit-transition: color 0.3s; /* Safari */ } .MasterCookieWarningMessage a:hover { color: rgb(255, 255, 128); } .MasterCookieWarningLinkButton { color: rgb(225, 225, 0); cursor: pointer; transition: color 0.3s; -webkit-transition: color 0.3s; /* Safari */ } .MasterCookieWarningLinkButton:hover { color: rgb(255, 255, 128); } /****************************************************************************************/ .MasterCookieWarningButton { display: inline-block; border: 0.188em solid rgb(128, 0, 0); /* 3px => 3px/16px => 0.188em */ border-radius: 1.25em; /* 20px => 20px/16px => 1.25em */ padding: 0.5em 2em 0.5em 2em; font-weight: bold; color: rgb(225, 225, 225); background-color: rgba(0, 0, 0, 0.1); text-align: center; clear: both; white-space: nowrap; cursor: pointer; transition: color 0.3s, border-color 0.3s, background-color 0.3s; -webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s; /* Safari */ } .MasterCookieWarningButton:hover { border-color: rgb(255, 0, 0); color: rgb(255, 255, 255); background-color: rgba(191, 33, 33, 0.5); } /****************************************************************************************/ .MasterCookieWarningCheckBox { display: inline-block; margin-top: 1em; clear: both; cursor: pointer; } .MasterCookieWarningCheckBox td { vertical-align: middle; } .MasterCookieWarningCheckBoxCheck { margin-right: 0.5em; padding: 0.2em; background-color: rgb(128, 0, 0); transition: background-color 0.3s; -webkit-transition: background-color 0.3s; /* Safari */ } .MasterCookieWarningCheckBox:hover .MasterCookieWarningCheckBoxCheck { background-color: rgb(255, 0, 0); } .MasterCookieWarningCheckBoxLabel { color: rgb(225, 225, 225); transition: color 0.3s; -webkit-transition: color 0.3s; /* Safari */ } .MasterCookieWarningCheckBox:hover .MasterCookieWarningCheckBoxLabel { color: rgb(255, 255, 255); } /***************************************************************************************** ** ** ** Expiry ** ** ** *****************************************************************************************/ .MasterExpiringBox { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.4); } .MasterExpiringButton { display: inline-block; margin: 0 2em; border: 0.625em solid rgb(128, 0, 0); /* 3px => 3px/16px => 0.188em */ border-radius: 1.25em; /* 20px => 20px/16px => 1.25em */ padding: 1.25em; /* 20px => 20px/16px => 1.25em */ color: rgb(225, 225, 225); background-color: rgba(0, 0, 0, 0.9); text-align: center; cursor: pointer; transition: color 0.3s, background-color 0.3s; -webkit-transition: color 0.3s, background-color 0.3s; /* Safari */ animation: MasterExpiringButtonPulse 5s ease-in-out infinite; } .MasterExpiringButton:hover { color: rgba(255, 255, 255, 1.0); background-color: rgba(0, 0, 0, 1.0); } .MasterExpiringDigits { display: inline-block; padding: 0.625em 0 0.625em 0; font-size: 2.0em; letter-spacing: 0.25em; } /* Thanks to http://callmenick.com/post/simple-css3-transitions-transforms-animations-compilation */ @keyframes MasterExpiringButtonPulse { 0% {border-color: rgba(128, 0, 0, 1.0);} 50% {border-color: rgba(255, 0, 0, 1.0);} 100% {border-color: rgba(128, 0, 0, 1.0);} } /****************************************************************************************/ .MasterExpiredPage { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background: url(/Images/Backgrounds/Messier31.jpg) no-repeat 60% 40% scroll; background-size: cover; overflow: hidden; text-align: center; opacity: inherit; /* Fixed positioned elements don't inherit opacity on all browsers (IE!), so explicitely set it */ } .MasterExpiredPage div { text-align: center; } .MasterExpiredButton { display: inline-block; margin: 0 auto; border: 0.188em solid rgb(128, 0, 0); /* 3px => 3px/16px => 0.188em */ border-radius: 1.25em; /* 20px => 20px/16px => 1.25em */ padding: 0.5em 2em 0.5em 2em; color: rgb(225, 225, 225); background-color: rgba(0, 0, 0, 0.5); cursor: pointer; transition: color 0.3s, border-color 0.3s, background-color 0.3s; -webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s; /* Safari */ } .MasterExpiredButton:hover { border-color: rgb(255, 0, 0); color: rgb(255, 255, 255); background-color: rgba(191, 33, 33, 0.5); } /****************************************************************************************/ .MasterAsyncPostbackWaitBox { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.1); } .MasterAsyncPostbackWaitFeedback { display: inline-block; margin: 0 2em; border: 0.25em solid rgb(128, 0, 0); border-radius: 2.5em; padding: 0.5em 1em; color: rgb(225, 225, 225); background-color: rgba(0, 0, 0, 0.9); text-align: center; cursor: pointer; transition: color 0.3s, border-color 0.3s, background-color 0.3s; -webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s; /* Safari */ } .MasterAsyncPostbackWaitFeedback:hover { border-color: rgb(255, 0, 0); color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 1.0); } .MasterAsyncPostbackWaitFeedback img { width: 2em; height: 2em; animation: RotatingImageFrames45 0.5s infinite linear; -webkit-animation: RotatingImageFrames45 0.5s infinite linear; } .MasterAsyncPostbackWaitFeedback td {vertical-align: middle;} .MasterAsyncPostbackWaitFeedback div {margin: 0 1em;} .MasterAsyncPostbackTimeoutFeedback { display: inline-block; margin: 0 2em; border: 0.25em solid rgb(128, 0, 0); border-radius: 2.5em; padding: 0.5em 1em; color: rgb(225, 225, 225); background-color: rgba(0, 0, 0, 0.9); text-align: center; cursor: pointer; transition: color 0.3s, border-color 0.3s, background-color 0.3s; -webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s; /* Safari */ } .MasterAsyncPostbackTimeoutFeedback:hover { border-color: rgb(255, 0, 0); color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 1.0); } .MasterAsyncPostbackTimeoutFeedback img {width: 2em; height: 2em;} .MasterAsyncPostbackTimeoutFeedback td {vertical-align: middle;} .MasterAsyncPostbackTimeoutFeedback div {margin: 0 1em;} /****************************************************************************************/ .MasterExpiryPingbackHidden { position: fixed; top: 5em; left: 0.75em; width: 2em; height: 2em; z-index: 50; opacity: 0.0; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; /* Safari */ } .MasterExpiryPingbackVisible { position: fixed; top: 5em; left: 0.75em; width: 2em; height: 2em; z-index: 50; opacity: 1.0; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; /* Safari */ } .MasterExpiryPingbackImage { width: 2em; height: 2em; animation: RotatingImageFrames45 0.5s infinite linear; -webkit-animation: RotatingImageFrames45 0.5s infinite linear; } /***************************************************************************************** ****************************************************************************************** ** ** ** ** ** ContentPage related ** ** ** ** ** ****************************************************************************************** *****************************************************************************************/ .MasterContent { z-index: 5; } .MasterContentTable { min-height: 100vh; width: 100%; background: url(/Images/Backgrounds/OrionNebula_1200x1200.png) no-repeat 50% 50% scroll; background-size: cover; overflow: hidden; box-sizing: border-box; } .MasterContentTop { clear: both; width: 100%; height: 4.25em; /* Keep same height as class MasterContentTop plus the surrounding element's borders and padding */ } .MasterContentContent { vertical-align: middle; } .MasterContentFooter { height: 2.5em; border-top: 0.1em solid rgb(128, 0, 0); padding: 0.5em; background-color: rgb(44, 33, 33); text-align: center; vertical-align: middle; } /****************************************************************************************/ .MasterContentFooterItem { white-space: nowrap; } .MasterContentFooterItem img { width: 1.5em; height: 1.5em; vertical-align: middle; } /****************************************************************************************/ .MasterContentLink /* span */ { color: rgb(225, 225, 0); cursor: pointer; white-space: nowrap; transition: color 0.3s; -webkit-transition: color 0.3s; /* Safari */ } .MasterContentLink:hover { color: rgb(255, 255, 196); } .MasterContentFooterLink /* span */ { color: rgb(225, 225, 0); cursor: pointer; white-space: nowrap; transition: color 0.3s; -webkit-transition: color 0.3s; /* Safari */ } .MasterContentFooterLink:hover { color: rgb(255, 255, 196); } /***************************************************************************************** ** ** ** Default Page related ** ** ** *****************************************************************************************/ .ContentDefault { } .ContentDefaultLoggedOffSplash {max-width: 55%; border: 3em solid rgba(44, 33, 33, 0.0); background-color: rgba(44, 33, 33, 0.8);} .ContentDefaultLoggedOffSplash ul {margin: 0.5em 0; padding-left: 2em; list-style-type: disc; list-style-position: outside;} .ContentDefaultLoggedOffSplash li {font-size: 0.8em;} .ContentDefaultLoggedOnView {margin: 3em; border: 3em solid rgba(44, 33, 33, 0.0); background-color: rgba(44, 33, 33, 0.8); left: 0px; right: 0px;} /****************************************************************************************/ .ContentDefaultQueue {} /* table */ .ContentDefaultQueue th {padding: 0.25em; font-weight: bold;} /* th */ .ContentDefaultQueue td {padding: 0.25em;} /* td */ .ContentDefaultQueueHeader {height: 8em;} .ContentDefaultQueueHeaderImage {display: inline-block; width: 8em; height: 8em; float: left; margin: 0 1.5em 3em 0;} .ContentDefaultQueueHeaderText {display: inline-block; height: 8em; float: left;} .ContentDefaultQueueHeaderTextName {font-weight: bold; font-size: 1.5em;} .ContentDefaultQueueHeaderTextCorp {font-weight: bold;} /****************************************************************************************/ .ContentDefaultHeader {text-align: center; font-size: 1.1em; font-weight: bold; background-color: rgba(44, 33, 33, 0.8);} /* td */ /* Editing the names of these needs to be sync'ed with s in Default.aspx and the struct SkillQueueItem's constructor in Default.aspx.cs */ .ContentDefaultSkillHeader {font-weight: bold;} /* td */ .ContentDefaultSkillNormal {} /* td */ .ContentDefaultSkillPartial {color: rgb(225, 225, 0);} /* td */ .ContentDefaultSkillActive {color: rgb(0, 225, 0);} /* td */ /* Editing the names of these needs to be sync'ed with s in Default.aspx and the struct SkillQueueItem's constructor in Default.aspx.cs */ .ContentDefaultTimeHeader {font-weight: bold;} /* td */ .ContentDefaultTimeNormal {} /* td */ .ContentDefaultTimePartial {color: rgb(225, 225, 0);} /* td */ .ContentDefaultTimeActive {color: rgb(0, 225, 0);} /* td */ /* Editing the names of these needs to be sync'ed with s in Default.aspx and the struct JobListItem's constructor in Default.aspx.cs */ .ContentDefaultJobHeader {font-weight: bold;} /* td */ .ContentDefaultJobNormal {} /* td */ .ContentDefaultJobRunning {color: rgb(225, 225, 0);} /* td */ .ContentDefaultJobDone {color: rgb(0, 225, 0);} /* td */ /* Editing the names of these needs to be sync'ed with s in Default.aspx and the struct ContractItem's constructor in Default.aspx.cs */ .ContentDefaultContractActive {color: rgb(225, 225, 0);} /* td */ .ContentDefaultContractActiveTime {color: rgb(225, 225, 0);} /* td */ .ContentDefaultContractExpired {} /* td */ .ContentDefaultContractExpiredTime {color: rgb(255, 0, 0);} /* td */ /***************************************************************************************** ****************************************************************************************** *****************************************************************************************/