/* 
    Document   : codestyle
    Created on : 27.11.2012, 14:13:29
    Author     : Thierry
    Description:
        Purpose of the stylesheet follows.
*/

/*root { 
    display: block;
}*/
@CHARSET "UTF-8";
@import 'https://fonts.googleapis.com/css?family=Josefin+Slab:100italic,regular';

#wrapper{
    width: 100%;
    min-height: 350px;
    /*height: 800px;
    max-height: 5000px;*/
    
    /*background-color: #60ABE5;*/
    background-color: #fff;
}
#page{
    width: 900px ;
    /*height: 800px;*/
    margin-left: auto ;
    margin-right: auto ;
    padding-right: 10px;
    background-color: #fff;
    padding-left: 8px;
}
#footer{
    height: 50px;
    clear: both;
    text-align: center;
    padding-top: 20px;
}
#rightpanel{
    float: right;
    width: 20%;
}
#leftpanel{
    /*float: left;*/
    width: 100%;
    /*background-color: #eee;*/
}

#divleistung{
    text-align: center;
}
.kategorieseminare{
    float: left;
    width: 185px;
    border-width: 2px;
    padding-left: 15px;
    background-color: #eee;
}

.kategorieseminare a{
    text-decoration: none;
    /*color: #83C948;*/
    color: #3E91BF;
}
.einekategorie{
    float: right;
    width: 70%;/*700px;*/
    height: 100%;
}

#head{
    width: 100%;
    height: 180px;
    margin-bottom: 15px
}
#kontakt_header{
    float: left;
    width: 38%;
    height: 100%;
    text-align: left;
    padding-top: 100px;
    margin-left: 45px
    
}
#search-form{
    float: right;
    width: 52%;
    height: 90%;
    padding-top: 135px;
    float: right;
}
#shift-right{
    float: right;
    width: 100%;
    height:100%
}
.logo{
    width: 258px;
    height: 180px;
    float: left;
    text-align: right;
}
#logo img{
    width: 258px;
    height: 180px;
    border: none;
}
.header_left{
    float: right;
    width: 620px;
    text-align: left;
}


#table, #table_seminar{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
    
}
#table tr{
    width: 100%;
}

#table td{
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}

#table_seminar td{
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    border-top: thick solid lightblue;
    margin-bottom: 20px;
}

table .title{
    /*background: #F9BD53;*/
    background-color: #3E91BF;
    /*border-style: 2;
    border-width: 2px;*/
    text-align: left;
    text-transform: capitalize;
} 

/*textarea{
    width: 80%;
    height: 100px;
    border-radius: 15px;  
    -webkit-border-radius: 15px;  
    -moz-border-radius: 15px; 
}*/

/*.caption {
    width: 80%;
    height: 100px;
    overflow: hidden;
    border-style: groove;
    border-radius: 4px 50% 4px 50%;
    
}*/
.caption 
{
position: relative;
width: 90%;
min-height: 100px;
max-height: 200px;
padding: 5px;
background: #82C0FF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

.caption:after 
{
content: "";
position: absolute;
bottom: -28px;
left: 62px;
border-style: solid;
border-width: 28px 20px 0;
border-color: #82C0FF transparent;
display: block;
width: 0;
z-index: 1;
}
/*.caption a{
    text-decoration: none;
}*/

/**/
.cf:before, .cf:after{
    content:"";
    display:table;
}
 
.cf:after{
    clear:both;
}
 
.cf{
    zoom:1;
} 
/* Form wrapper styling */
.form-wrapper {
    width: 325px;
    padding: 3px;
    /*margin: 30px auto 10px auto;*/
    background: #444; behavior: url(PIE2.htc);
    background: rgba(0,0,0,.2);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    /*box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);*/
    border: none;
}
 
/* Form text input */
 
.form-wrapper input {
    width: 235px;
    height: 20px;
    padding: 5px 5px;
    float: left;    
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #eee;
    border-radius: 3px 0 0 3px;
    color: #999;
    font-weight: normal;
    font-style: italic;
}
 
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
 
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
 
/*.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}*/
 
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}    
 
/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 30px;
    width: 80px;
    font: bold 15px/30px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    border-radius: 0 3px 3px 0;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}   
   
.form-wrapper button:hover{     
    background: #e54040;
}   
   
.form-wrapper button:active,
.form-wrapper button:focus{   
    background: #c42f2f;
    outline: 0;   
}
 
.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}
 
.form-wrapper button:hover:before{
    border-right-color: #e54040;
}
 
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #c42f2f;
}      
 
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}    

div#home{
    margin-top: 20px;
    width: 100%;
    height: 350px;
}
#home:after{clear: both}

div#image_home{
    width: 100%;/*448px;/*35%;*/
    /*height: 278px;/*100%;*/
    /*border-radius: 4px;*/
    float: left;
}
#image_home img{
    width:100%;
    height: 100%;
    border-radius: 4px;
    border: none
}

div#angebot{
  border-style: groove ridge;
    width: 100%;
}

#angebot a{
    color: #60ABE5;
}

#angebot a:link { 
text-decoration: none; 
color:#60ABE5; 
}

#angebot a:visited { 
text-decoration: none; 
color:#60ABE5; 
} 

#angebot a:hover { 
text-decoration: none; 
color:#60ABE5; 
} 
 
#angebot a:active { 
text-decoration: none; 
color:#60ABE5; 
} 

#angebot ul{
    list-style: circle outside;
}

#tabs{
    float: right;
    width: 35%;
}

#andere{
    clear: both;
    width: 100%;
}
#paginated{
    min-height: 100px;
    background-color: #eee;
}
table td img{
    width: 50px;
    height: 40px;
    border: none
}
.artikel{
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    width: 97%;
    height: 80px;
    overflow-style: panner;
    margin-bottom: 10px;
    padding: 15px 15px 15px 15px
}

.artikel .artikel_description{
    width: 400px;
    height: 60px;
    float: left;
}

.artikel .bestellung_button{
    width: 50px;
    height: 60px;
    float: right;
}

.artikel .bestellung_button img{
    width: 100%;
    height: 100%;
    border: none;
}

.suche{
    width: 80%;
    max-height: 110px;
    overflow: hidden;
    border-radius: 4px;
    background-color: #eee;
    margin: 20px auto 20px auto;
    padding-left: 15px;
    padding-right: 15px;
}

#rightpanel_content img{
    width: 80%;
    height: 80px;
    margin: 20px auto 20px auto;
    border: none;
}

.aktuelle_panel{
    /*max-height: 500px;*/
    top: 0;
    height: 100%;
    width: 274px;
    padding: 10px 5px 10px 5px;
    /*border: 1px ridge #60ABE5;
    border-radius: 4px;*/
    
}

.aktuelle_panel2{
    /*height: 200px;*/
    width: 274px;
    padding: 10px 5px 10px 5px;
    
}

.table_aktuelle td{
    position: relative;
    /*width: 284px;
    border: 1px ridge #60ABE5;
    border-radius: 4px*/
}
div.colored, td.colored, tr.colored{
    background-color: lightblue;
}
div.non_colored, td.non_colored, tr.non_colored{
    background-color: white;
    
}

#baum{
    width: 100%;
    height: 20px;
    padding-left: 15px;
}