/*  Stylesheet for g-com.ch
    created: 2010-05-10
    
    #003867     blue
    #515151     dark grey
    #a7a7a7     light grey
    
*/
/* ===[ RESET ]================================================================================== */

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,b,u,i,center,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-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,
q:before,q:after{content:'';content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}

/* ===[ BASIC LAYOUT ]=========================================================================== */

html, body {height: 100%;}
body {
    min-width: 960px; height: 100%; 
    font: normal 12px/18px "Helvetica Neue","Helvetica",Arial,sans-serif; text-align: center;
    color: #515151; background: #fff url('body_bg.png') center top no-repeat; 
}

#header, #navigation, #page, #footer {
    width: 960px; margin: 0 auto; text-align: left; position: relative; padding: 0 10px;}
p#spacer {height: 45%; margin-bottom: -300px;}

/* ===[ MODULAR COMPONENTS ]===================================================================== */

div.section {
    padding: 0 38px 0 38px; width: 884px;
    position: relative; display: block; overflow: hidden; font-weight: bold;
    background: transparent url('content_line.png') 331px 122px no-repeat;
}
div.section h2 {font-size: 14px; padding-bottom: 20px; padding-top: 10px; color: #003867;}
div.section h2.csc-firstHeader {padding-bottom: 37px;}
div.section h3 {color: #003867; font-weight: bold; font-size: 14px;}
div.section h3 .info {font-weight: normal; font-size: 12px;}
div.section p {padding-bottom: 20px;}
div.section a {font-weight: bold; color: #003867; text-decoration: underline;}

body div.section .highlighted {font-weight: normal; color: #003867; padding-bottom: 42px;}
body div.section div.highlighted {padding-bottom: 22px;}

div.article, div.aside {float:left; margin: 0 17px 0 17px; position: relative; padding-top: 13px;}
* html div.article, * html div.aside {margin: 0 8px 0 8px;}
div.article {width: 574px; height: 455px; overflow: auto;}
div.article ul li {padding: 0 0 0 10px; background: transparent url('list_item.png') 0 8px no-repeat;}

div.aside {width: 232px; padding-left: 10px;}
div.aside {font-size: 10px; font-weight: bold;}
div.aside p {padding: 0;}
div.aside ul {padding-top: 1px;}
div.aside ul a {color: #003867; text-decoration: none; padding-left: 10px; 
    background: transparent url(arrows_right.png) 0 3px no-repeat;}
div.aside ul a.active, div.aside ul a:hover, div.aside ul a:focus {
    color: #a7a7a7; background: transparent url('arrows_right.png') 0 -38px no-repeat;
}
div.aside div.csc-textpic {padding-left: 52px; padding-top: 6px;}

.oneCol div.csc-textpic {padding: 0 17px 0 75px;}
.oneCol div.csc-textpic-text {padding-top: 17px;}
/*.oneCol div.csc-textpic-intext-right-nowrap {padding-right: 48px;}*/

.twoCol {}

body a.specialLink {
    padding-left: 10px; color: #003867; background: transparent url('arrows_right.png') 0 3px no-repeat;
    text-decoration: none; font-size: 10px;
}
body a.specialLink:hover, body a.specialLink:focus {
    color: #a7a7a7; background: transparent url('arrows_right.png') 0 -38px no-repeat;
}

/* ===[ OVERRIDES ]============================================================================== */

/* Header */
#header {
    clear: both;
    /*margin-top:123px;*/ min-height: 20px; height: auto !important; height:20px;
    background: transparent url('shadow_top.png') bottom left no-repeat; z-index: 2;}
#header div.hGroup {position: absolute; top: 53px; right: 65px;}
#header p.skipTo {position: absolute; top:0; left:0; height: 1px; width: 1px; text-indent: -999em;}

/* Navigation */
#navigation {z-index: 3;}
#navigation p {
    background: transparent url('small_g.png') top left no-repeat;
    position: absolute; height: 90px; width: 640px; padding: 54px 0 0 55px; 
    font-size: 1.2em; font-weight: bold; color: #a7a7a7; padding-top: 54px; top: -10px;
}
#navigation a {padding: 0 .5em; text-decoration: none; color: #a7a7a7;}
#navigation a.active, #navigation a:hover, #navigation a:focus {color: #003867;}

/* Page */
#page {height: 600px; background: url('page_bg.png') top left repeat-y; z-index: 1;}
#page #content {padding-top: 122px;}

/* Footer */
#footer {
    padding-top: 15px; padding-bottom: 15px; 
    background: transparent url('shadow_bottom.png') top left no-repeat;
    overflow: hidden; position: relative;
}
#footer a {color: #8a8a8a; text-decoration: none;}
#footer a:hover, #footer a:focus {color: #003867;}

#footer .article, #footer .aside {padding: 0; height: auto; color: #8a8a8a; font-size: 9px; line-height: 12px; }
#footer .article {padding-left: 23px;}

#footer .aside {text-align: right; float: right;}
#footer .aside span {text-transform: uppercase; font-weight: normal; padding: 0 5px; letter-spacing: 1px;}
#footer .aside a {letter-spacing: 2px;}
#footer .aside span.first {padding-left: 10px; background: transparent url('arrows_right.png') 0 -40px no-repeat;}
#footer .aside span.active {font-weight: bold;}
#footer .aside a:hover, #footer .aside a:focus {color: #003867;}


/* ===[ DEBUG ]================================================================================== */

/*#header, #navigation, #page, #footer {outline: 1px dashed lime;}
#header div.hGroup, #navigation ul {outline: 1px dotted blue;}

div.article, div.aside {outline: 1px dashed orange;}

#page {-webkit-box-shadow: 0 4px 10px #a7a7a7;}*/