body {
    background: #e4e4e4 url('../img/body_bg.jpg') top left repeat-x;
    font-size: 62.5%; color: #333; line-height: 1.5;
    font-family: Tahoma, "Lucida Grande CE", lucida, sans-serif;
}

a { text-decoration: none; color: #333;}

a.action,
a.smallaction {
    background: #f6a67f;
    padding: 1em 1.5em;
    display: block;
    color: #fff;
    border: 2px solid #eee;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #ccc;
    text-align: center;
    font-size: 1.8em;
    text-transform: uppercase;
    float: left;
}
#contents a.action:hover,
#contents a.action:focus,
#contents a.smallaction:hover,
#contents a.smallaction:focus { background: #F5844C;}
a.smallaction { display: inline; float: none; font-size: 1.4em; padding: .5em 1em;}

img { border: none;}

hr { clear: both; border: none; width: 80%; height: 1px; background: #eee; margin: 1em auto;}

h1 { position: absolute; top: 20px; left: 20px; font-size: 2.2em;}

h2 { color: #f6a67f; text-transform: uppercase; font-size: 2.0em; font-weight: normal; margin: .8em 0 1em; text-align: center;}
h3 { font-size: 1.6em; margin-bottom: .5em;}
#contents h3.center { text-align: center; border-bottom: none;}

p { font-size: 1.4em; margin-bottom: 1em;}
p.notice { color: #666; font-size: 1.2em;}
p.back { position: absolute; top: 1.9em; left: 1.7em; font-size: 1.2em; color: #999;}
p.center { text-align: center;}
p.disabled {
    background: #999;
    color: #ddd;
    border: 2px solid #eee;
    float: right;
    text-align: center;
    text-transform: uppercase;
    display: inline;
    font-size: 1.4em;
    padding: .5em 1em;
    margin: 0 .5em 0 0;
}
p.nomarg { margin-bottom: 0;}

code { font-size: 1.2em;}

div.cb { clear: both; height: 0; font-size: 1px; overflow: hidden;}

#wrapper { width: 960px; margin: 0 auto 2em; background: url('../img/foot_bg.png') left bottom no-repeat;}
#top { position: relative; background: #fff url('../img/top_bg2.jpg') left top no-repeat; height: 206px;}

ul#menu {
    position: absolute;
    bottom: 0;
    left: 180px;
    width: 600px;
    height: 1.8em;
    text-align: center;
    font-size: 1.5em;
    color: #fff;
    background: #f6a67f;
    padding-top: .4em;
}
ul#menu li { display: inline; text-transform: uppercase;}
ul#menu a { text-decoration: none; color: #111;}
ul#menu a:hover,
ul#menu a:focus { text-decoration: none; color: #333;}
ul#menu a,
ul#menu span { margin: 0 .35em;}
ul#menu li.active span,
ul#menu li.active a { color: #fff;}

p#myaccount { position: absolute; bottom: .5em; right: 1em; font-size: 1.2em; margin-bottom: 0;}
p#myaccount a { color: #999; padding-bottom: .1em; border-bottom: 1px solid #ccc;}
p#myaccount a:hover,
p#myaccount a:focus { border-bottom: none;}
p#myaccount a.active { color: #333;}

p#logout { position: absolute; top: .7em; right: .9em; font-size: 1.2em; color: #999;}
span#subdomain { display: block; margin-top: .3em; text-align: center;}
p#logout a { border-bottom: 1px solid #ddd;}
p#logout a:hover,
p#logout a:focus { border-bottom: none;}

#flashes { position: absolute; background: #333; color: #fff; top: 0; left: 0; width: 100%; height: 4em; z-index: 2;}
p.flash { text-align: center; font-weight: bold; padding-top:.7em;}
p.success { color: #fff;}


#contents { position: relative; overflow: hidden; min-height: 290px; margin-bottom: 35px;}
#contents p a,
#contents ol li a { border-bottom: 1px solid #ddd;}
#contents p a:hover,
#contents p a:focus,
#contents ol li a:hover,
#contents ol li a:focus { border-bottom: none;}
#contents ul { list-style: disc;}
#contents ol { list-style: decimal;}
#contents li { margin: .5em 0 .5em 2em; font-size: 1.4em;}

#left { float: left;}
#right { float: right;}

#foot { }
#foot p { font-size: 1.1em; color: #999;}
#foot p#copy { float: right; margin-right: 2em; text-align: center; margin-top: 1.3em;}
#foot p#links { margin-left: 1.6em; line-height: 2.5em;}
#foot p#links a { color: #999; padding-bottom: .1em; border-bottom: 1px solid #ccc; margin: 0 .5em;}
#foot p#links a:hover,
#foot p#links a:focus { border-bottom: none;}
#foot p#links a.social { border-bottom: none; vertical-align: top; /*//FUTURE vyresit*/}


/* GENERIC BODY CLASSES */
.modal #contents { text-align: center;}
.modal #contents h2 { margin-top: 3em;}
.modal #foot { height: 50px;}
.modal #foot p#copy { margin-bottom: 2em;}
.modal #left,
.modal #right { width:50%;}

.simple #contents { padding: 0 20em;}

#bottomline { margin-top: 12em; text-align: left;}
#bottomline p { margin-left: 2em;}


/* HOMEPAGE */
.homepage h1 { top: 15px; left: 5px;}
.homepage h2 { text-align: left; margin-top: 1.5em; white-space: nowrap;}
.homepage #top { background-image: url('../img/top_bg.jpg'); height: 345px;}
.homepage #left { float: none; position: absolute; width: 219px; height: 238px; top: 50px; left: 30px; background: url('../img/mac.png') left top no-repeat;}
.homepage #right { margin-left: 295px; width: 400px; float: left;}
.homepage #right p { font-size: 1.2em; color: #666;}

#news { float: right; width: 180px; color: #888676; margin-top: 3.5em; margin-right: 30px;}
#news .newsItem { margin-bottom: 2em;}
#news h4 { font-weight: normal; font-size: 1.2em; color: #000; white-space: nowrap;}
#news h4 span { color: #bcb9a3; font-size: .83em; font-weight: bold; margin-right: .5em;}
#news p { font-size: 1.2em; margin-bottom: 0; text-align: justify;}
#news p a { color: #888676; border-bottom: 1px solid #888676; padding-bottom: .1em;}
#news a:hover,
#news a:focus { border-bottom: none;}

.homepage #right ul { margin: 2em 0; color: #333; list-style: none;}
.homepage #right li { font-size: 1.5em; margin: 0 0 1em .8em; padding-left: 25px; padding-bottom: .1em; background: url('../img/bullet.png') left center no-repeat;}
.homepage a.action { margin-left: 1.9em;}


/* TERMS */
.terms #contents { padding: 0 12em;}


/* THEMES */
.themes #contents { }
.themes hr {margin: 2em auto;}
.themes p.notice { margin-left: 1.9em;}
.themes #contents img { border: 1px solid #fff;}
.themes #contents img.big { display: block; margin: 0 auto 2em;}
.themes p.instr { color: #999; text-align: center;}
.theme { float: left; margin: 0 1.9em 4em;}
.theme p.showcase { font-size: 1.2em; margin: .2em 0 0 .7em; float: left;}
.theme p.showcase span { color: #aaa;}
.theme img.small { display: block; margin-bottom: 1.3em;}
.theme a.smallaction { float: right; margin-right: .5em;}

.stationery #left {margin-left: 1em;}
.stationery #right {margin-right: 1em;}
.stationery #contents { padding: 0 2em;}
.stationery #contents ul { margin-bottom: 1.5em;}
.stationery img.main { display: block; margin: 0 auto 2em; border: 1px solid #fff;}
.stationery .example { margin: 0 1em; border-left: 1.5em solid #fff; padding: .4em .5em .6em 1.3em; color: #666;}
.stationery a.action { margin: 0 0 1em 12em;}

.themes a#bonusClose { font-size: 1.4em; font-weight: bold; border-bottom: none;}
.themes th#sizer { width: 8em;}

.themes .email #form { text-align: center; padding: 3em 2em; background: #ddd; border: 1px solid #aaa; width: 42em; margin: 0 auto;}
.themes .email #form input.button { display: inline;}
.themes .email #form input { padding: .3em .3em; font-size: 1.4em; margin: 0 .2em;}
div#antispam { margin-bottom: 1em;}

/* PRICES */
.prices #contents p { text-align: center; color: #999;}
.prices a.action { margin: 0 0 3em 17.2em;}
.prices #contents ul { margin-left: 22em;}
.prices p#price { font-size: 2.8em; margin-bottom: .4em; color: #888676;}
.prices p#dphinfo { color: #888676; margin-top: 1em;}
.prices #contents hr { width: 70%; background-color: #fff; margin-bottom: 1.5em;}



/* HELP */
.help #contents { padding: 0 2em;}
.help p.question { font-weight: bold; color: #888676; margin-bottom: .5em;}
.help p.answer { margin-left: 1em;}
.help #contents h3 { text-align: center;}
.howto a.action { margin: 0 0 3em 19em;}
.howto ol { margin: 0 auto 2em; width: 30em;}


/* AFFIL */
.banner { text-align: center; margin-bottom: 2em;}
.affil #contents { padding: 0 2em;}
.affil .box { overflow: hidden; margin-bottom: 3em;}
.affil img.partner { display: block; float: left; margin: .8em 2em 2em 0;}
.affil .box p { margin-left: 256px;}
.affil .box h3 { margin-left: 256px;}

/* CONTACT */
.contact #contents { text-align: center; padding: 0 15em;}
.contact #left { margin-left: 0;}
.contact #left,
.contact #right { text-align: center; width: 40%; margin-top: .5em;}
.contact p.func { color: #999; font-size: 1.2em; margin-bottom: .5em;}
.contact p.contact { margin-bottom: 1.5em; line-height: 1.8;}
.contact h3 { color: #888676;}
.contact p.provider { color: #999; font-size: 1.2em; margin-bottom: .5em;}
.contact p.mail a { font-weight: bold;}


/* ACCOUNT */
.account p.notice { width: 50%; min-height: 70px; margin: 0 auto; text-align: justify; background: url('../img/i.png') left center no-repeat; padding: .8em 0 0 50px; line-height: 1.7;}
.account #contents { padding: 0 2em;}
.account #left { width: 400px; text-align: center; background: #fff; padding-bottom: 1em;}
.account #right { width: 480px; padding-bottom: 5em;}
.account code { display: block; color: #F5844C;}

.account #left a.action { margin-left: 1.9em; margin-bottom: .5em;}
.account #left img { border: 1px solid #ddd;}

.account #contents h2 { margin-bottom: .5em;}
.account h3 { border-top: 2px solid #aaa; text-align: center; position: relative; padding-top: .3em;}
.account h3.center { border-top: none;}
.account h3.top { border-top: none; padding-top: 0;}
.account h3 span a { color: #999; text-align: right; font-size: .8em; font-weight: normal; position: absolute; right: 0; bottom: .2em;}
.account #left h3 span a { margin-right: .5em;}
.account #right hr { background-color: #ccc; width: 100%; height: 2px;}

p#countdown { margin-top: .7em;}
p.setts { background: #fff; border: 1px solid #ddd; padding: .5em .7em .35em; text-align: center;}
p.terminate { font-size: 1.2em; color: #999;}
p.terminate a { color: #999;}

p#url { font-size: 1.8em;}
p#url a { color: #F5844C;}
.account .hlp p { color:#999; font-size: 1.2em; text-align: justify;}
.account #left .hlp p { padding: 0 .75em;}
.account div.hlp { margin-bottom: 1em;}
.account div.warning { background: #ffe2d4; padding-bottom: .5em; clear: both;}
.account div.setts { background: #fff; border: 1px solid #ddd; padding: 1em 1em .7em; margin-bottom: 1em;}
.account div.setts ul { margin-bottom: 1.5em;}

#form table { margin: 0 auto 2em;}
#form td,
#form th { padding: .5em;}
#form th { text-align: right;}
#form td.text { font-size: 1.2em;}
#form td.center input { margin: 0 auto;}
#form th.center { text-align: center;}
#form tr.optional th { color: #999;}
#form input.button { padding: .3em .6em; font-size: 1.4em; text-align: center; display: block;}
#form label { font-size: 1.4em; font-weight: normal;}
#form ul.error { width: 50%; margin: 0 auto 2em; list-style: none; text-align: center; border: 1px solid red; padding: .8em 1em;}
#form li { margin-left: 0; color: red;}
#form a { color: #666; border-bottom: 1px solid #ddd;}
#form a:hover,
#form a:focus { border-bottom: none}
#form td p { display: inline;}
#form p.hint { color: #999; margin-left: 1em;}
#form .final input.button { font-weight: bold;}
#form label.disabled { color: #ccc;}

table.visual { margin: 0 auto 2em; background: #fff; }
table.visual th,
table.visual td { padding: .3em .5em; font-size: 1.4em; text-align: left;}
table.visual th { text-align: right; font-weight: normal; color: #666;}
table.visual td.separ { border-bottom: 2px solid #ccc; padding-top: 0;}

.account #contents a.btn { background: #666; color: #fff; padding: .3em .7em .35em; display: block; width: 8em; margin: 1em auto .5em; text-align: center;}
.account #contents a.btn:link,
.account #contents a.btn:visited { border: none;}