/* illustration */
#flora-tr {
	top: 0;
	right: -168px;
	width: 496px;
	height: 400px;
	background: url(/f/1/global/flora/tr-sfl.jpg) no-repeat 0 0;
}

#outer {
	min-height: 100px;
}

.site-menu ul {
	font-size: 220%;
}

.site-menu .navigation li.business {
	width: 200%;
}

.site-menu .navigation li.about a,
.site-menu .navigation li.business a {
	position: relative;
	display: block;
	margin: 2px -40px 5px 0;
	zoom: 1;
}

.site-menu .navigation li.about a,
.site-menu .navigation li.business a,
.site-menu .navigation li.about .shadow,
.site-menu .navigation li.business .shadow {
	line-height: 1.15;
}

.site-menu .navigation li.business a {
	margin-right: 216px;
}
.site-menu .navigation li.business {
	white-space: nowrap;
}

.horzbar
{
	width: 2px;
	background: #ffffff;
	border-right: 1px solid;
	border-color: #bfbaab;
	z-index: 1;
}

.business .horzbar
{
	position: absolute;
	top: auto;
	bottom: -70px;
	left: auto;
	right: 215px;
	height: 90px;
}

div.about {
	position: relative;
	left: 5px;
	width: 48%;
}

.about .navigation
{
	width: 50%;
}

.about .company {
	position: absolute;
	bottom: 0px;
	right: -1px;
	width: 60px;
	height: 57px;
	background: url('company.png') 0 0 no-repeat scroll;
	cursor: pointer;
	cursor: hand;
}

#top-menu,
#bottom-menu
{
	background: transparent;
	left: 0;
}

#top-menu
{
	padding-bottom: 0;
}

#bottom-menu
{
	padding-top: 35px;
}

/* ----------------- speech bubble ---------------------*/
.balloon {
	position: absolute;
	top: -10px;
	left: 155px;
	margin: 0;
	padding: 1ex 0 0;
	min-height: 153px;
	width: 48%;
	color: #FFFFFF;
}

.balloon .balloon_inner
{
	position: relative;
	margin-left: 50%;
	width: 283px;
}
/*
.balloon .left_bg,
.balloon .right_bg
{
	position: absolute;
	top: 0;
	left: -60px;
	margin-left: 70%;
	width: 300px;
	height: 174px;
	background: url('balloon.png') bottom right no-repeat scroll;
	z-index: -1;
}

.balloon .left_bg
{
	margin-left: 50%;
	width: 20%;
	background-position: bottom left;
	z-index: 0;
}
*/

.balloon .balloon_inner .balloon-bg {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 419px;
	height: 153px;
	margin-left: -80px;
	z-index: -1;
	background: url(bg-balloon.png) no-repeat 0 0;
}

.balloon .values
{
	font-style: italic;
	font-size: 60%;
	padding-top: 7px;
}

.balloon .phrase
{
	font-size: 70%;
	color: #644565;
	margin-top: 5px;
	padding-right: 12px;
}

.balloon #phrases
{
	display: none;
}

.balloon .scroller
{
	position: relative;
	left: -2px;
}

.balloon .scroller div
{
	position: relative;
	float: left;
}

.balloon .scroller p.title
{
	font-size: 105%;
	margin: 0 0 0 25px;
}

.balloon .scroller .scrollbtn
{
	position: absolute;
	top: -4px;
	left: 0;
	height: 15px;
	width: 15px;
	margin: 0.5ex 0 0;
	cursor: pointer;
	cursor: hand;
	z-index: 1;
}

.balloon .scrollbtn#left ins.i i { left: -20px; }
.balloon .scrollbtn#right ins.i i { left: -40px; }

.balloon .scrollbtn#right {	left: 9.5em;}
.ua .balloon .scrollbtn#right {	left: 8.9em;}
.en .balloon .scrollbtn#right {	left: 7.8em;}


/* ---------------- content area customization ---------------------*/
.content-reducer
{
	padding: 0 0 0 150px;
	width: 48%;
	position: relative;
}

.content-reducer .col
{
	position: relative;
	z-index: 5;
}

.content-reducer .left,
.content-reducer .right
{
	float: left;
	width: 45%;
	padding-right: 5%;
}

.content-reducer .col.extra
{
	position: absolute;
	left: 100%;
	width: 35%;
	padding-right: 5%;
}

.content-reducer h4
{
	color: #FFFFFF;
}

.content-reducer h4.news,
.content-reducer h3
{
	font-size: 55%;
	line-height: 2;
}

.content-reducer p
{
	font-size: 70%;
}

.content-reducer .right
{
	clear: right; /*IE float jump fix*/
}

/* ------------------ analytics column --------------------- */

.content-reducer .analytics
{
	position: absolute;
	top: 0;
	left: 100%;
	width: 390px;
	height: 100px;
}


.analytics .diagram
{
	display: none;
	
	position: absolute;
	top: -2px;
	left: -65px;
	width: 55px;
	height: 28px;
	background: url('main_diagram.png') 0 0 no-repeat scroll;
}

.analytics .map,
.analytics .horzbar,
.analytics .overlays
{
	position: absolute;
	top: 95px;
	left: -255px;
}

.analytics .map,
.analytics .overlays
{
	width: 640px;
	height: 550px;
}

.analytics .overlay
{
	position: absolute;
	height: 100%;
	width: 100%;
}

.analytics .overlay#static
{
	z-index: 5;
}

.overlay_image img
{
	position: relative;
	z-index: -1;
}

.analytics .map
{
	background: url('ukraine_map.png') 0 0 no-repeat scroll;
	z-index: -1;
}

.analytics .horzbar#mapbar
{
	margin-left: 38px;
	top: 200px;
	height: 120px;
}

.horzbar a
{
	display: block;
	width: 100%;
	height: 100%;
	background: #ffffff;
}

.analytics .inner
{
	margin: 0.5ex 0 0 47px;
	position: relative;
	z-index: 10;
}

.analytics .inner p
{
	font-size: 90%;
}

.analytics .inner p,
.analytics .inner p a
{
	color: #FFFFFF;
}

.analytics .yeardisplay
{
	color: #FFFFFF;
	font-size: 225%;
	margin: -0.7ex 0 1.05ex;
}

.analytics .yeardisplay .current
{
	color: #5DD158;
}

.analytics div.timescale,
.analytics .timescale .tbc
{
	color: #F2F3AF;
	border-color: #F2F3AF;
}

.analytics div.timescale
{
	position: relative;
	left: 12px;
	width: 110%;
	height: 20px;
}

.analytics .timescale .wrapper
{
	position: relative;
	height: 20px;
	width: 80%;
	z-index: 1;
}

.analytics .timescale .tbc
{
	position: absolute;
	width: 2em;
	top: -15px;
	right: -35%;
	margin: 0;
	padding: 0;
}

.analytics .timescale .prophecy
{
	position: absolute;
	left: -50px;
	top: 10px;
	width: 234px;
	min-height: 115px;
	font-size: 75%;
	display: none;
}

.analytics .timescale .prophecy .d
{
	background-image: url('global/css/decor-shadow.png');
}

.analytics .timescale .prophecy p
{
	color: #233900;
	padding: 20px;
}

.analytics .timescale .prophecy .imgholder
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.imgholder img
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#runner {
	position: absolute;
	width: 30px;
	height: 32px;
	top: -5px;
	left: -13px;
	z-index: 1;
	cursor: move;
}
#runner ins.i {
	width: 100%;
	height: 100%;
}
#runner ins.i i {
	top: 0;
	left: -100px;
}

.analytics .timescale .year
{
	position: absolute;
	height: 40px;
	top: -12px;
	width: 20%;
}

.timescale .year.last
{
	width: 7px;
}

.year.clickable
{
	cursor: pointer;
	cursor: hand;
}

.analytics .timescale .year .scale
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: -1px;
	left: -2px;
	border-left: 1px solid;
	border-bottom: 1px solid;
	z-index: 1;
	font-size: 1px;
	/*overflow: hidden;*/
}

.analytics .timescale .year.last .scale
{
	border-left: none;
	border-bottom: 1px dotted;
}

.analytics .timescale .milestone .leftborder
{
	top: 5px;
	height: 6px;
}

.year .leftborder
{
	position: absolute;
	height: 3px;
	top: 8px;
	width: 100%;
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	opacity: 0.75;
}

.analytics .timescale .year.last .leftborder
{
	border-left: none;
	border-bottom: 1px dotted #000000;
	left: 2px;
}

.year p.label
{
	position: relative;
	font-size: 60% !important;
	margin: -2ex 0 0 -1ex;
	display: block;
}

/*-------------- bottom menu contacts ----------------------*/
.content-reducer.offices
{
	min-height: 32.5ex;
	margin-top: 1.4ex;
}

.offices h4
{
	font-weight: normal;
	padding-top: 1ex;
	margin: 0;
}

.contact p + h4,
.contact h4 + h4
{
	margin-top: 0;
	padding: 0;
}

.contact .office p
{
	display: none;
	margin: 0;
}

.contact .office.selected p
{
	display: block;
}


/* ---------------- ALS Logo ----------------------------*/

#footer
{
	position: relative;
	height: 10em;
	margin-top: -17em;
}

#als_logo
{
	position: absolute;
	top: 95px;
	left: 240px;
	width: 300px;
	height: 1em;
	font-size: 70%;
	line-height: 90%;
}

#als_logo img
{
	position: absolute;
	top: -35px;
	left: -90px;
}


.padder {
	position: relative;
	height: 100px;
}

/* left-bottom flora */

#flora-bl {
	width: 563px;
	height: 759px;
	background: url(/f/1/global/flora/bl.png) no-repeat 0 0;
	top: 33em;
	left: -260px;
}



/* --------------------- Home Map Cities ------------------------- */
.city
{
	position: absolute;
	font-size: 60%;
	font-style: italic;
	color: #a7ae92;
	height: 13px;
	padding: 12px 0 0 20px;
	z-index: 5;
	width: 100px;
}

.cityname
{
	position: relative;
	z-index: 10;
}

.city ins.marker {
	z-index: -1;
}
.city ins.marker i {
	left: -59px;
	top: 0;
}
.port ins.marker {
	height: 23px;
	width: 23px;
}
.port ins.marker i {
	left: -78px;
	top: -14px;
}

.city#Kyiv
{
	left: 282px;
	top: 105px;
	font-size: 80%;
}

.city#Ternopil
{
	right: 504px;
	top: 133px;
	width: 7em;
	padding-left: 0;
}

#Ternopil .marker
{
	top: auto;
	left: auto;
	right: 0;
	bottom: -10px;
}

.city#Khmelnytsky
{
	left: 169px;
	top: 158px;
}

.city#Frankivsk
{
	padding: 15x 5px 0 0;
	left: 85px;
	top: 200px;
}

.city#Chernivtsi
{
	left: 127px;
	top: 225px;
}

.city#Odessa
{
	left: 285px;
	top: 322px;
	z-index: 7;
}

#Odessa .marker,
#Berdyansk .marker
{
	left: -2px;
}

.city#Izmail
{
	left: 215px;
	top: 375px;
}

.city#Mykolaiv
{
	left: 333px;
	top: 295px;
}

.city#Illichivsk
{
	left: 280px;
	top: 339px;
	z-index: 6;
}

.city#Yuzhne
{
	left: 300px;
	top: 310px;
	padding: 8px 0 0 22px;
	z-index: 8;
}

.city#Sevastopol
{
	left: 390px;
	top: 410px;
}

.city#Kerch
{
	left: 507px;
	top: 370px;
}

.city#Berdyansk
{
	left: 502px;
	top: 295px;
}

.city#Eupatoria
{
	left: auto;
	right: 200px;
	top: 383px;
}

#Eupatoria .marker
{
	top: auto;
	left: auto;
	right: 20px;
	bottom: 0px;
}

.city#Vinnytsya
{
	left: 215px;
	top: 180px;
}

.city#Zhytomyr
{
	left: 220px;
	top: 115px;
}

/* ============= Overlay diagram ================ */
.diagram_overlay
{
	position: absolute;
	width: 133px;
	height: 134px;
	top: 245px;
	left: 60px;
	/*background: transparent url('overlay_diagram.png') 0 0 no-repeat scroll;*/
	z-index: 5;

}

.diagram_overlay .highlighted,
.diagram_overlay .others
{
	position: absolute;
	width: 50%;
	height: 50%;
}

.diagram_overlay .highlighted
{
	left: 53%;
	font-size: 110%;
	top: 15%;
}

.diagram_overlay .others
{
	top: 50%;
	left: 20%;
	font-size: 90%;
}
.diagram_overlay .percentage
{
	color: #FFFFFF;
	font-size: 100%;
	margin: 0;
}

.diagram_overlay .country_name
{
	margin: 0;
}

.diagram_overlay p
{
	width: 2em;
	line-height: 110%;
}
