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

    CSS3 STYLESHEET

    Site:           www.Win7Deploy.de
    Name:           stylesheet_small_wide.css
    Layout:         SMALL WIDE
    TAG:            "only_mobile", "only_mobile_ws"
    Media:          Screen (only)
    Orientation:    Landscape
    Viewport:       480px and more width
    
    Last-Modified:  2011-11-21
    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;
}
.only_mobile_ws
{
    display: block;
}

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


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

body 
{  
    width: 100%;
    min-width: 480px;        
    margin: 0 auto;    
    min-height: 101%;
    background: #346d98;    
    /*
    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;         
    text-align: center;    
    color: #000;
    background-color:  #8bc200;
    /* 
    padding: 2% 2% 1% 2%;  
    border: 2px solid pink;      
    */    
}

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

div#Inhalt 
{
    clear: both;
    padding: 2% 2% 2% 2%;       
    
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    line-height: 1.38em;
    letter-spacing: 0.01em;
    background-color: #FFF;
    border-left: solid 2px #8bc200;
    border-right: solid 2px #8bc200;
    
    border-top: solid 2px #8bc200;

    /*    
    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 
{
    clear: both;    
    padding: 1em 1% 2em 1%;    
    font-family: courier;
    font-size: 0.65em;
    text-shadow: 3px 3px 4px #777;
    color: #FFF;    
    background-color: #8bc200;
    /*
    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: 100%;    
    /*   
    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;
    /*	
    border: 2px solid black; 
    */
}

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

h2 
{
    padding: 1.38em 0 0 0;    
    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: 1em 0 0.5em 0;
    
    font-family: Helvetica, Arial, sans-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: Helvetica, Arial, sans-serif;
    font-size: 1em;
    letter-spacing: 0.05em;
    font-weight: bold;
    /*
    font-family: Helvetica, Arial, sans-serif;    
    font-style:italic;    
    */
}
    
hr
{
    margin:  -0.50em 0 0.8em 0;
    height: 1px;
    border: 0px;
    background-color: #000;
}

/* ****************************************/
/* --- OTHER                              */
/* ****************************************/

img#img_pdflogo
{  
    width: 50px;        
    /*
    */
}

div#Inhalt a
{
    color: #000;    
    font-style: normal;
    font-variant: normal;
    text-decoration: none;    
    outline: none;
    border-bottom: 2px dotted grey; 
    cursor: crosshair;
}

div#Inhalt a:hover
{
    color: #000;    
    border-top: 2px solid #8bc200;
    border-bottom: 2px solid #8bc200;
    
}
  
/* ****************************************/
/* --- 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)
}