/* GIBcam-DRILL-Website Layout: Screen */
/* Bereichseinteilung */

body {
background: url(http://www.gibcam.com/graphic/logo-background.jpg) #CFCFCF;
color: #000000;
margin: 0;
padding: 10px; /* Abstand vom Fensterand */
font-size: 100.01%; /* contra Font-Size-Bug in Safari, Operas, IE */
font-family: verdana, arial, sans-serif ;
}

.container  {
clear:both;
position : relative;
top : 0;
left : 0;
width: 1024px;
margin: auto;
}

.hproduct  {
clear:both;
position : relative;
top : 22px;
left : 0;
width: 1024px;
background: #FFFFFF url(http://www.gibcam.com/graphic/bg_drill.gif) no-repeat left bottom;
border: 1px solid #006394;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
box-shadow:8px 8px 8px rgba(0,99,148,0.25);
-webkit-box-shadow:8px 8px 8px rgba(0,99,148,0.25);
-moz-box-shadow:8px 8px 8px rgba(0,99,148,0.25);
} /* viewport für produktseiten */

.help  {
clear:both;
position : relative;
top : 22px;
left : 0;
width: 1024px;
height:2000px;
background: #FFFFFF url(bg.jpg) no-repeat left bottom;
border: 1px solid #006394;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
box-shadow:8px 8px 8px rgba(0,99,148,0.25);
-webkit-box-shadow:8px 8px 8px rgba(0,99,148,0.25);
-moz-box-shadow:8px 8px 8px rgba(0,99,148,0.25);
} /* viewport help */

.viewport  {
clear:both;
position : relative;
top : 22px;
left : 0;
width: 1024px;
background: #FFFFFF url(http://www.gibcam.com/graphic/bg_drill.gif) no-repeat left bottom;
border: 1px solid #006394;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
box-shadow:8px 8px 8px rgba(0,99,148,0.25);
-webkit-box-shadow:8px 8px 8px rgba(0,99,148,0.25);
-moz-box-shadow:8px 8px 8px rgba(0,99,148,0.25);
}


.statusbar {
position : absolute;
top : 1px;
right : 1px;
height : 20px;
width : 511px;
margin : 0;
padding : 0;
background-color : transparent;
font-size: 8pt;
text-align: right;
}
.statusbar h3        {display : none;}
.statusbar a         {color : #C00000; font-size: 8pt; margin-right : 5px; text-decoration : none;}
.statusbar a:link    {color : #4F4F4F; font-size: 8pt; margin-right : 5px; text-decoration : none;}
.statusbar a:visited {color : #8F8F8F; font-size: 8pt; margin-right : 5px; text-decoration : none;}
.statusbar a:hover   {color : #0000FF; font-size: 8pt; margin-right : 5px; text-decoration : underline;}
.statusbar a:active,
.statusbar a:focus   {color : #0000FF; font-size: 8pt; margin-right : 5px; text-decoration : none;}
.statusbar li        {display : inline;}
.statusbar ul        {
display : inline;
list-style-type : none;
padding : 0;/* beides notwendig Netscape u Opera */
margin : 0;
}

.header {
margin-top : 1px;
margin-left : 1px;
width : 1022px;
height : 150px;
margin-bottom: 31px;
background: url(bg_header-colordrill3.jpg) no-repeat right;
border-bottom: 1px #FFFFFF solid;
}

/* Hauptnavigation, immer sichtbar */
.menubar {
position : absolute;
top : 175px;
left : 2px;
height : 25px;
width : 1022px;
padding-top : 5px;
background-color : #006394;
/*
background :
-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255,255,255)),
    color-stop(0.05, rgb(0,99,148)),
    color-stop(0.95, rgb(0,99,148)),
    color-stop(1, rgb(252,252,252))
);
background : -moz-linear-gradient(
    center bottom,
    rgb(255,255,255) 0%,
    rgb(0,99,148) 5%,
    rgb(0,99,148) 95%,
    rgb(252,252,252) 100%
);
*/
text-align: right;
font-weight: bold;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-khtml-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
box-shadow:5px 5px 5px rgba(200,200,200,0.25);
-webkit-box-shadow:5px 5px 5px rgba(200,200,200,0.25);
-moz-box-shadow:5px 5px 5px rgba(200,200,200,0.25);
}
.menubar h3        {display : none;}
.menubar a:link,
.menubar a:visited,
.menubar a:active  {font-size: 12pt; color: #FFFFFF; text-decoration : none; margin-right : 10px;}
.menubar a:hover   {font-size: 12pt; color: #FF9C6B; text-decoration : none; margin-right : 10px;}
.menubar li        {display : inline;}
.menubar ul        {
display : inline;
list-style-type : none;
padding : 0;/* beides notwendig Netscape u Opera */
margin : 0;
}


/* Themennavigation */
.navigation {
background-color : white;
position : absolute;
top : 220px;
left : 10px;
padding-top : 5px;
padding-bottom : 5px;
padding-left : 0px;
padding-right : 0px;
border: solid 1px #7F7F7F;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
border-top: solid 1px #7F7F7F;
box-shadow:5px 5px 5px rgba(200,200,200,0.25);
-webkit-box-shadow:5px 5px 5px rgba(200,200,200,0.25);
-moz-box-shadow:5px 5px 5px rgba(200,200,200,0.25);
}

.navigation h3      {display : none;}
.navigation ul      {padding-left : 5px; background-color : transparent;}
.navigation li      {width: 163px;  height: 20px; color : rgb(0,99,148); display: block; border-bottom: 1px solid #7F7F7F; border-right: 0px solid #7F7F7F; margin-top: 20px; margin-bottom: 15px;
font-family: Tahoma, arial, sans-serif;
font-size: 11pt;
font-weight: bold;
-webkit-border-radius: 0px 0px 9px 0px;
-moz-border-radius: 0px 0px 9px 0px;
-khtml-border-radius: 0px 0px 9px 0px;
border-radius: 0px 0px 9px 0px;
box-shadow:4px 4px 4px rgba(200,200,200,0.25);
-webkit-box-shadow:4px 4px 4px rgba(200,200,200,0.25);
-moz-box-shadow:4px 4px 4px rgba(200,200,200,0.25);
background-color: transparent;
/*background: -moz-linear-gradient(right bottom, rgb(240,240,240) 0%, rgb(255,255,255) 57%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8598aa), color-stop(0.17, #fff),color-stop(0.83, #fff), color-stop(0.99, #ebebeb), color-stop(1, #fff));*/
}
.navigation a,
.navigation a:link,
.navigation a:visited,
.navigation a:active,
.navigation a:focus   {text-decoration : none;}
.navigation a:hover   {text-decoration : none;}

/* Navigation: Produktportfolio */
.pfolio {
        position : relative;
        top: 10px;
        left : 10px;
        width:170px;
        float:left;
    }
.pfolio h2 {display : none;
    }
.pfolio h3 {margin: 10px 0 0 0;
    padding: 2px 2px 2px 2px;
    border-top:1px solid #7f7f7f;
    border-left:1px solid #7f7f7f;
    border-right:1px solid #7f7f7f;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    -khtml-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    background: #7f7f7f;
    font-family: Tahoma, arial, sans-serif;
    font-size : 10pt;
    font-weight : bold;
    color: white;
    }
.pfolio h4 {margin: 0;
    padding: 2px 2px 2px 2px;
    border-left:1px solid #7f7f7f;
    border-right:1px solid #7f7f7f;
    background: white;
    font-family: Tahoma, arial, sans-serif;
    font-size : 18pt;
    font-weight : bold;
    color: #7f7f7f;
    }
.pfolio p  {margin: 0;
    padding: 2px 4px 4px 4px;
    border-left:1px solid #7f7f7f;
    border-right:1px solid #7f7f7f;
    border-bottom: 1px solid  #7F7F7F;
    background: white;
    font-size : 8pt;
    text-align: justify;
    color: #7f7f7f;
    }
.pfolio p.unten  {
    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    }
.folio img {border:0;
    }
.pfolio a   {text-decoration : none;
    }
.pfolio a:hover {color: #7F7F7F; text-decoration : underline;
    }
/* Ende: Navigation: Produktportfolio */

.description{
position : absolute;
top : 173px;
bottom: 1px;
left : 1px;
width : 490px;
padding : 10px;
background-color : transparent;
}

.content {
margin-left : 200px;
width: 803px;
padding : 10px;
background-color : transparent;
clear:right;
}
.content h1,
.content h2,
.content li,
.content p      {width: 49%;}
.content table  {width: 49%; float:right;}
.content img,
.content object {border: #CFCFCF 1px solid;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px; }
.content td     {vertical-align: top; }
.content .legend {padding: 0 0 15px 0; font-size: 8pt; font-style: italic; }


.description #id001, .description #id002 { position : absolute; bottom: 0;}

.explication{
position : absolute;
top : 173px;
left : 1px;
right : 1px;
padding : 10px;
background-color : transparent;
}


/*-------Illustrationen--- 3 Spalten-Layout -------*/
.illustration {
position : absolute;
top   : 183px;
right : 1px;
bottom: 1px;
width: 398px;
background-color : #AF00FF;
padding: 0px;
}

.illustration table {width: 100%; }
.illustration img   {border: #CFCFCF 1px solid; }
.illustration td    {vertical-align: top; }
.illustration legend     {padding: 0 0 15px 0; font-size: 8pt; font-style: italic; }

#illudirekt {top : 113px; padding-top: 20px;}
#illutxt {
font-size : 8pt;
font-style:italic;
padding-bottom: 20px;
}
/*-------Illustrationen--- 2 Spalten-Layout -------*/
.illu {
position : absolute;
right: 1px;
top : 195px;
background-color : transparent;
width : 500px;
margin : 0px;
padding: 0px;
}

.illu table {width: 100%; }
.illu img   {border: #CFCFCF 1px solid; }
.illu td    {vertical-align: top; }
.illu legend     {padding: 0 0 15px 0; font-size: 8pt; font-style: italic; }


.vcard {
background-color : transparent;
position : absolute;
top : 0px;
left : 0px;
margin : 60px;
margin-left: 35px;
}
.vcard p {display : none;}

.sprachwahl {
position : absolute;
top : 1px;
left : 1px;
height : 20px;
width : 511px;
margin : 0;
padding : 0;
background-color : transparent;
font-size: 8pt;
text-align: left;
}

.sprachwahl span {display : none;}

/* Layout Inhalt */



h1  {
font-family: Tahoma, arial, sans-serif;
margin: 0;
font-size : 20pt;
font-weight : bold;
}

.header h1{
position: relative;
text-shadow: #BFBFBF -4px 4px 10px;
top: +35px;
left: +200px;
font-family: Tahoma, arial, sans-serif;
color: #006394;
margin: 0;
font-size : 48pt;
font-weight : bold;
}


.content h2 {
font-family: Tahoma, arial, sans-serif;
margin: 0 0 0 0;
font-size : 20pt;
font-weight : bold;
color:#3F3F3F;
}

.content h3 {
font-family: Tahoma, arial, sans-serif;
margin: 0;
font-size : 14pt;
color:#3F3F3F;
}

.description h2 {font-size: 12pt;  color:#006394; }
.explication h2 {font-size: 12pt;  color:#006394; }

p  {
font-size : 10pt;
text-align: justify;
line-height : 1.3em;
}
.spalte12 { margin-left :   5px; margin-right : 240px; }
.spalte2  { margin-left : 185px; margin-right : 205px; }
.spalte23 { margin-left : 185px; margin-right :   5px; }

q  {
font-size : 10pt;
text-align : left;
font-weight : bold;
}

ul {
font-size : 10pt;
text-align : left;
list-style: square outside;
}

li {
margin: 0.2em;
vertical-align: middle;
}

td  {
font-size : 10pt;
}

hr {
color:#9F9F9F;
height:1px;
}

sup {
font-size: 0.5em;
vertical-align: text-top;
}
/* ----------Features----------- */
/* ----------Featurespalte----------- */

.features {
position : absolute;
top : 225px;
right: 10px;
width : 209px;
background-color : transparent;
}

#featnormal {top : 199px;}
#featdirekt {top : 225px;}
#feattief {top : 450px;}
#feathardware {top : 225px;}
/* ----------Featureboxen----------- */
.box_title {
margin-top : 16px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
background-color: #006394;
border: #006394 solid 1px;
-webkit-border-radius: 3px 3px 0px 0px;
-moz-border-radius: 3px 3px 0px 0px;
-khtml-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
color: white;
font-family: Tahoma, sans-serif;
font-size: 12px;
font-weight: bold;
padding:3px;
}
.box_content {
margin-left:0px;
margin-right:0px;
margin-bottom:1px;
margin-top:1px;
background-color: #FFFFFF;
border: #006394 solid 1px;
-webkit-border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-khtml-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
color: black;
font-size: 10pt;
font-weight: normal;
padding:3px;
}

#featin12  { margin-left : 5px; margin-right :240px; }
#featin12p  { margin-left : 5px; margin-right : 240px; }
#featin2  { margin-left : 185px; margin-right : 205px; }
#featin2p  { margin-left : 185px; margin-right : 205px; }
#featin23  { margin-left : 185px; margin-right :155px; }
#featin23p  { margin-left : 185px; margin-right : 155px; }

.content *.box_title,
.content *.box_content  {width: 48%;}

/* ---------------------------------- */

a  {
color : #C00000;
text-decoration : none;
}
a:link {
color : #4F4F4F;
text-decoration : none;
}
a:visited {
color : #8F8F8F;
text-decoration : none;
}
a:hover {
color : rgb(0,99,148);
text-decoration : underline;
}
a:active {
color : rgb(0,99,148);
text-decoration : none;
}
a:focus {
color : rgb(0,99,148);
text-decoration : none;
}