/* =============== GENERAL STYLES =============== */

/* --------------- global styles --------------- */

body:after
{
display:none;
content: url(images/steg.jpg) url(images/nebel.jpg) url(images/act.gif) url(images/act_d.gif) url(images/lamps.jpg) url(images/winter.jpg) url(images/city.jpg);
}

*
{
margin:0px;
padding:0px;
font-family:helvetica, "courier new", sans-serif;
font-size:1em;
font-weight:100;
text-decoration:none;
border:none;
}

html
{
height:100%;
}

body
{
height:100%;
}

/* --------------- div styles --------------- */

#wrapper
{
min-height:100%;
position:relative;
min-width:900px;
}

#up
{
height:40px;
}

#uptext
{
line-height:40px;
}

#screen-switcher
{
width:40%;
text-align:right;
float:right;
}

#main
{
height:300px;
background-position:75% 50%;
}

#title
{
float:left;
height:60px;
line-height:60px;
margin-top:200px;
text-align:center;
padding:0px 20px;
}

#textbox
{
float:right;
width:400px;
height:40px;
line-height:40px;
margin-top:220px;
text-align:center;
}

#cont
{
text-align:justify;
overflow:hidden;
}

#contfloat
{
float:left;
width:350px;
text-align:justify;
}

#bottomwrap
{
width:100%;
position:absolute;
bottom:0px;
}

#bottom
{
height:40px;
line-height:40px;
text-align:left;
}

#totop
{
float:right;
width:10%;
height:32px;
text-align:right;
padding-top:8px;
line-height:initial;
}

#clear
{
clear:both;
height:40px;
}

#spacer
{
height:580px;
margin-right:20px;
overflow:hidden;
}

#outer
{
position: relative;
}

#canvasContainer
{
position: absolute;
width:1178px;
height:560px;
top:0px;
left:0px;
}

div.break
{
height:35px;
}

#label
{
float:left;
text-align:right;
margin-right:10px;
}

/* --------------- canvas styles --------------- */

#mainCanvas
{
margin-left:20px;
}

/* --------------- form styles --------------- */

#contact
{
margin-left:20px;
margin-bottom:20px;
}

legend
{
margin-bottom:10px;
}

li.form
{
display:block;
border:1px solid #fff;
width:auto;
margin-left:-200px;
margin-top:10px;
}

input
{
border:1px solid #000;
width:268px;
background-color:#f8f8f8;
padding:1px;
}

label.form
{
display:inline-block;
width:200px;
margin-left:203px;
text-align:left;
vertical-align:top;
}

textarea
{
border:1px solid #000;
width:268px;
height:160px;
background-color:#f8f8f8;
padding:1px;
resize:none;
}

input.submit
{
width:272px;
margin-left:208px;
margin-top:10px;
}

/* --------------- image styles --------------- */

#contimgl
{
width:480px;
height:auto;
float:left;
margin-right:20px;
}

#contimgr
{
width:480px;
height:auto;
float:right;
margin-left:20px;
}

#imgfloat
{
width:310px;
margin:0px 20px -5px 20px;
height:auto;
}

#contimgajaxl
{
width:480px;
height:auto;
float:left;
margin-right:20px;
margin-bottom:20px;
}

#contimgajaxr
{
width:480px;
height:auto;
float:right;
margin-left:20px;
margin-bottom:20px;
}

/* --------------- font styles --------------- */

h1
{
font-size:1.3em;
}

h2
{
font-size:1.9em;
}

h3
{
font-size:1.2em;
margin:20px;
}

p.cont
{
margin:0px 20px 5px 20px;
}

p.foot
{
font-size:0.8em;
}

p.by
{
text-align:right;
margin:0px 20px 20px 20px;
clear:both;
font-style:italic;
}

/* --------------- list styles --------------- */

ul
{
list-style-type:none;
font-size:1.0em;
}

li
{
list-style-type:none;
display:inline;
display:inline-block;
width:25%;
}

li.act:before
{
height:0px;
width:0px;
visibility:hidden;
}

/* --------------- link styles --------------- */

a
{
color:inherit;
}

a.ajax
{
margin:0px 0px 5px 20px;
text-decoration:underline;
}

/* --------------- form styles --------------- */

select
{
width:130px;
font-size:0.8em;
}

option
{
height:16px;
line-height:16px;
}

/* =============== MEDIA QUERIES =============== */

@media screen and (min-width: 1650px)
{

#uptext
{
padding:0px 150px;
}

#title
{
margin-left:150px;
}

#textbox
{
margin-right:150px;
}

#cont
{
margin:35px 150px 35px 0px;
}

#contfloat
{
margin:35px 35px 35px 150px;
}

#bottom
{
padding:0px 150px;
}

}

@media screen and (max-width: 1650px)
{

#uptext
{
padding:0px 75px;
}

#title
{
margin-left:75px;
}

#textbox
{
margin-right:75px;
}

#cont
{
margin:35px 75px 35px 0px;
}

#contfloat
{
margin:35px 35px 35px 75px;
}

#bottom
{
padding:0px 75px;
}

}

@media screen and (max-width: 1366px)
{

#uptext
{
padding:0px 10px;
}

#title
{
margin-left:10px;
}

#textbox
{
margin-right:10px;
}

#cont
{
margin:35px 10px;
width:auto;
}

#contfloat
{
margin:35px 10px;
clear:both;
}

#bottom
{
padding:0px 10px;
}

}

@media screen and (max-device-width: 960px) and (orientation: landscape)
{

#uptext
{
width:96%;
margin:auto;
}

#title
{
margin-left:2%;
}

#textbox
{
margin-right:2%;
}

#cont
{
width:94%;
padding-top:15px;
margin:20px 2%;
}

#contfloat
{
width:94%;
padding-top:15px;
margin:20px 2%;
}

#bottom
{
width:96%;
padding:0% 2%;
position:absolute;
bottom:0px;
}

}

@media screen and (max-device-width: 960px) and (orientation: portrait)
{

#up
{
height:71px;
}

#uptext
{
width:96%;
margin:auto;
line-height:71px;
}

#screen-switcher
{
margin-top:2px;
margin-bottom:-2px;
}

#main
{
height:533px;
background-position:60% 50%;
background-size:cover;
}

#title
{
margin-left:2%;
zoom:1.7;
}

#textbox
{
margin-right:2%;
zoom:1.7;
}

#cont
{
width:94%;
padding-top:15px;
margin:20px 2%;
}

#contfloat
{
width:94%;
padding-top:15px;
margin:20px 2%;
}

#bottom
{
width:96%;
padding:0% 2%;
position:absolute;
bottom:0px;
zoom:1.7;
}

select
{
width:230px;
font-size:1.4em;
}

option
{
font-size:1.8em;
height:28px;
line-height:28px;
}

}

/* =============== COLOR INFORMATION =============== */

/* --------------- default style --------------- */

body
{
background-color:#eee;
}

#up
{
background-color:#161616;
border-bottom:1px solid #000;
}

#title
{
background-color:#fff;
}

#main
{
background-image:url(images/steg.jpg);
border-bottom:1px solid #333;
}

#cont
{
background-color:#fff;
}

#contfloat
{
background-color:#fff;
}

#bottom
{
background-color:#161616;
border-top:1px solid #000;
}

#canvas
{
background-color:#fff;
}

div.break
{
background-color:#eee;
}

h1
{
color:#fff;
}

h2
{
color:#000;
}

h3
{
color:#fff;
background-color:#161616;
padding:2px 0px 2px 7px;
}

p
{
color:#000;
}

p.foot
{
color:#fff;
}

p.by
{
border-top:1px solid #161616;
}

li.nav
{
background-color:#fff;
color:#000;
}

li.act
{
color:#000;
background-image:url(images/act.gif);
}

li.act:before
{
background-image:url(images/act.gif);
}

li.nav:hover
{
color:#000;
background-image:url(images/act.gif);
background-color:transparent;
}

a.ajax
{
color:#000;
}

select
{
background-color:#fff;
color:#000;
}

option
{
color:#000;
}


li.form
{
border:1px solid #fff;
}

input
{
border:1px solid #000;
background-color:#f8f8f8;
}

textarea
{
border:1px solid #000;
background-color:#f8f8f8;
}

/* --------------- bright style --------------- */

body.bright
{
background-color:#eee;
}

body.bright #up
{
background-color:#161616;
border-bottom:1px solid #000;
}

body.bright #title
{
background-color:#fff;
}

body.bright #main
{
background-image:url(images/steg.jpg);
border-bottom:1px solid #333;
}

body.bright #cont
{
background-color:#fff;
}

body.bright #contfloat
{
background-color:#fff;
}

body.bright #bottom
{
background-color:#161616;
border-top:1px solid #000;
}

body.bright #canvas
{
background-color:#fff;
}

body.bright div.break
{
background-color:#eee;
}

body.bright h1
{
color:#fff;
}

body.bright h2
{
color:#000;
}

body.bright h3
{
color:#fff;
background-color:#161616;
padding:2px 0px 2px 7px;
}

body.bright p
{
color:#000;
}

body.bright p.foot
{
color:#fff;
}

body.bright p.by
{
border-top:1px solid #161616;
}

body.bright li.nav
{
background-color:#fff;
color:#000;
}

body.bright li.act
{
color:#000;
background-image:url(images/act.gif);
}

body.bright li.act:before
{
background-image:url(images/act.gif);
}

body.bright li.nav:hover
{
color:#000;
background-image:url(images/act.gif);
background-color:transparent;
}

body.bright a.ajax
{
color:#000;
}

body.bright select
{
background-color:#fff;
color:#000;
}

body.bright option
{
color:#000;
}

body.bright li.form
{
border:1px solid #fff;
}

body.bright input
{
border:1px solid #000;
background-color:#f8f8f8;
}

body.bright textarea
{
border:1px solid #000;
background-color:#f8f8f8;
}

/* --------------- dark style --------------- */

body.dark
{
background-color:#222;
}

body.dark #up
{
background-color:#080808;
border-bottom:1px solid #555;
}

body.dark #main
{
background-image:url(images/nebel.jpg);
border-bottom:1px solid #555;
}

body.dark #title
{
background-color:#111;
}

body.dark #cont
{
background-color:#111;
}

body.dark #contfloat
{
background-color:#111;
}

body.dark #bottom
{
background-color:#080808;
border-top:1px solid #222;
}

body.dark #canvas
{
background-color:#111;
}

body.dark div.break
{
background-color:#222;
}

body.dark h1
{
color:#fff;
}

body.dark h2
{
color:#fff;
}

body.dark h3
{
color:#000;
background-color:#fff;
padding:2px 0px 2px 7px;
}

body.dark p
{
color:#fff;
}

body.dark p.foot
{
color:#fff;
}

body.dark p.by
{
border-top:1px solid #fff;
}

body.dark li.nav
{
background-color:#161616;
color:#fff;
}

body.dark li.act
{
color:#fff;
background-image:url(images/act_d.gif);
}

body.dark li.act:before
{
background-image:url(images/act_d.gif);
}

body.dark li.nav:hover
{
color:#fff;
background-image:url(images/act_d.gif);
background-color:transparent;
}

body.dark a.ajax
{
color:#fff;
}

body.dark select
{
background-color:#000;
color:#fff;
}

body.dark option
{
color:#fff;
}

body.dark li.form
{
border:1px solid #111;
}

body.dark input
{
border:1px solid #fff;
background-color:#161616;
color:#fff;  
}

body.dark textarea
{
border:1px solid #fff;
background-color:#161616;
color:#fff;
}

body.dark form
{
color:#fff;
}

body.dark input.submit
{
color:#fff;
background-color:#161616;
}

/*---------- Back button ----------*/

p.bac
{
    position: relative;
    font-family: 'Assistant', helvetica, "courier new", sans-serif;
    font-size: 18px;
}

p.bac:hover
{
    color: #fff;!important    
}

a.back
{
    color: #444;
    outline: 0;
    position: relative;
    font-weight:100;
}

body.bright a.back:hover
{
    text-decoration: none;
}

#button
{
    position:fixed;
    top:20px;
    right:20px;
    width:60px;
    height:60px;
    background-color:#fff;
    box-shadow: 0 0 4px #999;
    line-height:60px;
    text-align: center;
    border-radius: 50%;
    z-index: 10;
}

#button:hover
{
    background-color: #444;
}