/**
 * The info-box module for the whole site
 * usage:
 * <div class="[orange|purple|red...] info-box">
 *   <div class="inner">
 *     <h3>The panel header</h3>
 *     <p>content</p>
 *   </div>
 *
 * </div>
 */

.info-box {
    color          : white;
    border         : none;
    width          : 870px;
    margin         : auto;
    opacity        : 0.9;
    -moz-opacity   : 0.9;
    -khtml-opacity : 0.9;
    filter         : alpha(opacity=90);
    text-align     : left;
    vertical-align : middle;
    display        : table;
    position       : absolute;
    z-index        : 100;
    top            : 0;
    left           : 0;
    bottom         : 0;
    right          : 0;
}
.info-box .inner {
    width          : 100%;
    padding        : 30px 50px;
    display        : inline-block;
    vertical-align : middle;
}
.info-box h3 {
    font-size     : 38px;
    margin-bottom : 5px;
    padding       : 0px;
}
.info-box p {
    font-size     : 13px;
    margin-bottom : 20px;
    padding       : 0px;
}
.info-box .inner.green {
    background : #8BC53D;
}
.info-box .inner.orange {
    background : #F9A94A;
}
.info-box .inner.yellow {
    background : #FDE333;
}

.info-box .inner.white {
    background : #FFFFFF;
}



.info-box ul {
    list-style: none;
    padding-left: 20px;
}

.info-box li {
    padding-left: 15px;
    position: relative;
}

.info-box li:before {
    content: "•";
    position: absolute;
    font-size: 200%;
    left: -20px;
    color: #000000;
}



.info-box li.no-bullet{
    padding-left: 0px ;
    position: relative;
}

.info-box li.no-bullet:before {
    content: "";
    position: absolute;
    font-size: 200%;
    left: 0px;
    color: #000000;
}