/**
 * General stylesheet for all United Mobile pages
 *
 * This style sheet should work with both the UM corporate website
 * and the shop, provided that the corresponding HTML templates are
 * not changed.
 *
 * Any image material used by this style sheet should go to the layout/ 
 * folder and linked to using relative paths.
 *
 * @author Mikko Mensonen <mikko.mensonen@united-mobile.com>
 */
* { font-size: 11px; }
body { text-align: center; margin: 0; padding: 0; background: #fff; font: 1em "Verdana", sans-serif; color: #333; }

/** General Properties, applies to all elements */
h1, h2, h3, h4 { text-align: left; color: #333; }
h2 { font-size: 2em; margin: 0px 0px 20px 0px; padding: 20px 0px 0px 0px; font-weight: bold; color: #33c532; }
h3 { margin-top: 0px; font-size: 1.27em;}
h4 { margin-top: 2em; }
a:link, a:visited { color: #d86225; text-decoration: none; }
a:hover, a:active { color: #d86225; text-decoration: underline; }

p, ul { text-align: left; }
p { margin: 4px 0px 4px 0px; padding: 0; }

ul { text-align: left; font-size: 1em; list-style-type: square; color: #333; margin-left: 35px; padding-left: 0; }

ul.tickbullets { color: #333; list-style: none; margin: 0; padding: 0; }
ul.tickbullets li { font-size: 1.09em; line-height: 1.63em; font-weight: bold; background: url('../layout/bullet-flower.png') top left no-repeat; padding: 0px 0px 10px 22px; margin: 0px 0px 5px 0px; }

ul.simbullets { font-size: 1em; list-style: none; margin: 0; padding: 0; }
ul.simbullets li { font-weight: bold; background: url('../layout/bullet-flower.png') top left no-repeat; padding-left: 20px; padding-bottom: 9px; margin: 0px 0px 5px 2px; }
ul.simbullets a:link,
ul.simbullets a:visited { color: #d86225; }

/* Fancy buttons, this applies for all css3 compliant browsers */
button.button-medium  { white-space: nowrap; color: #fff; font-weight: bold; font-size: 1em; width: auto;  margin: 0; padding: 0px 10px 0px 0px; border: none; height: 24px; background: url('../layout/button-medium-slide-right.png') no-repeat; background-position: right 0px; }
button.button-medium b  { border: none; display: block; margin: 0px 5px 0px 0px; padding: 4px 5px 1px 20px; background: url('../layout/button-medium-slide-left.png') no-repeat; background-position: left top; height: 23px;}
/* this fixes firefox */
button:-moz-first-node { padding: 0px 12px 0px 0px; background-position: right 1px; }
/* this fixes IE7 */
*:first-child+html button.button-medium { padding: 0px 10px 0px 0px !important; background-position: right top; overflow: visible; }
/* this fixes IE6 (note: if using transparent png backgrounds, also replace the background image here!) */
* html button.button-medium { padding: 0px 10px 0px 0px !important; background-position: right top; overflow: visible; }

button.button-large  { white-space: nowrap; color: #fff; font-weight: bold;  width: auto; overflow: visible; margin: 0; padding: 0px 12px 0px 0px; border: none; height: 44px; background: url('../layout/button-large-slide-right.png') no-repeat; background-position: right 1px; }
button.button-large b  { font-size: 1.63em; display: block; margin: 0px 5px 0px 0px; padding: 8px 30px 1px 35px; background: url('../layout/button-large-slide-left.png') left top no-repeat;  height: 44px;}
*:first-child+html button.button-large { padding: 0px 10px 0px 0px !important; background-position: right top; }
* html button.button-large { padding: 0px 10px 0px 0px !important; background-position: right top; }

button.link { cursor: pointer; }
button.submit { cursor: pointer; }

button.grey { background-image: url('../layout/button-medium-slide-right-grey.png');  }
button.grey b  { background-image: url('../layout/button-medium-slide-left-grey.png'); }


input, select, textarea { border: 1px solid #ccc;  font-family: "Verdana", sans-serif; }

a:link img, a:visited img { border: none;}
a:hover img, a:active img { border: none; }

/** Position main layout elements */
#mainwrap { position: relative; width: 998px; margin: 0 auto; text-align: left; background: url('../layout/header-background.png') no-repeat top left #fff;  }
#footer {  position: relative; width: 956px; margin: 0 auto; text-align: left; border-top: 1px solid #ccc; /*background: url('../layout/main-background-footer.png') bottom left no-repeat #fff;*/  }
#main {  position: relative; width: 962px; margin: 0 auto; /*background: url('../layout/main-background.jpg') top right no-repeat; border-bottom: 3px solid #33c532;*/  }
#logo { position: absolute; width: 242px; height: 87px; top: 12px; left: 0; }
#mainnav { position: absolute; width: 682px; height: 60px; top: 123px; left: 60px; }
#contentwrap { width: 742px; padding-top: 150px; float: left; /*margin-right: 20px;*/ }
#sidepanel { width: 190px; padding-top: 122px; float: right; }
#language-selector { position: absolute; top: 40px; left: 250px; }
#servicenav { position: absolute; top: 24px; right: 0px; }


/** Individual layout elements follow */

/** Logo */
#logo h1 { margin: 0; padding: 0; width: 242px; height: 87px; }
#logo a { display: block; width: 242px; height: 87px; background: url('../layout/logo-icq.png') no-repeat left top; }
#logo a span { display: none; }

/** Tabbed top navigation */
#mainnav ul { margin: 0; padding: 10; list-style: none; width: 100%; height: 35px; }
/*#mainnav li { margin: 0px 0px 0px 15px; padding: 0; float: right; height: 61px; padding-right: 15px;}
#mainnav a { float: left; font-size: 1.27em;  display: block;  height: 25px; padding: 10px 0px 0px 15px; width: auto; font-weight: bold; }*/
#mainnav li { margin: 0px 0px 0px 15px; padding: 0; float: right; height: 44px; padding-right: 20px; text-align: right; }
#mainnav a { float: left; font-size: 1.27em;  display: block;  height: 61px; padding: 10px 0px 0px 35px; width: auto; font-weight: bold; }

#mainwrap.es div#mainnav li { margin: 0px 0px 0px 25px; padding-right: 20px; }
#mainwrap.es div#mainnav a { padding: 10px 0px 0px 20px; }
#mainwrap.de div#mainnav li { margin-left: 25px; padding-right: 20px; }
#mainwrap.de div#mainnav a { padding: 10px 0px 0px 20px; }
#mainwrap.fr div#mainnav li { margin: 0px 0px 0px 25px; padding-right: 25px; }
#mainwrap.fr div#mainnav a { padding: 10px 0px 0px 25px; }
#mainwrap.cs div#mainnav li { margin-left: 20px; padding-right: 15px; }
#mainwrap.cs div#mainnav a { padding: 10px 0px 0px 15px; }
#mainwrap.it div#mainnav li { margin: 0px 0px 0px 25px; padding-right: 30px; }
#mainwrap.it div#mainnav a { padding: 10px 0px 0px 30px; }
#mainwrap.nl div#mainnav li { margin: 0px 0px 0px 25px; padding-right: 30px; }
#mainwrap.nl div#mainnav a { padding: 10px 0px 0px 30px; }
#mainwrap.ru div#mainnav li { margin: 0px 0px 0px 5px; padding-right: 15px; }
#mainwrap.ru div#mainnav a { padding: 10px 0px 0px 5px; font-size: 1.14em;}

#mainnav a:link, #mainnav a:visited { color: #fff; }
#mainnav a:hover, #mainnav a:active { color: #fff; }
#mainnav li {  background: url('../layout/topnav-slide-right.png') no-repeat top right; }
#mainnav li a {  background: url('../layout/topnav-slide-left.png') no-repeat top left; font-weight: bold; color: #fff;  }
#mainnav li#activetab { margin-top: -10px; background: url('../layout/topnav-slide-right-active.png') no-repeat top right;}
#mainnav li#activetab  a {   background: url('../layout/topnav-slide-left-active.png') no-repeat top left; font-weight: bold; color: #2D9C2A; }

/** Language selector */
#language-selector ul { list-style: none; margin: 0; padding: 0; color: #333; font-size: 0.41em; }
#language-selector li { float: left; margin: 0px 15px 0px 0px;  padding: 2px 0px 2px 0px; }
#language-selector img { border: 0; }
#language-selector a span { display: none; margin: 0px 0px 2px 5px; font-size: 0.81em; }
#language-selector li#activelang  { border: 1px solid #ccc;  padding: 2px 5px 2px 5px; -moz-border-radius: 7px; border-radius: 7px; }
#language-selector li#activelang a span { display: inline; }
#language-selector a:link, #language-selector a:visited { color: #333; }
#language-selector a:hover, #language-selector a:active { color: #333; }

/** Top right service navigation */
#servicenav  { color: #33c532; }
#servicenav  a:link, #servicenav  a:visited  { color: #333; }

/** Sidebar contents */
div.panel { line-height: 16px; background: url('../layout/panel-background-bottom.png') no-repeat bottom right; padding: 0px 0px 7px 0px; margin-bottom: 10px; }
div.panel div.paneltop { background: url('../layout/panel-background-top.png') no-repeat top right;  padding: 7px 3px 0px 7px; }
div.panel h3 {  font-size: 1.09em; margin: 0px 0px 5px 0px; padding: 10px 0px 10px 5px; }
div.panel p {  padding-left: 5px; }
div.panel { font-size: 1em; }
div.panel h4 { font-size: 1em; margin: 8px 0px 4px 0px; padding: 0; padding-left: 5px; }

#logintitle { text-align: center; color: #33c532; font-size: 1.27em; padding: 5px 0px 4px 0px; margin: 0; }
#loginpanel form { margin: 0; background: url('../layout/loginpanel-background.png') no-repeat top left; padding: 5px 0px 0px 6px; width: 174px; height: 157px; }
#loginpanel p { margin: 0px 2px 1px 0px; padding: 0px 6px 0px 2px; }
#loginpanel h4 { margin: 0px 0px 2px 0px; padding: 0; color: #fff; font-size: 1.09em; }
#loginpanel label { margin: 0px 0px 0px 0px; padding: 0; font-size: 0.91em; }
#loginpanel input.text { border: 1px solid #fff; padding: 2px; color: #333; font-size: 1em; width: 149px; }
#loginpanel p.textright { padding-right: 15px; padding-top: 10px; }

/** Main content */
#content { padding-bottom: 0px; /* background: url('../layout/icq-promo-bg.jpg') no-repeat left top; */}
#content h1 { color: #E00056; text-align: right; font-size: 2.72em; padding-top: 25px; clear: both; margin-bottom: 20px; }
#content p { margin: 1.37em 0em 1.37em 0em; }

/** Footer */
#footer { padding: 5px 21px 30px 21px; font-size: 0.91em; }
#footer p { padding: 0px 0px 0px 0px; margin: 0; float: left; width: 75%; }
#footer p#copyright { width: 25%;  font-size: 0.91em;   }
#footer a:link, #footer a:visited { color: #333;  font-size: 0.91em; }

.textright { text-align: right; }
.textmiddle { text-align: center; }


/** Individual content pages follow */

/** main page */
#main-banner { padding: 0px 8px 8px 8px; width: 344px; height: 506px; }
#main-promo { font-weight: bold; padding: 28px 20px 20px 20px; position: absolute; left: 360px; width: 342px; height: 424px; background: url('../layout/main-promo-background-tile.png') repeat-x left bottom; }
#main-promo h2 {  color: #333;  font-weight: bold; font-size: 1.63em; margin: 0px 0px 20px 0px; padding: 0; }
#main-promo.en h2 { margin-bottom: 50px; }
#main-promo.en ul { margin-bottom: 50px; }
#main-promo.en p { margin-bottom: 10px; }
#main-promo.de h2 { margin-bottom: 50px; }
#main-promo.de ul { margin-bottom: 30px; }
#main-promo.de p { margin-bottom: 10px; }
#main-promo.es h2 { font-size: 1.63em; margin-bottom: 20px; }
#main-promo.es ul { margin-bottom: 20px; }
#main-promo.es p { margin-bottom: 5px; }
#main-promo.fr h2 { font-size: 1.63em; margin-bottom: 30px; }
#main-promo.fr ul { margin-bottom: 30px; }
#main-promo.fr p { margin-bottom: 5px; }
#main-promo.ru h2 { font-size: 1.53em; margin-bottom: 20px; }
#main-promo.ru ul { margin-bottom: 20px; }
#main-promo.ru p { margin-bottom: 5px; }

#main-calculator { line-height: 16px; font-weight: bold; padding: 0px 10px 20px 120px; position: absolute; left: 380px; width: 242px; top: 570px; height: 74px; background: url('../layout/worldmap-small-grey.png') no-repeat left top #fff; }
#main-calculator p { margin-top: 0px; }

/** FAQ */
div.faq  div { font-size: 1em; background: #fff; border: 1px solid #ccc; border-top: none; padding: 20px 20px 20px 20px; }
div.faq  h3 { font-size: 1em; border-bottom: 1px solid #ccc; padding: 0px 20px 0px 0px; margin: 40px 0px 0px 0px; }
div.faq  h3  span { font-size: 1.27em;  background: #fff; border: 1px solid #ccc;  border-bottom: 1px solid #fff; padding: 5px 20px 0px 20px; -moz-border-radius: 10px 10px 0px 0px; }

ul#faqlist { font-size: 1.09em; color: #d86225; }

p.gotop { font-weight: bold; background: url('../layout/icon-top.png') no-repeat right 3px; text-align: right; padding-right: 20px; }

/** Rates */
#countryselect { margin-bottom: 30px; }
#countryselect td { vertical-align: middle; padding: 2px; }
#countryselect select { width: 250px; padding: 2px; font-size: 0.91em; }
#calculator { float: left; background: url('../layout/calculator-bottom.png') no-repeat bottom left; padding: 0px 0px 20px 0px; margin-bottom: 20px; width: 544px;}
#calculatorcontent {  background: url('../layout/calculator-top.png') no-repeat top left;  padding: 7px 10px 0px 10px;  width: 524px;  }
#calculator table { width: 100%; margin: 5px 0px 0px 0px; }
#calculator td { background: #E6EEE3; padding: 5px;  }
#calculator tr.odd td { background: #fff;  }
#calculator th { background: #fff; font-weight: bold; color: #33c532; font-size: 1.09em; border-bottom: 2px solid #E6EEE3; padding: 5px; }
#calculator td.left { font-weight: bold; color: #33c532; }
#morecountries { font-size: 0.81em; color: #999; }
#mobilelink { color: #999; }

#rateMap, #rateMap select { font-size: 0.91em; }
#rateMap { padding: 10px; }
#rateMap table { width: auto; margin: 0px 0px 0px 0px; }
#rateMap td { background: none; padding: 5px; }
#rateMap div { float: right; }
#tariffs { float: right; width: 188px; background: #DBDBDB; padding: 5px; font-size: 0.91em; -moz-border-radius: 0px 7px 7px 0px; }
#tariffs ul { font-size: 0.91em; }

/** Customer Service */
.servicebox { border: 1px dotted #ccc; padding: 20px 10px 20px 60px;  margin: 0px 0px 20px 0px; }
.servicebox table { width: 100%; }
.servicebox td { vertical-align: top; padding: 5px; }
.servicebox td.left { font-weight: bold; width: 300px; }
.servicebox tr.odd td { background: #E6EEE3; }
.servicebox select { padding: 0.2em; font-size: 1em;  font-weight: normal; width: 300px; }
.servicebox input { padding: 0.2em; font-size: 1em; font-weight: normal; width: 300px; }
.servicebox input.radio { padding: 0; font-size: 1em; height: auto; font-weight: normal; width: auto; }
.servicebox textarea { padding: 0.2em; font-size: 1em; height: 6em; font-weight: normal; width: 300px; }
#cs-step-1 { background: url('../layout/step-1.png') no-repeat 10px 15px #fff; }
#cs-step-2 { background: url('../layout/step-2.png') no-repeat 10px 15px #fff; }
#cs-step-3 { background: url('../layout/step-3.png') no-repeat 10px 15px #fff; }
.servicebox pre  { border: 1px solid #ccc; font: 3px "Courier New", monospace !important; padding: 2px; float: left; white-space: pre; }
.servicebox td div { clear: both; }
.servicebox td img { margin: 3px; cursor: pointer; }
.servicebox pre span { font: 3px "Courier New", monospace !important;  white-space: pre;  }
#srcode { width: 100px; }
#srnumber { width: 195px; }
span.required { color: #d86225; }
input.required { background: #d86225; color: #fff; }
textarea.required { background: #d86225; color: #fff; }


/** The guillotine hack to put floats back in flow */
#mainwrap:after, #main:after, #footer:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html #mainwrap, * html #main, * html #footer {height: 1%;}