/*
Description: individual elements formatting
Author: Melnychuk Oleg
Author URI: http://my.opera.com/melnichuck
*/

/* global */
body {color:#333; font-family:Tahoma, Helvetica, Arial, sans-serif; font-size:12px; padding-bottom:15px !important; padding-bottom:8px}

a {color:#0072bc; outline:none}
a:hover {color:#008ae5}

.hideScroll {overflow:hidden !important; overflow-x:hidden; overflow-y:hidden}
.showScroll {overflow:visible !important; overflow-x:visible; overflow-y:visible}

.hidden {display:none}
.loading {background:url(../images/loading.gif) center no-repeat}

/* image sprites */
#header, #header li.active, #footer, #status,
#tool-zoom-in, #tool-zoom-out, #tool-move, #tool-pointer,
#logo, #sidebar .item h2 a, #handler a, #results ul {background:url(../images/image-sprites.png) no-repeat}

/* common */
#header, #footer {background-repeat:repeat-x; min-width:760px}
#header h1, #sidebar h2 {font-weight:normal}
#header ul {list-style:none}

/* header */
#header {height:49px; background-color:#f6f6f6; background-position:0 -56px; border-bottom:#bab7ba solid 1px; padding:0 10px; overflow:visible !important; overflow:hidden; /* IE Hack */}
#header h1 {color:#79ab36; float:left; font-size:22px; position:relative; top:12px}
#header h1 strong {color:#4d4d4f; font-weight:normal}
#header h1 a {background:url(../images/bg-city-selector.gif) top right no-repeat; color:#79ab36; padding-right:15px; text-decoration:none}
#header ol {width:167px; background:#f6f6f6; border:#ccc 1px solid; border-top:none; list-style:none; padding-bottom:5px; position:absolute; text-align:left; top:49px; left:42px; display:none; z-index:100}
#header h4 {font-size:13px; font-weight:normal}
#header h4 a {border-bottom:#ccc dotted 1px; display:block; padding:0 10px; text-decoration:none}
#header h4 a:hover {background:#fff; color:#4d4d4f}
#header ul {width:300px; color:#999; float:left; margin-left:10%}
#header ul li {width:43px; height:50px; float:left}
#header li.label {width:100px; position:relative; top:21px;}
#header ul li a {width:28px; height:28px; display:block; margin:15px auto 0 auto}

/* tools */
#tool-zoom-in {background-position:0 0}
#tool-zoom-out {background-position:-28px 0}
#tool-move {background-position:-56px 0}
#tool-pointer {background-position:-84px 0}

#header li.active {background-position:-179px 0}
#header li.active a {color:#666; cursor:default}

.active #tool-zoom-in, #tool-zoom-in:hover {background-position:0 -28px}
.active #tool-zoom-out, #tool-zoom-out:hover {background-position:-28px -28px}
.active #tool-move, #tool-move:hover {background-position:-56px -28px}
.active #tool-pointer, #tool-pointer:hover {background-position:-84px -28px}

/* languages selection */
ul#lang-list {width:100px; float:right; margin:21px 15px 0 0}
ul#lang-list li {width:36px; height:20px; margin-right:10px}
ul#lang-list li a {text-decoration:none; margin:0 auto}
ul#lang-list li.active {background-position:-229px 0}
ul#lang-list a:hover {text-decoration:underline}
ul#lang-list li.active a:hover {text-decoration:none}

#logo {width:67px; height:49px; background-position:-112px 0; float:right}

/* sidebar */
#sidebar {width:223px; background:url(../images/bg-sidebar-handler.png) right top repeat-y; border-right:#bab7ba solid 1px; clear:both; float:left; position:relative; text-align:left}
#sidebar .item {margin:1px 1px 0 1px}
#sidebar .item h2 a {width:202px; height:31px; background-color:#e2e2e2; background-position:0 -143px; border-top:#cfcfcf solid 1px; color:#5c5c5c; display:block; font-size:14px; line-height:30px; padding-left:10px; text-decoration:none; text-shadow:1px 1px 1px #ccc}
#sidebar .active h2 a {background-color:#8a96ac; background-position:0 -174px; border-top:#7c8ba3 solid 1px; color:#fff; cursor:default; text-shadow:1px 1px 1px #666}
#sidebar .item h2 a:hover {color:#000}
#sidebar .active h2 a:hover {color:#fff}
#sidebar h3 {color:#ccc; font-size:18px; margin:0; padding:0}

/* sidebar handler */
#handler {width:8px; float:right; position:relative}
#handler a {width:7px; height:7px; background-color:#ccc; background-position:-222px 0; position:absolute; top:49%; right:0}

/* item contents */
#sidebar ul {list-style:none}
#sidebar .content {display:none}
#sidebar .active .content {display:block; overflow:auto; padding:0 20px 5px 10px}
.errorMessage {color:#999; clear:left; display:none; margin:0 0 0 15px; padding-top:5px}
.errorMessage label {color:#c00; font-weight:normal}

/* search form */
#sidebar form {display:block}
#sidebar form div {float:left}
#sidebar input.text {width:160px; height:20px; border:#999 solid 1px; color:#6b6e6b; padding:2px 20px 0 7px}
#sidebar select {width:190px; height:20px; background:#fff; color:#6b6e6b; font-size:11px}
#query:hover {border-color:#666; color:#333}
#sidebar form a {float:right; margin-top:4px}
#sidebar textarea {width:177px; height:80px; color:#6b6e6b; display:block}
#search-form {height:70px}

/* sidetoolbar */
#side-error {position:relative}
#sidetoolbar {width:30px; background:#eae7ea; border:#bab7ba solid 1px; border-left:none; display:none; list-style:none; padding:5px 0; position:absolute; right:-32px; top:32px; text-align:center; z-index:99;}
#sidetoolbar li {margin:1px auto}
#sidetoolbar a {width:30px; height:30px; background:url(../images/image-sidetoolbar.png) no-repeat left; display:block}

a#flag-add {background-position:0 0}
li.active a#flag-add:hover,
li.active a#flag-add {background-position:-62px 0}
a#flag-add:hover {background-position:-31px 0}

a#flag-rem {background-position:0 -30px}
li.active a#flag-rem:hover,
li.active a#flag-rem {background-position:-62px -30px}
a#flag-rem:hover {background-position:-31px -30px}

a#flag-clr {background-position:0 -60px}
li.active a#flag-clr:hover,
li.active a#flag-clr {background-position:-62px -60px}
a#flag-clr:hover {background-position:-31px -60px}

/* content */
#content {border:#ccc solid 1px; float:right; overflow:hidden; position:absolute; top:60px; left:234px}
#content p {position:absolute; top:0; left:5px; font-size:11px; font-weight:bold}
#scale {height:20px; background:#fff; border:#ccc solid 1px; font-size:9px; list-style:none; padding:4px 5px 0 5px; position:absolute; left:-1px; bottom:-1px}
#scale li {width:40px; height:3px; border:#999 solid 1px; float:left; line-height:3px; text-align:left}
#scale li.alt {background:#5f8c78; border-left:none; border-right:none}
#scale li span, #scale li em {color:#666; position:relative; top:10px; font-style:normal}
#get-opera {position:absolute; bottom:-1px; right:-1px}
#miniholder {background:#fff; border:#ccc double 3px; border-top:none; border-right:none; padding:0 0 1px 1px; position:absolute; top:-1px; right:-1px}
#miniholder img {display:block}
#viewport {border:#4D4D4F solid 1px; min-width:5px; min-height:4px; position:absolute; top:0; left:0}

/* cursors */
#map.tool-zoom-in {cursor:url(../images/cursors/zoom-in.cur), pointer}
#map.tool-zoom-out {cursor:url(../images/cursors/zoom-out.cur), pointer}
#map.tool-move {cursor:move}
#map.tool-pointer {cursor:crosshair}
#map.wait {cursor:wait}

#map.flag-add,
#map.flag-rem {cursor:crosshair}

/* button styling */
.button {background:#ddd; border:#999 solid 1px; margin:3px 0}
.button input {height:20px; background:#ddd; border-color:#fff #ddd #ddd #fff; border-style:solid; border-width:1px 0 0 1px; color:#555; cursor:pointer; display:block; line-height:15px; margin:0; padding:0 10px !important; padding:0}
.button input:hover {background:#ccc; color:#333}

/* search results */
#results {clear:left; padding-top:7px}
#results h4 {color:#596b87; font-weight:bold}
#results ul {background-position:0 -220px; margin-top:5px; overflow:auto !important; padding-top:10px;}
#results a {display:block; text-decoration:none}
#results a:hover {text-decoration:underline}
#results li.active {background:#fcfcfc; border-top:#ccc 1px solid; border-bottom:#ccc 1px solid; font-weight:bold; padding-left:5px}

/* footer */
#footer {clear:both; color:#666; background-position:0 -105px; border-top:#bab7ba solid 1px; padding:7px 10px !important; padding:3px 10px}
#footer p {height:15px; line-height:13px; margin:0; padding:0}
p#status {width:50%; background-position:-258px -158px; float:left; padding-left:18px; text-align:left}
p#copyright {width:30%; color:#999; float:right; text-align:right}

/* status messages */
#status.okay {background-position:-258px -143px}
#status.error {background-position:-258px -158px}
#status.info {background-position:-258px -173px}