/*********************************************************

    CSS3 STYLESHEET

    Site:           www.torstenempting.de
    Name:           stylesheet_small.css
    Layout:         SMALL
    TAG:            "only_mobile"
    Media:          Screen (only)
    Orientation:    Landscape
    Viewport:       480px and more width
    
    Copyright by Dipl.-Inform Torsten Empting

*********************************************************/

*
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

div#NAVIGATION_normal
{
    display: none;
}
div#NAVIGATION_mobile
{
    display: block;
}
.only_normal
{
    display: none;
}
.only_mobile
{
    display: block;
}
.only_mobile_portrait
{
    display: none;
}

/*
div
{
    border: 2px solid black;
}
*/


/* ****************************************/
/* --- MAIN PARTS                         */
/* ****************************************/

body 
{  
    width: 100%;
    min-width: 480px;        
    margin: 0 auto;    
    min-height: 101%;
    background: #000;    
    /*
    max-width: 480px; ! ACHTUNG: skaliert auf SG2 dann kleiner..
    border: 1px solid blue;
    */
}

div#Seite 
{
    text-align: left;    
    margin: 0 auto;        
    width: 100%;
    background: #FFF;    
    /*
    background-image: url(circuit_bg.png);    
    min-width: 480px;
    border: 4px solid green; 
    */
}

div#HEADER
{
    clear: both;
    padding: 2% 2% 1% 2%;       
    text-align: left;    
    color: #000;
    background-image: url(58original.gif);
    /* 
    border: 2px solid pink;      
    */    
}

div#HCBREAK
    /* Header / Content Break */
{    
}

div#Inhalt 
{
    clear: both;
    padding: 2% 2% 2% 2%;       
    white-space: normal;    
    font-family: "Georgia", "Palatino", "Palatino Linotype", "FreeSerif", serif;   
    font-size: 0.8em;
    line-height: 1.38em;
    letter-spacing: 0.01em;
    background-color: #FFF;
    /*    
    font-family: Helvetica, Arial, sans-serif;
    font-family: monospace;    
    box-shadow: 0px 5px 50px white;
    border: 2px solid blue;
    border-left: solid 2px #006990;
    border-right: solid 2px #006990;
    */    
}

div#Footer 
{
    margin: 0 0 0 0;
    padding: 1em 1% 2em 1%;
    clear: both;
    font-family: courier;
    font-size: 0.65em;
    color: #FFF;    
    background-color: grey;
    background-image: url(58original.gif);
    /*
    border: 2px solid blue;
    */
}

/* ****************************************/
/* --- GLOBAL CLASSES                     */
/* ****************************************/
.ul_inhalt
{
    padding-left: 2.5em;
    list-style-position: outside;
    list-style-type: square;
    line-height: 1.75em;    
    /*        
    border: 2px solid blue;
    list-style-position: inside;
    */
}

.clearfloat
{
    clear: both;
}


/* ****************************************/
/* --- HEADER                             */
/* ****************************************/

div#HEADERLEFT
{    
    padding: 3% 0 4% 0;
    width: 60%;    
    /*   
    border: 4px solid green; 
    */    
}

div#HEADERRIGHT
{
    float: right;
    width: 25%;    
    /*    
    border: 4px solid pink; 
    */    
}

div#HEADERFOOTER
{
    clear: both;    
    width: 100%;    
    /*   
    border: 4px solid orange; 
    */    
    
}

img#headerlogo
{    
    width: 100%;
    clear: both;
    /*	
    float: right;
    width: 35%;    
    width: 204px;    
    height: 234px;
    width: 102px;    
    height: 117px;   
    border: 2px solid black; 
    */
}

/* ****************************************/
/* --- NAVIGATION MOBILE DEVICES          */  
/* ****************************************/
div#NAVIGATION_mobile
{
    text-align: center;
    clear: both;
    /*
    background-color: silver;
    border: 1px solid black;
    */
}

ul#Nav_mobile
{
    font-size: 1em;
    font-family: Helvetica, Arial, sans-serif;    
    /*
    text-align: left;        
    width: 100%;
    */
}

ul#Nav_mobile li 
{
    /* Bereiche (Ober) Navigation, sichtbar */
    /* ohne width - nach CSS 2.1 erlaubt */
    list-style: none;
    position: relative;
    /*
    float: left;  
    border: 2px solid black;
    margin: 0.5em 0 0 0;
    font-size: 100%;
    */
}
  
ul#Nav_mobile li ul 
{
    /* Unternavigation, bei laden unsichtbar */
    margin: 0 0 0 0; 
    padding: 0 auto;
    position: absolute; 
    /* Startposition unterliste */
    top: 1.6em; 
    left: 20%;
    right: 20%;    
    display: none;      
    font-size: 1em;
}

ul#Nav_mobile li:hover ul 
{
    /* Unternavigation, einblenden bei hover */
    display: block;  
}
  
ul#Nav_mobile li ul li 
{ 
    /* Listen (unter) Elemente */
    float: none;
    display: block;    
    margin-bottom: 0.2em;        
    margin-top: 10px;   
    /*    
    */    
}

ul#Nav_mobile a, ul#Nav_mobile span 
{
    /* hier gesamt formattierung.. */
    display: block;    
    /* Rahmen für *alle* Elemente bis auf Ausnahmen unten */
    border: 4px solid black;
    border-top-color: white;
    border-left-color: white;         
    /* Wichtig: Ansonsten aktivieren Bereiche "ohne Box".. */
    margin: 0 0 0 0;
    /* Grösse Boxen... */
    padding:  0.3em 1em;     
    text-align: center;
    text-decoration: none; 
    font-weight: bold;    
    color: #000; 
    background-color: #ccc;
    /* 
    */
}
  
/* ul#Nav span, li a#aktuell,  ul#Nav span:hover */
ul#Nav_mobile a:hover
{
    /* Elemente:hover, Navigation Head:hover seperat! */
    border-color: white;
    border-top-color: black;
    border-left-color: black; 
    color: white; 
    background-color: gray;
}

li span#aktiv
{  
    /* Navigation Head */       
    border: 2px solid white;
    color: white; 
    background-color: gray;
}

ul#Nav_mobile li ul span, ul#Nav_mobile li span#aktiv:hover
{  
    /* Aktives Element und Navigation Head:hover */
    color: #FFF;
    background-color: #006990;    
    border-color: white;
    border-top-color: black;
    border-left-color: black; 
} 


/* ****************************************/
/* --- H1,H2,H3,...                       */  
/* ****************************************/
h1 
{
    padding: .7em 0 0 0;
    text-align: left;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 0.1em;  
    font-size: 1.1em;         
    text-shadow: 3px 3px 4px #777;
    color: #FFF;
    /*
    width: 60%;
    border: 2px ridge red;
    */
}

h2 
{
    padding: 1.38em 0 0 0;
    text-align: left;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    letter-spacing: 0.125em;
    font-style:italic;        
    text-shadow: 3px 3px 4px #777;
    color: #FFF;
    /*
    width: 60%;
    border: 2px ridge orange;    
    http://www.mediaevent.de/css/text-shadow.html 
    */
}

h3 
{
    padding: 0.5em 0 1em 0;
    
    font-family: "Georgia", "Palatino", "Palatino Linotype", "FreeSerif", serif;
    font-size: 1.1em;
    letter-spacing: 0.02em;
    font-weight: bold;
    
    /*
    font-family: Helvetica, Arial, sans-serif;
    font-style:italic;       
    border: 2px ridge orange;    
    text-align: center;
    */    
}
    
h4
{
    margin: 0 0 0 0;
    padding: 1.5em 0 1em 0;    
    font-family: "Georgia", "Palatino", "Palatino Linotype", "FreeSerif", serif;
    font-size: 1em;
    letter-spacing: 0.05em;
    font-weight: bold;
    /*
    font-family: Helvetica, Arial, sans-serif;    
    font-style:italic;    
    */
}
    
    
/* does not work? hr#Inhalt */
hr
{
    margin:  -1.15em 0 1.15em 0;
    height: 1px;
    border: 0px;
    background-color: #000;
}
/* ****************************************/
/* --- KONTAKT                            */
/* ****************************************/

div#kontakt_links
{
    float: left;
    width: 45%;
    /*
    border: 2px solid orange;
    */
}

div#kontakt_rechts
{
    float: right;
    width: 50%;    
    /*
    padding-right: 50px;
    border: 2px solid green;
    */
}

div#vcard
{
    float: left;    
    width: 45%;
    /*
    border: 2px solid green;    
    margin: 0 auto;
    */
}

img#vcardimg
{  
    width: 100%;
    border: 1px dotted green;    
    /*
    margin-left: 20px;    
    width:100%;
    */
}

div#kontakt_formular
{
    width: 400px;
    padding-left: 1em;    
    /*
    border-left: 2px solid black;
    */
}

input, textarea
{ 
    padding: 2% 0 2% 0;
    font-size: 14px; 
    font-family: "Georgia", "Palatino", "Palatino Linotype", "FreeSerif", serif;   
    letter-spacing: 0.0em;
    line-height: 1.5em;
    font-weight: bolder; 
    background-color: #ddd;    
    /*
    font-family:Verdana,sans-serif;    
    */    
}

form 
{               
    margin-top: 30px;
    padding: 10px 20px 0 20px;
    width: 330px;    
    background-color: #ccc;
    font-weight: bold;
    letter-spacing: 0;    
    /*
    border:6px solid black;
    */
}

.formbutton 
{ 
    margin: 30px 50px 15px 50px;
    width:230px; 
    /*
    background-color: #999; 
    color:#FFF;     
    border:6px solid #006990; 
    */
}

  
/* ****************************************/
/* --- FOOTER                             */
/* ****************************************/ 
div#Footer a
{
    color: #FFF;    
    text-decoration: none;
    outline: none;
    cursor: crosshair;
    /*
    color: #0088bb;
    */
}

div#Footer a:hover
{
    color: #006990;
    background-color: #FFF;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, .15)
}