/* OLD STYLES #header { background: #d6dbdd url(../Images/header_bg.gif) repeat-x bottom right; } */ #header { background: #28495a url(../Images/ap2-ui-header-sprite.png) repeat-x 0px -560px; } #demomessage { background: url(../Images/demo-message.png) no-repeat center center; position: absolute; top:0; left:0; width:124px; height:130px; z-index:3000; } #demomessage #javascriptloaded { background: url(../Images/javascript-indicator.png) no-repeat 5000px 5000px; width:70px; height:16px; font-size:9px; color:#ccc; } /*body { background-color: #F5F6F7 !important; }*/ /* old gray color, html */ body { background-color: #fff !important; } /* new white background, html */ body.controlmaster { background-color: #fff; } .border { border: 1px solid #C4C4C4; } .borderCorners { border-radius: 3px 3px 3px 3px; } #footerwrapper, #contentwrapper_top, #contentwrapper_bottom { background: url(../Images/ap2-ui-content-background-sprite.png) no-repeat center top; } #contentwrapper { margin-top: 1.5em; margin-bottom: 15px; background: url(../Images/ap2-ui-content-background.png) repeat-y center top; } #contentwrapper_top { width: 984px; margin: 0 auto; height: 25px; background-position: center top; } #content_settingstab { cursor:pointer; outline:none; height:25px; line-height:25px; background: url(../Images/ap2-ui-settings-tab.png) no-repeat right top; float:right; display:block; font-size:11px; color:#999; text-decoration:none; padding-right: 17px; } #content_settingstab_inner { cursor:pointer; display: block; height:25px; line-height: 25px; background: url(../Images/ap2-ui-settings-tab.png) no-repeat left top; padding-left:30px; } #content_settingstab:hover, #content_settingstab:focus { color:#33618d; text-decoration:underline; background-position: right -30px; } #content_settingstab:hover #content_settingstab_inner, #content_settingstab:focus #content_settingstab_inner { background-position: left -30px; } #content_settings { display:none; margin-top:10px; } #content_settings_inner { border: 5px solid #ccc; padding:15px; background-color:#f6f6f6; } #contentwrapper_bottom { height: 15px; background-position: center bottom; } #footerwrapper { background-position: center -40px; padding-top: 15px; } #content { background-color: #ffffff; margin-bottom: 15px; } #footer { font-size: 11px; color: #555; } #footer p { float:left; margin-bottom: 0; } #footer h4 { margin-bottom: 2px; color: #555; } #footer ul { list-style-type:none; /*margin:0;*/ } #footer a { color: #777; text-decoration:none; font-weight:normal; } #footer a:hover { color: #000; text-decoration:underline; } #speciesinformationwrapper { height:79px; z-index: 150; } /* #speciesinformationwrapper { height:79px; overflow:hidden !important; } #speciesinformation { font-family:"Garamond",serif; font-size: 12px; line-height: 1.2em; color:#fff; margin: 20px 10px; opacity: 0.8;} #speciesinformation strong { font-size: 14px; } #speciesinformation a { text-decoration:none; color:#fff; } #speciesinformation a:hover { text-decoration:underline; } */ #usernavigation_wrapper { background: transparent url(../Images/ap2-ui-login-sprite.png) no-repeat 0px -24px; padding-left: 8px; float:right; } #usernavigation_inner { background: transparent url(../Images/ap2-ui-login-sprite.png) no-repeat right -4px; height: 16px; padding-right:8px; } #usernavigation { position:relative; list-style-type:none; margin:0; padding:0; color:#666; z-index: 2000; height:14px; line-height:14px; } #usernavigation li.menuitem { position:relative; display:inline; float:left; font-size:10px; line-height:14px; color:#f0f0f0; z-index: 2000; } #usernavigation li.menuitem a { display:block; padding:0px 3px; font-weight:bold; color:#f0f0f0; text-decoration:none; } #usernavigation li.menuitem a:hover, #usernavigation li a:focus { color:#f0f0f0; text-decoration:underline; } /* #usernavigation a.user { background: url(../Images/Icons/usernav_user_grey.png) no-repeat center left; padding-left: 15px; } #usernavigation a.user:hover { background: url(../Images/Icons/usernav_user.png) no-repeat center left; } #usernavigation a.contact { background: url(../Images/Icons/usernav_contact_grey.png) no-repeat center left; padding-left: 15px; } #usernavigation a.contact:hover { background: url(../Images/Icons/usernav_contact.png) no-repeat center left; } #usernavigation a.logout { background: url(../Images/Icons/usernav_logout_grey.png) no-repeat center left; padding-left: 15px; } #usernavigation a.logout:hover { background: url(../Images/Icons/usernav_logout.png) no-repeat center left; } #usernavigation a.help { background: url(../Images/Icons/usernav_help_grey.png) no-repeat center left; padding-left: 15px; } #usernavigation a.help:hover { background: url(../Images/Icons/usernav_help.png) no-repeat center left; } */ #usernavigation li ul { margin:0; padding:0; background-color:#33618d; } #usernavigation li ul li { display:block !important; list-style-type:none; margin:0; padding:0; float:none !important; } #usernavigation li ul li.header { font-size: 12px; font-weight:bold; color: #f0f0f0; padding-bottom: 3px; } #usernavigation li ul li a { display:block; padding: 3px 2px; color:#f0f0f0 !important; } #usernavigation li ul li a:hover { color: #fff; } #usernavigation li ul li a span { padding-right:5px; } span.usernavigation-flag { display: block; width:16px; float:left; height:14px; background: url(../Images/ap2-ui-login-sprite.png) no-repeat 0px -39px; } #usernavigation li:hover>ul {display:block; z-index:1600;} #usernavigation li:focus ul, #usernavigation li:hover ul, #usernavigation li.hover ul, #usernavigation li:focus .navContent, #usernavigation li:hover .navContent, #usernavigation li.hover .navContent { display: block; } #usernavigation .navContent { display: none; z-index: 1050; position: absolute; top: 8px; left: -7px; margin: 0; padding: 0; width: 150px; } #usernavigation .navContent .contentarea, #usernavigation .navContent .contentarea td { padding: 0px !important; } #loginWrapper { width:320px; position:absolute; display:none; top:0; left: 650px; z-index:3000; } #loginWrapper .login { float:left; width:130px; margin-right: 4px; } #loginWrapper p { border-top: 1px dotted #666; margin:10px 0 0 0; clear:both; display:block; } #loginWrapper .login_remember { display:block; float:left; padding-top:2px; } #loginWrapper .ap2-ui-form-input-wrapper { width:15em; } #loginWrapper a.forgot_pswd { float:right; position:relative; font-size:11px; } #loginWrapper a.closeTheDiv { position: absolute; text-indent: -9999px; display:none; width:36px; height:36px; right:-10px; bottom:-10px; background: url(../Images/Icons/close.png) no-repeat center center; outline:none; } .rounder-left { background: transparent url(../Images/ap2-ui-subnavigation-sprite.png) no-repeat bottom left; } .rounder-right { margin-left: 10px; padding:0px 10px 10px 0px; background: transparent url(../Images/ap2-ui-subnavigation-sprite.png) no-repeat bottom right; } .rounder-content { padding:10px; background-color:#fff;} /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Main navigation // background: #33618d; ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #navigation { font-weight:bold;font-family:arial;font-size:13px; } #navigation ul#leftNav {float:left;} #navigation ul#rightNav {float:right;} #navigation ul {margin:0;padding:0;list-style-type:none;z-index: 40;} #navigation li.tab { float: left; display: inline; position: relative; margin: 0; margin-right: 2px; padding: 0; border-radius: 3px 3px 0 0; border: 1px solid #007681; border-bottom: 0; } #navigation li.last { margin-right:0px !important; } #navigation li.tab a { padding: 0px 10px 0px 10px; line-height: 31px; display: block; font-weight: bold; text-decoration: none; color: #fff; text-shadow: 1px 1px 1px #1e466d; border-radius: 2px 2px 0 0; border-bottom: 3px solid #394057; } #navigation li.tab a > span { padding: 0 2px; } #navigation li.menuitem { border-radius: 3px 3px 0 0; } #navigation li.menuitem a { line-height: 30px; } #navigation #languageNav {position:absolute;top:-55px;right:25px;} #navigation #languageNav a {float:left;color:#fff !important;} #navigation .languageFlag {position:relative;float:right;} #navigation .languageListText {padding:5px;} /* All navigation elements use the same CSS-sprite */ /*#navigation span.icon, #navigation li.tab a span.rightcorner, #navigation li.tab a { background: transparent url(../Images/ap2-ui-header-sprite.png) repeat-x 0px -120px; }*/ /*#navigation li.tab a span.rightcorner { display:block; background-position: top right; padding: 0px 10px 0px 0px; }*/ #navigation li.tab:hover, #navigation li.tab:hover a, #navigation li.tab a:hover, #navigation li.tab a:focus, #navigation li.tab a.over, #navigation li.tab.dropdown.focus-show > a, #navigation li.menuitem:hover, #navigation li.menuitem:hover a, #navigation li.menuitem a:hover, #navigation li.menuitem a:focus, #navigation li.menuitem a.over { border-bottom-color: #EEE !important; color: #007681; text-shadow: none; background-color: #EEE; } #navigation li.tab.dropdown.focus-show > a, #navigation li.tab.dropdown:hover, #navigation li.tab.dropdown:hover a, #navigation li.tab.dropdown a:hover, #navigation li.menuitem.dropdown:hover, #navigation li.menuitem.dropdown:hover a, #navigation li.menuitem.dropdown a:hover, #navigation li.tab.dropdown:focus, #navigation li.tab.dropdown:focus a, #navigation li.tab.dropdown a:focus, #navigation li.menuitem.dropdown:focus, #navigation li.menuitem.dropdown:focus a, #navigation li.menuitem.dropdown a:focus{ background-color: #FFF; border-bottom-color: #FFF !important; } /*#navigation li.tab:hover a span.rightcorner, #navigation li.tab a:hover span.rightcorner, #navigation li.tab a:focus span.rightcorner, #navigation li.tab a.over span.rightcorner { background-position: right -80px !important; }*/ #navigation li.tab a.active { border-color:#EEE; color:#1f688f; text-shadow:none; background-color: #EEE; } #navigation li.tab a.active span.rightcorner { background-position: right -40px; } #navigation li.tab:last-child{margin-right:0;} #navigation .amp { font-family: Georgia, serif; font-weight:normal; } #navigation span.user { background-position: 0px -441px; padding-left: 9px; } #navigation span.logout { background-position: 0px -240px; padding-left: 16px; } #navigation span.home { background-position: 0px -241px; padding-left: 13px; } #navigation span.graph { background-position: 0px -240px; padding-left: 13px; } #navigation span.search { background-position: 0px -321px; padding-left: 13px; } #navigation span.save { background-position: 0px -280px; padding-left: 14px; } #navigation span.list { background-position: 0px -361px; padding-left: 13px; } #navigation span.settings { background-position: 0px -400px; padding-left: 14px; } #navigation .dropdown { z-index: 2001 } /* Makes the navigation dropdown to lay over maps and input fields */ #navigation .navContent { display: none; z-index: 1050; position: absolute; top: 32px; left: -6px; margin: 0; padding: 0; width: 300px; } #navigation .navContent { background: transparent url(../Images/ap2-ui-subnavigation-sprite.png) no-repeat bottom left; } #navigation .navContent .inner { margin-left: 10px; padding:10px 10px 20px 5px; background: transparent url(../Images/ap2-ui-subnavigation-sprite.png) no-repeat bottom right; } #navigation .menuitem .navContent { top: 31px; left: unset; right: -6px; } #navigation li.tab .navContent.focus-show, #navigation li.tab:focus .navContent, #navigation li.tab:hover .navContent, #navigation li.tab a:focus + .navContent, #navigation li.menuitem.dropdown:hover .navContent, #navigation li.hover .navContent { display: block; } .navContent table { margin:0; background-color: #fff; } .navContent td { vertical-align:top; padding:0 10px; } .navContent td.nowrap { white-space:nowrap; } .navContent td.divider { border-left:1px dotted #ccc; padding-left: 10px; } .navContent ol.submenu { margin:0; padding:0; list-style-type:none; } .navContent ol.submenu li { line-height: 14px; display:block; height:auto; float:none; margin:0; padding:0px; } .navContent ol.submenu li.menu-header { margin-top: 5px; } .navContent ol.submenu li.menu-header:first-child { margin-top: 0px; } .navContent ol.submenu li.menu-header span { font-weight: bold; color: #1f688f; line-height: 16px; } .navContent ol.submenu li a { display: block; margin: 0 !important; font-weight: normal; color: #1f688f !important; border: none !important; font-size: 11px !important; line-height: 14px !important; padding: 0 0 0 6px !important; font-weight: normal !important; text-shadow: none !important; background: transparent !important; } .navContent ol.submenu li a:hover, .navContent ol.submenu li a:focus, .navContent ol.submenu li a.over { background-color: #f6f6f6 !important; text-decoration:underline !important; } .navContent ol.submenu li.header a { font-size:13px !important; font-weight:bold !important; color:#000; padding-bottom:3px !important; } .navContent ol.submenu li.divider a { margin-top: 6px !important; padding-top: 6px !important; border-top: 1px dotted #ccc !important; } .navContent ol.submenu li a.not-implemented { color:#999 !important; cursor: help; } .navContent.focus-show ol.submenu li a:focus, #navigation li.tab.focus-show a:focus > span { background-color: #fce300 !important; background-image: linear-gradient(#FFF -150%, #fce300 20%, #ffb81c) !important; } .navContent .blockbox { width: 10px; height: 10px; display:block; } .navContent .header span { font-size:13px; font-weight:bold; } .navContent .contentarea { vertical-align:top; background-color: #ffffff; padding: 10px 0px; } .navContent .contentarea td { padding: 0px 10px; } .navContent .shadow-left { width: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-vertical.png) repeat-y -20px 0px; } .navContent .shadow-right { width: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-vertical.png) repeat-y -30px 0px; } .navContent .shadow-bottomleft { width: 10px; height: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-corners.png) no-repeat -20px -10px;} .navContent .shadow-bottomright { width: 10px; height: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-corners.png) no-repeat -30px -10px; } .navContent .shadow-bottom { height: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-horizontal.png) repeat-x 0px -30px; } .navContent .shadow-topleft { width: 10px; height: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-corners.png) no-repeat -20px 0px;} .navContent .shadow-topright { width: 10px; height: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-corners.png) no-repeat -30px 0px; } .navContent .shadow-top { height: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-horizontal.png) repeat-x 0px -20px; } .navContent .blue-shadow-left { width: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-vertical.png) repeat-y 0px 0px; } .navContent .blue-shadow-right { width: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-vertical.png) repeat-y -10px 0px; } .navContent .blue-shadow-bottomleft { width: 10px; height: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-corners.png) no-repeat 0px -10px;} .navContent .blue-shadow-bottomright { width: 10px; height: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-corners.png) no-repeat -10px -10px; } .navContent .blue-shadow-bottom { height: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-horizontal.png) repeat-x 0px -10px; } .navContent .blue-shadow-topleft { width: 10px; height: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-corners.png) no-repeat 0px 0px;} .navContent .blue-shadow-topright { width: 10px; height: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-corners.png) no-repeat -10px 0px; } .navContent .blue-shadow-top { height: 10px; background: transparent url(../Images/ap2-ui-subnav-sprite-horizontal.png) repeat-x 0px 0px; } h1#logoimage { margin: 15px 0px 10px 0px; width:231px; height:47px; background: url(../Images/ap2-ui-header-sprite.png) no-repeat scroll 0px -480px; text-indent: -5000px; } h1#logoimage a { display:block; width:100%; height:100%; } #logo { height:79px; overflow:hidden !important; } #navigationcontainer { background: url(../Images/ap2-ui-header-sprite.png) repeat-x left bottom; } #myaccount { margin: 0 10px 0 10px; } #myaccount { text-align: right; float:right; } #myaccount .last { margin-right:0px !important; } .navigation { list-style-type:none; font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif; font-size:12px; } .navigation li { float:left; height:33px; text-align:center; text-transform:uppercase; } .navigation li a { padding:0 13px; margin-right:4px; height:30px; display:block; float:left; line-height:30px; text-decoration:none; background-color:#33618d; color:#ddd; border-bottom:3px solid #33618d; } .navigation li a:hover, .navigation li a:focus { background-color:#7da8cd; color:#fff; border-bottom:3px solid #33618d; } .navigation li a.active { font-weight:bold; background-color:#fff; color:#1f688f; border-bottom:3px solid #fff; } .minasidor { background: url(../Images/Icons/user.png) no-repeat center left; padding-left: 20px; } .konto { background: url(../Images/Icons/gear.png) no-repeat center left; padding-left: 20px; } /* Elements using CSS3 */ .navigation li a {text-shadow: 1px 1px 1px #1c333f;} .navigation li a.active { text-shadow:none; } #speciesinformation { text-shadow: 2px 1px 2px #000; } .box { -moz-border-radius: 3px; } .navigation li a { -moz-border-radius: 3px 3px 0 0; } #headerimage { height:112px; background:#28495a url(../Images/Header/bjorn.jpg) no-repeat center top; } /* ______________________________________________________________________________________________ UI TAB-NAVIGATION ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ # Set the "nav-header"-class to headers/labels in the tab menu (will not be as simple text without tab-style) # TODO: Disabled/inactive-style has an anchor tag now, maybe another tag # TODO: Combine icons to a CSS-sprite */ .ap2-ui-tabnavigation { background:url(../Images/ap2-ui-tabs-sprite.png) repeat-x left bottom; } .ap2-ui-tabnavigation-content { background-color:#fff; display:none; } .ap2-ui-tabnavigation ul { margin:0; padding:0; list-style:none; } .ap2-ui-tabnavigation li { float:left; background:url(../Images/ap2-ui-tabs-sprite.png) no-repeat left -120px; margin:0 2px 0 0; padding:0 0 0 4px; border-bottom:1px solid #d6d6d6; } .ap2-ui-tabnavigation a, .ap2-ui-tabnavigation strong { float:left; display:block; background:url(../Images/ap2-ui-tabs-sprite.png) no-repeat right -40px; padding:5px 12px 4px 6px; text-decoration:none; font-weight:bold; color:#28495a; outline: none; } .ap2-ui-tabnavigation strong span.arrow { display:block; background:url(../Images/Icons/arrow-curve-270-left.png) no-repeat 2px 2px; padding-left:26px; } .ap2-ui-tabnavigation a span { opacity:0.8; display:block; height:18px; line-height:18px; } .ap2-ui-tabnavigation li:hover, .ap2-ui-tabnavigation li.active { background-position: left -80px; border-bottom:0px; cursor: pointer; } .ap2-ui-tabnavigation li:hover a, .ap2-ui-tabnavigation li.active a { background-position: right 0px; padding-bottom: 5px; color:#28495a; cursor: pointer; } .ap2-ui-tabnavigation li:hover a span, .ap2-ui-tabnavigation li.active a span { opacity:1.0; } .ap2-ui-tabnavigation li.disabled { background-position: left -120px !important; border-bottom:1px solid #d6d6d6 !important; } .ap2-ui-tabnavigation li.disabled a { background-position:right -40px !important; padding-bottom:4px !important; } .ap2-ui-tabnavigation li.disabled a span { opacity:0.4 !important; color:#666; text-decoration: line-through; } .ap2-ui-tabnavigation li.nav-header, .ap2-ui-tabnavigation li.nav-header strong { background: none !important; padding-left: 0px; padding-right:3px; color:#000; } .ap2-ui-tabnavigation span.map { background:url(../Images/Icons/map.png) no-repeat left center; padding-left:22px; } .ap2-ui-tabnavigation span.table { background:url(../Images/Icons/tables.png) no-repeat left center; padding-left:22px; } .ap2-ui-tabnavigation span.calendar { background:url(../Images/Icons/calendar_month.png) no-repeat left center; padding-left:22px; } .ap2-ui-tabnavigation span.gear { background:url(../Images/Icons/gear.png) no-repeat left center; padding-left:22px; } .ap2-ui-tabnavigation span.drawer { background:url(../Images/Icons/drawer.png) no-repeat left center; padding-left:22px; } /* tab menu ( text-shadow: 1px 1px 1px #828282;) */ .ap2-ui-tabmenu { background:url(../Images/ap2-ui-tabmenu-sprite.png) repeat-x left top; } .ap2-ui-tabmenu .leftcorner { width:10px; height:29px; background:url(../Images/ap2-ui-tabmenu-sprite.png) no-repeat left -29px; float:left; } .ap2-ui-tabmenu .rightcorner { width:10px; height:29px; background:url(../Images/ap2-ui-tabmenu-sprite.png) no-repeat right -29px; float:right; } .ap2-ui-tabmenu ul { margin:0; padding:0; list-style:none; float:left; } .ap2-ui-tabmenu li { float:left; background:url(../Images/ap2-ui-tabmenu-sprite.png) no-repeat left -120px; margin:0; padding:0 0 0 5px; line-height:29px; height: 29px; } .ap2-ui-tabmenu li a { float:left; display:block; background:url(../Images/ap2-ui-tabmenu-sprite.png) no-repeat left top; font-weight:bold; padding:0px 10px 0px 5px; color:#fff; outline: none; text-decoration:none; text-shadow: 1px 1px 1px #828282; } .ap2-ui-tabmenu li span { line-height:29px; height:29px; padding-left:20px; display:block; } .ap2-ui-tabmenu li:hover, .ap2-ui-tabmenu li.active { background-position: left -58px; cursor: pointer; } .ap2-ui-tabmenu li:hover a, .ap2-ui-tabmenu li.active a { background-position: right -58px; cursor: pointer; color:#28495a; text-shadow: none; } .ap2-ui-tabmenu li:hover span, .ap2-ui-tabmenu li.active span { margin-top: 4px; display:block; line-height:25px; } .ap2-ui-tabmenu li.disabled, .ap2-ui-tabmenu li.disabled:hover { float:left; background:url(../Images/ap2-ui-tabmenu-sprite.png) no-repeat left -120px; margin:0; padding:0 0 0 5px; line-height:29px; height: 29px; } .ap2-ui-tabmenu li.disabled a, .ap2-ui-tabmenu li.disabled:hover a { cursor: default; float:left; display:block; background:url(../Images/ap2-ui-tabmenu-sprite.png) no-repeat left top; font-weight:bold; padding:0px 10px 0px 5px; color:#666; outline: none; text-decoration:none; text-shadow: 1px 1px 1px #828282; } .ap2-ui-tabmenu li.disabled span, .ap2-ui-tabmenu li.disabled:hover span { margin-top: 0px; line-height:29px; height:29px; padding-left:20px; display:block; } .ap2-ui-tabmenu span.map { background:url(../Images/Icons/map.png) no-repeat left center; } .ap2-ui-tabmenu span.form { background:url(../Images/Icons/application-form.png) no-repeat left center; } .ap2-ui-tabmenu span.users { background:url(../Images/Icons/users.png) no-repeat left center;} .ap2-ui-tabmenu span.habitat { background:url(../Images/Icons/tags_habitat.png) no-repeat left center; } .ap2-ui-tabmenu span.collection { background:url(../Images/Icons/drawer.png) no-repeat left center; } .ap2-ui-tabmenu h4.information { float:left; background:url(../Images/Icons/information-button.png) no-repeat left center; line-height:29px; height:29px; padding-left:22px; display:block; font-size:12px; color:#28495a; margin:0; } /* Small tabs */ .ap2-ui-smalltabs { margin:0; padding:0; list-style:none; background:url(../Images/ap2-ui-smalltabs-sprite.png) repeat-x left bottom; height:22px; } .ap2-ui-smalltabs li { float:left; background:url(../Images/ap2-ui-smalltabs-sprite.png) no-repeat left -22px; margin:0 2px 0 0; padding:0 0 0 10px; } .ap2-ui-smalltabs li a { display:block; height: 22px; line-height:22px; text-decoration:none; outline:none; font-size:11px; color: #666; background:url(../Images/ap2-ui-smalltabs-sprite.png) no-repeat right -22px; padding: 0 10px 0 0;} .ap2-ui-smalltabs li a:focus, .ap2-ui-smalltabs li a:active, .ap2-ui-smalltabs li a:hover { text-decoration:underline; } .ap2-ui-smalltabs li.active { background-position: left top; } .ap2-ui-smalltabs li.active a { background-position: right top; } .ap2-ui-smalltabs li span.searchsite { display:block; line-height:inherit; padding-left:16px; background:url(../Images/Icons/magnifier_medium_left.png) no-repeat -2px center; } .ap2-ui-smalltabs li span.selectedsite { display:block; line-height:inherit; padding-left:12px; background:url(../Images/Icons/cursor-small.png) no-repeat -3px center; } .ap2-ui-smalltabs li span.newsite { display:block; line-height:inherit; padding-left:14px; background:url(../Images/Icons/site-icon-smaller.png) no-repeat left center; } .ap2-ui-smalltabs li span.mysites { display:block; line-height:inherit; padding-left:14px; background:url(../Images/Icons/star-small.png) no-repeat -2px center; } .ap2-ui-smalltabs-outerbox {border-bottom:1px solid #f1f1f1; margin-bottom:10px;} .ap2-ui-smalltabs-contentbox {border: 1px solid #cdcdcd; border-top:none; background-color:#fff;padding:5px;display:none;} /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- UI Grids ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ table.ap2-ui-grid { border-collapse: collapse; } .ap2-ui-grid th, .ap2-ui-grid td { padding:2px 10px 2px 5px; } /* padding:4px 10px 4px 5px; */ .ap2-ui-grid th { white-space: nowrap; font-weight: bold; font-size: 13px; border-bottom:2px solid #ccc; } /* background: #f0f0f0 url(../Images/ap2-ui-header4-bg.png) repeat-x top left; text-shadow: 1px 2px 0px #ffffff; */ .ap2-ui-grid td { border-bottom: 1px dotted #eee; /*white-space: nowrap;*/ } .ap2-ui-grid small { text-indent: -9999px; width: 16px; color: #c00; text-align: left; } .ap2-ui-grid th a { text-decoration: none; color: #000; } .ap2-ui-grid th a:hover { text-decoration: underline; color: #007EC4; text-shadow: none; } .ap2-ui-grid .ProjectName { font-weight: bold; } .ap2-ui-grid .nowrap { white-space: nowrap; } .ap2-ui-grid span { font-size:10px; } .ap2-ui-grid .wrap { white-space: normal; } .ap2-ui-grid .hoverRow { background-color: #f8f8f8; } /* #f6f9fa */ .ap2-ui-grid .id { text-align: right; font-weight:bold; color: #666; } /* 100% width of a column */ td.width100percent, th.width100percent { width: 100%; } /* For editable columns in the grid*/ .ap2-ui-grid .td-editable { display:block; } .ap2-ui-grid .td-editable:hover { background:transparent url(../Images/Icons/edit-grey.gif) no-repeat right center; } a.grid-delete { background:transparent url(../Images/Icons/icon_cross_delete.gif) no-repeat right center; padding:1px 15px 1px 5px !important; } /* .ap2-ui-grid-medobs-wrapper { border:3px solid #dadada; padding:10px; -moz-border-radius:3px; } */ .ap2-ui-grid-medobs-wrapper h4 { text-align: left; margin:1em 0 0.5em 0; padding:4px 0; border-bottom:2px solid #999; background: url(../Images/ap2-ui-header4-bg.png) repeat-x top left; } .ap2-ui-grid-medobs-wrapper h4.first { margin:0 0 0.5em 0 !important; } #grid-medobs-template { display: none; } /* Template table for creation of new table-rows */ .tDnD_whileDrag { background-color: #eee; } .ap2-ui-grid-medobs .emptyrow td { font-style: italic; color: #666; border-bottom: 0px solid #e8e8e8 !important; } .ap2-ui-grid-medobs .nodrag, .ap2-ui-grid-medobs .nodrop { cursor: default; } .ap2-ui-grid-medobs th, .ap2-ui-grid-medobs td { font-size:11px; white-space:nowrap; padding:0px 2em 0px 0px; border-bottom: 1px solid #e8e8e8; background-color: #ffffff; } .ap2-ui-grid-medobs .grid-delete { visibility: hidden; display:block; } .ap2-ui-grid-medobs tr:hover .grid-delete { visibility: visible; } .ap2-ui-grid-medobs tr:hover td { background-color:#f6f6f6; } .ap2-ui-grid-medobs tr:hover td.row-number { background: #f6f6f6 url(../Images/Icons/drag-handle.png) no-repeat left center; } .ap2-ui-grid-medobs tr:hover td.row-number span { display: block; visibility: hidden; } .ap2-ui-grid-medobs td.row-number, .ap2-ui-grid-medobs th.row-number { text-align:right; padding:0px 6px 0px 2px; font-weight: bold; } .ap2-ui-grid-medobs .username { width: 100%; } .ap2-ui-grid-medobs td.delete { padding:0px 2px 0px 2px; } .ap2-ui-grid-medobs .unselected, .ap2-ui-grid-medobs .unselected a.user { color: #999; } .ap2-ui-grid-medobs .unselected .row-number { font-weight:normal; } .ap2-ui-grid-medobs a { text-decoration:none; } .ap2-ui-grid-medobs a:hover { text-decoration:underline; } /* pager for Grid - todo add this styles to the anchor-tag instead */ ul.ap2-ui-grid-pager { margin:0; padding:0; list-style-type:none; float: right; } ul.ap2-ui-grid-pager li { display:inline; font-size:11px; } ul.ap2-ui-grid-pager li { -moz-border-radius: 3px; border: 1px solid #ccc; background-color: #f0f0f0; padding: 0px 5px; } ul.ap2-ui-grid-pager li:hover { border: 1px solid #666; background-color: #e0e0e0; padding: 0px 5px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- UI Forms ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ label { font-size:11px; color:#666; } label.field-required { background: transparent url(../Images/Icons/field_required_star.png) no-repeat left center; padding-left: 10px !important; } label span.field-required { color:#c00; display:none; } span.field-validation-error { background:#FBE3E4;color:#8a1f11;border: 1px solid #FBC2C4; font-weight:bold; font-size:11px; padding:2px 5px; } /* wrappers and styles for inputs and textareas*/ .ap2-ui-form-input-wrapper, .ap2-ui-form-select-wrapper, .ap2-ui-form-textarea-wrapper, .ap2-ui-form-textarea-wrapper-resizeable, .textarea-box { border: 1px solid #e6e6e6; border-color: #bfbfbf #e6e6e6 #e6e6e6 #bfbfbf; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: #fafafa url(../Images/ap2-ui-inputshadow.png) no-repeat scroll top left; padding: 2px 4px; margin: 1px 0; } .ap2-ui-form-input-wrapper input, .ap2-ui-form-select-wrapper select, .ap2-ui-form-input-wrapper select, .ap2-ui-form-textarea-wrapper textarea { font-size:11px; background-color:#fafafa; width: 100% !important; border: 0; margin:0; padding:0; } .ap2-ui-form-select-wrapper { padding: 0px !important; } .ap2-ui-form-textarea-wrapper { padding: 5px; } textarea:focus, select:focus, input:focus { outline:none; } /* Removes the outline in Chrome */ label.ap2-ui-form-active { color: #000 !important; border-bottom: 1px dotted #83beee; } .ap2-ui-form-active { background-color:#ffffff !important; border-color: #83beee; } .ap2-ui-form-active input, .ap2-ui-form-active select, .ap2-ui-form-active textarea { background-color:#ffffff !important; } label.ap2-ui-form-error { color: #c00 !important; border-bottom: 1px solid #c00; font-weight:bold; } .ap2-ui-form-error { background-color:#FFF2EF !important; border-color: #c00; } .ap2-ui-form-error input, .ap2-ui-form-error select, .ap2-ui-form-error textarea { background-color:#FFF2EF !important; } /* Old styling of inputs - removed by JSZ 2009-12-17 .textarea-box { border: 1px solid #999999; -webkit-border-radius: 3px; -moz-border-radius: 3px; background: #ffffff url(../Images/ap2-ui-inputshadow.gif) no-repeat top left; padding: 3px 5px; margin: 3px 0; } */ #ap2-ui-form-helper { display:none; float:right; } #ap2-ui-form-helper a { display:block; float:left; cursor:pointer; text-decoration:none; outline:none; color: #666; height:22px; line-height:22px; background: transparent url(../Images/ap2-ui-form-helper.png) no-repeat left -22px; padding:0 0 0 38px;} #ap2-ui-form-helper a:hover { background-position: left -66px; color: #000; } #ap2-ui-form-helper a:hover span { color: #000 !important; } #ap2-ui-form-helper a span { height:22px; line-height:22px; font-size:10px; } #ap2-ui-form-helper a span.corner { display:block; background: transparent url(../Images/ap2-ui-form-helper.png) no-repeat top right; } #ap2-ui-form-helper a:hover span.corner { background-position: -44px right; } #ap2-ui-form-helper a span.label-text { display:block; padding: 0px 5px 0px 5px; } #ap2-ui-form-helper a span.ap2-ui-form-helper-on { float:left; display:block; padding-right:20px; color: #3a822b; font-weight:bold; background: transparent url(../Images/Icons/ui-check-box.png) no-repeat center right; } #ap2-ui-form-helper a span.ap2-ui-form-helper-off { float:left; display:none; padding-right:20px; color: #999; font-weight:bold; background: transparent url(../Images/Icons/ui-check-box-uncheck.png) no-repeat center right; } /* field instruction that becomes a tooltip via the jQuery function FormFieldInstructions() in Artportalen.UI.js */ #ap2-ui-form-fieldinstruction-tooltip { position:absolute; display: none; z-index: 3000; width:250px; font-size: 11px; font-weight: normal; background:#FFF6BF;color:#514721;border:1px solid #AF9015; -moz-border-radius:3px; -webkit-border-radius:3px; padding:2px 5px; -moz-box-shadow: 1px 1px 3px #333; } /* hide the instruction text */ .ap2-ui-form-fieldinstruction { display: none; } #ap2-ui-form-fieldinstruction-tooltip span.ap2-ui-form-fieldinstruction-error { font-weight:bold; color:#c00; margin-bottom:1em; display:block; } /* pointers for the field instruction tooltip */ #ap2-ui-form-fieldinstruction-tooltip #pointer, #ap2-ui-form-fieldinstruction-tooltip #inner-pointer { position: absolute; width:0; height:0; background: none; } #ap2-ui-form-fieldinstruction-tooltip .arrow-up { border-top-width: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #AF9015; top: -12px; right: auto; left: 11px; margin-left: -7px; } #ap2-ui-form-fieldinstruction-tooltip #pointer .arrow-up { border-top-width: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #FFF6BF; top: auto; margin-left: auto; bottom: auto; bottom: -12px; left: -6px; } #ap2-ui-form-fieldinstruction-tooltip .arrow-down { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 12px solid #AF9015; border-bottom-width: 0; bottom: -12px; right: auto; left: 11px; margin-left: -7px; } #ap2-ui-form-fieldinstruction-tooltip #pointer .arrow-down { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 11px solid #FFF6BF; border-bottom-width: 0; bottom: 1px; left: -6px; margin-left: auto; } #ap2-ui-form-fieldinstruction-tooltip .arrow-right { border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #AF9015; border-right-width: 0; right: -12px; bottom: auto; top: 10px; margin-top: -7px; } #ap2-ui-form-fieldinstruction-tooltip #pointer .arrow-right { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 11px solid #FFF6BF; border-right-width: 0; right: 1px; top: 1px; } /* Styles for the resizeable textarea (jQuery-plugin) */ div.grippie { background:#EEEEEE url(../Images/Icons/grippie.png) no-repeat scroll center 2px; border-color:#DDDDDD; border-style:solid; border-width:1px 1px 0px 1px; cursor:s-resize; height:9px; overflow:hidden; } textarea.resizable { border: 0; margin:0; padding:0; } .resizable-textarea textarea { display:block; margin-bottom:0pt; width:100%; height: 80%; } .ap2-ui-form-textarea-wrapper-resizeable { padding:3px 0 0 0; margin: 3px 0; } /* Styles for the multi-user selector */ .ap2-ui-multiusertable { padding:0; margin:0; } .ap2-ui-multiusertable td { padding:0; vertical-align:top; border:none; } .textarea-box { border:1px dashed #666 !important; } .ap2-ui_input_multiselector { list-style-type:none; margin:0; padding:0; } .ap2-ui_input_multiselector li { float:left; margin:0 0 2px 0; padding:0; white-space:nowrap; } .ap2-ui_input_multiselector li.empty { display:none; font-style: italic; color: #999;} .ap2-ui_input_multiselector li a { font-size: 10px; line-height: 18px; height: 18px; display:block; background-color:#007EC4; color: #fff; font-weight:bold; text-decoration:none; padding: 0 7px 0 5px; -moz-border-radius: 3px; margin-right: 2px; } .ap2-ui_input_multiselector li a span { display:block; padding-right: 13px; } .ap2-ui_input_multiselector li a:hover { color: #fff; background-color: #0095D5; } .ap2-ui_input_multiselector li span { background: transparent url(../Images/Icons/project-member-delete.gif) no-repeat center right; } .ap2-ui_input_multiselector-button_add { margin:1px 3px !important; display:inline; } .ap2-ui_input_multiselector-button_add span.icon-fill { background: transparent url(../Images/Icons/fill.png) no-repeat center right; white-space: nowrap; padding-right: 20px; position:relative; display:block; } /* Specific styles for inputs with icons */ /* .ap2-ui_input_datepicker { background: transparent url(../Images/Icons/input_datepicker.png) no-repeat center right; } */ .ap2-ui_input_datepicker { float:left; margin-right: 20px; } .ui-datepicker-trigger { float:left; width: 20px; height: 13px; display:block; cursor:pointer; margin-left: -20px; background: transparent url(../Images/Icons/input_datepicker_trigger.png) no-repeat center right; } .ui-datepicker-trigger:hover { background: transparent url(../Images/Icons/input_datepicker_trigger_over.png) no-repeat center right; } .ap2-ui_input_datepicker-trigger { float:left; width: 16px; height: 16px; display:block; cursor:pointer; margin-left: -16px; background: transparent url(../Images/Icons/calendar_month.png) no-repeat center right; margin-top:3px; } .ap2-ui_input_organizationselector { background: transparent url(../Images/Icons/accordion.png) no-repeat center right; } .ap2-ui_input_userselector { background: transparent url(../Images/Icons/ui-menu-blue.png) no-repeat center right; } .ap2-ui_input_email { background: transparent url(../Images/Icons/input_email.png) no-repeat center right; } .ap2-ui_input_time { } /*.ap2-ui_input_autocomplete-value { background: transparent url(../Images/Icons/user_plus.png) no-repeat center right; }*/ /* Specifik rules for the create account form */ #createaccount h4 { margin:1em 0 0.5em 0; padding:4px 0; border-bottom:2px solid #999; background: url(../Images/ap2-ui-header4-bg.png) repeat-x top left; } #createaccount h4.first { margin:0 0 0.5em 0 !important; } #createaccount .checkbox-wrapper { padding-top: 1.5em; } /* Password strength meter */ #iSM { margin:0;padding:0;height:16px; } #iSM ul { margin:0;padding:0;list-style-type:none;text-align:center;} #iSM ul li {display:block;float:left;text-align:center;padding:1px 0 0 0;margin:0;height:16px;} #iWeak,#iMedium,#iStrong {width:60px;font-size:10px;color:#adadad;text-align:center;padding:2px;background-color:#fafafa;display:block;border:solid 1px #ccc;} #iWeak,#iMedium {border-right:none;} #iMedium {width:60px;} div.strong #iWeak, div.strong #iMedium, div.strong #iStrong { background: #00CC66; color: #00CC66; } div.medium #iWeak, div.medium #iMedium { background: #FFFF99;color: #FFFF99; } div.weak #iWeak { background: #FF0000; color: #FF0000; } div.strong #iStrong, div.medium #iMedium, div.weak #iWeak { color:#000; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- UI Buttons ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ h4.BoxHeader { margin: 4px; background:transparent url(../Images/Icons/drawer.png) no-repeat left center; padding-left: 20px;} .BoxHeaderUser { background:transparent url(../Images/Icons/user_business.png) no-repeat left center !important; } h4.BoxHeader a { display:block; padding-left: 3px; text-decoration:none; color:#333; padding-right: 15px; background:transparent url(../Images/Icons/toggle.png) no-repeat right center; } h4.BoxHeader a:hover { text-decoration:underline; color:#00c; background: transparent url(../Images/Icons/toggle_collapse.png) no-repeat right center; } button.ap2-ui-button, button.ap2-ui-button-small { margin: 0; border: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; background: transparent url(../Images/ap2-ui-button-large.png) repeat-x top; } button.ap2-ui-button { padding: 6px 8px 6px; font-family:arial; font-size: 12px; font-weight: bold; } button.ap2-ui-button-small { padding: 3px 6px 3px; font-family:arial; font-size: 11px; font-weight: bold; margin: 1px 0; } button.ap2-ui-button:hover, button.ap2-ui-button-small:hover { cursor: pointer; color: #007EC4; } /*clone of Södercrantz button by Calle*/ input.ap2-ui-button, input.ap2-ui-button-small { margin: 0 3px 0 0; border: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; overflow: visible; background: transparent url(../Images/ap2-ui-button-large.png) repeat-x top; } input.ap2-ui-button { padding: 6px 8px 6px; font-family:arial; font-size: 12px; font-weight: bold; } input.ap2-ui-button-small { padding: 3px 6px 3px; font-family:arial; font-size: 11px; font-weight: bold; margin: 3px 0; } input.ap2-ui-button:hover, input.ap2-ui-button-small:hover { cursor: pointer; color: #007EC4; } /* UI Button-Link with Image (21 px) */ .ap2-ui-button-21 { cursor: pointer; margin:0 2px 0 0; color:#333; display:block; float:left; height:21px; line-height:21px; background: transparent url(../Images/ap2-ui-button-light-21.gif) no-repeat top right; padding-right: 8px; font-weight:bold; font-size: 11px; text-decoration:none; } .ap2-ui-button-21 span { height:21px; line-height:21px; } .ap2-ui-button-21:hover { background-position: right -21px; font-weight:bold; text-decoration:underline; color:#00c; } .ap2-ui-button-21:hover span.button { background-position: left -21px; } .ap2-ui-button-21 span.add { background: url(../Images/Icons/button-icon_add.gif) no-repeat center left; line-height:21px; display:block; padding-left: 13px; } .ap2-ui-button-21 span.button { background: transparent url(../Images/ap2-ui-button-light-21.gif) no-repeat top left; display: block; height: 21px; line-height: 21px; padding-left: 8px; } .ap2-ui_link_remove { background: url(../Images/Icons/button-icon_remove.gif) no-repeat center right; padding-right: 13px; } .ap2-ui_link_add { margin:2px; color:#333; display:block; float:left; height:23px; line-height:23px; background: transparent url(../Images/ap2-ui_button-light.gif) no-repeat top right; padding-right: 8px; font-weight:bold; text-decoration:none; } .ap2-ui_link_add:hover { background-position: right -23px; font-weight:bold; text-decoration:underline; color:#00c; } .ap2-ui_link_add:hover span.button { background-position: left -23px; } .ap2-ui_link_add span.add { background: url(../Images/Icons/button-icon_add.gif) no-repeat center left; padding-left: 13px; } .ap2-ui_link_add span.button { background: transparent url(../Images/ap2-ui_button-light.gif) no-repeat top left; display: block; line-height: 19px; padding: 2px 0 2px 8px; } a.ap2-ui_button_disabled { color: #ccc !important; background-position: right -84px !important; } a.ap2-ui_button_disabled span { background-position: 0px -84px !important; } a.ap2-ui_button_disabled:hover span{ text-decoration: none !important; } a.ap2-ui_button_cancel { color: #333 !important; } a.ap2-ui_button_cancel:active { color: #600303 !important; background-position: right -56px !important; } a.ap2-ui_button_cancel:active span { background-position: 0px -56px !important; } a.ap2-ui_button_cancel:hover span { text-decoration: underline; } button.ap2-ui_button, a.ap2-ui_button, input.ap2-ui_button { background: transparent url(../Images/ap2-ui_button_sprite.gif) no-repeat top right; /*color: #444;*/ display: block; /*float: left;*/ font: bold 11px arial, sans-serif; height: 28px; margin-right: 6px; padding-right: 14px; /* sliding doors padding */ text-decoration: none; outline: none; border:none; cursor:pointer; } button.ap2-ui_button span.button, a.ap2-ui_button span.button { background: transparent url(../Images/ap2-ui_button_sprite.gif) no-repeat top left; display: block; float: left; white-space:nowrap; line-height: 28px; padding: 0px 0px 0px 14px; } button.ap2-ui_button:hover, a.ap2-ui_button:hover { background-position: right -112px; } button.ap2-ui_button:hover span.button, a.ap2-ui_button:hover span.button { background-position: 0px -112px; text-decoration: underline; } button.ap2-ui_button_normal, a.ap2-ui_button_normal { background-position: right -28px; color: #fff; outline: none; } button.ap2-ui_button_normal span.button, a.ap2-ui_button_normal span.button { background-position: 0px -28px; } a.ap2-ui_button_cancel:hover { background-position: right -112px; } a.ap2-ui_button_cancel:hover span.button { background-position: 0px -112px; text-decoration: underline; } /* Large button -temporary style */ a.large-button { cursor:pointer; font-size:12px; color: #333; font-weight:bold; outline:none; text-decoration:none; display:block; float: left; background: transparent url(../Images/ap2-ui-button-sprite.png) no-repeat 0px -40px; } a.large-button span.button { margin-left: 12px; display:block; padding: 0px 12px 0px 0px; background: transparent url(../Images/ap2-ui-button-sprite.png) no-repeat right 0px; } a.large-button:hover { background-position: 0px -120px; } a.large-button:hover span.button { background-position: right -80px; } a.large-button-disabled, a.large-button-disabled:hover { color: #ccc !important; background-position: 0px -200px !important; } a.large-button-disabled span.corner, a.large-button-disabled:hover span.corner { background-position: right -160px !important; } a.large-button-disabled span.inner { padding: 0px 2px !important; background-position: right -160px !important; } a.large-button span.inner { display:block; padding:0px 20px 0px 2px; height: 34px; line-height:34px; background: transparent url(../Images/Icons/world_go_small.png) no-repeat right 50%; text-shadow:1px 1px 1px #fff; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- PAGE CONTENT STYLE FOR SIDEBAR (RIGHT SPAN-5 + emptycol) + MAIN (SPAN-18) Faux column background for left sidebar with class "span-5 emptycol" ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .ap2-ui-bg-rightsidebar5 { background: #ffffff url(../Images/ap2-ui-bg-rightsidebar5.gif) repeat-y left top; } .ap2-ui-bg-rightsidebar5-topspace { background: #ffffff url(../Images/ap2-ui-bg-rightsidebar5.gif) repeat-y left top; border-top:1px solid #e4e4e4; padding-top: 1.5em; } /* Main header style */ h2.main { border-bottom:1px solid #ccc; margin:0; color:#444; } .ap2-ui-contentbox { padding: 10px; border:1px dotted #ddd; position:relative; } .ap2-ui-contentbox h5.ap2-ui-contentbox-label-l { text-align:right;position:absolute;top:-11px;left:10px;font-size:13px; } .ap2-ui-contentbox h5.ap2-ui-contentbox-label-l span { background-color:#fff;padding:0 3px;color:#333; } .ap2-ui-contentbox h5.ap2-ui-contentbox-label-r { text-align:right;position:absolute;top:-9px;right:10px;font-size:11px; } .ap2-ui-contentbox h5.ap2-ui-contentbox-label-r span { background-color:#fff;padding:0 3px;color:#888; } .ap2-ui-contentbox h5.ap2-ui-contentbox-label span.instruction { background:#fff url(../Content/Images/Icons/info.gif) no-repeat center left;padding:0 3px 0 21px; } p.last { margin-bottom:0; } #sidebar p { } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- PLUGIN STYLES Specific styles for plugins and jQuery content ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* STYLES USED BY THE "jquery.tools.min.js" LIBRARY */ /* use a semi-transparent image for the overlay */ div.overlay, #overlay { background-image:url(../Images/Overlay/white.png); padding:40px; width:576px; display:none; } /* image for the close-button */ div.overlay div.close, #overlay div.close { background: url(../Images/Overlay/close.png) no-repeat; position:absolute; top:2px; right:5px; width:35px; height:35px; cursor:pointer; } /* container for external content. uses scrollbar, if needed */ #overlay div.contentWrap { height:441px; overflow: auto; } /* STYLES USED BY THE "Artportalen.UI.js" LIBRARY */ /* Ajax Notification message - fixed position */ #ap2-ui-ajaxNotificationWrapper { z-index: 9999; position: fixed; bottom: 5px; right: 5px; display: block; color: black; padding: 5px 10px; font-size:13px; font-weight:bold; border: 3px solid #999; -moz-box-shadow:0 0 13px 0 #999; -webkit-box-shadow: 0 0 13px #999; -moz-border-radius:5px; -webkit-border-radius:5px; } .ap2-ui-ajaxNotificationWrapper_success { border: 3px solid #006600 !important; background: #e0ffe0; } .ap2-ui-ajaxNotificationWrapper_success span { background: transparent url(../Images/Icons/tick_circle.png) no-repeat left center; padding-left: 20px; } .ap2-ui-ajaxNotificationWrapper_info { border: 3px solid #003399 !important; background: #def5ff; } .ap2-ui-ajaxNotificationWrapper_info span { background: transparent url(../Images/Icons/information_circle.png) no-repeat left center; padding-left: 20px; } .ap2-ui-ajaxNotificationWrapper_warning { border: 3px solid #660000 !important; background: #ffe8d1; } .ap2-ui-ajaxNotificationWrapper_warning span { background: transparent url(../Images/Icons/cross_circle.png) no-repeat left center; padding-left: 20px; } /* STYLES USED BY THE "PRETTY CHECKBOXES JQUERY PLUGIN" */ /* Total height of your checkbox image + Path to your checkbox image */ label.checkbox span.holder { height: 61px; background: url(../Images/ap2-ui-checkbox.gif) 0 -1px no-repeat; } /* Total height of your radio buttons image + Path to your radio button image */ label.radio span.holder { height: 61px; background: url(../Images/ap2-ui-radio.gif) 0 -1px no-repeat; } /* Background position on mouseover */ label.checkbox:hover span.holder, label.radio:hover span.holder { top: -21px !important; } /* Background position when checked */ label.checked span.holder, label.checked span.holder, label.checked:hover span.holder, label.checked:hover span.holder { top: -42px !important; } /* Customize at your own risk */ label.list { float: left; clear: left; margin: 0 0 5px 0; } label.inline { float: left; margin: 0 10px 0 0; } input.hiddenCheckbox { position: absolute; left: -10000px; } /* Hide the input */ label.prettyCheckbox span.holderWrap { display: block; float: left; position: relative; margin-right: 5px; overflow: hidden; } label.prettyCheckbox span.holder { display: block; position: absolute; top: 0; left: 0; } /* JQUERY UI styles */ .ui-effects-transfer { border: 2px solid #38A9EB; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- LINK STYLES ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Generic classes for links with an icon */ .ap2-ui-link-viewprofile { background: url(../Images/Icons/card_address.png) no-repeat right center; padding-right: 20px !important; margin-right: 3px !important; } /* toogle table rows */ td.toggle { overflow:hidden; width:16px; height:16px; display:block; text-indent:-999px; cursor: pointer; background: #cccccc url(../Images/Icons/toggle-sprite.png) no-repeat 0px 0px; } td.toggle:hover { background-position: 0px -40px; } td.toggle-minus { background-position: 0px -80px !important; } td.toggle-minus:hover { background-position: 0px -120px !important; } .UI-Icon-16 { width:16px !important; height:16px !important; background: url(../Images/ap2-ui-icons-sprite.png) no-repeat 0px 0px; margin:0px 5px; display:block; float:left; } .UI-Icon-16-Address { background-position: 0px -40px; } .UI-Icon-16-EmptyRow { background-position: 0px -200px; } .UI-Icon-16-Key { background-position: 0px -160px; } .UI-Icon-16-Personal { background-position: 0px 0px; } .UI-Icon-16-UserInfo { background-position: 0px -120px; } .UI-Icon-16-Users { background-position: 0px -80px; } /* flags */ .UI-Icon-16-Flag-SE { background: url(../Images/Flags/se.png) no-repeat center 3px; } .UI-Icon-Flag { width:16px !important; height:11px !important; margin:0px 0px 0px 0px; display:block; float:left; background: url(../Images/ap2-ui-login-sprite.png) no-repeat 0px -40px; } .UI-Icon-Flag-sv-SE { background-position: 0px -40px !important; } .UI-Icon-Flag-nb-NO { background-position: -40px -40px !important; } .UI-Icon-Flag-nn-NO { background-position: -40px -40px !important; } .UI-Icon-Flag-en-US { background-position: -80px -40px !important; } .UI-Icon-Flag-en-GB { background-position: -80px -40px !important; } .UI-Icon-Flag-fi-FI { background-position: -120px -40px !important; } .UI-Icon-Flag-da-DK { background-position: -160px -40px !important; } /* Resource management */ #translateResources, #debug_deployResources { position:fixed; bottom:30px; left:10px; display:none; background-color: #fff; padding:10px; border: 1px solid #666; -moz-border-radius: 10px; -moz-box-shadow: #666 1px 1px 3px; } #debug_deployResources div { height:500px; overflow:auto; } #translateResources .closeTheDiv, #debug_deployResources .closeTheDiv { position: absolute; text-indent: -9999px; display:block; width:36px; height:36px; right:-17px; top:-17px; background: url(../Images/Icons/close.png) no-repeat center center; } #ResourcesToolbar { position:fixed; float:left; bottom: 0px; left: 4px; background: transparent url(../Images/ap2-ui-subnavigation-sprite.png) no-repeat top left; } #ResourcesToolbar div { margin-left: 10px; line-height:20px; padding: 10px 20px 2px 10px; background: transparent url(../Images/ap2-ui-subnavigation-sprite.png) no-repeat top right; } #ResourcesToolbar .locale { font-weight:bold; float:left; display:block; padding:0px 10px 0px 20px; background: transparent url(../Images/Icons/locale.png) no-repeat center left; } #reportSighting { margin-top:7px; } #reportSighting .infobox { padding: 10px; border:3px solid #eee; } #reportSighting ul.wizard-header { margin:0 0 1.5em 0; padding:0; padding-left:1em; list-style-type:none; background: transparent url(../Images/ap2-ui-wizard-menu-sprite.png) repeat-x left bottom; } #reportSighting ul.wizard-header li { position:relative; padding-left: 15px; background: transparent url(../Images/ap2-ui-wizard-menu-sprite.png) repeat-x 0px -40px; float:left; display:block; margin-right:10px; } #reportSighting ul.wizard-header li a { text-decoration:none; display:block; padding-left: 22px; } #reportSighting ul.wizard-header li a:hover, #reportSighting ul.wizard-header li a:focus { text-decoration:underline; } #reportSighting ul.wizard-header li h4 { font-size:16px; color:#999; font-weight: normal; margin:0; padding: 5px 15px 5px 0px; background: transparent url(../Images/ap2-ui-wizard-menu-sprite.png) repeat-x right -40px; } #reportSighting ul.wizard-header li.active { background-position: top left; } #reportSighting ul.wizard-header li.active h4 { color:#333; font-weight:bold; margin-bottom:1px; background-position: top right; } #reportSighting ul.wizard-header li.report a { background: transparent url(../Images/Icons/bullet_add.png) no-repeat center left; } #reportSighting ul.wizard-header li.review a { background: transparent url(../Images/Icons/magnifier-left.png) no-repeat center left; } #reportSighting ul.wizard-header li.publish a { background: transparent url(../Images/Icons/world_go_small.png) no-repeat center left; } #reportSighting ul.wizard-header li.nrofrecords { float:right; border: none; margin-right:0px !important; padding-right:0px; background:none; } #reportSighting ul.wizard-header li.nrofrecords h4 { color:#333; background: transparent url(../Images/Icons/folder_open_table.png) no-repeat center left; padding-left: 22px; padding-right: 0px; } #reportSighting ul.wizard-header .navContent { display: none; z-index: 1050; position: absolute; top: 31px; left: -5px; margin: 0; padding: 0; width: 300px; } #reportSighting ul.wizard-header .navContent { background: transparent url(../Images/ap2-ui-subnavigation-sprite.png) no-repeat bottom left; } #reportSighting ul.wizard-header .navContent .inner { margin-left: 10px; padding:10px 20px 20px 10px; background: transparent url(../Images/ap2-ui-subnavigation-sprite.png) no-repeat bottom right; } #reportSighting ul.wizard-header li:hover>.navContent, #reportSighting ul.wizard-header li:focus>.navContent {display:block; z-index:1600;} #reportSighting input { font-weight: normal; font-family:monospace; } #reportSighting .ap2-ui_input_datepicker { width:9.5em !important;} #reportSighting .ap2-ui_input_time { width:3em !important;} td.disabled .ap2-ui-form-input-wrapper, td.disabled .ap2-ui-form-select-wrapper { border: 1px solid #eee !important; color: #ccc; background: #fafafa; } td.disabled input, td.disabled select { background: #fafafa; color: #ccc; } td.disabled label { color: #ccc !important; } #reportSighting fieldset { border: 1px solid #bacad2; background-color:#fff; margin:0; padding:0; } #reportSighting fieldset h3 { margin:0; font-size:12px; line-height:18px; font-weight:bold; color: #2d3c44; border: 1px solid #fff; border-bottom:none; background-color:#f0f4f5; padding: 1px 5px; display:block; } #reportSighting label { line-height:12px; font-size:11px; color:#666; font-weight: normal; white-space: nowrap; } #reportSighting table { margin-bottom:0px; border-collapse:collapse; } /* border: 1px dotted #999; */ #reportSighting td { padding:0px 10px 0px 1px; vertical-align:top; background-color: #fff; } #reportSighting table.tight td { padding:0px; vertical-align:top; background-color: #fff; } #reportSighting td.label { text-align:right; width:20%; padding:1px 1px 1px 10px; } #reportSighting td.label label { display:block; float:right; text-align:right; margin-top:3px; font-weight:bold; color:#333; padding:0 3px; } #reportSighting td.tabledivider { padding: 5px 5px 5px 0px; } #reportSighting td.tabledivider-tight { padding: 0px !important; } #reportSighting td.tabledivider span { color: #666; background-color: #fff; font-size:9px; padding: 0px 3px 0px 0px; float:left; } #reportSighting td.tabledivider div.tabledivider { border-bottom: 1px dotted #999; margin: 5px 0px 5px 5px; height:1px;} .ui-effects-transfer { background: transparent url(../Content/Images/Icons/database_save.png) no-repeat 50% 20%; border: 2px solid #38A9EB; } #review_toolbar { border: 1px solid #ccc; border-top: none; background-color:#eee; padding:4px; } #review_toolbar span.arrow-up { margin:0px 2px 0px 2px; height: 23px; width:16px; display:block; float: left; background: transparent url(../Images/Icons/arrow-turn-090.png) no-repeat center center; } #review_toolbar a.button { background: transparent url(../Images/ap2-ui-header4-bg.png) repeat-x top left; border: 1px solid #999; line-height:19px; display:block; padding: 0 5px; float:left; margin:5px 5px 5px 0px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- MAP STYLES ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #EmptySiteInformation { font-style: italic; } #SiteInformation { display :none; }