/* 
    Document   : faq.css
    Created on : 5-jan-2016, 13:30:00
    Author     : B.v.d.Brink
    Description: Styling classes for F.A.Q. content
*/


.faq-container {
    position:           relative;
    float:              left;
    width:              100%;
    padding:            20px 20px;
    margin-bottom:      20px;
    color:              #444;
    font-size:          12px;
    font-weight:        normal;
    border-radius:      4px;
    border-top-width:   4px;
    border-top-style:   solid;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow:    0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    box-shadow:         0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

.faq-container a {
    text-decoration:    none;
}

.faq-container a:hover {
    cursor:             pointer;
    text-decoration:    none;
}


.faq-image {
    position:           relative;
    height:             510px;
    width:              690px;
    overflow:           hidden;
    border:             1px solid #eee;
}

.faq-image img {
    position:           absolute;
    top:                0;
    left:               0;
    width:              700px;
}


.faq-highlight {
    position:           absolute;
    border-width:       1px;
    border-style:       solid;
    border-color:       #888;
    border-radius:      0px;
}

.faq-highlight span {
    position:           absolute;
    width:              20px;
    height:             20px;
    background-color:   #888;
    color:              #fff;
    font-size:          12px;
    line-height:        18px;
    font-weight:        700;
    text-align:         center;
    border-radius:      5px;
}

.faq-highlight span.left {
    top:                20%;
    left:               -17px;
}

.faq-highlight span.right {
    top:                30%;
    right:              -12px;
}

.faq-highlight span.top {
    top:                -17px;
    left:               45%;
}

.faq-highlight span.bottom {
    bottom:             -17px;
    left:               45%;
}


.faq-highlight span.topLeft {
    top:                -17px;
    left:               -17px;
}

.faq-highlight span.topRight {
    top:                -17px;
    right:              -17px;
}

.faq-highlight span.bottomLeft {
    bottom:             -17px;
    left:               -17px;
}

.faq-highlight span.bottomRight {
    bottom:             -17px;
    right:              -17px;
}


.faq-blue .faq-highlight {
    border-color:       #0072bc;
}

.faq-blue .faq-highlight span {
    background-color:   #0072bc;
}

.faq-green .faq-highlight {
    border-color:       #39b54a;
}

.faq-green .faq-highlight span {
    background-color:   #39b54a;
}


.faq-red .faq-highlight {
    border-color:       #E30613;
}

.faq-red .faq-highlight span {
    background-color:   #E30613;
}

.faq-yellow .faq-highlight {
    border-color:       #f5d312;
}

.faq-yellow .faq-highlight span {
    background-color:   #f5d312;
}

.faq-orange .faq-highlight {
    border-color:       #f36b21;
}

.faq-orange .faq-highlight span {
    background-color:   #f36b21;
}


.faq-line {
    position: absolute;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #888;
}

.rotate45 {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

 .faq-blur {     
    -webkit-filter: blur(2px);
    filter: blur(2px);      
}

.faq-hide {
    position: absolute;
    opacity: 0.6;
    background: repeating-linear-gradient(
      45deg,
      #aaa,
      #bbb 2px,
      #ccc 2px,
      #ddd 4px);
}