/*--------------------------------------------------------- ------------------------------------------------------ Reset ------------------------------------------------------ ------------------------------------------------------*/ html, body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, hr, form, fieldset, input, textarea, p, table, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; } table { border-collapse:collapse; border-spacing:0; text-align:left; } ol, ul { list-style:none; } img { border:0 none; } button, input, a { outline: none; } /*--------------------------------------------------------- ------------------------------------------------------ Base ------------------------------------------------------ ------------------------------------------------------*/ /* --- Placements --- */ .floatLeft { float:left; } .floatRight { float:right; } .clearFix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearFix { zoom: 1; display: block; } .block { display:block; } .inline { display:inline; /* ie7 fix-> */zoom: 1; *display: inline;/* <- ie7 fix */ } .relative { position: relative;} .center { margin: 0 auto; } .noPadding { padding:0 !important; } .noPaddingTop { padding-top:0 !important; } .noMargin { margin:0 !important; } .noBorders { border-top:none !important; border-right:none !important; border-bottom:none !important; border-left:none !important; } .verticalAlignMiddle { vertical-align:middle; } .hide { display:none; } .show { display:block; } .textAlignCenter { text-align:center; } .textAlignRight { text-align:right; } .textAlignLeft { text-align: left !important; } .table { display:table; table-layout:fixed; width:100%; } .table-cell { display:table-cell; } .pull-10 { margin-left:-10px; } .mbot-15 { margin-bottom:15px; } .mtop-15 { margin-top:15px; } .mright-5 { margin-right:5px; } .p-10 { padding:10px; } .pleft-5 { padding-left:5px; } .pleft-20 { padding-left:20px; } .pright-5 { padding-right:5px; } .pbot-10 { padding-bottom:10px; } /* --- Texts --- */ .fz-xl { font-size:18px; } .bold { font-weight:600; } .italic { font-style:italic; } .white { color:#fff; } /* --- Columns/widths percent --- */ .width100perc { width: 100%; } .width90perc { width: 90%; } .width75Perc { width: 75%; } .width67Perc { width: 67%; } .width55Perc { width: 55%; } .width50Perc { width: 50%; } .width45Perc { width: 45%; } .width33Perc { width: 33%; } .width25Perc { width: 25%; } .width10Perc { width: 10%; } .colContent { padding-left:10px; padding-right:10px; } .colContent.alpha { padding-left:0px; } .colContent.omega { padding-right:0px; } .row { margin-bottom: 20px; } /* --- Content/Box --- */ #content { margin-bottom:120px; margin-top:64px; min-width:960px; width:100%; display:table; } #contentPadding { padding:20px; min-height:550px; } .boxTitle { padding:7px 10px; background:url("images/stripes.png"); border:1px solid #DEDDE0; border-bottom:0; color:#044570; font-size:10px; letter-spacing:2px; text-transform:uppercase; font-weight:700;} .boxContent { padding:10px; background:url("images/bg_4.jpg"); border:1px solid #DEDDE0; margin:0 20px 20px 20px; right:0; left:0; position:absolute; } .max960 {max-width:960px;} .scrollBox { border: 1px solid #DEDDE0; height:200px; overflow-y:scroll; } .dashboard .boxContent { position:inherit; margin:0px 0px 20px 0px; } /* --- Links --- */ a { color:#1A7CBC; } a:hover { color:#044570; } .popupIcon:after { background:url(images/popup.png) 0 0; content:" "; display:inline-block; height:14px; margin-left:2px; width:14px; } .popupIcon:hover:after { background:url(images/popup.png) 0 14px; } /* --- Headings --- */ h1, h2, h3, h4, h5, h6 { margin-bottom:5px; } h1 { text-transform:uppercase;font-size:18px; font-weight:300; color:#1A7CBC;} h1.pageTitle { margin-right:30px; margin-top:10px; } h2 { font-size:16px; font-weight:700; color:#1A7CBC; } h3 { text-transform:uppercase;font-size:14px; font-weight:400; color:#044570; } h4 { font-size:14px; font-weight:400; color:#044570;} h5 { font-size:12px; font-weight:700; color:#044570; letter-spacing:0.5px;} h6 { font-size:12px; font-weight:400; color:#044570; letter-spacing:0.5px;} p { line-height:1.5em; margin-top:5px; margin-bottom:10px; } hr { background:#DEDDE0; border-style:none; color:#DEDDE0; height:1px; } .vertical-line { border-left:1px solid #DEDDE0; } /* --- Colors --- */ .info { color:#1A7CBC; } .danger { color:#AF2D00; } /*--------------------------------------------------------- ------------------------------------------------------ Forms ------------------------------------------------------ ------------------------------------------------------*/ /*----------- Table --------------- */ th { vertical-align:top; } table.tblForm tr td { padding: 2px 5px 2px 0; vertical-align: top; line-height: 1.9em; } table.tblForm tr th { padding: 2px 5px 2px 0; font-weight:bold; color:#044570; /*background-color:#d1e5f2;*/ vertical-align: top; line-height: 1.9em; } table.tblForm tr.submit td, .submit { padding-top: 10px; text-align: right; } table.tblDisplay { width:100%; } table.tblDisplay tr th { padding: 4.8px; vertical-align: top; border-right:1px solid #366a8d; } table.tblDisplay tr th:last-child { border-right:none; } table.tblDisplay tr td { padding: 4.8px; vertical-align: top; border-right:1px solid #DEDDE0; } table.tblDisplay tr td:last-child { border-right:none; } table.tblDisplay thead tr { background-color:#044570; } table.tblDisplay thead tr th { color:#fff; font-weight:bold; } table.tblDisplay tbody tr:nth-child(even) { background-color:#f2f2f2; } .informationContainer { line-height: 1.9em; } .informationContainer div { padding: 2px 5px 2px 0; } .informationContainer label { font-weight:bold; color:#044570; } /*----------- Form elements --------------- */ /* Collective: Textbox, textarea, select */ input[type=text], input[type=number], input[type=search], input[type=password], input[type=date], .fakeTextBox, textarea, select { width: 184px; border-radius: 2px; border: 1px solid #DEDDE0; font-size: 12px; font-family: Lato, sans-serif; color: #333; background-color: #fff; } /* Textbox */ input[type=text], input[type=number], input[type=search], input[type=date], input[type=password] { padding: 5px 5px 4px 5px; } .tbxSmall { width:50px; } #setSupplierPrecisionLevels .text-box.single-line[type=number] { width:50px; }/* Fix for styling the textboxes which were otherwise impossible to get a hold of with a class */ /* Textarea */ textarea { height: 56px; padding: 4px 5px 3px 5px; } .largeTextArea { height: 200px; width:100%; } /* Select */ select { width: 184px; margin: 0; padding: 3px 3px 4px 5px; } .fakeInput { padding: 5px 5px 4px 5px; border-radius: 2px; border: 1px solid #DEDDE0; font-size: 12px; font-family: Lato, sans-serif; color: #333; background-color: #fff; line-height:1.45em; } /* Disabled: Textbox, textarea, select*/ input[type=text][disabled], input[type=number][disabled], select[disabled], input[type=date][disabled], textarea[disabled] { color: #999; background-color:#f2f2f2; font-style: italic; text-shadow: none; cursor: default; } /* Buttons */ input[type=reset], input[type=submit], input[type=button] { padding: 3px 15px 3px 15px; font-size: 12px; border: 1px solid #1A7CBC; font-family: Lato, sans-serif; letter-spacing:0.5px; border-radius: 4px; background: #1A7CBC; color: #fff; cursor: pointer; /*ie7 fix ->*/ *overflow: visible; *filter: chroma(color=#000000); *line-height: normal; /*<- ie7 fix*/ margin-left:1px;margin-right:1px; } a.fakeButton { padding: 3px 15px 3px 15px; font-size: 12px; border: 1px solid #1A7CBC; text-align: center; text-decoration: none; letter-spacing:0.5px; line-height: normal; display: inline-block; border-radius: 4px; background: #1A7CBC; color: #fff; cursor: pointer; margin-left:1px;margin-right:1px;} input.toolbarButton { height:17px; margin-left:1px;margin-right:1px;} input.secondary[type=reset], input.secondary[type=submit], input.secondary[type=button], a.fakeButton.secondary { border: 1px solid #DEDDE0; background: #DEDDE0; color: #333; } input.secondary[type=reset]:hover, input.secondary[type=submit]:hover, input.secondary[type=button]:hover, a.fakeButton.secondary:hover{ border: 1px solid #c5c4c7; background: #c5c4c7; color: #333; } input[type=submit]:hover, input[type=button]:hover, a.fakeButton:hover { background: #044570; border-color:#044570; } input.danger[type=button] { background: #AF2D00; border-color: #AF2D00; } .linkNextToButton { padding: 4px 12px 4px 12px; display: inline-block; text-decoration: underline; line-height: normal; font-size: 12px; color: #1A7CBC; cursor: pointer; } .linkNextToButton:hover { color:#044570; } /* input[type=text][data-role=filterable] { width: auto; min-width: 90%; } select[data-role=filterable] { width: auto; min-width: 90%; } */ .groupable-checkbox { vertical-align:sub; margin-left:9px; margin-right:5px; } /*----------- Validation --------------- */ .msgBox { padding:10px 20px; margin-bottom:10px; background-color:#A3CBE4; border:1px solid #1A7CBC; border-radius:3px; } .msgBox.fading { opacity:0; width:500px; position:fixed; top:100px; left:50%; margin-left:-250px; } .msgBox.success { background-color:#CDD780; border-color:#ABBD2C;} .msgBox.error { background-color:#F2DDD6; border-color:#AF2D00; color:#333} .error { color:#AF2D00; } input.error { background-color:#F2DDD6; border-color:#AF2D00; color:#AF2D00; } input.input-validation-error, select.input-validation-error { background-color:#F2DDD6; border-color:#AF2D00; color:#AF2D00; } .field-validation-error { color:#AF2D00; display:block; } .validation-summary-errors { padding:10px 20px; margin-bottom:10px; background-color:#F2DDD6; border:1px solid #AF2D00; border-radius:3px; } .validation-summary-errors ul li { color:#AF2D00; } #validation-message { line-height:3em; color:#AF2D00; } /*--------------------------------------------------------- ------------------------------------------------------ Layout ------------------------------------------------------ ------------------------------------------------------*/ #loginContainer { width:340px; padding:50px; margin: 0 auto; background:url("images/bg_4.jpg"); border:1px solid #DEDDE0; } body { background:url("images/bg_1.jpg"); font-family: 'Lato', sans-serif; font-size:12px; color:#333; } #stripe { height:5px; background:#1A7CBC; border-top:4px solid #044570;} header { position:fixed; left: 0; top:0px; min-width:1000px; width:100%; height:73px; border-bottom:1px solid #ffffff; z-index:100; background:url("images/bg_4.jpg"); } header .applicationName { padding: 25px 0 0 20px; font-size:10px; text-transform:uppercase; color:#044570; } header .applicationName .suppliersPortal { letter-spacing:1px; font-weight:300;} header .applicationName .ownerName { letter-spacing:2px; font-weight:700;} .rightControl { padding:5px 20px 0 0; text-align:right;} .rightControl a { display:block; font-size:12px; color:#044570; text-decoration:none; } .rightControl a:hover { color:#1A7CBC; } .rightControl a .icon { float:right; background-image:url(images/rightControl.png); } .rightControl a.user { text-align:left; width:160px; margin-top:2px; padding-left:5px; border:1px solid #DEDDE0; border-radius:3px; } .rightControl a.user .name { line-height:2em; } .rightControl a.user .icon { width:24px; height:24px; margin-left:15px; border-radius:0 3px 3px 0; background-position:0px 0px; background-color:#044570; } .rightControl a.user:hover .icon { background-position:0px 24px; } .rightControl a.administration { margin-top:5px; /*line-height:2em;*/ } .rightControl a.administration.active { /*background-color:#044570; color:#fff; border-radius:3px;*/color:#1A7CBC; } .rightControl a.administration .icon { width:16px; height:16px; margin-left:5px; margin-right:4px; /*margin-top:4px;*/ background-position:20px 44px; } .rightControl a.administration:hover .icon, .rightControl a.administration.active .icon { background-position:20px 20px; } /* --- User navigation --- */ #userNavigation { position:absolute; right:20px; padding-top:2px; text-align:left; } #userNavigation nav ul li:first-child { background-color:#DEDDE0; padding-top:3px; border-radius:3px 3px 0 0; } #userNavigation nav ul li a { width:136px; padding:5px 20px 5px 10px; cursor:pointer; background-color:#DEDDE0; } #userNavigation nav ul li.logOut a { background-color:#044570; color:#fff; border-top:1px solid #fff; } #userNavigation nav ul li.logOut a:hover { background-color:#1A7CBC; } #userNavigation nav ul li:last-child { background-color:#044570; padding-bottom:3px; border-radius:0 0 3px 3px; } #userNavigation nav ul li:hover:last-child { background-color:#1A7CBC; } header .grayStripe { margin-top:63px; height:1px; background:#DEDDE0;} .whiteStripe { width:100%; height:1px; background:#ffffff;} footer { background:#ffffff; bottom:0; position:fixed; width:100%; } footer .footerContent { padding:20px; border-top:1px solid #DEDDE0; } footer .footerContent img { max-width:160px;} /* --- Main navigation --- */ nav#mainNavigation ul { position:absolute; top:-5px; left:50%; height:73px; text-align: center; } /* Width and margin must be based on the number of actions in the menu. If there are 6 actions then there are 7 "separators". Calculate: 6*90px + 7*3px = 468 px. The WIDTH is the result of the calculation. The MARGIN-LEFT is the result of the calculation DIVIDED by 2 to get the middle position. */ nav#mainNavigation ul.nrOfActions6 { width:561px; margin-left:-280px; } nav#mainNavigation ul li { font-size: 10px; margin: 0; float:left;margin-top:14px; } nav#mainNavigation ul li .separator { width:3px; height:73px; background-image:url(images/separator.png); background-repeat:no-repeat; } nav#mainNavigation ul li.active { margin-top:0px; border-top:14px solid #044570; } nav#mainNavigation ul a { height:58px; width:90px; padding:6px 0 0; display:block; outline: none; text-decoration: none; text-transform:uppercase; color:#1A7CBC; } nav#mainNavigation ul a .icon { width:26px; height:26px; margin:0 auto 8px; background-image:url(images/sprite.png); color:#1A7CBC; } nav#mainNavigation ul li a:hover, nav#mainNavigation ul li.active a { color:#044570; background-image:url(images/bg_menuitem_active.png); background-repeat:repeat-x; } /*DASHBOARD*/ nav#mainNavigation a.dashboard .icon { background-position:-120px 0; } nav#mainNavigation ul li a.dashboard:hover .icon, nav#mainNavigation ul li.active a.dashboard .icon { background-position:-120px -40px; } /*ORDERS*/ nav#mainNavigation a.orders .icon { background-position:-160px 0; } nav#mainNavigation ul li a.orders:hover .icon, nav#mainNavigation ul li.active a.orders .icon { background-position:-160px -40px; } /*FORECAST*/ nav#mainNavigation a.forecast .icon { background-position:-200px 0; } nav#mainNavigation ul li a.forecast:hover .icon, nav#mainNavigation ul li.active a.forecast .icon { background-position:-200px -40px; } /*PRECISION*/ nav#mainNavigation a.precision .icon { background-position:-240px 0; } nav#mainNavigation ul li a.precision:hover .icon, nav#mainNavigation ul li.active a.precision .icon { background-position:-240px -40px; } /*EVENTLOG*/ nav#mainNavigation a.eventlog .icon { background-position:-280px 0; } nav#mainNavigation ul li a.eventlog:hover .icon, nav#mainNavigation ul li.active a.eventlog .icon { background-position:-280px -40px; } /*EVENTLOG*/ nav#mainNavigation a.messages .icon { background-position:-320px 0; } nav#mainNavigation ul li a.messages:hover .icon, nav#mainNavigation ul li.active a.messages .icon { background-position:-320px -40px; } /* --- Sub navigation --- */ .subNavigation { height:44px; background:url("images/bg_4.jpg"); border:1px solid #DEDDE0; border-left:0; } .subNavigation h1 { height:36px; padding-right:30px; padding-top:10px; margin-top:-1px; margin-left:-1px; background:url("images/bg_1.jpg"); } .subNavigation img { float:left; margin-top:-1px; margin-left:-11px;} .subNavigation ul li { float:left; padding: 14px 10px;} .subNavigation ul li a { color:#333; text-decoration:none; padding:3px; } .subNavigation ul li a:hover { color:#1A7CBC; } .subNavigation ul li.active a { color:#1A7CBC; border-bottom:2px solid #1A7CBC;} /*----------- Shortcuts --------------- */ .shortCutLink { padding:0 10px; } .shortCutLink a { text-decoration:none; } .shortCut { background:url("images/stripes.png"); border:1px solid #DEDDE0; padding:10px; text-align:center; font-size:14px; color:#044570; } .shortCut:hover { background-image:none; background-color:#1A7CBC; color:#fff; } .shortCut .icon { background:url("images/shortcuts.png"); width:105px; height:70px; margin:0 auto; } .shortCut .icon.confirmOrder { background-position:0 0; } .shortCut:hover .icon.confirmOrder { background-position:0 70px; } .shortCut .icon.notifyOrder { background-position:-105px 0; } .shortCut:hover .icon.notifyOrder { background-position:-105px 70px; } .shortCut .icon.forecast { background-position:-210px 0; } .shortCut:hover .icon.forecast { background-position:-210px 70px; } /*----------- Announcements --------------- */ article.announcement { border-bottom: 1px solid #DEDDE0; padding:15px 0 5px; } article.announcement h3 { margin-top:5px; text-transform:uppercase; } article.announcement .published { text-transform:uppercase; color:#044570; } article.announcement .content { } article.announcement .publishedBy { color:#044570; } article.announcement:first-child { padding-top: 0; } article.announcement:last-child { border-bottom: 0; } /*----------- Custom barchart --------------- */ .barchart { border-bottom:1px solid #DEDDE0; padding:5px 10px; } .barchart:nth-child(even) { background:#EEEEEE; } .barchart:last-child { border:none; } .barchart .labelBarContainer{ width:80%; } .barchart .label { margin-left:10px; margin-bottom:2px; } .barchart .bar { margin-left:10px; background:#efd5cc; } .barchart .bar div { background:#AF2D00; height:8px; } .barchart .valueContainer { width:20%; } .barchart .value { line-height:1em; padding-top:6px; padding-bottom:6px; padding-right:10px; border-right:1px solid #DEDDE0; text-align:right; font-size:14px; color:#AF2D00; } .startpageSummary a .title { color:#333; } .startpageSummary li:hover .title { color:#fff; } .startpageSummary a { text-decoration:none; display:block; padding:10px; } .startpageSummary li:hover .danger, .startpageSummary li:hover span, .startpageSummary li:hover { background-color:#1A7CBC; color:#fff;} .startpageSummary a:hover .danger, .startpageSummary a:hover span { color:#fff;} /*----------- Leveranser i riskzonen/Risky Orders --------------- */ .riskyOrders .header { color:#fff; padding:8px 5px; border-right:1px solid #fff;} .riskyOrders .header .icon { display:inline-block; height:16px; width:18px; background-image:url(Images/sprite.png); background-repeat:no-repeat; margin-right:3px; float:left; } .riskyOrders .subheader { padding:2px 5px; border-right:1px solid #fff;} .riskyOrders .lastMinute .header { background-color:#1a7cbc; } .riskyOrders .lastMinute .header .icon { background-position:0 0; } .riskyOrders .lastMinute .subheader { background-color:#d1e5f2; } .riskyOrders .delayed .header { background-color:#044570; } .riskyOrders .delayed .header .icon { background-position: -20px 0; } .riskyOrders .delayed .subheader { background-color:#cddae2; } .riskyOrders .notNoticed .header { background-color:#af2d00; border-right:0; } .riskyOrders .notNoticed .header .icon { background-position:-40px 0; } .riskyOrders .notNoticed .subheader { background-color:#efd5cc; border-right:0; } .riskyOrders table { width:100%; border-right:1px solid #DEDDE0; } .riskyOrders .notNoticed table { border-right:0; } .riskyOrders table tr td { padding:0.4em; line-height:1.6em; } .riskyOrders table tr.alt { background-color:#F5F5F5; } /*----------- ------------------------------------------------------------------ Popup ------------------------------------------------------------------ --------------- */ .popup.screenCover { position: absolute; z-index: 1999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(204, 204, 204, 0.5); } .popup .dialog { z-index: 2000;background-color: #fff; box-shadow: 0 0 5px #ccc;} .popup .dialog .dialogContent { padding: 30px 20px; } .popup .dialog .dialogContent h1 { margin-top:15px; margin-bottom:15px; } .popup .dialog .closePopup a { display: block; width:24px; height:24px; background: url("images/closePopup.png") 0px 0px no-repeat; margin-top: 5px; margin-right: 5px; } .popup .dialog .closePopup a:hover { background: url("images/closePopup.png") 0px -24px no-repeat; } /*----------- ------------------------------------------------------------------ Datatype stylewise ------------------------------------------------------------------ --------------- */ .numeric { text-align: right;} .datetime { text-align: center;} td.editable:after { background:url(images/sprite.png) -360px 0; content:" "; display:inline-block; float:left; height:12px; width:12px; margin-top:4px; margin-right:5px; } td.editable:hover:after{ background-position: -380px 0; } td.editable.k-edit-cell:after { background:none; height:0; width:0; } td.editable.k-dirty-cell { background-color:#d7e1e8; } tr.k-alt td.editable.k-dirty-cell { background-color:#cddae2; } td.editable.k-dirty-cell .k-dirty { display:none; } /*----------- ------------------------------------------------------------------ Kendo ------------------------------------------------------------------ --------------- */ /*.gauge-container { background:transparent url(images/gauge-container.png) no-repeat 50% 50%; background-size:cover; height:200px; margin:0 auto 30px auto; width:200px; }*/ .gauge-container { display:inline-block; height:140px; margin:0 auto 10px auto; } .gauge-container img { display:block; position:absolute; height:150px; } .gauge { width:150px; height:120px; margin:0 auto; border-color:transparent; } .k-tabstrip.k-widget { border-bottom:none; background:url("images/stripes.png"); border-radius:3px 3px 0 0; } .k-tabstrip.k-widget .k-tabstrip-items .k-item { border:1px solid #DEDDE0; border-bottom:0; margin-right:3px; padding-left:15px; padding-right:15px; } .k-toolbar.k-grid-toolbar { background:url("images/stripes.png"); text-align:right; padding-right:10px; } thead.k-grid-header { background-color:#044570; text-align:right; } .k-grid-header .k-header { background-color:#044570; border-bottom-color:#044570; border-left-color:#366a8d; border-right-color:#366a8d; vertical-align: bottom; } .k-grid-header .k-header .k-link { color:#fff; } .k-grid-header .k-header input[type=button] { border: 1px solid #DEDDE0; background: #DEDDE0; color: #333; } .k-widget.k-grid tr th, .k-widget.k-grid tr td { padding: 0.4em 0.4em; } .k-widget.k-grid .k-icon.k-i-arrow-n { background:url("images/sprite.png") -360px -20px; } .k-widget.k-grid th:hover .k-icon.k-i-arrow-n { background:url("images/sprite.png") -360px -40px; } .k-widget.k-grid .k-icon.k-i-arrow-s { background:url("images/sprite.png") -380px -20px; } .k-widget.k-grid th:hover .k-icon.k-i-arrow-s { background:url("images/sprite.png") -380px -40px; } .k-widget.k-grid .k-grid-Split:after { background:url(images/popup_white.png) 0 0; content:" "; display:inline-block; height:14px; margin-left:5px; width:14px; } .k-widget.k-grid .k-grid-SearchPackage:after { background:url(images/newWindow.png) 0 0; content:" "; display:inline-block; height:14px; margin-left:5px; width:14px; } .k-widget.k-grid .k-grid-EditConnectedSupplier:after { background:url(images/popup_white.png) 0 0; content:" "; display:inline-block; height:14px; margin-left:5px; width:14px; } .k-grid tbody tr { background-color:#fff;} .k-grid tbody tr.k-alt { background-color: #f5f5f5; } .k-multiselect { width:290px; } .k-multiselect .k-multiselect-wrap { height:200px; overflow-y:scroll; padding:5px 5px 4px; width:277px; border-radius:2px; } .k-multiselect .k-multiselect-wrap .k-input { padding:0; font-size:12px; font-family:Lato; width:271px } .k-multiselect-wrap.k-floatwrap ul li { clear:both; } /*----------- ------------------------------------------------------------------ Modules ------------------------------------------------------------------ --------------- */ /* --- All vs Mine Switch --- */ .allVsMine { } .allVsMine a { background:url("images/stripes.png"); border:1px solid #DEDDE0; border-radius:0 3px 3px 0; } .allVsMine a:first-child { border-radius: 3px 0 0 3px; } .allVsMine a.deselected:hover { background:#1a7cbc; border:1px solid #1a7cbc; } .allVsMine a.selected { background:#044570; border:1px solid #044570; } .allVsMine a .icon { background:url("images/sprite.png"); width:18px; height:15px; display:block; margin:3px 5px;} .allVsMine a.mine.deselected:hover .icon, .allVsMine a.mine.selected .icon { background-position:-58px 0; } .allVsMine a.all.deselected:hover .icon, .allVsMine a.all.selected .icon { background-position:-80px 0; } .allVsMine a.mine.deselected .icon { background-position:-58px -20px; } .allVsMine a.all.deselected .icon { background-position:-80px -20px; }