/* short codes general */

.scp{
    display: block;
    font-size: 14px;
    color: #f0f0f0;
}
.scp_box    {
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #a1a1a1;
    padding: 8px 12px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.scp_left    {
    float: left;
    margin-right: 10px!important;
}
.scp_right    {
    float: right;
    margin-left: 10px!important;
}
.scp_btn_after    {
    clear:both;
}
.scp_btn_after    {
    clear:both;
    text-align:center;
}
/**********************
* box colors *
***********************/

.scp_box_blue    {
    background: #a0c5ef!important;
    color: #333!important;
}
.scp_box_red    {
    background: #eba7a7!important;
}
.scp_box_yellow    {
    background: #ffd149!important;
    color: #666!important;
}
.scp_box_green    {
    background: #c3fad0!important;
    color: #666!important;
}
.scp_box_magenta {
    background-color: #a9014b!important;
    color: #f0f0f0!important;
    }
.scp_box_orange    {
    background: #ffa440!important;
    color: #f0f0f0!important;
}
.scp_box_white    {
    background: #e7e7e7!important;
    color: #666!important;
}
.scp_box_gray, .scp_box_    {
    background: #c1c1c1;
    color: #333;
}
.scp_box_black    {
    background: #515151!important;
    color: #f0f0f0!important;
}

/* Box Templates*/
.box_container {
            position:relative;
            z-index:1;
            
            padding:10px;
            margin:0 auto;
        }
        
        .box_container:after {
            content:"";
            display:block;
            clear:both;
            visibility:hidden;
            height:0;
            font-size:0;
        }
.drop-shadow {
            position:relative;
            float:left;
            width:40%;
            /*height:100px;    */
            padding:1em; 
            margin:.2em 10px .4em; 
            background:#fff;
            
        }

        .drop-shadow:before,
        .drop-shadow:after {
            content:"";
            position:absolute; 
            z-index:-2;
        }
        
        .drop-shadow p {
            font-size:16px;
            font-weight:bold;
        }
        
        
        
        
        /* Lifted corners */

        .lifted {
            -moz-border-radius:4px; 
                 border-radius:4px;
        }
        
        .lifted:before,
        .lifted:after { 
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7) !important;   
               -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
                    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform:rotate(-3deg);    
               -moz-transform:rotate(-3deg);   
                -ms-transform:rotate(-3deg);   
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }
        
        .lifted:after {
            right:10px; 
            left:auto;
            -webkit-transform:rotate(3deg);   
               -moz-transform:rotate(3deg);  
                -ms-transform:rotate(3deg);  
                 -o-transform:rotate(3deg);
                    transform:rotate(3deg);
        }
        
        /* Curled corners */

        .curled {
            border:1px solid #efefef; 
            -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;    
                 border-radius:0 0 120px 120px / 0 0 6px 6px;
        }
      
        .curled:before,
        .curled:after {
            bottom:12px;
            left:10px;
            width:50%;
            height:55%;
            max-width:200px;
            -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); 
               -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); 
                    box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); 
            -webkit-transform:skew(-8deg) rotate(-3deg);
               -moz-transform:skew(-8deg) rotate(-3deg);
                -ms-transform:skew(-8deg) rotate(-3deg);
                 -o-transform:skew(-8deg) rotate(-3deg);
                    transform:skew(-8deg) rotate(-3deg);
        } 
      
        .curled:after { 
            right:10px; 
            left:auto;
            -webkit-transform:skew(8deg) rotate(3deg); 
               -moz-transform:skew(8deg) rotate(3deg);     
                -ms-transform:skew(8deg) rotate(3deg);     
                 -o-transform:skew(8deg) rotate(3deg); 
                    transform:skew(8deg) rotate(3deg);
        }
        
        /* Perspective */

        .perspective:before {
            left:80px;
            bottom:5px;
            width:50%;
            height:35%;
            max-width:200px;
            -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
               -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
                    box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
            -webkit-transform:skew(50deg);
               -moz-transform:skew(50deg);
                -ms-transform:skew(50deg);
                 -o-transform:skew(50deg);
                    transform:skew(50deg);
            -webkit-transform-origin:0 100%;
               -moz-transform-origin:0 100%;
                -ms-transform-origin:0 100%;
                 -o-transform-origin:0 100%;
                    transform-origin:0 100%;
        }
        
        .perspective:after {
            display:none;
        }
        
        
        .perspectiveR:before {
            left:80px;
            bottom:5px;
            width:50%;
            height:35%;
            max-width:200px;
            -webkit-box-shadow:80px 0 8px rgba(0, 0, 0, 0.4);
               -moz-box-shadow:80px 0 8px rgba(0, 0, 0, 0.4);
                    box-shadow:80px 0 8px rgba(0, 0, 0, 0.4);
            -webkit-transform:skew(140deg);
               -moz-transform:skew(140deg);
                -ms-transform:skew(140deg);
                 -o-transform:skew(140deg);
                    transform:skew(140deg);
            -webkit-transform-origin:0 100%;
               -moz-transform-origin:0 100%;
                -ms-transform-origin:0 100%;
                 -o-transform-origin:0 100%;
                    transform-origin:0 100%;
        }
        
        .perspectiveR:after {
            display:none;
        }
                
        
        /* Raised shadow - no pseudo-elements needed */
        
        .raised {
            -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
        
        /* Curved shadows */

        .curved:before {
            top:10px;
            bottom:10px;
            left:0;
            right:50%;
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
            -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
            box-shadow:0 0 15px rgba(0,0,0,0.6);
            -moz-border-radius:10px / 100px;
            border-radius:10px / 100px;
        }
        
        .curved-vt-2:before {
            right:0;
        }
        
        .curved-hz-1:before {
            top:50%;
            bottom:0;
            left:10px;
            right:10px;
            -moz-border-radius:100px / 10px;
            border-radius:100px / 10px;
        }

        .curved-hz-2:before {
            top:0;
            bottom:0;
            left:10px;
            right:10px;
            -moz-border-radius:100px / 10px;
            border-radius:100px / 10px;
        }
        
        /* Rotated box */
        
        .rotated {
            -webkit-box-shadow:none;
               -moz-box-shadow:none;
                    box-shadow:none;
            -webkit-transform:rotate(-3deg);    
               -moz-transform:rotate(-3deg);   
                -ms-transform:rotate(-3deg);
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }
        
        .rotated > :first-child:before {
            content:"";
            position:absolute;
            z-index:-1;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background:#fff;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
        
        
        
        /*BOX STYLE*/
        
        .gray{
            background:#888;
            color:#333;
            }

        .blue{
            border:1px solid #009;
            color:#fff;
                    
background: #a7cfdf; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3Y2ZkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMzUzOGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a7cfdf 0%, #23538a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); /* IE10+ */
background: linear-gradient(top,  #a7cfdf 0%,#23538a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-8 */
            }
        
        
        .orange{
            border:1px solid #F60;
            color:#fff;
            -webkit-box-shadow:0 1px 0px 0 #FF6 inset;
               -moz-box-shadow:0 1px 0px 0 #FF6 inset;
                    box-shadow:0 1px 0px 0 #FF6 inset;
            
            
background: #ffcd28; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2QyOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjhhMDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffcd28 0%, #ff8a05 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcd28), color-stop(100%,#ff8a05)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffcd28 0%,#ff8a05 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffcd28 0%,#ff8a05 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffcd28 0%,#ff8a05 100%); /* IE10+ */
background: linear-gradient(top,  #ffcd28 0%,#ff8a05 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcd28', endColorstr='#ff8a05',GradientType=0 ); /* IE6-8 */
            }
            
            
        .green{
            border:1px solid #693;
            color:#fff;
            
background: #a4b357; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E0YjM1NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NTg5MGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* IE10+ */
background: linear-gradient(top,  #a4b357 0%,#75890c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-8 */
            }
            
            
        .light{
            color:#333;
            
background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */
            }

/* for button*/

.scp_button{
background: #222  url(images/alert-overlay.png) repeat-x;
display: inline-block;
margin: 0 1em 1em 13px;
padding: 8px 10px 9px 10px;
color: #fff;
text-decoration: none;
font-weight: normal;
line-height:1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 0px solid #222;
position: relative;
cursor: pointer;
text-decoration: none !important;\
height: 17px;
font-size: 16px !important;
}
a.scp_button{color:#ffffff; }  
a.scp_button:link{color:#ffffff; }
a.scp_button_white{color:#000; }

    /* Sizes ---------- */
    .scp_button_small {
    font-size: 11px;
    width: 98px!important;
    
    }
    .scp_button_medium {
    font-size: 13px;
    width: 139px!important;
    }
    .scp_button_large {
    font-size: 14px;
    padding: 8px 14px 9px;
    width: 182px!important;
    }
     
    /* Colors ---------- */
    .scp_button_blue {
    background-color: #2daebf;
    }
    .scp_button_red {
    background-color: #e33100;
    }
    .scp_button_green {
    background-color: #1AC115;
    }
    .scp_button_magenta {
    background-color: #a9014b;
    }
    .scp_button_orange {
    background-color: #ff5c00;
    }
    .scp_button_yellow {
    background-color: #ffb515;
    }
    .scp_button_black {
    background-color: #222;
    }
    .scp_button_gray {
    background-color: #333;
    }
    .scp_button_white {
    background-color: #f2f2f2;
    }
.scp_button:hover span{ text-decoration: none; }
.scp_button span{ width: 16px; height: 16px; float: left; margin-right: 5px; }
.scp_button_accept span{ background: url("images/icons/accept.png") no-repeat top left; }
.scp_button_add span{ background: url("images/icons/add.png") no-repeat top left; }
.scp_button_anchor span{ background: url("images/icons/anchor.png") no-repeat top left; }
.scp_button_cancel span{ background: url("images/icons/cancel.png") no-repeat top left; }
.scp_button_clock span{ background: url("images/icons/clock.png") no-repeat top left; }
.scp_button_coins span{ background: url("images/icons/coins.png") no-repeat top left; }
.scp_button_delete span{ background: url("images/icons/delete.png") no-repeat top left; }
.scp_button_heart span{ background: url("images/icons/heart.png") no-repeat top left; }
.scp_button_hourglass span{ background: url("images/icons/hourglass.png") no-repeat top left; }
.scp_button_house span{ background: url("images/icons/house.png") no-repeat top left; }
.scp_button_info span{ background: url("images/icons/information.png") no-repeat top left; }
.scp_button_lightbulb span{ background: url("images/icons/lightbulb.png") no-repeat top left; }
.scp_button_lightning span{ background: url("images/icons/lightning.png") no-repeat top left; }
.scp_button_lock span{ background: url("images/icons/lock.png") no-repeat top left; }
.scp_button_palette span{ background: url("images/icons/palette.png") no-repeat top left; }
.scp_button_refresh span{ background: url("images/icons/refresh.png") no-repeat top left; }
.scp_button_switch span{ background: url("images/icons/switch.png") no-repeat top left; }
.scp_button_asterisk span{ background: url("images/icons/asterisk.png") no-repeat top left; }
.scp_button_bell span{ background: url("images/icons/bell.png") no-repeat top left; }
.scp_button_bomb span{ background: url("images/icons/bomb.png") no-repeat top left; }
.scp_button_bricks span{ background: url("images/icons/bricks.png") no-repeat top left; }
.scp_button_briefcase span{ background: url("images/icons/briefcase.png") no-repeat top left; }
.scp_button_cake span{ background: url("images/icons/cake.png") no-repeat top left; }
.scp_button_color span{ background: url("images/icons/color.png") no-repeat top left; }
.scp_button_disconnect span{ background: url("images/icons/disconnect.png") no-repeat top left; }
.scp_button_door span{ background: url("images/icons/door.png") no-repeat top left; }
.scp_button_download span{ background: url("images/icons/download.png") no-repeat top left; }
.scp_button_emoticon span{ background: url("images/icons/emoticon.png") no-repeat top left; }
.scp_button_feed span{ background: url("images/icons/feed.png") no-repeat top left; }
.scp_button_cart span{ background: url("images/icons/cart.png") no-repeat top left; }

/* BIG BUTTONS */
.button-big {
    color: #ffffff !important;
    font: bold 16px/22px Arial, Helvetica, sans-serif;
    display: inline-block;
    height: 37px;
    margin: 0 1em 1em 16px;
    padding: 10px 20px 11px 5px;
    position: relative;
    text-decoration: none !important;
}

.button-big:hover { text-decoration: none; }
    
    /* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-isosceles {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:#000;
    background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}
.triangle-isosceles .red {
    
    color:#000;
    background:#e33100; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#e33100), to(#FD8867));
    background:-moz-linear-gradient(#e33100, #FD8867);
    background:-o-linear-gradient(#e33100, #FD8867);
    background:linear-gradient(#e33100, #FD8867);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}
/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-isosceles.top {
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
    background:-moz-linear-gradient(#f3961c, #f9d835);
    background:-o-linear-gradient(#f3961c, #f9d835);
    background:linear-gradient(#f3961c, #f9d835);
}

/* Variant : for left/right positioned triangle
------------------------------------------ */

.triangle-isosceles.left {
    margin-left:50px;
    background:#f3961c;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-isosceles.right {
    margin-right:50px;
    background:#f3961c;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.triangle-isosceles:after {
    content:"";
    position:absolute;
    bottom:-15px; /* value = - border-top-width - border-bottom-width */
    left:50px; /* controls horizontal position */
    border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
    border-style:solid;
    border-color:#f3961c transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* Variant : top
------------------------------------------ */

.triangle-isosceles.top:after {
    top:-15px; /* value = - border-top-width - border-bottom-width */
    right:50px; /* controls horizontal position */
    bottom:auto;
    left:auto;
    border-width:0 15px 15px; /* vary these values to change the angle of the vertex */
    border-color:#f3961c transparent;
}

/* Variant : left
------------------------------------------ */

.triangle-isosceles.left:after {
    top:16px; /* controls vertical position */
    left:-50px; /* value = - border-left-width - border-right-width */
    bottom:auto;
    border-width:10px 50px 10px 0;
    border-color:transparent #f3961c;
}

/* Variant : right
------------------------------------------ */

.triangle-isosceles.right:after {
    top:16px; /* controls vertical position */
    right:-50px; /* value = - border-left-width - border-right-width */
    bottom:auto;
    left:auto;
    border-width:10px 0 10px 50px;
    border-color:transparent #f3961c;
}


/* ============================================================================================================================
== BUBBLE WITH A RIGHT-ANGLED TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-right {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:#fff;
    background:#075698; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
    background:-moz-linear-gradient(#2e88c4, #075698);
    background:-o-linear-gradient(#2e88c4, #075698);
    background:linear-gradient(#2e88c4, #075698);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-right.top {
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
    background:-moz-linear-gradient(#075698, #2e88c4);
    background:-o-linear-gradient(#075698, #2e88c4);
    background:linear-gradient(#075698, #2e88c4);
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-right.left {
    margin-left:40px;
    background:#075698;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-right.right {
    margin-right:40px;
    background:#075698;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-right:after {
    content:"";
    position:absolute;
    bottom:-20px; /* value = - border-top-width - border-bottom-width */
    left:50px; /* controls horizontal position */
    border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
    border-style:solid;
    border-color:#075698 transparent; 
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* Variant : top
------------------------------------------ */

.triangle-right.top:after {
    top:-20px; /* value = - border-top-width - border-bottom-width */
    right:50px; /* controls horizontal position */
    bottom:auto;
    left:auto;
    border-width:20px 20px 0 0; /* vary these values to change the angle of the vertex */
    border-color:transparent #075698; 
}

/* Variant : left
------------------------------------------ */

.triangle-right.left:after {
    top:16px; 
    left:-40px; /* value = - border-left-width - border-right-width */
    bottom:auto;
    border-width:15px 40px 0 0; /* vary these values to change the angle of the vertex */
    border-color:transparent #075698; 
}

/* Variant : right
------------------------------------------ */

.triangle-right.right:after {
    top:16px; 
    right:-40px; /* value = - border-left-width - border-right-width */
    bottom:auto;
    left:auto;
    border-width:15px 0 0 40px; /* vary these values to change the angle of the vertex */
    border-color:transparent #075698 ; 
}


/* ============================================================================================================================
== BUBBLE WITH AN OBTUSE TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-obtuse {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:#fff;
    background:#c81e2b;
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f04349), to(#c81e2b));
    background:-moz-linear-gradient(#f04349, #c81e2b);
    background:-o-linear-gradient(#f04349, #c81e2b);
    background:linear-gradient(#f04349, #c81e2b);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-obtuse.top {
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#c81e2b), to(#f04349));
    background:-moz-linear-gradient(#c81e2b, #f04349);
    background:-o-linear-gradient(#c81e2b, #f04349);
    background:linear-gradient(#c81e2b, #f04349);
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-obtuse.left {
    margin-left:50px;
    background:#c81e2b;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-obtuse.right {
    margin-right:50px;
    background:#c81e2b;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates the wider right-angled triangle */
.triangle-obtuse:before {
    content:"";
    position:absolute;
    bottom:-20px; /* value = - border-top-width - border-bottom-width */
    left:60px; /* controls horizontal position */
    border:0;
    border-right-width:30px; /* vary this value to change the angle of the vertex */
    border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */
    border-style:solid;
    border-color:transparent #c81e2b;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the narrower right-angled triangle */
.triangle-obtuse:after {
    content:"";
    position:absolute;
    bottom:-20px; /* value = - border-top-width - border-bottom-width */
    left:80px; /* value = (:before's left) + (:before's border-right/left-width)  - (:after's border-right/left-width) */
    border:0;
    border-right-width:10px; /* vary this value to change the angle of the vertex */
    border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
    border-style:solid;
    border-color:transparent #fff;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* Variant : top
------------------------------------------ */

.triangle-obtuse.top:before {
    top:-20px; /* value = - border-top-width - border-bottom-width */
    bottom:auto;
    left:auto;
    right:60px; /* controls horizontal position */
    border:0;
    border-left-width:30px; /* vary this value to change the width of the triangle */
    border-top-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */
    border-color:transparent #c81e2b;
}

.triangle-obtuse.top:after {
    top:-20px; /* value = - border-top-width - border-bottom-width */
    bottom:auto;
    left:auto;
    right:80px; /* value = (:before's right) + (:before's border-right/left-width)  - (:after's border-right/left-width) */
    border-width:0;
    border-left-width:10px; /* vary this value to change the width of the triangle */
    border-top-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
    border-color:transparent #fff;
}

/* Variant : left
------------------------------------------ */

.triangle-obtuse.left:before {
    top:15px; /* controls vertical position */
    bottom:auto;
    left:-50px; /* value = - border-left-width - border-right-width */
    border:0;
    border-bottom-width:30px; /* vary this value to change the height of the triangle */
    border-left-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :after */
    border-color:#c81e2b transparent;
}

.triangle-obtuse.left:after {
    top:35px; /* value = (:before's top) + (:before's border-top/bottom-width)  - (:after's border-top/bottom-width) */
    bottom:auto;
    left:-50px; /* value = - border-left-width - border-right-width */
    border:0;
    border-bottom-width:10px; /* vary this value to change the height of the triangle */
    border-left-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :before */
    border-color:#fff transparent;
}

/* Variant : right
------------------------------------------ */

.triangle-obtuse.right:before {
    top:15px; /* controls vertical position */
    bottom:auto;
    left:auto;
    right:-50px; /* value = - border-left-width - border-right-width */
    border:0;
    border-bottom-width:30px; /* vary this value to change the height of the triangle */
    border-right-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :after */
    border-color:#c81e2b transparent;
}

.triangle-obtuse.right:after {
    top:35px; /* value = (:before's top) + (:before's border-top/bottom-width)  - (:after's border-top/bottom-width) */
    bottom:auto;
    right:-50px; /* value = - border-left-width - border-right-width */
    left:auto;
    border:0;
    border-bottom-width:10px; /* vary this value to change the height of the triangle */
    border-right-width:50px; /* vary this value to change the width of the triangle. must be equal to the corresponding value in :before */
    border-color:#fff transparent;
}


/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    border:5px solid #5a8f00;
    color:#333;
    background:#fff;
    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}
.triangle-border.red {
    border:5px solid #e33100;
    color:#333;
}
.triangle-border.blue {
    border:5px solid #2daebf;
    color:#333;
}
.triangle-border.green {
    border:5px solid #c3fad0;
    color:#333;
}
.triangle-border.yellow {
    border:5px solid #ffb515;
    color:#333;
}
.triangle-border.black {
    border:5px solid #222;
    color:#333;
}
.triangle-border.white {
    border:5px solid #e1e1e1;
    color:#333;
}
.triangle-border.gray {
    border:5px solid #333;
    color:#333;
}
.triangle-border.orange {
    border:5px solid #ff5c00;
    color:#333;
}
.triangle-border.magenta {
    border:5px solid #a9014b;
    color:#333;
}


/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
    margin-left:30px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
    margin-right:30px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border:before {
    content:"";
    position:absolute;
    bottom:-20px; /* value = - border-top-width - border-bottom-width */
    left:40px; /* controls horizontal position */
    border-width:20px 20px 0;
    border-style:solid;
    border-color:#5a8f00 transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

.triangle-border.red:before {
    border-color:#e33100 transparent;
}.triangle-border.blue:before {
    border-color:#2daebf transparent;
}
.triangle-border.green:before {
    border-color:#c3fad0 transparent;
}
.triangle-border.black:before {
    border-color:#222 transparent;
}
.triangle-border.gray:before {
    border-color:#333 transparent;
}
.triangle-border.white:before {
    border-color:#e1e1e1 transparent;
}
.triangle-border.orange:before {
    border-color:#ff5c00 transparent;
}
.triangle-border.yellow:before {
    border-color:#ffb515 transparent;
}
.triangle-border.magenta:before {
    border-color:#a9014b transparent;
}

/* creates the smaller  triangle */
.triangle-border:after {
    content:"";
    position:absolute;
    bottom:-13px; /* value = - border-top-width - border-bottom-width */
    left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:13px 13px 0;
    border-style:solid;
    border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
    top:-20px; /* value = - border-top-width - border-bottom-width */
    bottom:auto;
    left:auto;
    right:40px; /* controls horizontal position */
    border-width:0 20px 20px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
    top:-13px; /* value = - border-top-width - border-bottom-width */
    bottom:auto;
    left:auto;
    right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
    border-width:0 13px 13px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
    top:10px; /* controls vertical position */
    bottom:auto;
    left:-30px; /* value = - border-left-width - border-right-width */
    border-width:15px 30px 15px 0;
    border-color:transparent #5a8f00;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
    top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
    bottom:auto;
    left:-21px; /* value = - border-left-width - border-right-width */
    border-width:9px 21px 9px 0;
    border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
    top:10px; /* controls vertical position */
    bottom:auto;
    left:auto;
    right:-30px; /* value = - border-left-width - border-right-width */
    border-width:15px 0 15px 30px;
    border-color:transparent #5a8f00;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
    top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
    bottom:auto;
    left:auto;
    right:-21px; /* value = - border-left-width - border-right-width */
    border-width:9px 0 9px 21px;
    border-color:transparent #fff;
}


/* ============================================================================================================================
== SPEECH BUBBLE ICON
** ============================================================================================================================ */

.example-commentheading {
    position:relative;
    padding:0;
    color:#b513af;
}

/* creates the rectangle */
.example-commentheading:before {
    content:"";
    position:absolute;
    top:9px;
    left:-25px;
    width:15px;
    height:10px;
    background:#b513af;
    /* css3 */
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}

/* creates the triangle */
.example-commentheading:after {
    content:"";
    position:absolute;
    top:15px;
    left:-19px;
    border:4px solid transparent;
    border-left-color:#b513af;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}


/* ============================================================================================================================
== BLOCKQUOTE WITH RIGHT-ANGLED TRIANGLE
** ============================================================================================================================ */

.example-right {
    position:relative;
    padding:15px 30px;
    margin:0;
    color:#fff;
    background:#5a8f00; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
    background:-moz-linear-gradient(#b8db29, #5a8f00);
    background:-o-linear-gradient(#b8db29, #5a8f00);
    background:linear-gradient(#b8db29, #5a8f00);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-right + p {margin:15px 0 2em 85px; font-style:italic;}

/* creates the triangle */
.example-right:after {
    content:"";
    position:absolute;
    bottom:-50px;
    left:50px;
    border-width:0 20px 50px 0px;
    border-style:solid;
    border-color:transparent #5a8f00;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}


/* ============================================================================================================================
== BLOCKQUOTE WITH OBTUSE TRIANGLE
** ============================================================================================================================ */

.example-obtuse {
    position:relative;
    padding:15px 30px;
    margin:0;
    color:#000;
    background:#f3961c; /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
    /* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
    -webkit-border-top-left-radius:25px 50px;
    -webkit-border-top-right-radius:25px 50px;
    -webkit-border-bottom-right-radius:25px 50px;
    -webkit-border-bottom-left-radius:25px 50px;
    -moz-border-radius:25px / 50px;
    border-radius:25px / 50px;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-obtuse + p {margin:10px 150px 2em 0; text-align:right; font-style:italic;}

/* creates the larger triangle */
.example-obtuse:before {
    content:"";
    position:absolute;
    bottom:-30px;
    right:80px;
    border-width:0 0 30px 50px;
    border-style:solid;
    border-color:transparent #f3961c;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the smaller triangle */
.example-obtuse:after {
    content:"";
    position:absolute;
    bottom:-30px;
    right:110px; 
    border-width:0 0 30px 20px;
    border-style:solid;
    border-color:transparent #fff;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}


/* ============================================================================================================================
== TWITTER
** ============================================================================================================================ */

.example-twitter {
    position:relative;
    padding:15px;
    margin:100px 0 0.5em;
    color:#333;
    background:#eee;
    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

.example-twitter p {font-size:28px; line-height:1.25em;}

/* this isn't necessary, just saves me having to edit the HTML of the demo */
.example-twitter:before {
    content:url(twitter-logo.gif);
    position:absolute;
    top:-60px;
    left:0;
    width:155px;
    height:36px;
    /* reduce the damage in FF3.0 */
    display:block; 
}

/* creates the triangle */
.example-twitter:after {
    content:"";
    position:absolute;
    top:-30px;
    left:50px;
    border:15px solid transparent;
    border-bottom-color:#eee;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-twitter + p {padding-left:15px; font:14px Arial, sans-serif;}


/* ============================================================================================================================
== NUMBER
** ============================================================================================================================ */

.example-number {
    position:relative;
    width:200px;
    height:200px;
    margin:50px 0 200px;
    text-align:center;
    font:140px/200px Arial, sans-serif;
    color:#fff;
    background:#C91F2C;
}

/* creates the larger triangle */
.example-number:before {
    content:"";
    position:absolute;
    bottom:-140px;
    right:0;
    border-width:0 0 140px 140px;
    border-style:solid;
    border-color:transparent #C91F2C;
}

/* creates the larger triangle */
.example-number:after {
    content:"";
    position:absolute;
    bottom:-140px;
    right:85px; 
    border-width:0 0 140px 55px;
    border-style:solid;
    border-color:transparent #fff;
}


/* ============================================================================================================================
== PINCHED SPEECH BUBBLE (more CSS3)
** ============================================================================================================================ */

.pinched {
    position:relative;
    padding:15px;
    margin:50px 0 3em;
    text-align:center;
    color:#fff;

    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}
.pinched.red {
    background: #e33100;
    color:#333;
}
.pinched.blue {
    background: #2daebf;
    color:#333;
}
.pinched.green {
    background: #c3fad0;
    color:#333;
}
.pinched.yellow {
    background: #ffb515;
    color:#333;
}
.pinched.black {
    background: #222;
    color:#333;
}
.pinched.white {
    background: #e1e1e1;
    color:#333;
}
.pinched.gray {
    background: #333;
    color:#333;
}
.pinched.orange {
    background: #ff5c00;
    color:#333;
}
.pinched.magenta {
    background: #a9014b;
    color:#333;
}
/* creates a rectangle of the colour wanted for the pointy bit */
.pinched:before {
    content:"";
    position:absolute;
    top:-20px;
    left:50%;
    width:100px;
    height:20px;
    margin:0 0 0 -50px;
    background:#e33100;
}
.pinched.red:before {
    background:#e33100;
}.pinched.blue:before {
    background:#2daebf transparent;
}
.pinched.green:before {
    background:#c3fad0 transparent;
}
.pinched.black:before {
    background:#222 transparent;
}
.pinched.gray:before {
    background:#333 transparent;
}
.pinched.white:before {
    background:#e1e1e1 transparent;
}
.pinched.orange:before {
    background:#ff5c00 transparent;
}
.pinched.yellow:before {
    background:#ffb515 transparent;
}
.pinched.magenta:before {
    background:#a9014b transparent;
}
/* creates a rounded rectangle to cover part of the rectangle generated above */
.pinched:after {
    content:"";
    position:absolute;
    top:-20px;
    left:0;
    width:50%;
    height:20px;
    background:#fff;
    /* css3 */
    -webkit-border-bottom-right-radius:15px;
    -moz-border-radius-bottomright:15px;
    border-bottom-right-radius:15px;
}

/* creates the other rounded rectangle */
.pinched > :first-child:before {
    content:""; 
    position:absolute; 
    top:-20px; 
    right:0; 
    width:50%; 
    height:20px; 
    background:#fff;
    /* css3 */
    -webkit-border-bottom-left-radius:15px;
    -moz-border-radius-bottomleft:15px;
    border-bottom-left-radius:15px;
}


/* ============================================================================================================================
== OVAL SPEECH BUBBLE (more CSS3)
** ============================================================================================================================ */

.oval-speech {
    position:relative;

    padding:50px 40px;
    margin:1em auto 50px;
    text-align:center;
    color:#fff; 
    background:#5a8f00;
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
    background:-moz-linear-gradient(#b8db29, #5a8f00);
    background:-o-linear-gradient(#b8db29, #5a8f00);
    background:linear-gradient(#b8db29, #5a8f00);
    /*
    NOTES:
    -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
    -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
    Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
    */
    -webkit-border-top-left-radius:220px 120px;
    -webkit-border-top-right-radius:220px 120px;
    -webkit-border-bottom-right-radius:220px 120px;
    -webkit-border-bottom-left-radius:220px 120px;
    -moz-border-radius:220px / 120px;
    border-radius:220px / 120px;
}

.oval-speech p {font-size:1.25em;}

/* creates part of the curve */
.oval-speech:before {
    content:"";
    position:absolute;
    z-index:1;
    bottom:-30px;
    right:50%;
    height:30px;
    border-right:60px solid #5a8f00;
    background:#5a8f00; /* need this for webkit - bug in handling of border-radius */
    /* css3 */
    -webkit-border-bottom-right-radius:80px 50px;
    -moz-border-radius-bottomright:80px 50px;
    border-bottom-right-radius:80px 50px;
    /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
    -webkit-transform:translate(0, -2px);
    -moz-transform:translate(0, -2px);
    -ms-transform:translate(0, -2px);
    -o-transform:translate(0, -2px);
    transform:translate(0, -2px);
}

/* creates part of the curved pointy bit */
.oval-speech:after {
    content:"";
    position:absolute;
    z-index:1;
    bottom:-32px;
    right:50%;
    width:60px;
    height:30px;
    background:#fff;
    /* css3 */
    -webkit-border-bottom-right-radius:40px 50px; 
    -moz-border-radius-bottomright:40px 50px; 
    border-bottom-right-radius:40px 50px; 
    /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
    -webkit-transform:translate(-30px, -2px);
    -moz-transform:translate(-30px, -2px);
    -ms-transform:translate(-30px, -2px);
    -o-transform:translate(-30px, -2px);
    transform:translate(-30px, -2px);
}


/* ============================================================================================================================
== OVAL THOUGHT BUBBLE (more CSS3)
** ============================================================================================================================ */

.oval-thought {
    position:relative;
    width:270px;
    padding:50px 40px;
    margin:1em auto 80px;
    text-align:center;
    color:#fff; 
    background:#075698;
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
    background:-moz-linear-gradient(#2e88c4, #075698);
    background:-o-linear-gradient(#2e88c4, #075698);
    background:linear-gradient(#2e88c4, #075698);
    /*
    NOTES:
    -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
    -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
    Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
    */
    -webkit-border-top-left-radius:220px 120px;
    -webkit-border-top-right-radius:220px 120px;
    -webkit-border-bottom-right-radius:220px 120px;
    -webkit-border-bottom-left-radius:220px 120px;
    -moz-border-radius:220px / 120px;
    border-radius:220px / 120px;
}

.oval-thought p {font-size:1.25em;}

/* creates the larger circle */
.oval-thought:before {
    content:"";
    position:absolute;
    bottom:-20px;
    left:50px;
    width:30px;
    height:30px;
    background:#075698;
    /* css3 */
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
}

/* creates the smaller circle */
.oval-thought:after {
    content:"";
    position:absolute;
    bottom:-30px;
    left:30px;
    width:15px;
    height:15px;
    background:#075698;
    /* css3 */
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
}

/* ============================================================================================================================
== OVAL SPEECH BUBBLE WITH QUOTATION MARKS (more CSS3)
** ============================================================================================================================ */

.oval-quotes {
    position:relative;
    width:400px;
    height:350px;
    margin:2em auto 10px;
    color:#000;
    background:#ffed26;
    /* css3 */
    /*
    NOTES:
    -webkit-border-radius:Apx Bpx; // produces oval in safari 4 and chrome 4
    -webkit-border-radius:Apx / Bpx; // produces oval in chrome 4 (again!) but not supported in safari 4
    Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
    */
    -webkit-border-top-left-radius:400px 350px;
    -webkit-border-top-right-radius:400px 350px;
    -webkit-border-bottom-right-radius:400px 350px;
    -webkit-border-bottom-left-radius:400px 350px;
    -moz-border-radius:400px / 350px;
    border-radius:400px / 350px;
}

/* creates opening quotation mark */
.oval-quotes:before {
    content:"\201C"; 
    position:absolute; 
    z-index:1; 
    top:20px; 
    left:20px; 
    font:80px/1 Georgia, serif;
    color:#ffed26;
}

/* creates closing quotation mark */
.oval-quotes:after {
    content:"\201D"; 
    position:absolute; 
    z-index:1; 
    bottom:0; 
    right:20px; 
    font:80px/0.25 Georgia, serif;
    color:#ffed26;
}

.oval-quotes p {
    width:250px;
    height:250px;
    padding:50px 0 0;
    margin:0 auto;
    text-align:center;
    font-size:35px;
}

/* creates smaller curve */
.oval-quotes p:before {
    content:"";
    position:absolute;
    z-index:-1;
    bottom:-30px;
    right:55%;
    width:180px; /* wider than necessary to make it look a bit better in IE8 */
    height:60px;
    background:#fff; /* need this for webkit - bug in handling of border-radius */
    /* css3 */
    -webkit-border-bottom-right-radius:40px 50px; 
    -moz-border-radius-bottomright:40px 50px; 
    border-bottom-right-radius:40px 50px; 
    /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
    -webkit-transform:translate(-30px, -2px);
    -moz-transform:translate(-30px, -2px);
    -ms-transform:translate(-30px, -2px);
    -o-transform:translate(-30px, -2px);
    transform:translate(-30px, -2px);
}

/* creates larger curve */
.oval-quotes p:after {
    content:"";
    position:absolute;
    z-index:-2;
    bottom:-30px;
    right:25%;
    height:80px;
    border-right:200px solid #ffed26;
    background:#ffed26; /* need this for webkit - bug in handling of border-radius */
    /* css3 */
    -webkit-border-bottom-right-radius:200px 100px;
    -moz-border-radius-bottomright:200px 100px;
    border-bottom-right-radius:200px 100px;
    /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
    -webkit-transform:translate(0, -2px);
    -moz-transform:translate(0, -2px);
    -ms-transform:translate(0, -2px);
    -o-transform:translate(0, -2px);
    transform:translate(0, -2px);
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

.oval-quotes + p {
    position:relative; /* part of the IE8 width compromise */
    width:150px;
    margin:0 0 2em;
    font-size:18px;
    font-weight:bold;
}


/* ============================================================================================================================
== RECTANGLE-BORDER STYLE WITH CURVE
** ============================================================================================================================ */

.rectangle-speech-border {
    position:relative; 
    padding:50px 15px; 
    margin:1em 0 3em;
    border:10px solid #5a8f00; 
    text-align:center; 
    color:#333;
    background:#fff; 
    /* css3 */
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}

/* creates larger curve */
.rectangle-speech-border:before {
    content:""; 
    position:absolute; 
    z-index:10; 
    bottom:-40px; 
    left:50px; 
    width:50px; 
    height:30px;
    border-style:solid; 
    border-width:0 10px 10px 0; 
    border-color:#5a8f00; 
    background:transparent;
    /* css3 */
    -webkit-border-bottom-right-radius:80px 50px;
    -moz-border-radius-bottomright:80px 50px;
    border-bottom-right-radius:80px 50px;
    /* reduce the damage in FF3.0 */
    display:block; 
}

/* creates smaller curve */
.rectangle-speech-border:after {
    content:""; 
    position:absolute; 
    z-index:10; 
    bottom:-40px; 
    left:50px; 
    width:20px; 
    height:30px; 
    border-style:solid; 
    border-width:0 10px 10px 0; 
    border-color:#5a8f00; 
    background:transparent;
    /* css3 */
    -webkit-border-bottom-right-radius:40px 50px; 
    -moz-border-radius-bottomright:40px 50px; 
    border-bottom-right-radius:40px 50px; 
    /* reduce the damage in FF3.0 */
    display:block; 
}

/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border > :first-child:before {
    content:""; 
    position:absolute; 
    bottom:-40px; 
    left:45px; 
    width:10px; 
    height:10px;
    background:#5a8f00;
    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border > :first-child:after {
    content:""; 
    position:absolute; 
    bottom:-10px; 
    left:76px; 
    width:24px; 
    height:15px; 
    background:#fff;
}

/* ============================================================================================================================
== OVER SPEECH BUBBLE, EMPTY, WITH BORDER (more CSS3)
** ============================================================================================================================ */

.oval-speech-border {
    position:relative; 
    padding:70px 30px;
    margin:1em auto 60px;
    border:10px solid #f3961c; 
    text-align:center;
    color:#333; 
    background:#fff;
    /* css3 */
    /*
    NOTES:
    -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
    -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
    Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
    */
    -webkit-border-top-left-radius:240px 140px;
    -webkit-border-top-right-radius:240px 140px;
    -webkit-border-bottom-right-radius:240px 140px;
    -webkit-border-bottom-left-radius:240px 140px;
    -moz-border-radius:240px / 140px;
    border-radius:240px / 140px;
}

/* creates larger curve */
.oval-speech-border:before {
    content:""; 
    position:absolute; 
    z-index:2; 
    bottom:-40px; 
    right:50%; 
    width:50px; 
    height:30px;
    border-style:solid;
    border-width:0 10px 10px 0;
    border-color:#f3961c;
    margin-right:-10px;
    background:transparent;
    /* css3 */
    -webkit-border-bottom-right-radius:80px 50px;
    -moz-border-radius-bottomright:80px 50px;
    border-bottom-right-radius:80px 50px;
    /* reduce the damage in FF3.0 */
    display:block; 
}

/* creates smaller curve */
.oval-speech-border:after {
    content:""; 
    position:absolute; 
    z-index:2; 
    bottom:-40px; 
    right:50%; 
    width:20px; 
    height:31px; 
    border-style:solid;
    border-width:0 10px 10px 0;
    border-color:#f3961c;
    margin-right:20px;
    background:transparent;
    /* css3 */
    -webkit-border-bottom-right-radius:40px 50px; 
    -moz-border-radius-bottomright:40px 50px; 
    border-bottom-right-radius:40px 50px; 
    /* reduce the damage in FF3.0 */
    display:block; 
}

/* creates a small circle to produce a rounded point where the two curves meet */
.oval-speech-border > :first-child:before {
    content:""; 
    position:absolute; 
    z-index:1; 
    bottom:-40px; 
    right:50%; 
    width:10px; 
    height:10px;
    margin-right:45px;
    background:#f3961c;
    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

/* creates a white rectangle to cover part of the oval border*/
.oval-speech-border > :first-child:after {
    content:""; 
    position:absolute; 
    z-index:1; 
    bottom:-10px; 
    right:50%; 
    width:30px; 
    height:15px; 
    background:#fff;
}

/* ============================================================================================================================
== OVER THOUGHT BUBBLE, EMPTY, WITH BORDER (more CSS3)
** ============================================================================================================================ */

.oval-thought-border {
    position:relative; 
    padding:70px 30px;
    margin:1em auto 80px;
    border:10px solid #c81e2b; 
    text-align:center;
    color:#333; 
    background:#fff;
    /* css3 */
    /*
    NOTES:
    -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
    -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
    Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
    */
    -webkit-border-top-left-radius:240px 140px;
    -webkit-border-top-right-radius:240px 140px;
    -webkit-border-bottom-right-radius:240px 140px;
    -webkit-border-bottom-left-radius:240px 140px;
    -moz-border-radius:240px / 140px;
    border-radius:240px / 140px;
}

/* creates the larger circle */
.oval-thought-border:before {
    content:""; 
    position:absolute; 
    z-index:10; 
    bottom:-40px; 
    right:100px; 
    width:50px; 
    height:50px;
    border:10px solid #c81e2b;
    background:#fff;
    /* css3 */
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    /* reduce the damage in FF3.0 */
    display:block; 
}

/* creates the smaller circle */
.oval-thought-border:after {
    content:""; 
    position:absolute; 
    z-index:10; 
    bottom:-60px; 
    right:50px; 
    width:25px; 
    height:25px; 
    border:10px solid #c81e2b;
    background:#fff;
    /* css3 */
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    border-radius:25px;
    /* reduce the damage in FF3.0 */
    display:block; 
}
/*** Notifications ***/
.scp_notification{display:block;clear:both;position: relative;margin-bottom:15px;padding:10px 10px 10px 40px;min-height:20px;font-family:Arial,Tahoma,sans-serif;font-size:12px;font-weight:normal;line-height:20px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;-moz-box-shadow:0 1px 0 0 rgba(255,255,255,0.5) inset;-webkit-box-shadow:0 1px 0 0 rgba(255,255,255,0.5) inset;-o-box-shadow:0 1px 0 0 rgba(255,255,255,0.5) inset;box-shadow:0 1px 0 0 rgba(255,255,255,0.5) inset}.icon{position:absolute;background-image:url(images/notification.png);background-repeat:no-repeat;height:15px;top:14px}/* Bold Text */.scp_notification span{font-weight:bold;margin-right:10px}/* Notification Close Button */.scp_notification .close-notification{position:absolute;width:5px;height:6px;top:18px;right:10px;cursor:pointer;background-image:url(images/close.png);background-repeat:no-repeat}/* Shadow */.scp_notification:after{content:"";position:absolute;width:200px;height:25px;top:0;background:url(images/shadow.png) top center no-repeat}
/* Success */.scp_notify_success{border:1px solid #accc5d;color:#70892b;background-color:#c8e185;background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#d0e98e),color-stop(100%,#c1da7f));background-image:-webkit-linear-gradient(#d0e98e,#c1da7f);background-image:-moz-linear-gradient(#d0e98e,#c1da7f);background-image:-o-linear-gradient(#d0e98e,#c1da7f);background-image:linear-gradient(#d0e98e,#c1da7f);-moz-text-shadow:0px 1px rgba(255,255,255,0.3);text-shadow:0px 1px rgba(255,255,255,0.3)}.scp_notify_success .icon{width:14px;left:16px;background-position:0 -15px}.scp_notify_success .close-notification{background-position:0 -6px}
/* Fail */.scp_notify_fail{border:1px solid #dc4e4d;color:#b52525;background-color:#ec8282;background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#f48888),color-stop(100%,#e17575));background-image:-webkit-linear-gradient(#f48888,#e17575);background-image:-moz-linear-gradient(#f48888,#e17575);background-image:-o-linear-gradient(#f48888,#e17575);background-image:linear-gradient(#f48888,#e17575);-moz-text-shadow:0px 1px rgba(255,255,255,0.2);text-shadow:0px 1px rgba(255,255,255,0.2)}.scp_notify_fail .icon{width:13px;left:16px;background-position:0 0}.scp_notify_fail .close-notification{background-position:0 0}
/* Information */.scp_notify_info{border:1px solid #69c0ca;color:#3d8d98;background-color:#8aced6;background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#99e2eb),color-stop(100%,#79c6cd));background-image:-webkit-linear-gradient(#99e2eb,#79c6cd);background-image:-moz-linear-gradient(#99e2eb,#79c6cd);background-image:-o-linear-gradient(#99e2eb,#79c6cd);background-image:linear-gradient(#99e2eb,#79c6cd);-moz-text-shadow:0px 1px rgba(255,255,255,0.2);text-shadow:0px 1px rgba(255,255,255,0.2)}.scp_notify_info .icon{width:6px;left:19px;background-position:0 -30px}.scp_notify_info .close-notification{background-position:0 -12px}/* Warning */.scp_notify_warning{border:1px solid #f9b516;color:#c2721b;background-color:#fbb160;background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#ffd57f),color-stop(100%,#ffa544));background-image:-webkit-linear-gradient(#ffd57f,#ffa544);background-image:-moz-linear-gradient(#ffd57f,#ffa544);background-image:-o-linear-gradient(#ffd57f,#ffa544);background-image:linear-gradient(#ffd57f,#ffa544);-moz-text-shadow:0px 1px rgba(255,255,255,0.2);text-shadow:0px 1px rgba(255,255,255,0.2)}.scp_notify_warning .icon{width:14px;left:16px;top:13px;background-position:0 -45px}.scp_notify_warning .close-notification{background-position:0 -18px}/* Edit */.scp_notify_edit{border:1px solid #e9c95f;color:#ae8500;background-color:#f3dc8f;background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#ffeaa7),color-stop(100%,#f3d573));background-image:-webkit-linear-gradient(#ffeaa7,#f3d573);background-image:-moz-linear-gradient(#ffeaa7,#f3d573);background-image:-o-linear-gradient(#ffeaa7,#f3d573);background-image:linear-gradient(#ffeaa7,#f3d573);-moz-text-shadow:0px 1px rgba(255,255,255,0.2);text-shadow:0px 1px rgba(255,255,255,0.2)}.scp_notify_edit .icon{width:13px;left:16px;top:13px;background-position:0 -60px}.scp_notify_edit .close-notification{background-position:0 -18px}/* Lock */.scp_notify_lock{border:1px solid #CCC;color:#666;background-color:#e8e8e8;background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#f4f4f4),color-stop(100%,#e0e0e0));background-image:-webkit-linear-gradient(#f4f4f4,#e0e0e0);background-image:-moz-linear-gradient(#f4f4f4,#e0e0e0);background-image:-o-linear-gradient(#f4f4f4,#e0e0e0);background-image:linear-gradient(#f4f4f4,#e0e0e0);-moz-text-shadow:0px 1px rgba(255,255,255,0.2);text-shadow:0px 1px rgba(255,255,255,0.2)}.scp_notify_lock .icon{width:11px;left:17px;top:13px;background-position:0 -75px}.scp_notify_lock .close-notification{background-position:0 -24px}/* Tip */.scp_notify_tip{border:1px solid #e6b96f;color:#b1802f;background-color:#f5dcb2;background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#ffedcf),color-stop(100%,#f8d69e));background-image:-webkit-linear-gradient(#ffedcf,#f8d69e);background-image:-moz-linear-gradient(#ffedcf,#f8d69e);background-image:-o-linear-gradient(#ffedcf,#f8d69e);background-image:linear-gradient(#ffedcf,#f8d69e);-moz-text-shadow:0px 1px rgba(255,255,255,0.2);text-shadow:0px 1px rgba(255,255,255,0.2)}.scp_notify_tip .icon{width:9px;left:18px;top:12px;background-position:0 -90px}.scp_notify_tip .close-notification{background-position:0 -30px}/* Download */.scp_notify_download{border:1px solid #3178c0;color:#0c4fa3;background-color:#6dacea;background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#8ed0fa),color-stop(100%,#4e95dc));background-image:-webkit-linear-gradient(#8ed0fa,#4e95dc);background-image:-moz-linear-gradient(#8ed0fa,#4e95dc);background-image:-o-linear-gradient(#8ed0fa,#4e95dc);background-image:linear-gradient(#8ed0fa,#4e95dc);-moz-text-shadow:0px 1px rgba(255,255,255,0.2);text-shadow:0px 1px rgba(255,255,255,0.2)}.scp_notify_download .icon{width:10px;left:18px;background-position:0 -105px}.scp_notify_download .close-notification{background-position:0 -36px}/* Chat */.scp_notify_chat{border:1px solid #5d902f;color:#366f11;background-color:#89bc5a;background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#8dcb3d),color-stop(100%,#74a547));background-image:-webkit-linear-gradient(#8dcb3d,#74a547);background-image:-moz-linear-gradient(#8dcb3d,#74a547);background-image:-o-linear-gradient(#8dcb3d,#74a547);background-image:linear-gradient(#8dcb3d,#74a547);-moz-text-shadow:0px 1px rgba(255,255,255,0.2);text-shadow:0px 1px rgba(255,255,255,0.2)}.scp_notify_chat .icon{width:14px;left:16px;background-position:0 -120px}.scp_notify_chat .close-notification{background-position:0 -42px}/* Task */.scp_notify_task{border:1px solid #71502b;color:#432c12;background-color:#92724e;background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#a58868),color-stop(100%,#886640));background-image:-webkit-linear-gradient(#a58868,#886640);background-image:-moz-linear-gradient(#a58868,#886640);background-image:-o-linear-gradient(#a58868,#886640);background-image:linear-gradient(#a58868,#886640);-moz-text-shadow:0px 1px rgba(255,255,255,0.2);text-shadow:0px 1px rgba(255,255,255,0.2)}.scp_notify_task .icon{width:14px;left:16px;top:13px;background-position:0 -135px}.scp_notify_task .close-notification{background-position:0 -48px}

/* Tooltip */

.tooltip {
            border-bottom: 1px dotted #000000; color: #000000; outline: none;
            cursor: help; text-decoration: none;
            position: relative;
        }
        .scp_tooltip span {
            margin-left: -999em;
            position: absolute;
        }
        .scp_tooltip:hover span {
            border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            font-family: Calibri, Tahoma, Geneva, sans-serif;
            position: absolute; left: 1em; top: 2em; z-index: 99;
            margin-left: 0; width: 250px;
        }
        .scp_tooltip:hover img {
            border: 0; margin: -10px 0 0 -55px;
            float: left; position: absolute;
        }
        .scp_tooltip:hover em {
            font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
            display: block; padding: 0.2em 0 0.6em 0;
        }
        .scp_tooltip_classic { padding: 0.8em 1em; }
        .custom { padding: 0.5em 0.8em 0.8em 2em; }
        * html a:hover { background: transparent; }
        .scp_tooltip_classic {background: #FFFFAA; border: 1px solid #FFAD33; }
        .critical { background: #FFCCAA; border: 1px solid #FF3334;    }
        .help { background: #9FDAEE; border: 1px solid #2BB0D7;    }
        .info { background: #9FDAEE; border: 1px solid #2BB0D7;    }
        .warning { background: #FFFFAA; border: 1px solid #FFAD33; }

/* Highlight Text */        
.scp_highlight{padding:5px;margin:5px 0 5px 0;}
.scp_highlight_blue    {
    background: #a0c5ef!important;
    color: #333!important;
}
.scp_highlight_red    {
    background: #eba7a7!important;
}
.scp_highlight_yellow    {
    background: #ffd149!important;
    color: #666!important;
}
.scp_highlight_green    {
    background: #c3fad0!important;
    color: #666!important;
}
.scp_highlight_magenta {
    background-color: #a9014b!important;
    color: #f0f0f0!important;
    }
.scp_highlight_orange    {
    background: #ffa440!important;
    color: #f0f0f0!important;
}
.scp_highlight_white    {
    background: #e7e7e7!important;
    color: #666!important;
}
.scp_highlight_gray, .scp_highlight_    {
    background: #c1c1c1;
    color: #333;
}
.scp_highlight_black    {
    background: #515151!important;
    color: #f0f0f0!important;
}

/* Gallery */

/*Make sure your page contains a valid doctype at the top*/
#scp_gallery_simple{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid darkred;
}

#scp_gallery_simple .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}
.scp_gallery{    
        margin:0 auto;
        position:relative;
        text-align:left;
        
        margin-bottom:2em;
        }
.scp_dropcap {
    color:#888888;
    float:left;
    font-size:3.571em;
    line-height:0.76em;
    padding:0.04em 0.12em 0 0;
}

/* Colors ---------- */
    .scp_blue {
    color: #2daebf;
    }
    .scp_red {
    color: #e33100;
    }
    .scp_green {
    color: #c3fad0;
    }
    .scp_magenta {
    color: #a9014b;
    }
    .scp_orange {
    color: #ff5c00;
    }
    .scp_yellow {
    color: #ffb515;
    }
    .scp_black {
    color: #222;
    }
    .scp_gray {
    color: #333;
    }
    .scp_white {
    color: #e1e1e1;
    }