div#root {
    margin: 20px auto;
    width: 790px;
}

header#header {
    width: 790px;
    margin-bottom: 20px;
}

/******** Navigation ***********/

nav#navigation {
    float: left;
    padding: 0 15px;
    width: 160px;
}

nav#navigation ul {
    list-style: none;
    
}

nav#navigation a {
    font-family: calibri;
    font-size: 11pt;
    color: #555;
    text-decoration: none;
}
 
nav#navigation a:hover {
    text-decoration: underline;
}

.menu-first-level > .menu-current > a,
.menu-second-level .menu-current > a {
    font-weight: bold;
    color: rgb(0, 170, 0) !important;
}

ul.menu-first-level {
    margin: 0;
    padding: 0;
}

li.menu-first-level-normal {

}

li.menu-first-level-active {

}

li.menu-first-level-with-subpage {

}

ul.menu-second-level, ul.menu-third-level {
    margin-left: 15px;
    padding: 0;
}

ul.menu-second-level  a {
    font-size: 9pt;
    color: #888 !important;
}

li.menu-second-level-normal {

}

li.menu-second-level-active {

}

li.menu-second-level-with-subpage {

}

#breadcrumb {
    font-family: calibri;
    font-size: 10pt;
    color: #aaa;
    margin-bottom: 10px;
}

#breadcrumb a {
    font-weight: bold;
    text-decoration: none;
    color: rgb(0, 170, 0);
}

#breadcrumb a:hover {
    text-decoration: underline;
}

/********** content ***************/
#body {
    margin: 0;
    padding: 0;
    width: 800px;
    margin-left: 190px;
}

#content {
    font-family: calibri;
    font-size: 11pt;
    color: #444;
    float: left;
    width: 600px;
}

#context {
    font-family: calibri;
    font-size: 10pt;
    color: #444;
    margin-left: 620px;
}

#context .csc-default {
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px 0 5px 5px;
    margin-bottom: 20px;
}
#context h1 {
    margin: 5px 15px;
    padding: 0;
}

#context img {
    margin: 0;
    padding: 0;
}

.csc-header > h1 {
    font-family: calibri;
    font-size: 14pt;
    color: #444;
    margin: 0;
    padding: 0;
    margin-bottom: 15px;
}

.csc-default ul {
    list-style: square; 
    padding-left: 15px;
    margin-top: 0;
}

.bodytext {
    margin: 10px 0;  
    line-height: 175%;
}

#content a {
    text-decoration: none;
    color: rgb(0, 170, 0);
    font-family: calibri;
    font-size: 11pt;
    font-weight: bold;
}

#content td {
    padding: 3px 5px;
}

#body td.align-right {
    text-align: right;
}

#body td.align-left {
    text-align: right;
}

#body td.align-center {
    text-align: center;
}

#body td.align-jutify {
    text-align: justify;
}

#context .csc-header h1 {
    font-size: 13pt;
}

#context a {
    text-decoration: none;
    color: rgb(0, 170, 0);
    font-family: calibri;
    font-size: 10pt;
    font-weight: bold;
}

.bodytext a:hover {
    text-decoration: underline;
}

.csc-textpic-border > .csc-textpic-imagewrap img {
     border: 1px solid #ccc !important;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}

hr {
    border: none;
    border-bottom: 1px solid #ccc; 
}

.csc-textpic-caption {
    font-size: 10pt;
    font-family: calibri;
    color: #888;
    padding-left: 5px;
}

.tx-socialshareprivacy-pi1 {
    margin-left: 190px;
}

/************* jcarousel ******************/

.jcarousel-wrapper {
    position: relative;
    border: 5px solid #fff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
Position must be relative!
*/
.jcarousel {
    position: relative;
    overflow: hidden;
}

/*
This is the container of the carousel items.
You must ensure that the position is relative or absolute and
that the width is big enough to contain all items.
*/
.jcarousel ul {
    width: 20000em;
    position: relative;

    /* Optional, required in this case since it's a <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
.jcarousel li {
    /* Required only for block elements like <li>'s */
    float: left;
    margin: 0 1px;
}

.jcarousel li img {
 width: 200px;
    height: 150px;
}

.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 60px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

.jcarousel-control-prev {
    left: -50px;
}

.jcarousel-control-next {
    right: -50px;
}

.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}

.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}

/** Carousel Pagination **/

.jcarousel-pagination {
    position: absolute;
    bottom: 0;
    left: 15px;
}

.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;

    font-size: 11px;
    line-height: 14px;
    min-width: 14px;

    background: #fff;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;

    margin-right: 2px;

    opacity: .75;
}

.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}