/* reset and basic setting */

/* BASIC =====================================================================*/
body,code,div,h1,h2,h3,h4,h5,h6,img,li,ol,span,table,th,td,ul {padding:0px; margin:0px; border:0px}
body {font-family:Georgia, serif; font-size:12px; line-height:22px;text-align:center;}
body {background:#fff url('img/image_02_2.png') repeat-x top left}
body.homepage {background:#fff url('img/image_02.png') repeat-x top left}


/* links */
a {color:#2BAEE6; text-decoration:none;}
a:hover {color:#2BAEE6; text-decoration:underline;}

/* headings etc. */
h1,h2,h3,h4,h5,h6 {font-weight:bold; line-height:30px}
h1 {font-size:11px; margin-left:-5000px; float:left}
h2 {font-size:18px;color:#fff; line-height:50px; margin-left:30px}
h3 {font-size:20px; margin-bottom:0px; color:#2BAEE6;font-family:'Arial',sans-serif;}
h4 {font-size:13px}

/* paragraphs */
p {line-height:24px; margin-bottom:10px;margin-top: 0px;}
p.main {margin-top:20px;}
p.top {margin-top:10px;}
p.no-top {margin-top:0px;}
p.no-bottom {margin-bottom:0px;}

/* tables */
table {border-collapse: collapse}
th,td {font-size: 11px;}

/* lists */
ul,ol,li    {list-style: none;}
ul          {margin-bottom: 22px;}

/* other */
hr        {border:0px; border-top:2px solid #cccccc; height:0px; margin-top:20px;margin-bottom:20px}
hr.cleaner {border:0px; clear:both; height:0px; margin:0px; padding:0px; visibility:hidden}
hr.left {clear:left;}
hr.right {clear:right;}
hr.line {border-bottom:3px solid #F0F0F0;margin-bottom:30px; visibility:visible;}
img         {border:0px;}
sub, sup {position:relative; vertical-align:baseline;}
sub {top:0.4em;}
sup {bottom:0.4em;}

/* alignment */
.center {text-align:center;}
.left {text-align:left;}
.right {text-align:right;}
.middle {vertical-align:middle;}
.top {vertical-align:top;}

.clear-left {clear:left}
.clear-right{clear:right}

/* body container */
#body {width:740px; margin:0px auto; text-align:left;}

/* header section  */
#header {height:70px;}
#header #logo {width:265px;height:70px;background:url('img/image_04.png') no-repeat top left;float:left}
#header #logo a {display:block; width:230px;height:60px;}
#header #menu {margin-left:300px;height:70px;background:url('img/image_05.png') no-repeat top left; padding-top:30px;}

/* menu under header section */
#header #menu ul {margin:0px; list-style:none; float:right}
#header #menu li {padding:1px; margin-right:35px; display:block; line-height:16px; float:left;}
#header #menu li a {font-family:'Trebuchet MS'; color:#fff; font-size:14px; text-decoration:none}
#header #menu li.active {border-bottom:3px solid #2BAEE6}
#header #menu li:hover {}
#header #menu li:hover a {color:#2BAEE6}

/* title section */
#title {height:70px; background:url('img/image_06_2.png') repeat-x top left;}
#title h2 {display:inline-block;background:#fff;color:#333;line-height:18px;padding:6px 12px 6px 12px;margin-top:14px;margin-left:20px;font-size:17px;font-style:italic;font-weight:normal}
/* portfolio */
#title div {float:right;display:inline-block;color:#fff;line-height:18px;padding:0px 12px 6px 12px;margin-top:16px;margin-right:20px;font-size:12px}
#title div a {color:#fff}
#title div a.active {font-weight:bold}

#title-main {height:270px; background:url('img/image_07.png') no-repeat top left;}

#motivation {width:230px;height:100px;line-height:30px;padding-top:44px;color:#fff;text-align:right;float:left}
#motivation span {display:inline-block;background:#fff;color:#333;line-height:18px;padding:6px 12px 6px 12px;margin-bottom:5px;font-size:17px;font-style:italic;}
#subtitle {width:260px;height:270px;float:left;}
#subtitle #state {display:none; margin:200px 0 0 30px; width:200px; padding:5px; font-weight:bold;font-size:10px; background:#CCFF99; border:1px solid #CCFF66}
#subtitle #state span {display:block; float:right}
#subtitle #state strong {display:block; background:url('img/icon/state-ok.png') no-repeat top left; padding-left:30px; height:25px; color:#090; font-size:11px; font-style:italic;}
#preview {margin-left:280px;height:250px;padding-top:30px}
#preview #portfolio-image {height:170px; width:430px; cursor: hand;}
#preview #portfolio-text {margin-top:10px; margin-left:2px; font-weight:bold; text-align:left; color:#222}

/* content section */
#content {margin:20px 20px 0 20px}

#content .box {color:#333;background:#fff;margin-bottom:40px}
#content .box h3 {display:inline-block; background:#555; color:#fff; padding:2px 12px 0px 12px; font-size:16px; line-height:25px;font-weight:bold}
#content .box h4 {display:inline-block; padding:0px 0px 5px 10px; font-size:13px; line-height:25px;font-weight:bold}
#content .box p,
#content .box ul,
#content .box form {border-top:3px solid #666; background:#FFFFFF url('img/box-back.png') repeat-x}
#content .box p {padding:10px; margin:0px}
#content .box .next {border-top:0px;background:#FFFFFF;margin-top:-10px}
#content .box p.empty {border-top:0px;height:27px;padding:0px;background:#fff}
#content .box p.default {margin:0px; padding:0px;background:none; border:0px}

#content .box span.left {display:block; width:360px}
#content .box span.right {display:block; float:right; width:220px; text-align:left}


#content .box a {text-decoration:underline; color:#333; padding:0px 4px 0px 4px}
#content .box a:hover {color:#2BAEE6;}
#content .box a.next {padding:0 0 0 30px; background:url('img/icon/next.png') no-repeat center left;display:inline-block}

#content .box-left {float:left;width:205px; margin:0 30px 50px 0px}
#content .box-right {float:right;width:450px; margin:0 0 50px 0}
#content .box-left2 {float:left;width:450px; margin:0 30px 50px 0px}
#content .box-right2 {float:right;width:205px; margin:0 0 50px 0}

/* blue */
#content .box-blue h3 {background:#2BAEE6; color:#fff}
#content .box-blue p,
#content .box-blue ul {border-top:3px solid #4ac0f2; background:#FFFFFF url('img/box-back.png') repeat-x}

/* tables */
#content .box table.contact {margin:10px}
#content .box table.contact th,
#content .box table.contact td {line-height:22px;padding:0px; font-size:12px; text-align:left}
#content .box table.contact th {width:70px; background:none}

/* lists */
#content .box ul {line-height:28px;margin:0 0 0 0; padding:10px}
#content .box li {padding-left:22px; background: url('img/icon/ok.png') no-repeat 0px 3px}
#content .box li a {padding:0px}
#content .box ul.contact li.email {background-image:url('img/icon/email.png')}
#content .box ul.contact li.email a {color:#111;text-decoration:none;padding:0px}
#content .box ul.contact li.phone {background-image:url('img/icon/phone.png')}
#content .box ul.contact li.user {background-image:url('img/icon/user.png'); font-weight:bold}
#content .box ul.contact li.house {background-image:url('img/icon/house.png')}
#content .box ul.contact li.icq {background-image:url('img/icon/icq.png')}

/* tripple boxes at homepage */
#content .box-triple {width:205px; margin:0 0px 50px 40px; float:left}
#content .box-triple-first {margin-left:0px}

/* images at "about" page */
#content .box-images a {padding:0px; text-decoration:none}
#content .box-images img {padding:10px; border:1px dotted #999; background:#fff; margin:10px}
#content .box-images img:hover {border:1px dotted #2BAEE6; background:#f2f2f2}

/* portfolio boxes */
#content .box-portfolio {}
#content .box-portfolio a {text-decoration:underline}
#content .box-portfolio span.description-top {display:block; float:left; padding:10px; width:280px; margin-right:30px}
#content .box-portfolio span.description {display:block; float:right; padding:10px; width:270px}
#content .box-portfolio ul.tasks {display:block; float:left; margin:-5px 0 0 0px; padding:0 0 0 30px; width:320px; border:0px;background:none}
#content .box-portfolio ul.tasks li {float:left;width:135px; font-size:10px}
#content hr.super {margin-bottom:60px}

/* form - contact */
.contact {padding:10px; margin:0px}
.contact label {display:block; font-weight:bold; color:#222; font-size:12px; float:left; width:150px; line-height:30px; text-align:right; padding-right:20px; margin:2px 0 0px 0}
.contact input,
.contact select,
.contact textarea {font-family:'Tahoma'; font-size:12px; color:#222; width:220px; padding:5px; line-height:22px; height:15px; margin:5px 0 5px 0}

.contact input {border:1px solid #ccc}
.contact input:focus {border:1px solid #2BAEE6}
.contact input.code {width:50px}
.contact input.submit {margin-top:20px; height:40px; margin-left:170px; }
.contact input.submit {color:#000; background:#ccc; border:1px solid #999; font-weight:bold}
.contact input.submit:hover {color:#fff; background:#2BAEE6; border:1px solid #ccc; }
.contact select {width:230px; height:30px}
.contact textarea {border:1px solid #ccc; height:160px; width:450px}
.contact textarea:focus {border:1px solid #2BAEE6}


.contact div.form-left {width:300px;float:left}
.contact div.form-right {width:300px;float:right}

/* form - questionnaire */
.questionnaire fieldset {border:1px solid #aaa; padding:0px 15px 25px 15px; margin:11px 0 44px 0}
.questionnaire fieldset.last {margin-bottom:0px}
.questionnaire legend {background:#D0D0D0; font-size:14px; font-weight:bold; line-height:20px; padding:4px 10px 4px 10px}
.questionnaire legend {background:#555; color:#fff}

.questionnaire input,
.questionnaire select,
.questionnaire textarea {font-family:'Tahoma'; font-size:12px}

.questionnaire label {display:block;margin-top:15px; font-weight:bold; color:#000; padding-left:5px; font-size:14px;}
.questionnaire input[type=text] {display:block; width:250px; font-size:16px; padding:5px; color:#555; border:1px solid #ccc}
.questionnaire input[type=text]:focus {border:1px solid #2BAEE6}
.questionnaire input[type=submit] {display:block; width:250px; font-size:16px; padding:5px; margin-top:20px; height:50px}
.questionnaire select {display:block; width:250px; font-size:16px; padding:5px; color:#555}
.questionnaire textarea {display:block; width:95%; font-size:16px; padding:5px; color:#555; border:1px solid #ccc}
.questionnaire textarea:focus {border:1px solid #2BAEE6}
.questionnaire p {margin-top:20px;}

.questionnaire div.form-left {width:300px;float:left}
.questionnaire div.form-right {width:300px;float:right}

/* footer */
#footer {background:#282A2D url('img/image_24.png') repeat-x 0px -40px; clear:both}
#footer #bottom {width:760px; height:60px; margin:0px auto; text-align:left; background:url('img/image_27.png') no-repeat top center}
#footer #info {height:30px;}
#footer #info * {color:#fff; font-size:11px}
#footer #info a {text-decoration:underline}
#footer #info a:hover {color:#2BAEE6}

/* confirm boxes */
div.confirm {background:#E0FFC0 url('img/icon/state-ok.png') 10px 12px  no-repeat;}
div.confirm {line-height:18px; border:1px solid #ADE37E; margin-bottom:20px; padding:15px; padding-left:45px; text-align:left;}
div.red {background-color:#fce8e8; border:1px solid #FE916B; background-image:url('img/icon/state-nok.png');}

/* colors */
.blue {color:#06F;}
.rosa {color:#F03;}