/* =stylesheet for ABTF
================================================ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; 
	font-family: inherit; vertical-align: baseline;}
body {font-size: 62.5%; font-family: "Trebuchet MS", Arial, serif; color: #444; text-align: center; background: #fff url(/images/body-low.jpg) 0 100px repeat-x; margin: 0; padding: 0; height: 100%;}
body#home {background-image: url(/images/body-high.jpg);}
img {border: none;}
a {color: #06c; text-decoration: none;}
a:hover {color: #039;}
li {list-style: none;}

/* =header
================================================ */
#header {position: relative; width: 960px; height: 140px; background: #fff; margin: 0 auto;}
#header h1 a {position: absolute; top: 25px; left: 0; width: 271px; height: 42px; background: url(/images/logo-klavika.png) no-repeat; text-indent: -9999px; text-decoration: none; border: none;}
	
/* =banner
================================================ */
#banner {position: relative; width: 960px; height: 160px; background: url(/images/pantheon.jpg) 0 1px no-repeat; margin: 0 auto;}
#home #banner {height: 220px; background-image: url(/images/banner-couple.jpg);}
#services #banner {background-image: url(/images/banner-hands.jpg);}
#about #banner {background-image: url(/images/banner-three.jpg);}
#career #banner {background-image: url(/images/banner-men.jpg);}
#news #banner {background-image: url(/images/banner-calculator.jpg);}
#faq #banner {background-image: url(/images/banner-ladefense.jpg);}
#contact #banner {background-image: url(/images/banner-pantheon.jpg);}
#banner img {position: absolute; top: 30px; left: 330px;}

/* =intro
================================================ */
#intro {position: absolute; top: 110px; left: 370px; text-align: left;}
#intro li {font-size: 1.3em; line-height: 1.8em; color: #fff; background: url(/images/ok.png) .1em 50% no-repeat; padding-left: 20px;}

/* =news-box
================================================ */	
#news-box {position: absolute; top: 1px; right: 0; width: 200px; height: 179px; color: #fff; text-align: left; background: #5684c8; padding: 20px;}
#news-box h3 {font-size: 1.8em; font-weight: normal; border-bottom: 1px solid #9cf; margin-bottom: .5em;}
#news-box p {font-size: 1.2em; line-height: 1.5em; text-indent: 16px; background: url(/images/article.png) 0 .3em no-repeat; margin: 1em 0;}
#news-box p a {color: #9cf;}
#news-box .button {position: absolute; bottom: 20px; right: 20px;}

/* =nav
================================================ */
#nav {position: absolute; bottom: 0; left: 0; width: 960px; margin: 0 auto; background: #900 url(/images/nav-off.jpg) repeat-x;}
#nav li {display: inline;} /* IE6 fix */
#nav a {float: left; display: block; height: 40px; font: bold 1.4em/40px "Helvetica Neue", Arial, sans-serif; color: #c47a7a; text-decoration: none; text-transform: uppercase; letter-spacing: .12em; padding: 0 20px;}
#nav a:hover {color: #fff;}
#home #nav li#button1 a,
#services #nav li#button2 a,
#about #nav li#button3 a,
#career #nav li#button4 a,
#news #nav li#button5 a,
#faq #nav li#button6 a,
#contact #nav li#button7 a {color: #fff; background: url(/images/nav-on.jpg) bottom repeat-x;}

/* =lang
================================================ */
#lang {position: absolute; top: 0; right: 20px; background: url(/images/lang-right.png) right no-repeat; padding-right: 10px;}
#lang ul {float: right; list-style: none; height: 29px; background: url(/images/lang-left.png) left no-repeat; padding-left: 10px;}
#lang li {float: left; padding: 0 5px;}
#lang a, #lang p {float: left; display: block; font-size: 1.2em; line-height: 29px;}

/* =content
================================================ */
#content {position: relative; margin: 40px auto; width: 960px; text-align: left; overflow: hidden;}

/* =main
================================================ */
#main {float: right; width: 700px;}
#main p {font-size: 1.3em; line-height: 1.6em; padding: .5em 0; margin-bottom: 1.2em;}
#main p.info {background: url(/images/info.png) 0 .6em no-repeat; padding-left: 22px;}
#main h2 {font-size: 2.5em; color: #000; padding-bottom: 1em;}
#main h3 {font-size: 1.6em; font-weight: bold; color: #900; padding-top: .2em;}
#main h4 {font-size: 1em; color: #666; text-transform: uppercase; text-indent: .3em; padding: .3em 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}

/* =side
================================================ */
#side {float: left; width: 200px; margin-top: 60px;}
#side h2 {display: block; height: 30px; font: bold 1.4em/30px "Helvetica Neue", Arial, sans-serif; color: #fff; text-indent: 10px; text-transform: uppercase; padding: 0 .3em; background: url(/images/panel-top.png) top no-repeat;}
#side h3 {font-size: 1.5em; padding-bottom: .3em; border-bottom: 1px solid #ccc;}
#side p {font-size: 1.2em; line-height: 1.6em; padding: .5em 0; margin-bottom: 1.2em;}
#side label {font-size: 1em;}

/* =nav_categories
================================================ */
#nav_categories {width: 200px; margin-bottom: 50px; border: 1px solid #ccc; border-top: 0;}
#nav_categories a {display: block; width: 200px; font-size: 1.3em; font-weight: bold; text-decoration: none; text-indent: 35px; background: #f0f0f0 url(/images/arrow-off.png) 20px 50% no-repeat; 
	padding: 10px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #fff;}
#nav_categories a:hover {color: #06c; background-color: #f9f9f9;}
#nav_categories li#current a {color: #000; background-color: #f9f9f9; background-image: url(/images/arrow-on.png);}

/* =teaser
================================================ */
#teaser {width: 957px; background: #ccc; margin-left: 3px;}
#teaser td {width: 200px; background: #fff; padding: 19px; overflow: hidden; margin: 0;}
#teaser h2 {display: block; width: 200px; font-size: 1.7em; font-weight: normal; line-height: 29px; text-decoration: none; background: url(/images/teaser-head.png) no-repeat;}
#teaser h2 a {padding-left: 10px; color: #fff;}
#teaser p {font-size: 1.3em; line-height: 1.6em; padding-top: .8em; margin-bottom: 1.2em;}
#teaser img {width: 200px; height: 90px; border-top: 1px solid #1e0000;}
#teaser .button {float: right;}

/* =button
================================================ */
a.button {float: left; display: block; font: bold 10px "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; color: #fff; text-decoration: none; letter-spacing: .12em; height: 26px; 
	background: url(/images/button-right.png) no-repeat scroll top right; padding-right: 30px; }
a.button span {display: block; line-height: 10px; background: url(/images/button-left.png) no-repeat; padding: 8px 0 8px 15px;}
a.button:hover {color: #fff; background-position: bottom right; outline: none; /* hide dotted outline in Firefox */ }
a.button:hover span {background-position: bottom left;}

a.blue {background-image: url(/images/button-blue-right.png);}
a.blue span {background-image: url(/images/button-blue-left.png);}

/* =cv
================================================ */
.cv img {float: left; width: 120px; height: 120px; padding: .5em 10px 10px 0;}
.cv h3 {margin-left: 140px;}
.cv h5 {margin: 0 0 .5em 140px; text-transform: uppercase; color: #888;}
.cv p {margin-left: 140px;}
#main .cv table {width: 560px; margin: -2em 0 1em 140px;}
.cv table td {width: 50%;}
.cv table li {list-style: none; background: url(/images/tick.png) 0 .2em no-repeat; padding-left: 25px;}

/* =news
================================================ */
.news p {margin-left: 60px;}
.news h3 a {color: #900;}
.date {float: left; width: 40px; height: 50px; text-align: center; background: url(/images/calendar.png) no-repeat; margin-top: 1em;}
.date .month {font-size: 1.2em; line-height: 18px; color: #fff; letter-spacing: .1em; text-transform: uppercase;}
.date .day {font-size: 1.8em; font-weight: bold; line-height: 32px; color: #000;}

/* =contact-form
================================================ */	
#contact_form {float: right; width: 335px; padding: 20px; margin-bottom: 20px; border: 1px solid #ccc;}
#contact_form h3 {margin-bottom: 10px;}
#contact_form label {display: block;}
#contact_form input, #contact_form textarea {width: 330px; font-size: 1.5em; background: #ededed; border: 1px solid #999; border-color: #ccc #999 #999 #ccc; margin-bottom: 10px;}
#contact_form em {color: #c00;}

/* =map-canvas
================================================ */
#map-canvas {float: right; width: 375px; height: 260px; border: 1px solid #ccc;}

/* =mailinglist_form
================================================ */
#mailinglist_form {width: 200px; background: url(/images/newspaper.jpg) top center no-repeat; padding: 60px 0 50px 0; overflow: hidden;}
#mailinglist_form label {display: block; margin-top: 1em;}
#mailinglist_form input {width: 170px; font-size: 1.5em; background: #ededed; margin: 0; border: 1px solid #999; border-color: #ccc #999 #999 #ccc; margin-bottom: 1em;}

/* =footer
================================================ */
#footer {width: 960px; border-top: 5px solid #eee; margin: 0 auto 50px auto;}
#footer p {font-size: 1.2em; color: #333; padding: 10px 0;}
#footer #left {float: left; text-align: left;}
#footer #right {float: right; text-align: right;}

/* =misc
================================================ */
.checklist {padding: .5em 0; margin-bottom: 1.2em;}
.checklist li {font-size: 1.2em; line-height: 1.6em; background: url(/images/tick.png) 0 .3em no-repeat; padding: .3em 0 .3em 20px;}