/*
 this document has the same structure as the div layout, anyhow subclasses are defined next to the belonging div-id
*/

body {
 background: #e7effa;
 text-align: center; /* fix for Netscape 4 and IE 4-6 */
 font-family: Arial;
 font-size: 12px;
 color: #000000;
 margin: 0 0 0 0 !IMPORTANT;/* these properties are not always inherited */
 padding: 0 0 0 0;
}

img {
 border: 0px;
 /*-ms-interpolation-mode: bicubic;*/
}

.horizontal { /* 1-pixel gif with color: #c9d7e5; */
 height: 1px;
 border: 0px;
}

#outerWrapper {
 margin-left: auto;
 margin-right: auto;
 background: #e7effa;
 background-image: url(../images/shadow.png);
 background-repeat: repeat-y;
 width: 838px; /* 19px per border image */
}

#intWrapper {
 background: #FFFFFF;
 margin-left: auto;
 margin-right: auto;
 width: 800px;
}

/***** HEADER *****/
#header {
 padding-top: 27px;
 padding-right: 15px;
 padding-left: 15px;
 padding-bottom: 40px;
}

#logo {
 clear: both;
 float: left;
}

#smallTopNav {
 color: #999999;
 text-align: right;
 font-size: 11px;
 padding-right: 12px;
 padding-top: 10px;
}

#smallTopNav a:link,#smallTopNav a:visited,#smallTopNav a:active {
 color: #999999;
 text-decoration: none;
}

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

#mainNav {
 float: right;
 font-weight: bold;
 font-size: 16px;
 padding-top: 2px;
 text-transform: lowercase;
}

#mainNav a:link, #mainNav a:visited, #mainNav a:active {
 color: #000000;
 text-decoration: none;
}

#mainNav a:hover {
 color: #666666;
 text-decoration: none;
}

#showcase {
 clear: both;
 color: #ffffff;
 font-size: 14px;
 height: 274px;
 background-color: #1f67bc;
 background-image: url(../images/mainShowcase.jpg);/* front page only */
 background-repeat: no-repeat;
}

#showcaseLeft{
 float:left;
 position: relative;
 top: -1px;
 width: 325px;
 height: 274px;
}

#screenshot {
 position: absolute;
 top: 1px;
 left: 0px;
}

#testButton{
 position: absolute;
 top: 165px;
 left: 239px;
 width: 0px; /* autofit img */
 height: 0px;
 margin-bottom: -115px; /* IE6 compat */
}

#testButton a:link:before,
#testButton a:hover:before,
#testButton a:visited:before,
#testButton a:active:before,
#vidpres a:link:before,
#vidpres a:hover:before,
#vidpres a:visited:before,
#vidpres a:active:before {
 content: " ";
}

#vidpres .bodytext,
#testButton .bodytext {
 margin: 0 0 0 0;
 padding: 0 0 0 0;
}

#showcaseRight{
 float: left;
 position: relative;
 padding-left: 30px;
 padding-right: 30px;
 width: 415px;
 height: 274px;
 text-align: justify;
}

#headline {
 padding-top: 50px;
 width: 410px;
}

#showcaseRight h1 {
 text-align: left;
 font-size: 31px;
 font-style: normal;
 font-weight: normal;
 margin-top: 0px;
 margin-bottom: 14px;
}

#showcaseRight h2 {
 font-size: 18px;
 font-style: normal;
 font-weight: normal;
 margin-top: 0px;
 margin-bottom: 0px;
 text-align: left;
}


#vidpres {
 position: absolute;
 right: 25px;
 bottom: 40px;
 /*left: 299px;*/
 /*top: 201px;*/
}

#vidpres img {
 margin-top: 0px;
 padding-top: 0px;
}

/***** CONTENT *****/
#contentWrapper {
 clear: both;
 width: 800px;
}

#contentLeftWrapper {
 float: left;
 width: 450px !IMPORTANT;
 width: 490px; /* just IE6 takes this overwritten value */
 padding-left: 20px;
 padding-top: 10px;
 padding-right: 20px;
 padding-bottom: 20px;
 /*margin: 0 0 0 0;*/
}

#contentLeft {
 width: 100%;
 /*font-weight: bold;*/
 text-align: left;
 line-height: 1.5;
}

#contentLeft h4 {
 font-size: 12px;
}

#contentLeft .csc-textpic-above img {
 margin-bottom: 5px;
 // overwrites 'a.highslide img' JE
 padding: 0px;
 border: 0px;
}

.csc-textpic-above div {
 margin-top: 20px; 
 margin-left: 15px;
}

#contentLeft .bodytext {
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 margin-bottom: 15px;
}

#contentLeft .bodytext b {
}

#contentLeft .bodytext a {
}

.csc-textpic {
 margin-top: 20px;
}

.csc-sitemap ul {
 margin-top: 5px;
}

.csc-header {
 padding-top: 10px;
}

.news-latest-morelink {
 margin-bottom:10px;
}

.news-single-img {
 margin-top: 6px;
 margin-bottom: 16px;
}


#contentLeft h1, .csc-header h1 {
 margin-top: 10px; /* fixes IE FF differance in displaying, although this should be inherited from body */
 font-size: 16px;
 font-weight: bold;
 color: #1d6ac4;
}

#contentLeft h3 {
 margin-bottom: 0px;
 padding-bottom: 0px;
 font-size: 16px;
}

#contentLeft .horizontal {
 width: 450px;
}

#contentLeft ul {
 list-style: none;
 margin-left: 3px;
 padding-left: 0px;
}

#contentLeft li {
 margin-bottom: 10px;

 padding-left: 14px;
 background-image: url(../images/paragraph_icon.gif);
 background-repeat: no-repeat;
 background-position: 0 8px;
}

/* layout 1 bullet list */
#contentLeft .csc-bulletlist-1 li {
 margin-top: 0px;
 margin-bottom: 0px;
}

#contentLeft .csc-bulletlist-1 {
 margin-top: 2px;
 margin-bottom: 2px;
}

/* layout 4 header */
#contentLeft .csc-header h4{
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 margin-top: 5px;
}

#contentRight {
 float: left;
 left: 0px;
 top: 0px;
 padding: 0 0 0 0;
 margin: 0 0 0 0;
 width: 310px;
 /*width: 350px;*//* in IE6 defacto, we want it to be same as in IE7 and others*/
 width: auto;/* works in IE6 but messes up IE7, only for csc-textpic subclass */
 padding-top: 1px;
}

/***** BOXES *****/
.box {
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 text-align: left; 
 background: #f3f6fc;
 font-size: 12px;
 color: #000000;
}

.box.header {
 padding-top: 10px;
 padding-left: 15px;
 padding-right: 0px;
 padding-bottom: 10px;
 /*width: 295px;*/ /* 295 + 15 = 310 */
 width: 295px !IMPORTANT;
 // width: 310px;
 height: 16px;
 background: #2173d9;
 color: #ffffff;
 font-size: 14px;
 font-weight: bold;
}

.box.body {
 margin-top: 10px;
 padding-top: 0px;
 padding-bottom: 10px;
 padding-right: 15px;
 padding-left: 15px;
 width: 280px; /* 280 + 15 + 15 = 310 */
 //width: auto;
}

.bodytext {
}

/* there is some div style margin-left 130 px around here */
.csc-textpic-text {
 /*width: 150px;*/ /* 280 - 130 = 150 */
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 width: auto;
}

/*
 * @see above conflict between IE6 and IE7 in #contentRight due to IE6 miscalculus of paddings and margins
 * IE6 overwrites width: 280px !IMPORTANT;
 * IE7 does not
 */
#contentRight .csc-textpic {
 width: 280px !IMPORTANT; /* 310 - 15 - 15 */
 width: auto; 
 margin: 0 0 0 0;
 padding: 0 0 0 0;
}

#partner .bodytext {
 margin-bottom: 25px;
}

#partner .csc-textpic-caption {
 display: none;
}

#partner .csc-textpic-text p {
 margin-top: 5px;
}

#partner .csc-textpic {
 text-align: center;
}

#partner .csc-textpic-imagewrap {
 float: none;
}

#partner .csc-textpic-firstcol {
 margin-left: auto;
 margin-right: auto;
 float: none;
}

#partner .csc-textpic-imagewrap img {
 position: relative;
 left: -5px;
}


#flashNav a:link,
#flashNav a:active,
#flashNav a:visited,
#flashNav a:hover,
#contentLeft a:link,
#contentLeft a:active,
#contentLeft a:visited,
#contentLeft a:hover,
.box a:link,
.box a:active,
.box a:visited,
.box a:hover,
.bodytext a:hover
 {
 color: #5cba29;
 text-decoration: none;
 white-space: nowrap;
 // white-space: wrap;
}

.bodytext a:hover,
#flashNav a:hover,
#contentLeft a:hover,
.box a:hover {
 text-decoration: underline;
}

.bodytext a:visited:after,
.bodytext a:link:after,
.bodytext a:active:after,
.bodytext a:hover:after,
#contentLeft a:visited:after,
#contentLeft a:link:after,
#contentLeft a:active:after,
#contentLeft a:hover:after, 
/* since here ids and classes excluded */
#contentLeft .csc-textpic a:visited:before, 
#contentLeft .csc-textpic a:link:before,
#contentLeft .csc-textpic a:active:before,
#contentLeft .csc-textpic a:hover:before,
#contentLeft .csc-bulletlist a:visited:before, 
#contentLeft .csc-bulletlist a:link:before,
#contentLeft .csc-bulletlist a:active:before,
#contentLeft .csc-bulletlist a:hover:before,
#contentLeft .csc-sitemap a:visited:before, 
#contentLeft .csc-sitemap a:link:before,
#contentLeft .csc-sitemap a:active:before,
#contentLeft .csc-sitemap a:hover:before,
#contentLeft h4 a:visited:before, 
#contentLeft h4 a:link:before,
#contentLeft h4 a:active:before,
#contentLeft h4 a:hover:before {
 content: " "; // more safari compat than none
}

#flashNav a:visited:before,
#flashNav a:link:before,
#flashNav a:active:before,
#flashNav a:hover:before,
.bodytext a:visited:before,
.bodytext a:link:before,
.bodytext a:active:before,
.bodytext a:hover:before,
#contentLeft a:visited:before,
#contentLeft a:link:before,
#contentLeft a:active:before,
#contentLeft a:hover:before {
 content: url(../images/linkGreen.gif)" ";
}

.box hr{
 width: 275px;
 margin-left: 15px;
}

.box.text, .box.news_date, .box.cal_date, .box.horizontal{
 width:280px;
 margin-bottom: 10px;
}

.box.news_date, .box.cal_date{
 margin-top: 10px;
 padding-top: 0px;
 color: #1d6ac4;
 font-weight: bold;
 margin-bottom: 5px;
 padding-bottom: 0px;
 
}

.box.news_date {
 margin-bottom: 15px;
}

.box.text {
}

#cQuote {
}

#cQuote .box.text {
 padding-top: 10px;
}

#news {
}


#partner .bodytext {
 text-align: center;
}


/***** FOOTER *****/
#footer {
 clear: both;
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 margin-top: 10px;/* previously 160px */
 background: #2173d6;
 height: 35px;
 width: 800px;
 color: #ffffff;
}

#footer img {
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 margin-right: 2px;
}

.footerbox a:link, .footerbox a:active, .footerbox a:visited {
 color: #ffffff;
 text-decoration: none;
}

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

#copyright {
 text-align: left;
 margin: 0 0 0 0;
 margin-left: 20px;
 width: 300px;
}

#copyright, #sitetools, #toTop {
 padding-top: 10px;
 float: left;
}

#toTop {
 float: right;
 text-align: right;
 margin: 0 0 0 0;
 margin-right: 20px;
 width: 120px;
}

#sitetools {
 padding-top: 10px;
 float: left;
 width: 300px;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}