/*Screen*/
@media screen {
    body {font: normal 10pt sans-serif; color: #ccc; background-color:#111;}
    ul {padding: 15px;}
    table {border-collapse: collapse; width: 100%;}
    code {background-color: #444} /* inline code */
    td {text-align: left; vertical-align: top;}
    a {color:#eee;}

    .button {
        color: #ccc;
        display: inline-block;
        padding: 1px 15px;
        text-decoration: none;
        font: bold 1em sans-serif;
        background: -webkit-linear-gradient(#222, #666);
        background: linear-gradient(#222, #666);
        background-color: #444;
        border-radius:5px;
        border: 1px solid #555;
    }
    .icon {width: 60px;}
    .iconsmall {width: 30px;}

    img.bigpic {width:100%;}
    
    /*#divHelp .helpSamples table {border: 1px solid #eee;}*/
    #divHelp .helpSamples td {padding: 0 1.2em;  border:1px solid #444;}
    #divHelp .helpSamples tr:nth-child(odd) {background-color:#222; font: normal 1em monospace;}
    #divHelp .helpSamples tr:nth-child(odd) td {padding-top: 1.2em; padding-bottom: 1em;}
    #divHelp .helpSamples tr:nth-child(even) {background-color:#333; font: normal 1em sans-serif;}
    #divHelp .helpSamples tr:nth-child(1) td {font: normal 1em sans-serif;}
    
    #divHelp .helpServer tr:nth-child(1) td {background-color: #444;}
    #divHelp .helpServer td {padding-right: 1.2em; border: 1px solid #444;}
    #divHelp .helpServer td:nth-child(1) {font-weight: bold; font-family: monospace; background-color: #444;}
    
    #divDonate {display: none;}
    #divTop .logo {height: 50px;}
    #divLeft .logo, .icon {
        width: 45px;
        display: inline-block;
        border-radius:5px;
    }
    #divRight {
		    text-align: right;
		}
		
		#divLeft {border-left: 1px solid #555; background-color: transparent;}
		#divRight {border-right: 1px solid #555; background-color: transparent;}

    .content {
        background-color: #444;
        overflow: auto;
        position: relative;
        padding: 10px;
    }
    
    /* Pages without inner DIVs */
    #divAbout, #divGallery, #divImpressum {
      padding:0px 5px;
    }
    
    #divCenter>.content {
        padding: 0px 0px;
    }
    
    #divCenter .title {
        position: relative;
        color: #ccc;
        font-size: 1.1em;
        padding: 1.1em;
        background: -webkit-linear-gradient(black, #444);
        background: linear-gradient(black, #444);
    }
    
    #divCenter .tabs .tab {
        padding: 5px 20px;
        margin-right: -1px;
        color: #ccc;
        background: -webkit-linear-gradient(#444 10%, #111 90%);
        background: linear-gradient(#444 10%, #111 90%);
        background-color: #444;
        border-radius:5px 5px 0px 0px;
        border: 1px #444 solid;
        border-bottom-style: none;
    }
    
    #divCenter .tabs .tab.selected {
        color: #ccc;
        background: -webkit-linear-gradient(#777, #333);
        background: linear-gradient(#777, #333);
    }
    
    #divCenter .acc {font-size: 1.2em;}
    #divCenter .acc.selected {
        font-weight: bold;
        color: white;
        padding: 5px 0px;
        font-size: 1.4em;
        text-align: center;
    }
    
    #divHelp a.button {
        font-weight: normal;
        padding: 0.5em; width: 95%; max-width: 540px;
        margin: 0.5em 0.5em 0 0;
    }

    #divDownload a.button {
        font-weight: normal;
        padding: 0.5em; min-width: 240px;
        margin: 0.5em 0.5em 0 0;
    }

    img.thumb {
      border-radius: 15px;
      border:2px solid #111;
      width:30%; min-width:240px; max-width:320px;
    }
    img.thumb:hover {border:2px solid #eee;}
}
/*Mobile Portrait and Landscape*/
@media only screen and (max-width: 800px) {
    .content {
        overflow-y: hidden; /* hide v-scrollbar while accordion resizes */
        overflow-x: auto !important;  /* !important for WebKit */
    }

    .divDownload, .divHelp {
        background: -webkit-linear-gradient(#222, #888);
        background: linear-gradient(#222, #888);
    }

		#divLeft, #divRight {border: none;}

    #divCenter .tabacco .title {
        background: -webkit-linear-gradient(#555, #444);
        background: linear-gradient(#555, #444);
        padding: 10px;
        margin-bottom: -3px !important;
        color: #ddd;
        border-radius: 3px 3px 0px 0px;
    }

    #divHelp .helpServer tr:nth-child(1) {display: none;}
    #divHelp .helpServer td {display: inline-block;}
    #divHelp .helpServer td:nth-child(1) {width: 20%;}
    #divHelp .helpServer td:nth-child(2) {width: 60%;}
    #divHelp .helpServer td:nth-child(3) {display: block; border: none;}
    #divHelp .helpServer td:nth-child(4) {
        display: block; border: none; padding-bottom: 1em;
    }
}

/*Mobile Portrait*/
@media only screen and (max-width: 500px) {
    #divCenter .tabs {display: none;}
    #divCenter .content{border-radius:0px 0px 5px 5px;}
}

/*Mobile Landscape*/
@media only screen and (min-width: 501px) and (max-width: 800px) {
    #divCenter .tabs {display: none;}
    #divRight {overflow-y: auto;}
    #divDownload a.button {width:30%;}
}

/*Desktop and Tablet and old Browsers (no "only" screen)*/
@media screen and (min-width: 801px) {
/*    html {background: white url(img/bg_map1280x800.jpg) repeat;} */
    body {background: #222;}
    /*manual shadow space for box-sizing:border-box*/
    #divCenter {padding: 0px 10px 10px 0px;}
    
    #divDonate {display: block; position: absolute; right: 0px; top: 10px;}
    #divCenter .acc, #divLeft .logo {display: none;}
    #divRight {padding-top: 90px;}
    #divTop {padding-left: 50px;}
    #divHelp, #divDownload {height: 100%;}
    
    #divCenter .content {
        height: 90%;
        /*border-left: 1px #666 solid;*/
        background-color: #333;
    }

    #divCenter>.content {
        padding:3px 10px;
    }

    a.button:hover, .button:hover,
    #divCenter .hover {
        color: #ccc !important;
        background: -webkit-linear-gradient(#aaa 20%, #444 70%) !important;
        background: linear-gradient(#aaa 20%, #444 70%) !important;
        border-radius: 5px;
    }

    .content .tabs {
        border-radius:10px 10px 0px 0px;
    }

    a>img:active, a.button:active, #divCenter .title:active:not(.selected) {
        box-shadow:inset 3px 2px 4px #876;
    }
    
}
/*FullScreen*/
@media only screen and (min-width: 1024px) {
    body {font-size: 11pt;}
}
@media only screen and (min-width: 1280px) {
    body {font-size: 12pt; max-width: 1440px;}
}