/* 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(//hurra-draussen.de/wp-content/plugins/short-code-press/css/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(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/accept.png) no-repeat top left;}
.scp_button_add span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/add.png) no-repeat top left;}
.scp_button_anchor span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/anchor.png) no-repeat top left;}
.scp_button_cancel span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/cancel.png) no-repeat top left;}
.scp_button_clock span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/clock.png) no-repeat top left;}
.scp_button_coins span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/coins.png) no-repeat top left;}
.scp_button_delete span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/delete.png) no-repeat top left;}
.scp_button_heart span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/heart.png) no-repeat top left;}
.scp_button_hourglass span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/hourglass.png) no-repeat top left;}
.scp_button_house span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/house.png) no-repeat top left;}
.scp_button_info span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/information.png) no-repeat top left;}
.scp_button_lightbulb span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/lightbulb.png) no-repeat top left;}
.scp_button_lightning span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/lightning.png) no-repeat top left;}
.scp_button_lock span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/lock.png) no-repeat top left;}
.scp_button_palette span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/palette.png) no-repeat top left;}
.scp_button_refresh span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/refresh.png) no-repeat top left;}
.scp_button_switch span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/switch.png) no-repeat top left;}
.scp_button_asterisk span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/asterisk.png) no-repeat top left;}
.scp_button_bell span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/bell.png) no-repeat top left;}
.scp_button_bomb span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/bomb.png) no-repeat top left;}
.scp_button_bricks span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/bricks.png) no-repeat top left;}
.scp_button_briefcase span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/briefcase.png) no-repeat top left;}
.scp_button_cake span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/cake.png) no-repeat top left;}
.scp_button_color span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/color.png) no-repeat top left;}
.scp_button_disconnect span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/disconnect.png) no-repeat top left;}
.scp_button_door span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/door.png) no-repeat top left;}
.scp_button_download span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/download.png) no-repeat top left;}
.scp_button_emoticon span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/emoticon.png) no-repeat top left;}
.scp_button_feed span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/icons/feed.png) no-repeat top left;}
.scp_button_cart span{background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/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(//hurra-draussen.de/wp-content/plugins/short-code-press/css/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(//hurra-draussen.de/wp-content/plugins/short-code-press/css/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(//hurra-draussen.de/wp-content/plugins/short-code-press/css/images/close.png);background-repeat:no-repeat}/* Shadow */.scp_notification:after{content:"";position:absolute;width:200px;height:25px;top:0;background:url(//hurra-draussen.de/wp-content/plugins/short-code-press/css/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;}