/*** MAIN **************/

.main
{
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border-radius: 9px;	
	-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);	
	-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);
	box-shadow:0 0 5px rgba(0,0,0,0.2);	
    background: #FFFFFF;
    margin-bottom: 6%;
    margin-top: -6%;
    overflow: visible;
	padding-bottom:2%;
    position: relative;
    z-index: 10;
}

.ref .main {
    margin-bottom: 4%;
}

.main .content {
    color: #555555;
    margin-bottom: 2%;
}
 
    .main .introtext {
        margin: 0 4%;
        position: relative; 
    }
    
    .main .introtext p.ingress { font-size: 18px; font-size: 1.8rem;}

    .main .introtext li{
        list-style-type: disc;        
    }    
    
    .main h2, .main p {
        color: #555555;
    }

    .main h3, .main p {
        color: #555555;
    }
    
    .main .img {
        float: right;
        margin: 1% 4%;
    }    

    .main .img img{
        width: 100%;
        height: auto;
    } 
	
	 .main .introtext  ul  {
        margin: 4%;
    } 
    


.article .main .content{
    margin-top: 8%;
}
  

	
/**SOURCETYPE ***/
.sourcelist li 
{
    float: left;
    margin: 2% 1%;
}

    .sourcelist li a.button 
    {
        background: #D8DAD9;
        border: none;
        color: #555555;
        display: inline;    
    }

    .sourcelist li a.button:hover, .sourcelist li a.button:active, .sourcelist li a.button:focus
    {
        color: #3398cc;
    }    
    

/***SOURCESELECTOR****/
.destinationlist li 
{
    background: #999999;
    float: left;
    margin: 3px; 
    padding: 60px 4px; 
    text-align: center;
    position: relative;
    height: 20px;
    max-width: 182px;
    min-width: 100px;
    width: 20%;
}

.destinationlist li:hover, .destinationlist li:active, .destinationlist li:focus
{
    background: #3398CC;
}

    .destinationlist li a
    {
        color: #fff; 
        font-size: 15px; font-size: 1.5rem;
        height: 100%;
        left: 0;
        padding-top: 30%;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .destinationlist li a:hover, .destinationlist li a:active, .destinationlist li a:focus
    {
        color: #fff; 
    }
  


/***SOURCECONTENT*********/
.sortcontent 
{
    background: #D5D7D9;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #999;    
    padding-top: 2%; 
    padding-bottom: 6%;   
}
.sources h3 
{
    color: #999;
    float: left;
    margin: 2% 2%;
}

.sourcecontent {
    background: #CDD1D0;
   }

.sourcecontent h2 { font-size: 21px; font-size: 2.1rem; line-height: 1.3; }
.sourcecontent h3 { font-size: 18px; font-size: 1.8rem; line-height: 1.2;margin-top: 20px;}	
.sourcecontent p {  font-size: 15px; font-size: 1.5rem; line-height: 1.4; margin-bottom: 10px;}

.reveal-modal h2 {
    margin-bottom: 5%;
}

.reveal-modal.list {
    border: none;
    box-shadow: none;
    margin: 0;
    position: relative;
    visibility: visible;
}
.reveal-modal.list .close-reveal-modal {
    color: #ededed;
}

/*Faq*/
.faqs 
{
    margin-left: 4%;
	float: left;
    width: 100%;
}

    .faqs dt.question
    {
        background: url(../Content/Images/common/open.jpg) no-repeat scroll 0 10px transparent;
        cursor: pointer;
        display: block;
        font-weight: 700;
        padding: 10px 30px;
    }   


    .faqs dt.question.active
    {
        background: url(../Content/Images/common/close.jpg) no-repeat scroll 0 10px transparent;       
    }    
     

    .faqs dd.answer 
    {
        display: none;
        margin-left: 30px;
    }


/*related articles*/
.related-articles {
    margin-bottom: 10px;
    position: absolute;
    right: 40px;
    text-align: center;
    top: 100px;
    width: 28%;
}

.related-articles .circular img{
	width: 220px;
	height: 220px;
	border-radius: 50%;
    border: 10px solid #fff;
}

.related-articles:hover .circular img, .related-articles:focus .circular img{
    border: 10px solid #f2f2f2;
}

/*quiz*/
.quiz {
    background-color: #EEF0EF;   
	border-radius: 6px;
    float: right;
    margin-bottom: 40px;
    margin-left: 20%;
    min-width: 250px;
    padding: 40px;
    position: relative;
    right: 40px;
    top: 20px;
    width: 20%;
    z-index: 1;
}
.quiz .quiz-image {
    padding-top: 10px;
    padding-bottom:  20px;   
}

.quiz h2 {
    margin-bottom: 10px;
    font-weight: bold;
}
.quiz h3 {
    margin-bottom: 20px;
}
.quiz li {
    margin-bottom: 10px;   
}

.quiz label {
    display: block;
       
}
.quiz input[type="radio"] {
    display: none;
    height: 8px;
    margin: 0 0 16px 0;
    width: 8px;
}

.quiz input[type=radio]:checked + span{
	background: #c1c3c2;
	border: 8px solid #fff;
	-webkit-box-shadow: 0px 0px 1px 1px #ccc;
	box-shadow: 0px 0px 1px 1px #ccc;
    height: 16px;
    margin-left: 2px;
    width: 16px;
}

/*
.quiz input[type=radio].first:checked + span {
    margin-left: -2px;
}*/

	
.quiz .custom-radio {
    cursor: pointer;
    font-size: 16px;
    line-height: 2;

}

.quiz .custom-radio span{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: block;
    float: left;
    height: 30px;
    margin-left: 0;
    margin-right: 10px;
    width: 30px;
}

.quiz .custom-radio span:hover {
    border: 2px solid #c1c3c2;
    width: 28px;
}
.quiz .answer-graph p {
    margin-bottom: 0;   
}

.quiz .wrong-answer p {
    font-style: italic;
}

.quiz .correct-answer p {
    font-style: italic;
}

/*quiz progressbar*/
.trans-black-bg {
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.1);
}
.progress {
    background-color: transparent;
    border: 0 solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    height: 2em;
    line-height: 0.7em;
    margin-bottom: 1em;
    padding: 0;
    position: relative; 
}
.progress .meter {
    box-sizing: border-box;
    border-radius: 4px;
    color: #fff;
    display: block;
    font-weight: bold;
    height: 2em;
    position: absolute;
}

.progress .meter.rightanswer {
    background: none repeat scroll 0 0 #7DCFB6;
}

.progress .meter.wronganswer {
    background: none repeat scroll 0 0 #F79256;
}

.progress .meter .graph-info {
    min-width: 50px;
    padding: 10px;
    position: absolute;    
}

/*listview*/
.js-masonry {
    padding-top: 20px;   
}
.list-view .item {
    box-sizing: border-box;
    border-radius: 6px;
    margin-bottom: 20px;
    width: 300px;
    
}

.list-view .item img {
    width: 92.9%;
    height: auto;
}
.list-view .item img + .text-info {
    margin-top: -12px;   
} 
.list-view .item .text-info {
    background: #EEF0EF;
    border-radius: 6px;
    padding: 20px;
    margin-right: 20px;
}



.list-view .item:hover {
    margin: 5px 5px 20px 5px;
}

.next-button{ float: right;}
.finish-button{ float: right;}
.date-text {
    float: right;
    font-style: italic;
    font-size: 90%;
    margin-top: 20px;
}
.faqa-text {
    float: left;
    font-size: 90%;
    margin-top: 20px;
}