/*
** World of Merix Studio
** 2009/05/26
*/
.sem-classe{}
.sem-classe:hover{ background:none}
html { width: 100%; height: 100%; background: #c0c23b url("../images/background_0.png") repeat 50% -9px; -webkit-text-size-adjust: 110%; }
body { position: relative; overflow: hidden; min-width: 1020px; padding: 0; background: transparent url("../images/background_1.jpg") repeat-x 50% 0; color: #999; font: 12px "Arial", "Helvetica", sans-serif; }
* { margin: 0; padding: 0; }
p, ul, ol, dl { padding-bottom: 1px; color:#FFF; font-size:11px; }
ul, ol { margin-left: 0; padding-left: 2em; }
h1, h2, h3, h4, h5, h6 { font-size: 1em; }
textarea, input, select, option, optgroup, button { font: 1em "Arial", "Helvetica", sans-serif; }
img { border: none; vertical-align: bottom; }
a { color: #fb682c; text-decoration: none; outline: none; cursor: pointer; }
a:hover { color: #fff; text-decoration: none; }
button, input.radio, input.checkbox, label, select { cursor: pointer; }
address { font-style: normal; }

object { display: none; }

body.js { overflow: hidden; width: 100%; height: 100%; }

body.mac { font-family: "Helvetica", "Arial", sans-serif; }
body.mac textarea, body.mac input, body.mac select, body.mac option, body.mac optgroup, body.mac button { font: 1em "Helvetica", "Arial", sans-serif; }

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner { padding: 0; border: none; }


/*
 * some globally used classes
 */
.left { float: left !important; }
.right { float: right !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.no-margin { padding-bottom: 0 !important; }
.margin { padding-bottom: 1em !important; }
.double-margin { padding-bottom: 2em !important; }

input.text,
textarea { padding: 5px 0 5px 5px; border: none; background: #fff; color: #777; vertical-align: middle; }

button { padding: 0 1px 1px 15px; border: none; background: transparent; white-space: nowrap; vertical-align: middle; }
button span { position: relative; left: -15px; float: left; background: transparent url("../images/button.png") repeat-y 0 0; color: #fff; line-height: 20px; }
button span span { left: 15px; padding: 0 15px 0 0; background-position: 100% 0; }
button:active>span { left: -14px; top: 1px; }


/* loading screen */
div.loading { display: none; }
.js div.loading { position: absolute; left: 0; top: 0; z-index: 10001; display: block; width: 100%; height: 100%; background: #02303c url("../images/background_1.png") repeat-x 50% 0; }
div.loading p { position: absolute; left: 50%; top: 50%; z-index: 10002; float: left; width: 200px; margin: -1ex 0 0 -100px; padding: 0; color: #000; font-size: .917em; font-weight: 700; text-align: center; }


/*
 * page header
 */
.header { position: relative; z-index: 5; overflow: hidden; width: 1035px; margin: 0 auto; }
.header:hover { z-index: 16; opacity: 1 !important; }
.header h1 { overflow: hidden; float: left; width: 330px; height: 136px; margin:-13px 1px 0 5px; background:url("../images/logo.png") no-repeat 0 0; text-indent: -99em; }
.header ul { overflow: hidden; float: left; list-style: none; padding: 23px 0 0; font-family:Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1; }
.header li { float: left; margin-left: -1px; padding-right: 1em; background: transparent url("../images/menu_separator.png") no-repeat 0 40%; }
.header ul a { float: left; color: #fff; padding: 0 0 4px; background: transparent url("../images/menu_item_background.png") no-repeat 200% 200%; }
.header ul a.alt:hover { color: #fff; }
.header ul a.alt span { color: #F60; }
.header ul a.alt span:hover { color: #fff; }
.header ul a span { position: relative; left: 1em; float: left; padding: 0 1em 2px 0; background: transparent url("../images/menu_item_background.png") no-repeat 200% 200%; line-height: 18px; }
.header ul a span span { position: static; left: 0; float: none; padding: 0; background: transparent; line-height: 1; }
.header ul a:hover { background-position: 0 0; text-decoration: none; }
.header ul a:hover span { background-position: 100% 0; }


/*
 * the big map and it's markers
 */
div.map { position: fixed; left: 0; top: 0; z-index: 1; overflow: visible; width: 5500px; height: 2100px; background: transparent url("../images/map.png") no-repeat 0 0; color: #fff; }
div.map>img { float: left; }
div.map p { padding: 0; }

div.map span.city,
div.map a { opacity: 0; position: absolute; z-index: 1; overflow: visible; float: left; display: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: transparent url("../images/map_marker.png") no-repeat 0 -12px; color: #797f80; font-family: "Arial", "Helvetica", sans-serif; font-weight: 400; font-size: .917em; line-height: 10px; white-space: nowrap; }
div.map a:hover { color: #fff; }
div.map span.city span,
div.map a span { position: absolute; left: 15px; top: 0; float: left !important; height: 10px; line-height: 10px; }
div.map a.site-left span { left: auto; right: 15px; }
div.map a.site-many { background-position: 0 -24px; }
div.map a.site-design { background-position: 0 -36px; }
div.map a.site-programming { background-position: 0 -48px; }
div.map a.site-marketing { background-position: 0 -60px; }
div.map span.city-capital { background-position: 0 0; }

div.map span.left span,
div.map a.left span { left: auto; right: 15px; }

div.map span.bottom-right span,
div.map a.bottom-right span { top: 12px; left: 0; }

div.map span.top-right span,
div.map a.top-right span { top: auto; bottom: 12px; left: 0; }

div.map span.top-left span,
div.map a.top-left span { top: auto; bottom: 13px; left: auto; right: 0; }

div.map span.bottom-left span,
div.map a.bottom-left span { top: 12px; left: auto; right: 0; }

div.map p.clients { opacity: 0; position: absolute; z-index: 1; overflow: visible; float: left; display: none; width: 38px; height: 40px; margin: -39px 0 0 -12px; background: transparent url("../images/marker_clients.png") no-repeat 0 0; font-weight: 700; font-size: .917em; text-align: center; white-space: nowrap; }
div.map p.clients:hover { z-index: 10000 !important; }
div.map p.clients em { position: absolute; left: 0; top: 43px; float: left; padding: 1px 5px 2px; background: #000; font-style: normal; zoom: 1; }
div.map p.clients-left em { right: 0; left: auto; }
div.map p.clients span { color: #f47f20; font-weight: 400; }

div.map-sites a.site { display: block; }
div.map-clients p.clients { display: block; }
div.map-cities span.city { display: block; }


/*
 * the small map - navigation
 */
.navigation { position: relative; z-index: 5; width: 1020px; margin: -85px auto; }
.navigation:hover { z-index: 25; opacity: 1 !important; }
.navigation div { position: relative; top: 10px; right: 15px; overflow: hidden; width: 275px; margin-right:0px; float:right; padding: 10px 10px 8px; background: transparent url("../images/navigation_background.png") repeat 0 0; }

.navigation p.map { position: relative; overflow: hidden; width: 275px; height: 115px; padding: 0; background: transparent url("../images/navigation_map.png") no-repeat 0 0; }
.navigation p.map span.clients { position: absolute; z-index: 1; float: left; width: 6px; height: 6px; margin: -2px 0 0 -2px; background: transparent url("../images/navigation_marker.png") no-repeat 0 0; }
.navigation p.map a { position: relative; z-index: 2; float: left; display: none; margin: -1px 0 0 -1px; border: 1px solid #F60; background: transparent url("../images/navigation_window_background.png") repeat 0 0; }
.navigation p.map a .top { position: absolute; top: -4px; left: 50%; width: 5px; height: 3px; margin-left: -2px; background: transparent url("../images/navigation_arrows.png") no-repeat 0 0; }
.navigation p.map a .bottom { position: absolute; bottom: -4px; left: 50%; width: 5px; height: 3px; margin-left: -2px; background: transparent url("../images/navigation_arrows.png") no-repeat 0 100%; }
.navigation p.map a .left { position: absolute; left: -4px; top: 50%; width: 3px; height: 5px; margin-top: -3px; background: transparent url("../images/navigation_arrows.png") no-repeat 0 0; }
.navigation p.map a .right { position: absolute; right: -4px; top: 50%; width: 3px; height: 5px; margin-top: -3px; background: transparent url("../images/navigation_arrows.png") no-repeat 100% 0; }

.navigation p.controls { padding: 10px 0 0; background: transparent url("../images/navigation_controls_background.png") repeat-x 0 0; color: #aaa; font-family: "Arial", "Helvetica", sans-serif; font-size: .75em; line-height: 1; text-transform: uppercase; -webkit-text-size-adjust: none; }
.navigation p.controls a { margin: 0 1ex; padding: 0 3px; border: 1px solid #000; background: #000; color: #666; }
.navigation p.controls a:hover { color: #fff; text-decoration: none; }
.navigation p.controls a.on { color: #f47f20; text-decoration: none; }
.navigation p.controls a:active { color: #fff; }


/*
 * windows
 */
.window { position: relative; z-index: 15; width: 940px; margin: 0 auto; padding: 35px 0 0; background: #000; }
.window .window { overflow: hidden; width: auto; margin: 0; padding: 0 40px 25px; background-color: transparent; }

.js .window { position: absolute; left: 50%; top: 50%; display: none; margin-left: -470px; background: transparent url("../images/window_background.png") no-repeat -940px 0; opacity: 0; }
.js .window .window { position: static; left: 0; top: 0; display: block; margin: 0; background-position: 0 100%; opacity: 1; }

.js .window h2,
.js .window div.left,
.js .window div.right { opacity: 0; }

.window-small { width: 270px; padding: 20px 0 0; }
.window-small .window { padding: 0 25px 35px; }

.js .window-small { margin-left: -135px; background-position: -2150px 0; }
.js .window-small .window { background-position: -1880px 100%; }

.window p.close { position: absolute; top: 13px; right: 13px; float: left; padding: 0; }
.window p.close a { overflow: hidden; float: left; width: 15px; height: 15px; background: transparent url("../images/window_close.png") no-repeat 0 0; text-indent: -99em; }
.window p.close a:hover { background-position: 0 -15px; }

.window div.left { width: 370px; margin-right: -1px; padding-right: 20px; border-right: 1px solid #151515; }
.window div.right { width: 370px; margin-left: -1px; padding-left: 20px; border-left: 1px solid #151515; }

.window h2 { clear: both; padding: 0 0 .75ex; color: #fff; font-family:Verdana, Geneva, sans-serif; font-size: 3.333em; font-weight: 400; }
.window-small h2 { font-size: 2em; }
.window h3 { padding: 0 0 1ex; color: #fff; font-size: 1.167em; font-weight: 400; text-transform: uppercase; }
.window h3.alt { width: 345px; margin: 0 auto; color: #b8c70e; font-size: 1.333em; font-weight: 700; text-transform: none; }
.window h4 { padding: 0 0 1ex; color: #fff; font-size: 1.167em; font-weight: 400; }
.window p strong { color: #fff; font-weight: 400; }
.window p.intro { color: #f47f20; font-size: 1.333em; font-weight: 700; }
.window p.loading { padding: 1ex 0 1ex 48px; background: transparent url("../images/loading_background.gif") no-repeat 0 50%; color: #fff; font-weight: 700; }
.window p.error { margin-top: -1.5ex; padding: 0 0 1em 92px; color: #909c09; font-size: .917em; }
.window p.error-alt { padding-left: 12px; }
.window ul { list-style: none; padding-left: 0; }
.window ul li { padding: 0 0 1.5ex 24px; background: transparent url("../images/bullet.png") no-repeat 0 .7ex; }
.js .window-small p.error { padding-left: 12px; }
.window-small input.text { width: 215px; }

/* contact window */
#window-contact div.left { width: 295px; }
#window-contact.window-small div.left { float: none !important; width: auto; margin: 0; padding: 0; border: none; }
#window-contact div.right { width: 445px; }
#window-contact p { padding-bottom: 0; }
#window-contact p.i { line-height: 2; }
#window-contact img { margin-top: -2px; padding: 0 3px; vertical-align: middle; }
#window-contact form p { padding-bottom: 1em; }
#window-contact label { display: inline-block; width: 80px; }
#window-contact input#contact-name { width: 265px; }
#window-contact input#contact-company { width: 265px; }
#window-contact input#contact-e-mail { width: 180px; }
#window-contact textarea { width: 440px; margin-top: 1ex; }

/* clients window - "they choose" */
#window-clients div.left { width: 375px; }
#window-clients div.right { width: 445px; }
#window-clients img { height: 291px; }

/* time zones window */
#window-time-zones div { position: relative; }
#window-time-zones img { height: 376px; }
#window-time-zones strong { color: #b8c70e; font-weight: 700; }
#window-time-zones p.user-time { position: absolute; top: 185px; left: 50%; width: 469px; margin: 0 0 0 -234px; padding: 0; color: #fff; font-size: 3.333em; font-weight: 700; text-align: center; text-transform: lowercase; }
#window-time-zones p.remaining-time { position: absolute; top: 265px; left: 50%; width: 450px; margin: 0 0 0 -225px; padding: 0; color: #fff; font-size: 1.167em; text-align: center; }
#window-time-zones p.remaining-time strong { font-weight: 400; }
#window-time-zones p.our-time { position: absolute; bottom: 5px; left: 50%; width: 450px; margin: 0 0 0 -225px; padding: 0; color: #fff; font-size: 1.833em; text-align: center; text-transform: lowercase; }
#window-time-zones p.our-time strong { color: #fff; }
#window-time-zones p.location { position: absolute; top: 90px; left: 470px; float: left; padding: 0; color: #fff; font-size: 1.083em; text-align: center; white-space: nowrap; }
#window-time-zones p.location span { display: block; }

/* design window */
.js #window-design div.left { width: 275px; }
.js #window-design div.right { position: relative; width: 465px; }

/* newsletter window */
#window-newsletter p { padding-bottom: 1em; }

/* user interfaces window */
.js #window-ui div.left { width: 275px; }
.js #window-ui div.right { position: relative; width: 465px; }
.js #window-ui div.right h3 { width: 345px; margin: 0 auto; color: #b8c70e; font-size: 1.333em; font-weight: 700; text-transform: none; }

/* templates window */
.window-templates div.left { width: 360px; }
.window-templates div.right { width: 380px; }

/* server side window */
.js #window-server-side div.left { width: 275px; }
.js #window-server-side div.right { position: relative; width: 465px; }
.js #window-server-side div.right h3 { width: 345px; margin: 0 auto; color: #b8c70e; font-size: 1.333em; font-weight: 700; text-transform: none; }



/*
 * gallery of images
 */
ul.gallery { list-style: none; padding: 0; }
.js ul.gallery { position: relative; left: 0; overflow: hidden; height: 270px; }
.js ul.gallery li { overflow: hidden; float: left; width: 345px; height: 265px; padding: 0; background: transparent; }
.js ul.gallery li img { float: left; width: 345px; }

.gallery-clip { position: relative; overflow: hidden; width: 345px; margin: 0 auto; padding: 20px 0 0; background: transparent url("../images/gallery_background.jpg") no-repeat 0 0; }
p.gallery-nav { margin-top: 145px; padding: 0; }
p.gallery-nav a { overflow: hidden; float: left; width: 17px; height: 30px; background: transparent url("../images/arrows_a.png") no-repeat 0 0; text-indent: -99em; }
p.gallery-nav-prev { left: 50px; float: left; }
p.gallery-nav-prev a:hover { background-position: -29px 0; }
p.gallery-nav-next { right: 0; float: right; }
p.gallery-nav-next a { background-position: -12px 0; }
p.gallery-nav-next a:hover { background-position: -41px 0; }

ul.thumbnails { position: relative; overflow: hidden; list-style: none; padding: 12px 0 0; }
ul.thumbnails li { float: left; padding: 0 6px 0 0; background: transparent; }
ul.thumbnails a { overflow: hidden; float: left; }
ul.thumbnails a.selected,
ul.thumbnails a:hover { border: 3px solid #b8c70e; }
ul.thumbnails a img { float: left; }
ul.thumbnails a.selected img,
ul.thumbnails a:hover img { margin: -3px; }
ul.thumbnails img { width: 82px; height: 63px; }


/*
 * page footer
 */
.footer { left: 0; bottom: 0; z-index: 10; width: 100%; padding: 20px 0px; background: transparent url("../images/footer_background.png") repeat-x 50% 0; font-size: .917em; }
.footer:hover { z-index: 16; opacity: 1 !important; }
.js .footer { position: absolute; }
.footer div { overflow: hidden; width: 980px; padding:0 20px; margin: 0 auto; }
.footer ul { overflow: hidden; list-style: none; padding: 0 0 40px; color: #fff; }
.footer li { float: left; width: 230px; padding: 0 0 0 60px; }
.footer li.first { padding-left: 0; }
.footer li strong { display: block; padding: 0 0 1ex; font-family: Verdana, Geneva, sans-serif; font-weight: 400; }
.footer li strong a { font-size: 1.818em; }
.footer p { padding: 0; color: #444; line-height: 2; word-spacing: 1ex; white-space: nowrap; }
.footer p span { color: #aaa; }
.footer p span,
.footer p a { word-spacing: normal; }
.footer p img { vertical-align: middle; }
.footer p a.twitter { padding-left: 29px; background: transparent url("../images/icon_twitter.png") no-repeat 0 50%; }


/*
 * legend related stuff
 */
p.legend { position: absolute; left: 50%; top: 20px; float: left; margin-left: -46px; padding: 0; }
p.legend a { overflow: hidden; float: left; width: 92px; height: 35px; background: transparent url("../images/button_legend.png") no-repeat 0 0; text-indent: -99em; }
p.legend a:hover { background-position: 0 100%; }

#window-legend { top: 20px; width: 357px; margin-left: -30px; padding-top: 10px; background: transparent url("../images/window_legend_background.png") no-repeat 100% 0; -webkit-text-size-adjust: none; }
#window-legend .window { padding: 10px 35px 92px; background: transparent url("../images/window_legend_background.png") no-repeat 0 100%; }
#window-legend h2 { font-size: 2em; opacity: 1; }
#window-legend h3 { padding-top: 1.5ex; border-top: 1px solid #121212; }
#window-legend p { padding-bottom: 1em; color: #777; word-spacing: normal; white-space: normal; }
#window-legend span.marker { position: relative; top: -1px; display: inline-block; width: 10px; height: 10px; padding-right: 1ex; background: transparent url("../images/map_marker.png") no-repeat 0 -12px; vertical-align: middle; }
#window-legend span.marker-clients { width: 38px; height: 40px; background: transparent url("../images/marker_clients.png") no-repeat 0 0; }
#window-legend span.marker-city-capital { background-position: 0 0; }
#window-legend span.marker-site-many { background-position: 0 -24px; }
#window-legend span.marker-site-design { background-position: 0 -36px; }
#window-legend span.marker-site-programming { background-position: 0 -48px; }
#window-legend span.marker-site-marketing { background-position: 0 -60px; }
#window-legend ul { padding-bottom: 1em; color: #777; }
#window-legend li { padding: 0 0 1ex; background: transparent; }
#window-legend li.left,
#window-legend li.right { width: 140px; }


/*
** the end
*/