/**
 * Brunner AG - Druck und Medien, Kriens
 * @copyright      Copyright 2009, Brunner Web
 * @link           http://www.bag.ch/web
 */
@import url('fonts.css'); 
 

#content table {
	margin: 0;
	padding: 0;
}

#content table#veranstaltungen {
    font-size: 87%;
    width: 100%;
}

#content table td {
	padding: 2px 0;
}

#content h1,
#content h2,
#content h3,
#content h4 {
    font-family: "CorporateS-Regular", Verdana, Arial, Helvetica, sans-serif;
    color: inherit;
	margin: 0;
   	padding: 0 0 0 0;
}


#content h1 {	
	font-size: 250%;
	color: #fff;
	line-height: 115%;
	padding-bottom: 0.7em;
}

#content h2 {	
	font-size: 145%;
	font-weight: 100;
	line-height: 120%;
	padding-bottom: 0.5em;
}

#content h3,
#footerContent h3 {	
	font-size: 110%;
    font-weight: bold;
	line-height: 120%;
	padding-bottom: 0.5em;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

#content h4 {	
	font-size: 100%;
	line-height: 120%;
    font-weight: bold;
} 

#content p {
	margin-top: 0;
	padding-top: 0;
    line-height: 120%;
	
}

#content strong,
body#content strong {
	font-weight: bold;
}

#content a {
	text-decoration: none;
	color: #e64741;	
}

#content a:hover {
	text-decoration: underline;
}

/* spezielle Klassen */

#content .hinweis-rot{
	color: #E64741;
	font-weight: 600;
}

#content a.popUp {

}

#content .grossbuchstaben {
	text-transform: uppercase;
}

#content .groesser {
	font-size: 1.2em;
}

#content .kleiner {
	font-size: 0.8em;
}

#content .kleiner {
	font-size: 1em !important;
}

#content p.abstand{
	margin-bottom: 8px;
}

#content a.button {
    font-weight: normal;
    font-size: 18px;
    color: #000000;
    display: inline-block;
    background-color: #ccc;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 5px 10px;
    text-decoration: none;
}

#content a.button:hover {
    color: #fff;
    background-color: #aaa;
    transition: all 0.3s ease-in-out;
}

#content a.button.red,
form table td input[type=submit] {
    background-color: #E64741 !important;
    color: #fff;
}

#content a.button.red:hover {
    color: #fff;
    background-color: #aaa;
    transition: all 0.3s ease-in-out;
}

#content .red {
    color: #E64741;
}
/**/


#content a img {
	border: 0;
}

#content img.cmsDocumentIcon {
	margin-top: 0px;
    margin-right: 5px;
	border: 0;
}

#content ol,
#content ul,
#content li {
	padding: 0px;
	margin: 0 0 0 1em;
    list-style-image: url(/_local/images/square.gif);
}

#content li.linie,
#content li.linie_rot {
	list-style: none;
	margin-left: -0.5em;
}

#content li.linie:before,
#content li.linie_rot:before {
	margin-left: -0.7em;
	position: absolute;
    content: "–";
}

#content li.linie_rot:before {
    color: red;
}

#shopitemlist li,
#shopbasket li {
    margin: 0;
    list-style-image: none;
}


#content ul li {
	padding: 0px 0 0px 5px;
    margin: 0;
}

#content ol {
	padding-left: 30px;
}

#content ol li {
	background: none;
	padding: 2px 0 2px 0px;
	margin: 0;
	list-style: decimal;
}

#content hr{
	background-color: #C3C3C3; /* Farbe für Opera und Firefox */ 
	 /* Farbe für Internet Explorer (IE) */
	color: #C3C3C3;
	border: 0; 
	height: 1px;	
}

form span.value {
    font-weight: bold;
}


/***************** box teaser **********************/

#content .teaser {
	background: #fff;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 6% !important;
}

#content .teaser h3{
    hyphens: auto;
}
#content .teaser .underline {
    
}

#content .teaser .underline a,
#content.teaser .underline a{
	float:left;
	clear: left;
	width: 100%;
	border-bottom: 1px solid #c3c3c3;
	padding: 8px 0px;
	text-decoration: none;
	margin-bottom: 0px;
}


/***************** toggle Box ***********************/

#content div.toggle {
    position: relative;
    z-index: 3; 
    transition: all 0.9s ease-in-out;  
}

#content div.toggle.open {
    margin-top: 0px; 
    transition: all 0.4s ease-in-out;  
}

#content div.toggle div.cmsCell {
    margin-bottom: 0 !important;
}
#content div.toggleHide {
    display: none;
    position: absolute;
    margin-top: 20px !important;
    padding-top: 30px;
    padding-bottom: 20px;
    background: #fff;
    width: 100% !important; 
    border-radius: 5px; 
    opacity: 1;
}



div.toggle a.toggler:before {
    content: '\f105';
    font-family: 'FontAweSome';
    float: left; 
    font-size: 17px;
    margin: 0px 5px 0 0;
    transform: rotate(0deg);
    transition: all 0.3s ease-in-out;
}

div.toggle i.fa-times{
    opacity: 0;
    top: 19px;
    font-size: 1px;
    position: absolute;
}
div.toggle.open i.fa-times{
    position: absolute;
    top: 20px;
    right: 0px;
    margin: 0;
    width: 26px;
    line-height: 26px;
    text-align: center;
    content: '\f105';
    font-family: 'FontAweSome';
    color: #555;
    float: left; 
    cursor: pointer;
    font-size: 20px;
    border: 0px solid #aaa;
    border-radius: 13px;
    opacity: 1;
    background-color: white;
    z-index: 4;
    transition: all 0.3s ease-in-out;
}

/* box styles */
#content .box hr {
	margin-left: 20px;
	margin-right: 20px;
}

#content div.box {
	padding-left: 1%;
	padding-right: 1%;
	box-sizing: border-box;
}

#content .cmsGroup.box>.cmsCell {
    margin-top: 0;
}
#content .cmsGroup.box>.cmsCell:first-child {
    margin-top: 25px;
}

#content .cmsCell.box,
#content .cmsGroup.box>.cmsCell {
	background: #fff;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 16px !important;
}

#content .box h3,
#content.box h3 {
	margin: 0;
	padding: 20px 25px;
	background: #555555;
	color: #fff;
	text-transform: uppercase;
	margin-bottom: 0.5em;
}

#content .box h3 a,
#content.box h3 a  {
	color: #fff;
	text-decoration: none;
}

#content .box p {
	width: 100%;
	color: #000;
	padding-left: 25px;
	padding-right: 20px;
	box-sizing: border-box;
}

#content .box p a,
#content.box p a {
	float: left;
	clear: left;
	width: 100%;
	border-bottom: 1px solid #c3c3c3;
	padding: 8px 0px;
	text-decoration: none;
	margin-bottom: 0px;
}

#content .box p a.thickbox,
#content.box p a.thickbox {
	border-bottom: none;
} 

#content #registertable {
    margin-top: 30px;
    width: 150% !important;
}

#dyncont>table>tbody>tr>td {
    background-color: #ddd;
    border-bottom: 1px solid #fafafa;
    font-size: inherit;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left:  5px;
    padding-right:  5px;
    line-height: 120%;
}

#dyncont span.value {
    font-weight: bold;
}

#dyncont table td.label {
    background-color: white;
}

#dyncont table tr.spacerow td {
    background-color: transparent;
    border: 0 none;
    height: 20px;
}

#dyncont p {
    line-height: 120% !important;
}



@media only screen and (max-width: 870px){
    
    #content #registertable {
        width: 165% !important;
    }
    
    #content .cmsGroup.cmsColSpan8 {
        width: 100% !important;
        clear: left;
    }
    
    #content .cmsGroup.cmsColSpan3.resultate {
        width: 50% !important;
        clear: left;
    }
    
    #content p {
    	margin-top: 0;
    	padding-top: 0;
        line-height: 125%;
    	
    }
    
}

@media only screen and (max-width: 800px){
    
    
    #content .cmsGroup.cmsColSpan3.resultate {
        width: 50% !important;
        clear: left;
    }
    
    #content .cmsGroup.cmsColSpan3.resultate div.cmsCell.cmsColSpan3 {
        width: 100% !important;
    }
    
    #content #registertable {
        width: 100% !important;
    }
    
    #content #registertable thead tr {
        display: inline-block;
        margin-bottom: 10px;
        background: #fff;
        width: 100%;
        float:left;
        clear: left;
    } 
    
    #content #registertable thead td {
        background: #fff !important;
    } 
    
    #content #registertable tbody tr {
        display: inline-block;
        margin-bottom: 10px;
        border-bottom: 1px solid #aaa;
        width: 100%;
        float:left;
        clear: left;
    }  
    
    #content #registertable tr td {
        clear: left;
        float: left;
        width: 25% !important;
    }
    
    #content #registertable tr td:nth-child(2),
    #content #registertable tr td:nth-child(3),
    #content #registertable tr td:nth-child(4){
        clear: none;
    }
    
    #content #registertable tr td:nth-child(5){
        width: 100% !important;
    }
    
    #content #registertable tr td:nth-child(5):before {
        content: 'Weiterbildungszentrum: ';
        float: left;
        clear: left;
        color: red;
        padding-right: 5px;
        padding-bottom: 8px;
    }
    
    #content #registertable thead tr:first-child td:nth-child(5),
    #content #registertable thead tr:first-child td:nth-child(5):before {
        display: none;
    }
    
}


@media only screen and (max-width: 600px){
    
    #content #registertable tr td {
        clear: left;
        float: left;
        width: 33% !important;
    }
    
    #content #registertable tr td:nth-child(2),
    #content #registertable tr td:nth-child(3),
    #content #registertable tr td:nth-child(4){
        clear: none;
    }
    
    #content #registertable tr td:nth-child(1),
    #content #registertable tr td:nth-child(2){
        font-weight: bold;
    }
    
    #content #registertable tr td:nth-child(4){
        width: 100% !important;
    }
    
     #content #registertable tr td:nth-child(4):before {
        content: 'Diplom/Zertifikat: ';
        float: left;
        clear: left;
        color: red;
        padding-right: 5px;
    }
    
    #content #registertable thead tr:first-child td:nth-child(4),
    #content #registertable thead tr:first-child td:nth-child(4):before {
        display: none;
    }
    
    
}

@media only screen and (max-width: 560px){
     #content div.toggle.open {
        width: 96% !important;
        margin-left: 2% !important;        
    }    
    
    
}

@media only screen and (max-width: 480px){
     #content #registertable tr td:nth-child(5):before{
        width: 100%;
        float: none;
     }
     
      #content #registertable tr td:nth-child(5){
        width: 100%;
        padding-bottom: 8px;
     }
     
     #content .cmsGroup.cmsColSpan3.resultate {
        width: 100% !important;
    }
}