/* CSS2 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 reset */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}
body{line-height: 1;}
ol, ul{list-style: none;}
blockquote, q{quotes: none;}
blockquote:before, blockquote:after, q:before, q:after{content: ''; content: none;}
table{border-collapse: collapse; border-spacing: 0;}
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */

/*general*/
a{color:#000;}
a:hover{text-decoration:none;}
a:visited{color:#000;}
a img{border:0; vertical-align:text-bottom;}
p:first-letter{color:#f00; font-size:x-large;}
ul{list-style:none;}
.red{color:#f00; background-color:transparent;}
.blue{color:#00f; background-color:transparent;}

/*100% background image
body{background-image: url(white-snow.jpg); background-repeat:no-repeat; background-position:center center; background-attachment:fixed; background-size: 100% 100%, auto;}
*/
body{background-image: url(body.gif); background-repeat:repeat; background-position:0 0; background-attachment:fixed;}

/*width of the content*/
body{width:1020px; text-align:center; margin:0 auto;}

/*center text and blocks*/
.center{text-align:center; margin:0 auto; /* box-pack:center; */}

/*font for everything*/
#header, #navigation, #content, #footer{font:normal 12px "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;}
h2{font-size: 24px;}

/*color*/
#navigation, #footer{background:#dceefd;}
#content , .slide li:hover div.section, .slide li a:hover div.section{background:#dceefd;}

/*shadow, round corners, border*/
#navigation, #content, #footer, .slide li:hover div.section, .slide li a:hover div.section{box-shadow:0px 0px 10px #888; border-radius:5px 30px; border:1px solid #666;}

/*header*/
#navigation{float:left; position:fixed; padding:5px 0;}
.backing{padding:0; margin:0; list-style:none; position:relative; z-index:50; width:130px;}
.backing table{border-collapse:collapse; padding:0; margin:-1px 0 -5px -1px;}
.pageHolder .page{width:0; background:transparent; position:absolute; z-index:-1; top:-80px;}
.slide{padding-left:5px; margin:0; list-style:none; width:130px; position:relative; z-index:100;}
.slide li.nosub{height:45px; position:relative;}
.slide li div.section{position:absolute; margin-top:-80px; left:140px; width:0; overflow:hidden;}
.slide li a{display:block; width:110px; height:45px; line-height:42px; padding:0 20px 0 0; text-align:right; text-decoration:none;}
.slide li a b{display:block; width:130px; height:45px; position:absolute; left:0; background:transparent; z-index:-1;}
.slide li div.section dl{width:0; float:left; padding:10px 0 0 10px; margin:0 20px 0 0; overflow:hidden;}
.slide dt{padding:0 0 0 10px; margin:0; white-space:nowrap; height:20px; line-height:20px; color:#00f; font-weight:bold;}
.slide dd{padding:0; margin:0; text-align:left;}
.slide dd a{width:80px; height:20px; line-height:20px; text-align:left; background:transparent; padding:0 0 0 10px; white-space:nowrap;} 
.slide dd a:hover{color:#f00;}
.backing li:hover div.page{width:150px;}
.backing li a.lv1-a:hover{direction:ltr;}
.backing li a.lv1-a:hover div.page{width:150px;}
.slide li:hover a{width:130px;}
.slide li:hover a b{width:150px;}
.slide li a:hover{width:130px;}
.slide li a:hover b{width:150px;}
.backing li:hover .slide li:hover{background:transparent;}
.backing li:hover .slide li:hover a{width:130px;}
.backing li a.lv1-a:hover .slide li a:hover{width:130px;}
.slide li:hover div.section{width:200px; color:#00f;}
.slide li a:hover div.section{width:200px; color:#00f;}
.slide li:hover div dl{width:180px; margin:0 20px 10px 0;}
.backing li a.lv1-a:hover .slide li a:hover div dl{width:180px;  margin:0 20px 10px 0;}
.backing li a.lv1-a:hover .slide li a:hover div dl dt{color:#00f; text-align:left; font-weight:bold;}
/*header lte ie7*/
* html .slide dd a:hover{color:#f00;}
.slide li a b{margin-top:-10px;}
* html .slide li.nosub a{position:absolute; left:0; top:0;}
* html .slide li{float:left;}
* html .slide li a b{background:none;}

/*menu*/
.home{background:transparent url(menu/sprite_header.png) no-repeat; background-position:-10px -10px; margin-top:5px;}
.infos{background:transparent url(menu/sprite_header.png) no-repeat; background-position:-10px -62px; margin-top:5px;}
.games{background:transparent url(menu/sprite_header.png) no-repeat; background-position:-10px -114px; margin-top:5px;}
.products{background:transparent url(menu/sprite_header.png) no-repeat; background-position:-10px -166px; margin-top:5px;}
.pix{background:transparent url(menu/sprite_header.png) no-repeat; background-position:-10px -218px; margin-top:5px;}
.tips{background:transparent url(menu/sprite_header.png) no-repeat; background-position:-10px -270px; margin-top:5px;}
.impress{background:transparent url(menu/sprite_header.png) no-repeat; background-position:-10px -322px; margin-top:5px;}

/*content*/
#content{width:810px; padding:10px; margin:0px 20px 5px 165px; text-align:center; overflow:hidden;}
#content .submenu table{text-align:center; background:transparent; height:30px; margin:0 auto;}
#content .submenu td{margin:0 auto; padding:0 5px;}
#content .submenu a{display:block; text-decoration:none; border-bottom:none; height:30px; color:#000; padding-left:35px; line-height:29px;}
#content .submenu a:hover{color:#f00;}
#content .me{background:transparent url(menu/me.gif) no-repeat 5px;}
#content .you{background:transparent url(menu/you.gif) no-repeat 5px;}
#content .gbook{background:transparent url(menu/gbook.gif) no-repeat 5px;}
#content .links{background:transparent url(menu/links.gif) no-repeat 5px;}
#content .rss{background:transparent url(menu/rss.gif) no-repeat 5px;}
#content .history{background:transparent url(menu/history.gif) no-repeat 5px;}
#content .contact{background:transparent url(menu/contact.gif) no-repeat 5px;}
#content .pix2{background:transparent url(menu/pix2.gif) no-repeat 5px;}
#content .pix3{background:transparent url(menu/pix3.gif) no-repeat 5px;}
#content .pix4{background:transparent url(menu/pix4.gif) no-repeat 5px;}
#content .pix5{background:transparent url(menu/pix5.gif) no-repeat 5px;}
#content .pix6{background:transparent url(menu/pix6.gif) no-repeat 5px;}
#content .game1{background:transparent url(menu/game1.gif) no-repeat 5px;}
#content .game2{background:transparent url(menu/game2.gif) no-repeat 5px;}
#content .software1{background:transparent url(menu/software1.gif) no-repeat 5px;}
#content .software2{background:transparent url(menu/software2.gif) no-repeat 5px;}
#content .software3{background:transparent url(menu/software3.gif) no-repeat 5px;}
#content .software4{background:transparent url(menu/software4.gif) no-repeat 5px;}
#content .software5{background:transparent url(menu/software5.gif) no-repeat 5px;}
#content .software6{background:transparent url(menu/software6.gif) no-repeat 5px;}
#content .software7{background:transparent url(menu/software7.gif) no-repeat 5px;}
#content .tex{background:transparent url(menu/tex.gif) no-repeat 5px;}
#content .tips1{background:transparent url(menu/tips1.gif) no-repeat 5px;}
#content .tips2{background:transparent url(menu/tips2.gif) no-repeat 5px;}
#content .tips3{background:transparent url(menu/tips3.gif) no-repeat 5px;}
#content .tips4{background:transparent url(menu/tips4.gif) no-repeat 5px;}

/*footer*/
#footer{text-align:center; overflow:hidden; padding:20px; max-width:810px; display:inline-block; margin:20px 0;}
.google, #footer{margin-left:165px;}

/*games*/
.bubbles{width:600px; height:480px;}
.battles{width:450px; height:225px;}

/*referenz as button*/
a.ref,a.ref:link,a.ref:visited{background-color:#fff;}
a.ref:hover,a.ref:active{background-color:#ffb;}
a.ref,a.ref:hover,a.ref:active,a.ref:link,a.ref:visited{border:1px solid #000; color:#000; text-decoration:none;}
a.ref,a.ref:hover,a.ref:active{padding:3px 6px;}

/*Button*/
.button{color:#000; background-color:#b0c4de !important; cursor:pointer; border-radius:5px; text-decoration:none;}
.button:hover{color:#000; background-color:transparent; box-shadow:0px 0px 5px #333; cursor:pointer; border-radius:5px;}
a.button{color:#000; background-color:#b0c4de !important; cursor:pointer; border-radius:5px; text-decoration:none; border:1px solid #ccc; margin:8px}
a.button:hover{color:#000; background-color:transparent; box-shadow:0px 0px 5px #333; margin:8px}

/*Tabellenzeilen abwechselnde farbe*/
th.colored, td.colored{padding:4px;}
th.colored{color:#00f; background-color:transparent;}
tr:nth-of-type(odd) td.colored{color:#00f; background-color:transparent;}

/*Contact*/
#contact{display: table;}
.user-details{display: table-cell; width: 300px; vertical-align:top;}
.user-message{display: table-cell; width: 350px; vertical-align:top;}
fieldset{border:none;}
textarea{width:320px; height:175px;}

/*Input & Textareas*/
input, textarea{background-color:#fff; border:1px solid #ccc; margin:8px; border-radius:5px; /*transition:all 0.5s ease-in-out;*/}
input:focus, textarea:focus, .button{box-shadow:0px 0px 10px #ccc; /*transform:scale(1.05);*/}
input:not(:focus), textarea:not(:focus){opacity:0.75;}
*:focus{outline:none;}

/*guestbook*/
.gbook_right{text-align:right; padding-right:20px;}
.gbook_text{color:#000; margin:10px 20px;}
.gbook_text p{clear:both;}
p.message b{color:#00f; font-weight:normal;}
p.message{position:relative; padding:5px 10px; margin-bottom:10px; border:2px solid rgb(74,77,82); border-radius:10px; max-width:70%;}
p.left{background:#ffd;}
p.right{background:#cfc; float:right;}
p.message:before{content:""; display:block; position:absolute; border-style:solid; border-color:transparent rgb(74,77,82);}
p.message:after{content:""; display:block; position:absolute; border-style:solid;}
p.message.right:before{right:-14px; bottom:7px; border-width:8px 0 8px 14px;}
p.message.right:after{right:-10px; bottom:8px; border-width:7px 0 7px 14px; border-color:transparent #cfc;}
p.message.left:before{left:-16px; bottom:7px; border-width:8px 16px 8px 0;}
p.message.left:after{left:-10px; bottom:8px; border-width:7px 14px 7px 0; border-color:transparent #ffd;}

/*gallery*/
#gallery_main{width:800px;}
#gallery a{display:block; float:left; width:60px; height:60px; outline:0; padding:4.5px; border:1px solid #999; margin:4.5px; cursor:pointer; background:#fff;}
#oneBox{display:table; position:absolute; top:0; left:0; width:100%; height:100%; z-index:500;}
#oneBox .back{display:block; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; opacity:0.75;}
#oneBox .holder{position:relative; display:table-cell; text-align:center; vertical-align:middle;}
#oneBox .holder *{vertical-align: middle;}
/*\*//*/
#oneBox .holder {display: block;}
#oneBox .holder span {display: inline-block; height: 100%; width: 1px;}
/**/
#oneBox .frame{position:relative; display:inline-block; margin:0 auto; text-align:center;}
#oneBox .frame div{display:inline-block; margin:0 auto; background:#fff; border:1px solid #666; padding:20px; box-shadow: 0px 0px 10px #888; margin-bottom:20px; border-radius:10px;}
#oneBox .frame p {clear:left; display:block; text-align:center; padding:10px 0;}
.clear {clear:both;}

/*special*/
.white{display:inline-block; margin:0 auto; background:#fff; border:1px solid #666; padding:5px; border-radius:10px;}