/**************************************************************************************************/
/* Buero Thomas Boyle + Partner                                                                    */
/**************************************************************************************************/


/*  Reset CSS -> Thanks to Eric A. Meyer */

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;
    }

:focus {
	outline: 0;
    }

body {
	line-height: 1;
	color: #5f6063;
    }

ol, ul {
	list-style: none;
    }

table {
	border-collapse: separate;
	border-spacing: 0;
    }
    
caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: top;
    }

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
    }
    
blockquote, q {
	quotes: "" "";
    }


/**************************************************************************** General Site Layout */

/* General */

a:link  {
    color : #cf003d;
    text-decoration : underline;
    }

body.red a:link {
    color : #fff;
    }

a:visited   {
    color : #5f6063;
    text-decoration : underline;
    }


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

.smaller,
span.smaller    {
    font-size : 0.75em;
    line-height : 1em;
    white-space : nowrap;
    }

span.link_descr    {
    font-size : 0.75em;
    }

strong  {
    font-weight : normal;
    }

span.normal {
    font-weight : normal;
    }

span.color  {
    color : #000;
    }


.hide,
.hidden {
    position:absolute;
    top:0; left:-300em;
    height : 0;
    overflow : hidden;
    }



/* Start Page */

html, body, .wrap {
    height: 100%;
    }

body {
    height : 100%;
    width : 100%;
    
    font-family : ocrb, monotype;
    font-weight : normal;

   	font-size : 16px;
	line-height : 24px;
	background-color : #fff;
    }

sup {
    font-size:xx-small;
    vertical-align:top;
    }

strong  {
    font-weight : bold;
    }
    
table.bg_wrap   {
    position : relative;
    width:100%;
    height : 100%;
    margin : 0 auto;
    }

table.bg_wrap td.bg    {
    vertical-align : middle;
    }


table.bg_wrap div.wrap  {
    position : relative;
    width:100%;
    max-width : 960px;
    min-height : 590px;
    height:auto;
    margin : auto;
    font-family : ocrb, helvetica, arial, sans-serif;
    font-size : 13px;
    line-height : 18px;
    overflow:hidden;
    }


/*** Colors ***/

.color1 {
    background-color : #77ae99;
    }

.color2 {
    background-color : #9ea374;
    }

.color3 {
    background-color : #003768;
    }

.color4 {
    background-color : #524f26;
    }

.color5 {
    background-color : #5d87a1;
    }

.color6 {
    background-color : #776100;
    }

.color7 {
    background-color : #71b2b9;
    }


.color1_selected,
ul li.color1_selected a {
    color : #77ae99 !important;;
    background-color : #fff;
    }

.color2_selected,
ul li.color2_selected a {
    color : #9ea374 !important;;
    background-color : #fff;
    }

.color3_selected,
ul li.color3_selected a {
    color : #71b2b9 !important;;
    background-color : #fff;
    }

.color4_selected,
ul li.color4_selected a {
    color : #524f26 !important;
    background-color : #fff;
    }

.color5_selected,
ul li.color5_selected a {
    color : #5d87a1 !important;;
    background-color : #fff;
    }

.color6_selected,
ul li.color6_selected a {
    color : #776100 !important;;
    background-color : #fff;
    }



/***************************************************************** Start Site */

div.logo    {
    width : 100%;
    text-align : left;
    }

/*
div.logo a  {
    display : block;
    }
*/
div.logo a  {
    display : block;
    padding : 6px;
    padding-left:1%;
    color : #fff;
    font-family:'F2FOCRBczykW01-Regular';
    font-size:13px;
    line-height : 1em;
    text-decoration : none;
    text-transform: uppercase;
    letter-spacing:2px;
    }
    
div.logo a:hover {
	background-color:#000;
}

div.slider { position:relative; display:block; }
div.slider.simple { position:absolute; z-index:1; top:-15px; left:0; width:100%; }

div.slider > div.slide { position:absolute; z-index:2; display:block; visibility:hidden; top:0; left:0; width:100%; height:100%; }
div.slider > div.slide.s0 { position:relative; visibility:visible; top:auto; left:auto; width:auto; height:auto; }
div.slider > div.slide.next { z-index:1; }
div.slider > div.slide img { width:100%; height:auto; }
div.slider > div.slide > div.start_legende { position:absolute; top:auto; bottom:0; left:0; }

div.start_legende    {
    position : relative;
    top : -19px;
    background-color : transparent;
    background-image : url(pixie_legend.png);
    
    color : #000;
    padding : 4px;
    width : auto;
    display : inline;
    }

/*** Navigation ***/

div.navigation  {
    margin : 00;
    width : 100%;
    }

div.navigation a    {
    font-style : normal;
    }
    
div.navigation ul.navigation li.one {
    clear : both;
    }
    
div.navigation ul.navigation li.one a {
	display : block;
    }
    
div.navigation ul.navigation li.one > a  {
    display : block;
    padding : 6px;
    padding-left:1%;
    color : #fff;
    font-family:'F2FOCRBczykW01-Regular';
    font-size:13px;
    line-height : 1em;
    text-decoration : none;
    text-transform: uppercase;
    letter-spacing:2px;
    }
    
div.navigation ul.navigation li.one > a:hover {
	background-color:#000;
}
    
div.navigation ul.navigation li.one ul li a {
    padding : 4px;
    padding-bottom : 2px;
    line-height : 15px;
	margin-top : 1px;
	color : #fff;
	text-decoration : none;
	text-transform : uppercase;
    }

div.navigation a:hover  {
    background-color : #000;
    color : #fff !important;
    }

/* Subnavigation */

div.subnavigation  {
    clear : both;
    display : inline;
    padding : 3px 0 0 1%;
    float : left;
    width : 18%;
    margin-right:1%;
    font-size : 12px !important;
    line-height : 17px;
    position:relative;
    z-index:2;
    background-color:rgb(255,255,255);
    background-color:rgba(255,255,255,0.7);
    }

div.subnavigation a {
    display: block;
    background-color: transparent; /* #036; */
    padding: 3px 5px 3px 0;
    text-decoration: none;
    text-transform : none !important;
    font-weight: normal;
    }
    
div.subnavigation a:hover   {
    background-color: transparent; /* #369; */
    color: #000 !important;
    padding-top : 3px;
    padding-bottom : 3px;
    }


    
div.subnavigation li li a   {
    /* color : #003366 !important; */
    background-color: transparent; /* #69C; */
    padding-left: 20px !important;
    text-decoration: none;
    font-weight: normal;
    }

div.subnavigation li li li a   {
    display: block;
    background-color: transparent; /* #69C; */
    padding-left: 20px !important;
    text-decoration: none;
    font-weight: normal;
    }

/* Selected */
div.subnavigation li.selected  ul   {
    line-height : 17px;
    margin : -3px 0 3px 0;
    }
    
div.subnavigation li.shown ul  {
    margin : -3px 0 3px 0;
    }





/* Shown */

div.subnavigation li.shown,
div.subnavigation li li.shown,
div.subnavigation li li li.shown    {
    font-weight : bold;
    color : #000 !important;
    line-height : 17px;
    padding-top : 0;
    }

div.subnavigation li.shown    {
    padding-left : 0;
    margin-top : 3px;
    margin-bottom : 3px;
    }

div.subnavigation li li.shown   {
    padding-left : 20px !important;
    margin : 0;
    }

div.subnavigation li li li.shown   {
    padding-left : 40px !important;
    }

/***************************************************************** Content */


div.start,
div.content_wrapper   {
    margin-top : 15px;
    padding : 0;
    width : 100%;
    background-color : #fff;
    font-family : helvetica, arial, sans-serif;
    font-size : 12px;
    line-height : 17px;
    position:relative;
    }

div.start   {
    margin-top : -15px;
    }

div.start div.start_teaser  {
    position : absolute;
    z-index:3;
    top : 35%;
    right : 0;
    width : 246px;
    color : #fff;
    padding : 5px;
    }

div.start div.start_teaser a {
    color : #fff;
    }

div.start div.start_teaser a:hover  {
    background-color : transparent;
    }

div.navigation ul.navigation li.one div.content_wrapper div.content a,
div.navigation ul.navigation li.one div.content_wrapper div.service a   {
    display : inline;
    padding : 0;
    background-color : transparent;
    color : #003366;
    text-decoration : none;
    text-transform: none;
    }

div.content {
    float : left;
    width : 50%;
    padding : 5px 2% 0 1%;
    font-size : 12px;
    line-height : 17px;
    background-color:rgb(255,255,255); 
    background-color:rgba(255,255,255,0.7);
    color : #000;
    height : 450px;
    position:relative;
    z-index:2; 
    }


h1 {
    font-size : 12px;
    line-height : 17px;
    margin-bottom : 10px;
    font-weight : bold;
    text-transform : uppercase;
    }


h2  {
    font-weight : normal;
    }


div.content p,
div.content_text p {
    margin-bottom : 10px;
    }


div.content p.pagebreak {
    margin-top : 20px;
    }


div.content ul  {
    list-style : disc;
    margin-bottom : 10px;
    }

div.content ul li   {
    margin-left : 15px;
    }
    
div.content div.page_break   {
    margin-top : 50px;
    }
    
div.content a:hover {
    color : #000 !important;
    }
    
    
/*** Content */
    
div.overview {
    clear : both;
    width : 100%; 
    margin-bottom : 20px;
    }
    
div.overview h2 {
    padding-top : 10px;
    text-transform : uppercase;
    }
    
div.overview p.thumbs {
    float : left;
    margin-right : 10px;
    }
    
div.overview p.thumbs img   {
    width : 75px;
    }
    
div.overview p.thumbs img:hover  {
    opacity : 0.5;
    }
    
/***************************************************************** Service */

div.service {
    float : right;
    width : 27%;
    font-size : 12px;
    line-height : 17px;
    color : #000;
    padding-top : 10px;
    position:relative;
    z-index:2;
    background-color:rgb(255,255,255); 
    background-color:rgba(255,255,255,0.7);
    }


div.gallery,
div.context,
div.downloads   {
    /*width : 246px;*/
    margin-bottom : 20px;
    border-top : 1px dotted #000;
    padding : 5px 0 0 5px;
    }
    
div.context,
div.downloads {
	padding-right:5px;
}

div.gallery {
    padding : 0;
    border : none;
    }

div.service h2  {
    font-weight : normal;
    text-transform : uppercase;
    margin-bottom : 13px;
    }

div.service div.gallery p.next,
div.service div.gallery p.legend  {
    margin-top : 2px;
    text-align : right;
    }

div.service div.gallery img { display:block; width:100%; height:auto; }

div.service div.gallery p.legend  {
    text-align : left;
    }

div.service div.gallery p.next a   {
    display: inline;
    padding : 3px 5px 2px 5px;
    background-color : transparent;
    color : #003366;
    /*width : 256px;*/
    }

div.downloads   {
    margin-right : 0;
    }

div.downloads ul li   {
    margin-left : 16px;
    list-style : square !important;
    }

div.context p   {
    margin-bottom : 4px;
    }

div.service a:hover {
    color : #000 !important;
    }


@media screen and (max-width: 700px) {
	table.bg_wrap td.bg { vertical-align:top; }
	table.bg_wrap div.wrap { min-height:0; }
	div.subnavigation { width:25%; }
	div.content { width:auto; float:none; height:auto; margin-bottom:15px; }
	div.service { width:auto; float:none; padding: 5px 2% 0 1%; }
	
	div.subnavigation + div.content,
	div.subnavigation + div.content + div.service { width:70%; float:right; }
	
	div.context, div.downloads { padding-left:0; padding-right:0; }
}

@media screen and (max-width: 500px) {
	div.logo a,
	div.navigation ul.navigation li.one > a { padding-left:2%; }
	div.subnavigation { float:none; display:block; width:auto; padding-left:0; margin-left:2%; margin-right: 2%; padding-bottom:15px; margin-bottom:15px; border-bottom:1px dotted #000; }
	div.content,
	div.service { float:none !important; width:auto !important; padding-left:2%; }
}