/*
 * Table of Contents:
 * 
 * 1. MACRO -> Layout
 * 2. MACRO -> Typographie
 * 3. MACRO -> Tables
 * 4. MACRO -> Forms
 * 5. MACRO -> Helper
 * 6. MACRO -> Images
 * 7. micro -> Layout
 * 8. micro -> Templates
 *
 */

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Layout */
html {
min-width: 895px;
}

* html {
width: 895px;
}

body {
font-size: 62.5%;
font-family: Arial, sans-serif;
background: url(../media/images/layout/bg_header.jpg) no-repeat 50% top;
}

#wrapper {
position: relative;
left: -6px;
width: 865px;
padding-top: 30px;
margin: 169px auto 0;
background: url(../media/images/layout/bg_body.jpg) repeat-y center;
}

a#logo {
position: absolute;
left: 200px;
top: -150px;
display: block;
width: 218px;
height: 55px;
background: url(../media/images/layout/logo.gif);
text-indent: -9999px;
}

#content {
display: inline;
float: left;
width: 470px;
padding: 0 30px;
margin-left: 168px;
min-height: 400px;
}

* html #content {
height: 400px;
}

#context {
display: inline;
float: left;
position: relative;
width: 167px;
margin-top: -90px;
margin-bottom: 150px;
}

#navigation {
display: inline;
float: left;
width: 168px;
margin-left: -865px;
}

#footer {
position: absolute;
right: 0;
bottom: 0;
width: 167px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Typographie */

/* >>> Basics */
p, li, th, td, input, textarea, label, address { 
font: 1.3em/1.69em Arial;
}

/* >>> h1, h2, h3, h4, h5, h6 */
h1 {
margin-bottom: 0;
font: 1.5em/1.46em Arial;
}

h2 {
margin-bottom: 0;
font: bold 1.3em/1.69em Arial;
}

h3 {}
h4 {}
h5 {}
h6 {}

/* >>> p */
p { 
margin-bottom: 25px;
}

/* >>> ul, ol, li */
ul {
margin-bottom: 25px;
}

ol {}
li {
position: relative;
list-style: disc outside;
margin-bottom: 5px;
}

#content ul {
margin-left: 15px;
}

/* >>> dl, dt, dd */
dl {}
dt {}
dd {}

/* >>> table, caption, th, td */
table {}
caption {}
th {}
td {}

/* >>> fieldset, legend */
fieldset {}
legend {}

/* >>> form, label, input.text, textarea */
form {}
label {}
input.text {}
textarea { }

select {}
option {}

button {}
input.submit {}
input.image {}

/* >>> strong, em */
strong { font-weight: bold; }
em { font-style: italic; }

/* >>> address */
address {
margin-bottom: 25px;
line-height: 1.3076;
}

/* >>> 1em */
td p, td li,
th p, th li {
font-size: 1em;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Typographie -> Links */

a { color: #000; }
a:visited {}
a:hover { text-decoration: none; }
a:active {}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Tables */

table {
clear: both;
margin-bottom: 15px; 
border-collapse: collapse;
}         

caption {}

th, td {
padding: 2px 6px; 
border: 1px solid #ccc; 
}

th { 
font-weight: bold;
border-bottom-width: 3px; 
}

td {}

table.noborder,
table.noborder tr,
table.noborder tr td,
table.noborder tr th {
border: 0;
}

td.redfont {
color: #F00;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Forms */
form {
margin-bottom: 25px;
}

input.text,
textarea {
border: 2px solid #ddd;
}

label { display: block; }

input.text { 
display: block; 	
width: 300px;
padding: 2px;
}

textarea {
display: block;
width: 302px; 
padding-left: 2px;
height: 150px;
}

input.submit { 
display: block; 
margin-top: 5px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Helper */

/* >>>>>>>>>>>>>> Helper > Horizontal Lists */

.hl li {
float: left;
}

/* >>>>>>>>>>>>>> Helper > Clearfix */

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

.clear {
clear: both;
height: 0;
line-height: 0;
}

/* >>>>>>>>>>>>>> Helper > Invisibility */

.invis {
position: absolute;
left: -9999px;
}




/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Images */

/* >>>>>>>>>>>>>> Images > Icons */
.icon {}

/* >>>>>>>>>>>>>> Images > Replaced */
.replaced {
display: block;
text-indent: -9999px;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> micro -> Layout */

/* >>> #navigation ul, #meta-navigation, #footer */
#navigation ul,
#meta-navigation,
#footer {
margin-bottom: 10px;	
border-top: 2px solid #e6f4f4;
}

#navigation ul li,
#meta-navigation li,
#footer li {
display: block;
margin-bottom: 0;
border-bottom: 2px solid #e6f4f4;
font: 1.2em "Myriad Pro", Myriad, Arial, sans-serif;	
list-style: none;
padding-bottom: 0;
}

* html #navigation ul li,
* html #meta-navigation li,
* html #footer li {
height: 1%;	
}

#navigation ul li a,
#navigation ul li strong,
#meta-navigation li span,
#footer li a {
display: block;
padding: 3px 20px;
}

* html #navigation ul li a,
* html #navigation ul li strong,
* html #meta-navigation li span,
* html #footer li a {
height: 1%;	
}

#navigation ul li strong {
color: #EE7900;
background: url(../media/images/layout/bullet.gif) no-repeat 10px 50%;
}

*+html #navigation ul li strong {
background-position: 10px 9px;	
}

#navigation ul li a,
#meta-navigation li a,
#footer li a {
color: #000;
text-decoration: none;
}

#navigation ul li a:hover,
#meta-navigation li a:hover,
#footer li a:hover {
text-decoration: underline;
}

#navigation ul li ul {
border: 0;
margin: 0 0 0 20px;
}

#navigation ul li ul li,
#navigation ul li ul li {
font-size: 1em;
border: 0;
}

#navigation ul li ul li strong {
font-weight: normal;
}

/* >>> form#search */
form#search {
margin-bottom: 10px;	
}

form#search input {
width: 150px;
padding: 2px;
margin-left: 5px;
border: 2px solid #ddd;
background: #fff url(../media/images/layout/bg_search.gif) no-repeat 140px 4px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> micro -> Templates */

/* >>> #navigation .teaser */
#navigation .teaser {
text-align: center;
}

#navigation .teaser p {
font: 1.2em "Myriad Pro", Myriad, Arial, sans-serif;	
}

#navigation .teaser a {
text-decoration: none;
color: #000;
}

#navigation .teaser a:hover {
text-decoration: underline;
}

/* >>> #context .teaser */
#context .teaser {
background: url(../media/images/layout/bg_context_teaser.gif) no-repeat 4px top;
margin-bottom: 10px;
}

* html #context .teaser {
height: 1%;	
}

#context .inner-teaser {
background: url(../media/images/layout/bg_context_teaser_bottom.gif) no-repeat 4px bottom; 
padding: 10px 15px 25px;
}

#context .inner-teaser p {
font: 1.2em "Myriad Pro", Myriad, Arial, sans-serif;	
}

/* >>> .left, .right */
.left {
float: left;
margin: 0 10px 5px 0;
}

.right {
float: right;
margin: 0 0 5px 10px;
}

.right span,
.left span {
display: block;
padding-top: 5px;
font: italic 1.1em Arial;
}

.w230,
.w230 img {
display: block;
width: 230px;
}

/* >>> .cols-3 */
.cols-3 {
margin-bottom: 25px;
margin-left: 0 !important;
}

.cols-3 li {
list-style: none;
display: inline;
float: left;
width: 150px;
margin-right: 10px
}

.cols-3 li.last {
margin-right: 0;
}