/**
 * The panel module for the whole site
 * usage:
 * <div class="[orange|purple|red...] panel">
 *   <div class="panel__header">
 *     <h2>The panel header</h2>
 *   </div>
 *
 *   <div class="panel__body">
 *     <div class="panel__body__left">
 *        <h3>Left Title</h3>
 *        <figure>
 *          <img class="img-responsive" src="path/to/image" />
 *          <figcaption>
 *            <p>description here</p>
 *          </figcaption>
 *        </figure>
 *     </div>
 *     <div class="panel__body__right">
 *       <h3>Right Title</h3>
 *       <ul>
 *         <li>item1</li>
 *         <li>item2</li>
 *         <li>item3</li>
 *         <li>item4</li>
 *         <li>item5</li>
 *         <li>item6</li>
 *       </ul>
 *     </div>
 *   </div>
 *   
 * </div>
 */

/** Start of the color section */

/** orange: #f9a94a; */
.orange .panel__header {
    background : url('./panel__header-background--orange.png');
}
.orange h3.panel__body__body__header--with-background {
    background : #F9A94A;
    color : white;
}
.orange h3.panel__body__body__header--no-background,
.orange .panel__body__right li:before,

.orange .panel__body__left > figure > figcaption > p {
    color : #F9A94A;
}
/** yellow: #fdce62; */

h2.square.yellow{ background : #FDCE62; color: #ffffff; padding: 5px 30px; display: inline-block;margin: auto !important; text-align: center;}

.yellow .panel__header {
    background : url('./panel__header-background--yellow.png');
}
.yellow h3.panel__body__body__header--with-background,
.yellow .panel__1-3 h3,
.yellow .panel__1-1 h3
{
    background : #FDCE62;
}
.yellow h3.panel__body__body__header--no-background,
.yellow .panel__body__right li:before,
.yellow .panel__1-3  li:before,
.yellow .panel__1-1  li:before,
.yellow .panel__body__left > figure > figcaption > p {
    color : #FDCE62;
}



.yellow .panel__body .bullet:before {
    color   : #FDCE62;
}
/** END OF COLOR SECTION */




.panel {
    position   : relative;
    box-shadow : 0 0 20px 5px #9D9D9D;
    margin     : 100px 0 50px;
    padding    : 50px;
    behavior: url(../PIE/PIE.htc);
}
.panel p,
.panel li {
    line-height : 150%;
    white-space: nowrap;
}
/**
 * position the panel header on the top
 */
.panel__header {
    line-height : 65px;
    width       : 740px;
    height      : 93px;
    left        : 50%;
    top         : -65px;
    color       : white;
    margin-left : -370px;
    position    : absolute;
    text-align  : center;
}
.panel__body p {
    font-size : 12px;
}
.panel__body li {
    font-size : 14px;
}
/**
 * list-style nomarlization on the list
 */
.panel__body__right ul,
.panel__1-3 ul,
.panel__1-1 ul
{
    list-style   : none;
    padding-left : 25px;
}
/**
 * right panel is wrapped in a background
 * Text color should be white
 */
.panel__body__right h3 ,
.panel__1-3 h3,
.panel__1-1 h3
{
    color : white;
}

.panel__1-3 h3,
.panel__1-1 h3
{
    padding: 10px 0px;
}


/**
 * bullet point to on the right list
 */
.panel__body__right li:before,
.panel__1-3 li:before,
.panel__1-1 li:before
{
    content     : "•";
    font-size   : 24px;
    line-height : 20px;
    position    : absolute;
    left        : -20px;
}

.panel__body__right li li:before {
    content     : ">";
    font-size   : 16px;
    line-height : 20px;
    position    : absolute;
    left        : -20px;
}

/**
 * some padding on the list items
 */
.panel__body__right li,
.panel__1-3  li,
.panel__1-1  li
{
    padding       : 5px 0;
    margin-bottom : 10px;
    position      : relative;
}
.panel__body__left,
.panel__body__right {
    display        : inline-block;
    vertical-align : top;
}
.panel__body__left > h3,
.panel__body__right > h3 {
    padding : 5px 20px;
    margin  : 20px 0;
}
.panel__body__left > h3 {
    padding-left : 0px;
}
/**
 * left panel styles
 */
.panel__body__left,
.panel__body__right {
    width      : 49%;
    text-align : left;
    padding    : 10px;
}
/**
 * nomalize the figure styles
 */
.panel__body__left > figure {
    margin : 0;
}
/**
 * image should have some margin to the text
 */
.panel__body__left > figure > img {
    margin-bottom : 5px;
}
/**
 * figcaption have some margin to the top
 */
.panel__body__left > figure > figcaption {
    margin : 0px 0px 5px;
}
.panel__body__left > figure > figcaption > p {
    font-size : 12px;
}
/**
 * logo with text
 */
.panel__body .logo {
    display      : inline-block;
    text-align   : left;
    margin-right : 50px;
}
.panel__body .logo img {
    display       : block;
    margin-bottom : 5px;
}
.panel__body .logo p {
    font-size : 12px;
}
.panel__body .bullet {
    display        : inline-block;
    vertical-align : middle;


}
.panel__body .bullet:before {
    content : "• ";

    display: inline-block;
    vertical-align: middle;
    height: 100%;

}
.panel__body .bullet p {
    display        : inline-block;
    vertical-align : middle;
}


.panel__1-1{
    width: 100%;
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.panel__1-1 ul{
    width: 800px;
    margin: auto;
}

.panel__1-1 li{
    text-align: left;
}


.panel__1-3{
    width: 300px;
    margin-right: 46px;
    display: inline-block;
    vertical-align: top;
}
.panel__1-3.last{
    margin-right: 0px;
}

.panel__1-3 h3,
.panel__1-1 h3
{

    text-align: center;
}

.ladder__panel{
    position: relative;
    padding-top: 40px;
    margin-bottom: 60px;

}
.ladder__panel p{
padding-left: 60px;
    font-size: 14px;
    margin-bottom: 30px;

}
.ladder__panel h3{
    width: 500px;
    position: absolute;
    padding: 5px 10px;
    color: white;
    top: -20px;
    left: -10px;
    font-size: 18px;


}
.ladder__panel  h3:before{
    content:' ';
    position: absolute;
    right: -26px;
    bottom: 0;
    border-top: 15px solid transparent;
    border-right: 15px solid transparent;
}



.ladder__panel  h3.puple {
    background: #605ca8;
    color: #FFFFFF;;
}

.ladder__panel h3.puple:before {
    border-bottom: 17px #605ca8 solid;
    border-left: 13px #605ca8 solid;
}

.ladder__panel.with-border.puple{
    border-bottom: #605ca8 solid 5px;

}




.panel a:not(.btn) {
	color: #0000EE !important;
	text-decoration: none;
}
 
.panel a:hover {
	text-decoration:underline;
}