/*!
/*    A.mphibio.us  1.0.1 - Blueworld theme
/*    Copyright 2014, @cliveMoore @Treefrog
/*    http://a.mphibio.us
/*    Free to use under the MIT license.
/*    http://www.opensource.org/licenses/mit-license.php
/*    02/27/2014
/*
/*    Based on the design wizardry
/*    of Jen Hawkyard @jezhawk
================================================== */

@font-face
{
    font-family: 'BLOKK';
    src: url('/fonts/blokk/BLOKKRegular.eot') format('embedded-opentype'),
         url('/fonts/blokk/BLOKKRegular.woff') format('woff'),
         url('/fonts/blokk/BLOKKRegular.ttf')  format('truetype'),
         url('/fonts/blokk/BLOKKRegular.svg') format('svg');
}

body
{
    background-image: url(../images/bgs/blueworldgrid.png);
    background-position: top left;
    background-repeat: repeat;
    font-family:
        "Helvetica Neue",
        Helvetica,
        "Lucida Grande",
        "Lucida Sans",
        Lucida,
        Arial,
        sans-serif;
    font-size: 1em;
}

menu
{
    margin: 0;
}

.layoutobj ::-webkit-input-placeholder {
   color: #fff;
}

.layoutobj :-moz-placeholder { /* Firefox 18- */
   color: #fff;
}

.layoutobj ::-moz-placeholder {  /* Firefox 19+  */
   color: #fff;
}

.layoutobj :-ms-input-placeholder {
   color: #fff;
}

input:-webkit-autofill
{
    background: transparent;
    background-image: none;
        -webkit-box-shadow: 0 0 0px 1000px rgb(189,223,255) inset;
}

#logo
{
    float: left;
}

#logo a
{
    display: inline-block;
    padding: 7px 5px 5px 10px;
}

/* Link-o-matic
================================================== */
a {
    /*hack to prevent dotted border in FF*/
    outline: 0px none !important;
    -moz-outline-style: 0px none !important;
}

a, a:visited
{
    color: #ffffff;
    cursor: pointer;
/*
    text-shadow: 0 0 1px #fff;
    text-shadow: 0 0 1px rgba(255,255,255,.6);
*/
    outline: 0;
    -webkit-transition: all 0.3s linear;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

a:hover,
a:focus
{
    color: #000;
/*     text-shadow: 0 -1px 0 #fff; */
}

#colophon a:hover,
#colophon a:focus
{
    color: #fff;
}

p a,
p a:visited
{
    line-height: inherit;
}


#utilities dl
{
    margin: .5em 0 .25em;
    padding: .25em 0;
}

#utilities dl,
#utilities dl > dt,
#utilities dl > dd
{
    color: #fff;
    display: inline-block;
    margin-left: 0;
    margin-right: 0.25em;

}

#utilities .half.col
    {
        float: left;
        width: 48%;
        padding-left:1%;
        padding-right:1%;
    }
#utilities .button
{
    margin: .25em .25em 0 0;
}

#utilities .button
{
    color: #fff;
    font-size: 14px;
    min-width: 16px;
    text-align: center;
}
#utilities .button,
#utilities .button:hover,
#utilities .button:focus,
#utilities .button:active
{
    box-shadow: none;
}

#utilities .button .icon
{
    color: #fff;
    text-shadow: 0 1px 0 #000;
}

#dbSave.button
{
    *width: 78px;
    _width: 78px;
    min-width: 78px;
}

.toolbox_wrapper .slides
{
    position: relative;
    display:inline-block;
    margin:0 auto;
}
.toolbox_wrapper .slides > li
{
    display: inline-block;
    text-align: center;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    margin-bottom: 0;
    margin-left: 0;
}

.toolbox_wrapper .slides > li img
{
    position:absolute;
    width: 60px;
    height: 60px;

    opacity: 0.8;

    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    transform:scale(1);

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.toolbox_wrapper .slides > li.inactive img
{
    opacity: 0.4;
}
.toolbox_wrapper .slides > li.inactive:hover img
{
    opacity: 0.4;

    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    transform:scale(1);
}

.toolbox_wrapper .slides > li:hover img
{
    opacity: 1;
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    transform:scale(1.5);

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.toolbox_wrapper
{
    height: 70px;
    width: 100%;
    text-align: center;
}

.error
{
    color: #C30300;
}

div.error
{
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

.close-alert
{
    color: #cdcdcd;

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;

    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    transform:scale(1);
}
.close-alert:hover
{
    z-index:10;
    color: #4d4d4d;
    text-shadow: none !important;

    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    transform:scale(1.5);

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}


/* Nav-o-matic
================================================== */

.navbar
{
    *position:relative;
    *z-index:2;
    overflow:visible;
}

.button,
a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.joyride-next-tip
{
    padding-right: 2.6em;
    padding-left: 2.6em;
    border-color: transparent;
    color: #fff !important;
    text-shadow: 0 1px 0 #000;
    text-decoration: none;
    background-color: #4488c9;
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#4488c9),to(#1969a4));
    background-image:-webkit-linear-gradient(top,#4488c9,#1969a4);
    background-image:   -moz-linear-gradient(top,#4488c9,#1969a4);
    background-image:    -ms-linear-gradient(top,#4488c9,#1969a4);
    background-image:      -o-linear-gradient(top,#4488c9,#1969a4);
    background-image: linear-gradient(top,#4488c9,#1969a4);

    filter:progid:dximagetransform.microsoft.gradient(startColorstr='#4488c9',endColorstr='#1969a4',GradientType=0);

}

.joyride-next-tip
{
    height: auto;
    padding: 0.3em 1.6em;
    border-bottom: none !important;
    -webkit-border-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
     -khtml-border-radius: 6px;
       -moz-border-radius: 6px; /* Firefox 1-3.6 */
            -o-border-radius: 6px;
                border-radius: 6px;

                /* useful if you don't want a bg color from leaking outside the border: */

     -webkit-background-clip: padding-box; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
        -moz-background-clip: padding; /* Firefox 1-3.6 */

background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */}
#utilities .button,
#utilities button,
#utilities input[type="submit"],
#utilities input[type="reset"],
#utilities input[type="button"],
#utilities input[type="file"],
#utilities .button_grp .active,
#utilities .filter_nav>dd>a,
#utilities ul.tabs
{
    padding-right: 0.6em;
    padding-left: 0.6em;
    border-color: #797979;
    color: #fff;
    text-shadow: 0 1px 0 #000;
    background-color: #464545;
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#464545),to(#2e2c2c));
    background-image:-webkit-linear-gradient(top,#464545,#2e2c2c);
    background-image:   -moz-linear-gradient(top,#464545,#2e2c2c);
    background-image:    -ms-linear-gradient(top,#464545,#2e2c2c);
    background-image:      -o-linear-gradient(top,#464545,#2e2c2c);
    background-image: linear-gradient(top,#464545,#2e2c2c);

    filter:progid:dximagetransform.microsoft.gradient(startColorstr='#464545',endColorstr='#2e2c2c',GradientType=0);

}


.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.joyride-next-tip:hover
{
    border-color: transparent;
    color: #fff;
    text-shadow: 0 1px 0 #000;
    background-color: #1969a4;
    background-image:none;

    filter:none;

}
.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active
{
    border-color: transparent;
    color: #fff;
    text-shadow: 0 1px 0 #000;
    background-color: #4488c9;
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#4488c9),to(#1969a4));
    background-image:-webkit-linear-gradient(top,#1969a4,#4488c9);
    background-image:   -moz-linear-gradient(top,#1969a4,#4488c9);
    background-image:    -ms-linear-gradient(top,#1969a4,#4488c9);
    background-image:      -o-linear-gradient(top,#1969a4,#4488c9);
    background-image: linear-gradient(top,#1969a4,#4488c9);

    filter:progid:dximagetransform.microsoft.gradient(startColorstr='#4488c9',endColorstr='#1969a4',GradientType=0);

}

#utilities .button:hover,
#utilities button:hover,
#utilities input[type="submit"]:hover,
#utilities input[type="reset"]:hover,
#utilities input[type="button"]:hover,
#utilities input[type="file"]:hover,
#utilities .filter_nav>dt,
#utilities .filter_nav>dd>a:hover
{
    border-color: #797979;
    color: #fff;
    text-shadow: 0 1px 0 #000;
    background-color: #2e2c2c;
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#2e2c2c),to(#464545));
    background-image:-webkit-linear-gradient(top,#2e2c2c,#464545);
    background-image:   -moz-linear-gradient(top,#2e2c2c,#464545);
    background-image:    -ms-linear-gradient(top,#2e2c2c,#464545);
    background-image:      -o-linear-gradient(top,#2e2c2c,#464545);
    background-image: linear-gradient(top,#2e2c2c,#464545);

    filter:progid:dximagetransform.microsoft.gradient(startColorstr='#2e2c2c',endColorstr='#464545',GradientType=0);

}

ul.tabs,
ul.tab_type
{
    padding-right:20px;
    padding-left:20px;
    text-align: right;
    background-color:#464545;
    border-top: 1px solid #464545;
}

ul.tabs
{
    border-left: 1px solid #565656;
}

ul.tab_type
{
    margin-top: 0;
}
ul.tab_type,
ul.tab_type li
{
    margin-bottom: 0;
}
ul.tabs li,
ul.tab_type li
{
    border-right: 1px solid #232323;
    border-left: 1px solid #565656;
    padding-right: 1px;
}

ul.tabs li.empty,
ul.tab_type li.empty
{
    border-right:none;
    border-left:none;
}

ul.tabs li,
ul.tabs li a,
ul.tabs li a .icon,
ul.tab_type li,
ul.tab_type li a,
ul.tab_type li a .icon
{
    background: transparent;
    color: #618bbc !important;
    text-shadow: none;
    text-decoration: none;
}
ul.tabs li a .icon,
ul.tab_type li a .icon,
.button .icon
{
    position: relative;
    height: 20px;
    font-size: 36px;
    line-height: 10px !important;
    margin-top: 3px;
    bottom: -4px;
}
.button .icon
{
    bottom: -4px;
}
ul.tabs li,
ul.tab_type li
{
    display: inline-block;
    float: left;
    width: auto;
    height: 50px;
    padding: 0;
    margin: 0;
}
ul.tab_type li
{
    position: relative;

}

ul.tab_type li ul,
ul.tab_type li ul li
{
    margin-bottom: 0;
}
ul.tab_type li ul li
{
    height: auto;
}

ul.tab_type li ul.drop.down
{
    position: absolute;
    text-align: left;
    top: 97%;
    left: inherit;
    right:-5px;
    margin: 0 0 0 0;
    padding: 0;
    padding-top: 18px;
    z-index: 500;
    zoom: normal;
    width: 160px;
    display: none;

}

ul.tab_type li ul.drop.down:before,
ul.tab_type li ul.drop.down:after
{
    position:absolute;
    border:solid;
    border-color:#363636 transparent;
    border-width: 0 18px 18px 18px;
    top:0px;
    content:"";
    display:block;
    right:10px;
    width: 0;
    z-index:501;
}

ul.tab_type li ul.drop.down:before
{
    border-color:#000 transparent;
    border-width: 0 20px 20px 20px;
    z-index: -1;
    top:3px;
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

ul.tab_type li ul.drop.down li
{
    float: none;
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1;
    width: 160px;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #232323;
    border-top: 1px solid #565656;
    background: #363636;
    box-shadow: 0 0 6px rgba(0,0,0,0.7);
}

ul.tab_type li ul.drop.down li a
{
    display: block;
    padding: 12px 12px 18px;

}

ul.tab_type li ul.drop.down li:first-child,
ul.tab_type li ul.drop.down li:first-child a
{
    border-top: transparent;

    -o-border-top-left-radius: 6px; -o-border-top-right-radius: 6px; -khtml-border-top-left-radius: 6px; -khtml-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px;
            /* useful if you don't want a bg color from leaking outside the border: */

 -webkit-background-clip: padding-box; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-background-clip: padding; /* Firefox 1-3.6 */

         background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */
}
ul.tab_type li ul.drop.down li:last-child,
ul.tab_type li ul.drop.down li:last-child a
{
    border-bottom: transparent;

    -o-border-bottom-left-radius: 6px; -o-border-bottom-right-radius: 6px; -khtml-border-bottom-left-radius: 6px; -khtml-border-bottom-right-radius: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px;
            /* useful if you don't want a bg color from leaking outside the border: */

 -webkit-background-clip: padding-box; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-background-clip: padding; /* Firefox 1-3.6 */

         background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */
}

ul.tab_type li ul.drop.down li:hover
{
    background: #464646;
}

ul.tab_type li ul.drop.down li:hover a
{
    color: #abc7d9 !important;
}

ul.tabs li:hover ul,
ul.tab_type li:hover ul.drop.down,
ul.tab_type li:hover ul.drop.down:before,
/* */
ul.tab_type li.tourstop ul.drop.down,
ul.tab_type li.tourstop ul.drop.down:before
{
    display: block;
}
ul.tab_type li.tourstop ul.drop.down li#fifthStop
{
    background: #464646;
}

ul.tab_type li.tourstop ul.drop.down li#fifthStop a
{
    color: #abc7d9 !important;
}

ul.tabs li ul li
{
    float: none;
}
ul.tabs li.r
{
    float: right;
}
ul.tabs li a,
ul.tab_type li a
{
    display: block;
    padding: 10px 15px;
}
ul.tab_type li a
{
    height: 100%;
}

ul.tabs li a.active,
ul.tab_type li a.active
{

    color: #abc7d9 !important;
    background-color: #393838;
    border-bottom: 1px solid #2e2c2c;
}
ul.tabs li a.active
{

    margin-bottom: -1px;
}
ul.tabs li a.active .icon
{
    color: #abc7d9 !important;
}

ul.tabs li a:hover
{
    color: #abc7d9;
    background-color: #393838;
    border-bottom: 1px solid #2e2c2c;
}

ul.tabs-content,
ul.tabs-content > li
{
    margin-bottom: 0;
}

ul.tabs-content > li
{
    display: none;
    height: 0;

    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

ul.tabs-content > li.active
{
    height: auto;
    color: #618bbc;
    text-shadow: none;
    background-color: #2e2c2c;
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#2e2c2c),to(#464545));
    background-image:-webkit-linear-gradient(top,#2e2c2c,#464545);
    background-image:   -moz-linear-gradient(top,#2e2c2c,#464545);
    background-image:    -ms-linear-gradient(top,#2e2c2c,#464545);
    background-image:      -o-linear-gradient(top,#2e2c2c,#464545);
    background-image: linear-gradient(top,#2e2c2c,#464545);

    filter:progid:dximagetransform.microsoft.gradient(startColorstr='#2e2c2c',endColorstr='#2e2c2c',GradientType=0);

    border-top: 1px solid #565656;


}

li#minify{padding: 0;}

#utilities
{
    margin-top: -1px;
    padding-top: 1px;
    border-bottom: 1px solid #59ace6;
    background-image: url(../images/bgs/charcoal_bg.png);
    background-position: left top;
    background-repeat: repeat;
}

#utilities .inner
{
    border-top: 1px solid #565656;
}

form.search {
    margin: 0;
    overflow: hidden; /* enclose floating contents */
}
form.search fieldset input[type="text"]
{
    float: left;
    width: 250px;
    background: transparent;
    border: 1px solid #fff;
    margin: 0;
}
form.search fieldset input[type="submit"].icon
{
    position: absolute;
/*     top: 18px; */
    margin-left: -35px;
    background: transparent;
    background-image: none;
    border-color: transparent;
    border: none;
    box-shadow: none;
}

form.search fieldset input[type="text"]:focus
{
    color: #5f89c0;
    background-color:
        rgba(255,255,255,0.7);
}

/* Application Styles
================================================== */
#blueworld_canvas
{
    margin-top: 1em;
    padding: 10px 0 30px;
    color: #fff;
}

#blueworld_canvas h1,
#blueworld_canvas h2,
#blueworld_canvas h3,
#blueworld_canvas h4,
#blueworld_canvas h5,
#blueworld_canvas h6
{
    color: #fff;
}
.layoutobj
{
    /* NEW */
    /* OLD
    border: inset 1px dashed rgba(255,255,255,0.4);
    */
    outline: 1px dashed rgba(255,255,255,0.4);
    outline-offset: 2px;

    /* http://css-tricks.com/almanac/properties/b/border-radius/

    */

    -webkit-border-radius: 3px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px; /* Firefox 1-3.6 */
            -o-border-radius: 3px;
                border-radius: 3px;

                /* useful if you don't want a bg color from leaking outside the border: */

     -webkit-background-clip: padding-box; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
        -moz-background-clip: padding; /* Firefox 1-3.6 */

             background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */

}
@media only screen and (min-width: 768px) and (max-width: 959px)
{
.layoutobj
	{
	    /* NEW */
	    /* OLD
	    border: inset 1px dashed rgba(255,255,255,0.4);
	    */
	    outline: none;
	}	
}
.row.layoutobj.wrap
{
    outline: 0px;
}
.layoutobj + .layoutobj
{
    margin-top: 5px;
}

.layoutobj > .layoutobj
{
    margin-top: inherit;
}

.layoutobj:before,
.layoutobj:after
{
    content: '';
}
.contentobj
{
/*     outline: 1px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
*/
    margin-bottom: 0.5em;
}

/* Login Styles
================================================== */

#loginpanel,
#signuppanel
{
background:none;
box-shadow:none;
display: block;
height: 320px;
/*margin: 30px auto 90px 160px;*/
overflow:visible;
}
#loginpanel .error,
#signuppanel div.error {
    display:none;
}
#loginpanel fieldset,
#signuppanel fieldset
{
    margin-bottom: 0.625em
}
#loginpanel .button,
#loginpanel button,
#loginpanel input[type="submit"],
#loginpanel input[type="reset"],
#loginpanel input[type="button"],
#signuppanel .button,
#signuppanel button,
#signuppanel input[type="submit"],
#signuppanel input[type="reset"],
#signuppanel input[type="button"]
{
    padding-right: 2.6em;
    padding-left: 2.6em;
}
#accountpanel #flipit
{
    margin: 2em auto 2em;
}
#loginpanel .box_holder,
#signuppanel .box_holder,
#accountpanel .box_holder
{
    width: 495px;
}
#accountpanel .box_holder p,
#loginpanel .box_holder p,
#signuppanel .box_holder p
{
    color: #67b0e1;
    font: 0.8625em;
}

#accountpanel .box_holder h2
{
    color: #67b0e1;
}
#loginpanel .box_holder img,
#signuppanel .box_holder img
{
    margin-left: -10px;
}

#loginpanel form,
#signuppanel form
{
    padding-top: 1em;
}

#loginpanel .box_top,
#loginpanel .box_front,
#signuppanel .box_top,
#signuppanel .box_front
{
    background: #fff;
    padding: 20px 30px;
    height:auto;
    -webkit-border-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
     -khtml-border-radius: 6px;
       -moz-border-radius: 6px; /* Firefox 1-3.6 */
            -o-border-radius: 6px;
                border-radius: 6px;

                /* useful if you don't want a bg color from leaking outside the border: */

     -webkit-background-clip: padding-box; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
        -moz-background-clip: padding; /* Firefox 1-3.6 */

background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */


-o-box-shadow: rgba(0,0,0,.4) 0 0 8px;
-khtml-box-shadow: rgba(0,0,0,.4) 0 0 8px;
-moz-box-shadow: rgba(0,0,0,.4) 0 0 8px;
-webkit-box-shadow: rgba(0,0,0,.4) 0 0 8px;
box-shadow: rgba(0,0,0,.4) 0 0 8px;

}

.admin-panel input[type="text"],
.admin-panel input[type="password"],
.admin-panel input[type="email"],
.admin-panel input[type="url"]
{
    width: 98%;
    color: #7eb4da;

    background-image:
        -moz-linear-gradient(top,
            #fefefe,
            #eeefef
        );
    background-image:
        -webkit-gradient(linear,
            0 0,
            0 100%,
            #fefefe,
            to(#eeefef)
        );
    background-image:
        -webkit-linear-gradient(top,
            #fefefe,
            #eeefef
        );
    background-image:
        -o-linear-gradient(top,
            #fefefe,
            #eeefef
        );
    background-image:
        linear-gradient(to bottom,
            #fefefe,
            #eeefef
        );

    -webkit-border-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
     -khtml-border-radius: 6px;
       -moz-border-radius: 6px; /* Firefox 1-3.6 */
            -o-border-radius: 6px;
                border-radius: 6px;

                /* useful if you don't want a bg color from leaking outside the border: */

     -webkit-background-clip: padding-box; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
        -moz-background-clip: padding; /* Firefox 1-3.6 */

             background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */

-o-box-shadow: inset rgba(0,0,0,.2) 0 0 8px;
-khtml-box-shadow: inset rgba(0,0,0,.2) 0 0 8px;
-moz-box-shadow: inset rgba(0,0,0,.2) 0 0 8px;
-webkit-box-shadow: inset rgba(0,0,0,.2) 0 0 8px;
box-shadow: inset rgba(0,0,0,.2) 0 0 8px;

    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;

}

.admin-panel #usrMsg {
    clear:both;
    padding: 0.6em 0;
}
.admin-panel #usrMsg:empty {
    padding: 0;
}
.admin-panel #usrMsg .success {
    color:#fff;
    padding: .5em;
    margin:.5em 0;
    background-color: #D9E021;
    border: 1px solid #8CC63F;
}
.admin-panel #usrMsg .alert {
    color:#C30300;
    padding: .5em;
    margin:.5em 0;
    background-color: #FFE3E3;
    border: 1px solid #C30300;
}

#loginpanel label,
#signuppanel label
{
    visibility: hidden;
    height: 5px;
}

#signuppanel .signup label.error {
    visibility:visible;
    height:auto;
}

/* Admin styles
================================================== */

.admin-panel {
    background:#FFF;
    border-radius: 6px;
    box-shadow: 1px 2px 5px #555;
    padding:10px 20px;
}
.admin-panel h2
{
    margin-bottom: 0;
}
.admin-panel fieldset {
    margin:15px 0;
}
.admin-panel .icon-label {
    margin-top:-3px;
}
.admin-panel button {
    margin-top:5px;
}
.admin-panel table a {
    color:#4D4D4D;
}
.admin-panel table a:hover {
    color:#618bbc;
}
.admin-panel form.multi.beside fieldset input[type="text"],
.admin-panel form.multi.beside fieldset input[type="email"],
.admin-panel form.multi.beside fieldset input[type="password"],
.admin-panel form.multi.beside fieldset input[type="url"],
.admin-panel form.multi.beside fieldset input[type="date"],
.admin-panel form.multi.beside fieldset textarea
{
    margin-left: 0;
}
.admin-panel form.multi.beside fieldset.form-actions .button,
.admin-panel form.multi.beside fieldset.form-actions button,
.admin-panel form.multi.beside fieldset.form-actions input[type="submit"],
.admin-panel form.multi.beside fieldset.form-actions input[type="reset"],
.admin-panel form.multi.beside fieldset.form-actions input[type="button"]
{
    display: inline-block;
    width: 90%;
}
.admin-panel input[type="text"]:hover,
.admin-panel input[type="password"]:hover,
.admin-panel input[type="email"]:hover,
.admin-panel input[type="url"]:hover
{
-o-box-shadow:  rgba(0,0,0,.2) 0 0 8px;
-khtml-box-shadow:  rgba(0,0,0,.2) 0 0 8px;
-moz-box-shadow:  rgba(0,0,0,.2) 0 0 8px;
-webkit-box-shadow:  rgba(0,0,0,.2) 0 0 8px;
box-shadow:  rgba(0,0,0,.2) 0 0 8px;
}

.admin-panel input[type="text"]:focus,
.admin-panel input[type="password"]:focus,
.admin-panel input[type="email"]:focus,
.admin-panel input[type="url"]:focus
{
    width: 98%;
    color: #000000;

    background-image:
        -moz-linear-gradient(top,
            #fafdfe,
            #e1eff9
        );
    background-image:
        -webkit-gradient(linear,
            0 0,
            0 100%,
            #fafdfe,
            to(#e1eff9)
        );
    background-image:
        -webkit-linear-gradient(top,
            #fafdfe,
            #e1eff9
        );
    background-image:
        -o-linear-gradient(top,
            #fafdfe,
            #e1eff9
        );
    background-image:
        linear-gradient(to bottom,
            #fafdfe,
            #e1eff9
        );
        }
#editProfile
{
    display: none;
}
dl.account_detail dt
{
    float: left;
    width: 25%;
}
dl.account_detail dd
{
    padding-left: 27%;
}

/* General Modals
================================================== */

.overlay {
    width:100%;
/*     height:100%; */
    display:none;
    position:fixed;
    top:-200px;
    left:0;
    bottom:-200px;
    z-index:9999;
    background-color: rgba(0,0,0,0.15);
}
.overlay .modal {
    background:#FFF;
    border-radius: 6px;
    box-shadow: 1px 2px 8px #555;
    margin:175px auto 0;
    padding:10px 20px;
    position:relative;
    width:500px;
/*     height:500px; */
    overflow:auto;
    z-index:99999;
}

/* Dashboard page
================================================== */
#modalprojAdd,
#modalVersion,
#modalsignupSuccess,
#modalforgotPass,
#modelforgotPass
{
    margin-top: 275px;
}

.overlay h3
{
    color: #67b0e1;
}

/* Admin page(s) adjustments
================================================== */
#users_listing,
#company_listing,
#account_content,
.userAddOverlay,
.userEditOverlay,
.userDelOverlay,
.compAddOverlay,
.compEditOverlay,
.compDelOverlay
{
    margin-top: 135px;
}


/* Layout page
================================================== */

.uptop {
    position:relative;
    top:0px;
}
.uptop h2 {
    color:#FFF !important;
}
.blueworld_canvas #dashboard {
    background:none;
}
#modalSave p {
    float:left;
}
#modalSave .cancel {
    margin-left:100px;
}
#modalVersion .cancel {
    margin-left: 120px;
}
#filters dt {
    width:auto;
}
#filters dt.with_select {
    width:527px;
}
.saveEffect {
    background: rgb(0,138,0) !important; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOGEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDU3MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) !important;
    background: -moz-linear-gradient(top,  rgba(0,138,0,1) 0%, rgba(0,87,0,1) 100%) !important; /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,138,0,1)), color-stop(100%,rgba(0,87,0,1))) !important; /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,138,0,1) 0%,rgba(0,87,0,1) 100%) !important; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,138,0,1) 0%,rgba(0,87,0,1) 100%) !important; /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,138,0,1) 0%,rgba(0,87,0,1) 100%) !important; /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,138,0,1) 0%,rgba(0,87,0,1) 100%) !important; /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008a00', endColorstr='#005700',GradientType=0 ) !important; /* IE6-8 */
}
#autoSave {
    background-color: #464545;
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#464545),to(#2e2c2c));
    background-image:-webkit-linear-gradient(top,#464545,#2e2c2c);
    background-image:   -moz-linear-gradient(top,#464545,#2e2c2c);
    background-image:    -ms-linear-gradient(top,#464545,#2e2c2c);
    background-image:      -o-linear-gradient(top,#464545,#2e2c2c);
    background-image: linear-gradient(top,#464545,#2e2c2c);
    border-radius:6px;
    color:#FFF;
    position:fixed;
    bottom:-44px;
    right:0;
    padding:12px;
    width:155px;
    height:20px;
}
#autoSave h3 {
    color:#FFF;
}
#autoSave .icon {
    margin-right:5px;
}

/* Isotope filtering
================================================== */

.dashboard #dashboard {
    width: 96%;
    padding: 1%;
    background:none;
}
#container
{
padding-left: 2px;
}


#dashboard .filter_nav>dt,
#dashboard .filter_nav>dt h2,
#dashboard .filter_nav>dd
{
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: bottom;
}

#dashboard .filter_nav>dt,
#dashboard .filter_nav>dd>a
{
    background: transparent;
    border: none;
    border-width: 0;
    background-image: none;
    box-shadow: none;
}

#dashboard .filter_nav>dt>a,
#dashboard .filter_nav>dd>a
{

}

.element
{
    width: 220px;
    height: 220px;
    margin: 2px 18px 18px 0;
    border:1px solid rgba(255,255,255,0.6);
}

.element.layout
{
    height: 356px;
    float: left;
    margin-right: 20px;
}

.element:hover
{
    background: rgba(255,255,255,0.1);
    -o-box-shadow:inset rgba(0,0,0,.4) 0 0 4px;
    -khtml-box-shadow:inset rgba(0,0,0,.4) 0 0 4px;
    -moz-box-shadow:inset rgba(0,0,0,.4) 0 0 4px;
    -webkit-box-shadow:inset rgba(0,0,0,.4) 0 0 4px;
    box-shadow:inset rgba(0,0,0,.4) 0 1px 4px;

}
#add_project.element
{
    outline: 1px dashed rgba(255,255,255,0.6);
}

.element .box_top
{
    background: #0e73ba;
    color: #fff;
}
.element.add .box_top
{
    background: #fff;
}


.element .box_top input[type="text"]
{
    margin-bottom: 1em;
}

.element input[type="text"],
.element input[type="password"],
.element input[type="email"],
.element input[type="url"],
.element input[type="date"]
{
    padding: 0.325em 0.325em 0.325em;
}
/**** Isotope styles ****/

.isotope-item
{
  z-index: 2;
}

.isotope-hidden.isotope-item
{
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.4s;
     -moz-transition-duration: 0.4s;
      -ms-transition-duration: 0.4s;
       -o-transition-duration: 0.4s;
          transition-duration: 0.4s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* 3d hover boxes
================================================== */


.box_holder,
.element {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    position: relative;
    cursor: pointer;
    -webkit-perspective: 500px;
    -moz-perspective: 900px;
    -o-perspective: 900px;
    -ms-perspective: 900px;
    perspective: 500px;
}
.element
{
    width: 220px;
    height: 220px;
}
{
    height: 300px;
}
.element.layout.example
{
    background: url(../images/sample/example_thumbnail.jpg) top left no-repeat;
}

.box{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.box > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center center;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.box .box_front {
    text-align: left;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

.box .box_top {
    -webkit-transform: translate3d(0,0,-350px) rotate3d(1,0,0,90deg);
    -moz-transform: translate3d(0,0,-350px) rotate3d(1,0,0,90deg);
    -o-transform: translate3d(0,0,-350px) rotate3d(1,0,0,90deg);
    -ms-transform: translate3d(0,0,-350px) rotate3d(1,0,0,90deg);
    transform: translate3d(0,0,-350px) rotate3d(1,0,0,90deg);
    opacity: 0;
}

.box_holder.flip .box_front,
.element.flip:hover .box_front
 {
    -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;
}

.box_holder.flip .box_top,
.element.flip .box_top
{
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;
}


/*** Layout adjustments for box contents ***/

.element .box input[type="text"]
{
    min-width: 180px;
    width: 180px;
}
.box .box_front a,
.element.layout a
{
    display: block;
    height: 90%;
    padding: 5%;
    text-decoration: none !important;

    -webkit-transition: all 600ms linear;
    -moz-transition: all 600ms linear;
    -o-transition: all 600ms linear;
    -ms-transition: all 600ms linear;
    transition: all 600ms linear;
}
.element.layout a{
    width: 220px;
    height: 356px;
}
.box .box_front a:hover
{
    text-shadow: none;
}
.box .box_front .project_spec,
.box .box_front .project_spec dt,
.box .box_front .project_spec dt a,
.box .box_front .project_spec dd,
.box .box_front .project_spec dd a
{
    color: #fff;
    margin: 0;
    margin-bottom: .325em;

}

.box .box_front .project_spec
{
}
#utilities dl > dd.date,
 .project_spec dd.date a,
 .project_spec dd.date
{
    color: #9cd2f6;
    font-size: 0.865em;
}

.box .box_front a .project_spec dd.version
{
    color: #000;
    font-weight: bold;
}

#utilities dl > dd.version
{
    display: none;
}
.box .icon.sharelink,
.box .icon.close,
.box .icon.back,
.box .icon.info,
.box .icon.remove.project
{
    position: absolute;
    right: 5px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    z-index: 1;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;

/*
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
*/
}

.box .icon:hover
{
    color: #67b0e1 !important;
    text-shadow: none;
}

.box .icon.sharelink,
.box .icon.back
{
    top: 10px;
    bottom: auto;
}

.box .icon.info,
.box .icon.remove.project,
.box .icon.close
{
    bottom: 13px;
    top:auto;
}
.box .icon.remove.project
{
    right:33px;
}

.flip .box .icon.sharelink,
.flip .box .icon.remove.project,
.flip .box .icon.info,
.flip .box_front a
{
    display: none;
}
#add_project .box_front,
#add_layout .box_front
{
    background-image: url(../images/add_project.png);
    background-repeat: no-repeat;
}
#add_project .box_front p
{
    margin-top: 60%;
}
#add_layout .box_front p
{
    margin-top: 90%;
}

/* Listview Styles
================================================== */
.listview {
    margin:0 auto;
    width:100%;
}
.listview .element {
    border:none;
    height:50px;
    margin:0 auto;
    position:absolute;
    right:0;
    width:880px;
}
.listview .box .box_front a,
.listview .element.layout a
{
    height: 40px;
    padding: 5px;
}
.listview .listwrap {
    position:absolute;
    top:0px;
    left:50px;
    width:880px;
}
.listview .element .box {
    border-bottom:1px solid rgba(255,255,255,0.4);
}
.listview .element .box .box_front {
    box-shadow:none;
}
.listview #add_project.element {
    margin:0;
    margin-bottom:100%;
    float:left;
    width: 220px;
    height: 220px;
}
.listview #add_project .box_front p {
    margin:10px 0 0 0;
}
.listview .element:last-child {
    margin-bottom:2px;
}
.listview .element .box dl dt,
.listview .element .box dl dd {
    float:left;
}
.listview .element .box dl .title {
    position:absolute;
    left:10px;
    top:15px;
}
.listview .element .box dl .summary {
    position:absolute;
    left:400px;
    top:15px;
}
.listview .element .box dl .date {
    position:absolute;
    left:630px;
    top:15px;
}
.listview .element .box dl .version {
    position:absolute;
    left:790px;
    top:15px;
}
.listview .pd
{
    padding-top: 0.625em !important;
    padding-bottom: 0 !important;
}
.listview form
{
    margin-bottom: 0;
}
.listview form legend,
.listview form label,
.listview form fieldset
{
    display: inline-block;
    float: left;
    width: 25%;
}
.listview form label
{
    text-align: right;
    padding-right: 0.5em;
}
.listview form fieldset.first
{
    display: inline-block;
    float: left;
    width: 65%;
}
.listview form fieldset.first input[type="text"]
{
    display: inline-block;
    width: 65%;
}
.listview form input[type="button"]
{
    font-size: 0.9em;
    padding: 0.325em 1em;
}
.listview .box .icon.info,
.listview .box .icon.remove.project,
.listview .box .icon.sharelink
{
    top: auto;
    bottom: 20px;
}
.listview .box .icon.sharelink
{
}
.listview .box .box_top
{
    -o-box-shadow:inset rgba(0,0,0,.4) 0 0 4px;
    -khtml-box-shadow:inset rgba(0,0,0,.4) 0 0 4px;
    -moz-box-shadow:inset rgba(0,0,0,.4) 0 0 4px;
    -webkit-box-shadow:inset rgba(0,0,0,.4) 0 0 4px;
    box-shadow:inset rgba(0,0,0,.4) 0 1px 4px;

}
/* Nav-o-matic
================================================== */
.mainnav > li > ul,
.mainnav > li > ul > li,
.mainnav > li > ul > li > ul,
.mainnav > li > ul > li > ul > li
{
    margin: 0 !important;
    font-size: 1em;
    list-style: none;
}

.mainnav > li > a
{
    opacity: 1;
}
.mainnav > li > a:hover
{
    color: #000;
}

.mainnav > li > ul > li > a,
.mainnav > li > ul > li > ul > li > a
{
    display: block;
    background-image: url(../images/bgs/blueworldgrid.png);
    background-position: top left;
    background-repeat: repeat;
    color: #fff;
    font-style: italic;
    opacity: 1;
    text-decoration: none;
    white-space: nowrap;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.mainnav > li > ul > li > a,
.mainnav > li > ul > li > ul > li > a
{
    padding: .625em 3em .625em 1.125em;
}
.mainnav > li > ul > li > a:hover,
.mainnav > li > ul > li > ul > li > a:hover
{
    color: #000;
    text-shadow: none;
}
.mainnav > li > ul
{
    position: absolute;
    z-index: 5000;
    height: 0;
    width: auto;
    margin-left: 0;
    margin-top: 0;

    -webkit-box-shadow:
        0 1px 3px rgba(0,0,0,0.25);
    -moz-box-shadow:
        0 1px 3px rgba(0,0,0,0.25);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.25);

    -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
         -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;

    display: none;

  -webkit-border-radius: 12px;
          border-radius: 12px;


  background-clip: padding-box;

}

.mainnav > li:hover > ul
{
    height: auto;
    display: block;
}


.mainnav > li > ul > li
{
    /* This is the important rule for positioning the nav
    /* you need to give the third level a place to start */
    position: relative;
}

.mainnav > li > ul > li > ul
{
    position: absolute;
    top:0%;
    z-index: 5005;
    height: 0;
    width: auto;

    -webkit-box-shadow:
        0 1px 3px rgba(0,0,0,0.25);
    -moz-box-shadow:
        0 1px 3px rgba(0,0,0,0.25);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.25);

    -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
         -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;

    display: none;
}

.mainnav > li > ul > li:hover > ul
{
    display: block;
    left:100%;
    height: auto;
}

/* Vertical Nav Styles
*/
.vertnav,
.vertnav > li,
.vertnav > li > ul > li,
.vertnav > li > ul > li > ul > li
{
    /* This is the important rule for positioning the nav
    /* you need to give the third level a place to start */
    position: relative;
    list-style: none;
    margin: 0;
}

.vertnav > li > ul,
.vertnav > li > ul > li > ul
{
    list-style: none;
    position: absolute;
    top:0%;
    left: 100%;
    margin-left: -20px;
    z-index: 5005;
    height: 0;
    width: 100%;

    -webkit-box-shadow:
        0 1px 3px rgba(0,0,0,0.25);
    -moz-box-shadow:
        0 1px 3px rgba(0,0,0,0.25);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.25);

    -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
         -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;

    display: none;
}

.vertnav > li:hover > ul,
.vertnav > li > ul > li:hover > ul
{
    display: block;
    height: auto;
}

.vertnav > li > a,
.vertnav > li > ul > li > a,
.vertnav > li > ul > li > ul > li > a
{
    display: block;
    padding: .625em 3em .625em 1.125em;
}
.vertnav > li > ul > li > a,
.vertnav > li > ul > li > ul > li > a
{
    background: #447aba;
    background-image: url(../images/bgs/blueworldgrid.png);
}
.vertnav > li > a:hover,
.vertnav > li > ul > li > a:hover
{
    color: #000;
    text-shadow: none;
}


/* Social Media Nav Styles
*/
.socialnav,
.socialnav li
{
    list-style: none;
    margin: 0;
    padding: 0;
}
.socialnav li
{
    display: inline;
    font-size: 1.3em;
    margin-right: 0.2em;
}
.socialnav li:last-child
{
    margin-right: 0;
}
.socialnav li a
{
    text-decoration: none;
}

/* Leap Text Module Styles
*/
.leap.text.editable
{
    min-height: 200px;
    background: transparent url(../images/leaptext.png) center center no-repeat;
}

/* Connected Carousel Text Styles
================================================== */
.connected-carousels.contentobj,
.flex-viewport
{
    outline: 10px solid rgba(255,255,255,0.4);
    height: 220px;
}

.connected-carousels.contentobj .stage
{
    overflow: hidden;
}
.flex-viewport .slides
{
	margin-left: 0;
	padding-left: 0;
}
.connected-carousels.contentobj .stage li,
.flex-viewport .slides li
{
    position: relative;
    margin-left: 0;
    margin-bottom: 0;
    min-height: 220px;
}

.connected-carousels.contentobj .stage li img
{
	width: 100%;
}
.flex-viewport .slides li img
{
	height: 100%;
	width: auto;
	margin: 0 auto;
}

.connected-carousels.contentobj .navigation
{
    margin-top: -30px;
}

.slide_text
{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 33%;
    background: rgba(0,0,0,0.2);
    padding: 0.6em 1.6em 0.6em 1em;
}
.slide_text h2
{
    font-size: 1.6em;
    margin-bottom: 0.3em;
}

.no-text .slide_text
{
    display: none;
}

.right-text .slide_text
{
    left: 60%;
    right: 7%;
}
.left-text .slide_text
{
    left: 7%;
    right: 60%;
}
.center-text .slide_text
{
    left: 34%;
    right: 33%;
}
/* Datepicker Calendar Styles
*/
#datepicker
{
    position: relative;
    min-height: 160px;
}
#datepicker a
{
    text-decoration: none;
}
.ui-datepicker-title
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
}
.ui-icon.ui-icon-circle-triangle-e,
.ui-icon.ui-icon-circle-triangle-w
{
    display: inline-block;
    float: left;
}
.ui-icon.ui-icon-circle-triangle-e{
    float: right;
}
.layoutobj.col
{
    min-height: 20px;
}

section#blueworld_content.row
{
    padding: 0;
    padding-top: 113px;
}
section#blueworld_content.row.dsahboard
{
    padding-top: 0 !important;
}
.blueworld-calendar table th,
.blueworld-calendar table td
{
    text-align: center;
}

ol.slats li a img
{
    margin-right: 1em;
}
ol.slats li a.read-more
{
    float: right;
    display: inline-block;
}

/*  Event Listing slats over writes
*/

ol.slats
{
    margin-top: 0 !important;
    margin-bottom: 0.625em;
}
ol.slats li
{
    font-size: 0.75em
}
ol.slats li h5,
ol.slats li p
{
    margin: 0;
}
ol.slats li p.img
{
    margin-bottom: 1em !important;
}
ol.slats li h5
{
    font-weight: bold;
}
ol.slats li a.read-more
{
    float: none;
    font-weight: 600;
}
#blueworld_canvas ol.slats li.row + li.row
{
    margin-top: 0.6em;
}

/*  Small column date picker style modifications
*/
.col.four .blueworld-calendar
{
    font-size: 0.9em;
}
.col.four .blueworld-calendar table th,
.col.four .blueworld-calendar table td
{
    padding: 0.25em 0.25em;
}

/*  Sidebar Content Slat Style Modifications
*/
.col.four ol.slats
{
    padding: .5em;
}
.col.four ol.slats h3
{
    margin: 0.3em 0;
}
.col.four ol.slats li a img
{
    float: none;
    width: 196px;
}

/* Call to action Button Styles
*/
a.call-to
{
    display: block;
    padding: 1.2em 0.2em;
    text-decoration: none;
}
a.call-to .icon
{
    float: right;
    font-size:3.6em;
}

/* Dragable object styles
================================================== */
#blueworld_canvas .drawingboard
{
    background-color: rgba(255,255,255,0.1);
    margin:0;
/*     padding:10px; */
}
.layoutobj,
.contentobj
{
    position: relative;
}

menu.toolbar
{
    position: absolute;
    z-index: 1;
    right: -3px;
    top:-10px;
    opacity: 0;

    -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
         -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
}

.toolobj:hover > menu.toolbar,
.layoutobj:hover > menu.toolbar,
.contentobj:hover > menu.toolbar,
.formobj:hover > menu.toolbar
{
    opacity: 1;
}
menu.toolbar.beside
{
    left: 100%;
/*     right: auto; */
    top:-6px;
}
menu.toolbar.beside ul
{
    margin-left: 10px;
    padding: 6px;
    min-width: 22px;
    background: rgba(0,0,0,0.2);
}
menu.toolbar.beside ul:before
{
    border:solid;
    border-color:transparent #fefefe;
    border-color:transparent rgba(0,0,0,0.2);
    border-width: 6px 7px 6px 0;
    top:9px;
    left:0;
    content:"";
    display:block;
    position: absolute;
}

menu.toolbar .icons li
{
    margin-right: -4px;
    float: none;
    cursor: pointer;
    vertical-align: middle;
}

menu.toolbar.beside .icons li + li
{
    margin-top: 6px;
}
.icon.boxed
{
    display: inline-block;
    padding-top: 4px;
    height: 16px;
    width: 22px;
    background: #fff;
    background-position: center top;
    background-repeat: none;
    color: #618bbc;
    font-size:40px;
    text-align: center;

    -o-box-shadow: rgba(0,0,0,.6) 0 0 8px;
    -khtml-box-shadow: rgba(0,0,0,.6) 0 0 8px;
    -moz-box-shadow: rgba(0,0,0,.6) 0 0 8px;
    -webkit-box-shadow: rgba(0,0,0,.6) 0 0 8px;
    box-shadow: rgba(0,0,0,.6) 0 1px 8px;
    /* behavior: url(/css/ie-css3.htc); */

    -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
         -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;

}

.icon.boxed.a.b
{
    margin-bottom: -8px;
}

.icon.boxed:hover
{
    color: #000;
    -o-box-shadow:none;
    -khtml-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
menu.toolbar.beside .icon.boxed
{
    color: #fff;
    background-color: #618bbc;
    background-image: url(../images/styled_elements.png);
}
menu.toolbar.beside .icon.boxed:hover
{
    color: #fff;
    background-color: #000;
    background-image: none;
}
menu.toolbar .icon .fa
{
    font-size: 0.4em;
    position: relative;
    top: -4px;
}
menu.toolbar,
menu.toolbar.beside ul,
.icon.boxed
{

    /* http://css-tricks.com/almanac/properties/b/border-radius/
    */
    -webkit-border-radius: 3px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px; /* Firefox 1-3.6 */
            -o-border-radius: 3px;
                border-radius: 3px;

                /* useful if you don't want a bg color from leaking outside the border: */

     -webkit-background-clip: padding-box; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
        -moz-background-clip: padding; /* Firefox 1-3.6 */

             background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */
}



#logo .tooltip:hover:after
{
        left: 25%;
        filter:alpha(opacity=90);
}

.tooltiptext
{
    display: none;
}
.tooltiptext fieldset
{
    margin: 1em 0 0;
    padding: 0;
}

.styled_select
{
    height: 40px;
    background-position: right -2px;
}
.blueworld-settings-panel label
{
    font-weight: normal;
}
.blueworld-settings-panel .styled_select,
.styled_select.system
{
    height: 24px;
    width: 118px;
    margin-bottom: 0;
    background-position: right -11px;
}
.blueworld-settings-panel .styled_select:active,
.blueworld-settings-panel .styled_select:focus
{
    background-position: right -61px;
}
.styled_select select
{
    padding-top: 5px;
    color: #fff;
}
.blueworld-settings-panel .styled_select select,
.styled_select.system select
{
    font-size: 0.9em;
    padding-top: 2px;
    height: 24px;
    margin-bottom: 0;
    padding-left: 8px;
    width: 90%;
}
.dd-content .styled_select,
.dd-placeholder .styled_select
{
    margin-top: -3px;
}
.blueworld-settings-panel .dd-content .styled_select select
{
    width: auto;
}
.styled_select:active,
.styled_select:focus
{
    background-position: right -53px;
}

.tooltiptext .styled_select
{
    width: 180px;
    height: 31px;
}

.tooltiptext .styled_select select
{
    width: 148px;
    color: #fff;
}

.toolobj form.multi.beside fieldset
{
    position: relative;
}

.toolobj form.multi.beside fieldset input[type="text"],
.toolobj form.multi.beside fieldset input[type="email"],
.toolobj form.multi.beside fieldset input[type="password"],
.toolobj form.multi.beside fieldset input[type="url"],
.toolobj form.multi.beside fieldset input[type="date"],
.toolobj form.multi.beside fieldset textarea
{
    margin-top: 0.5em;
    top:-1.675em;
}
.toolobj form.multi.beside fieldset p.form-help,
.toolobj form.multi.beside fieldset.check,
{
    margin-top:-1.675em;
    margin-bottom: 0.5em;
}
.toolobj form.multi fieldset p.form-help
{
    margin-top:-1em;
}

.toolobj form.multi fieldset.form-actions
{
    margin-top: 1em;
}
.toolobj.margindrag
{
    margin: 3px;
}

/*

*/
#blueworld_canvas .row + .row
{
    margin-top: 1em;
}
#blueworld_canvas .row + .row > .row
{
    margin-top: 0.5em;
}

.layoutobj input[type="text"],
.layoutobj input[type="email"],
.layoutobj input[type="password"],
.layoutobj input[type="url"],
.toolobj form.multi.beside fieldset textarea
{
    color: rgba(255,255,255,0.6);
    margin-bottom: 1em;
    background: transparent;
    background-image: none;
    border: 1px solid #fff;
}

.layoutobj input[type="text"]:focus,
.layoutobj input[type="email"]:focus,
.layoutobj input[type="password"]:focus,
.layoutobj input[type="url"]:focus,
.toolobj form.multi.beside fieldset textarea:focus
{
    color: rgba(255,255,255,1);
}
/*

.layoutobj input:-webkit-autofill
{
    background: transparent !important;
    background-image: none !important;
        -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.3) inset;
}
*/
.leap.html textarea
{
    opacity: 0.6;
}
.leap.html:hover textarea,
.leap.html textarea:active,
.leap.html textarea:focus
{
    opacity: 1;
}

#amp_grid_overlay
{
    display: none;
    position: fixed;
    width: 980px;
    z-index: 1000;
    top:0;
    left: 50%;
    margin-left: -490px;
    bottom: 0;
    background: transparent url(../images/grid.png) left top repeat;
    opacity: 0.4;
}

/* JavaScript related styling */

.ui-resizable {
    position: relative;
}
.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
}
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: ew-resize; width: 10px; right: -10px; top: 0; height: 100%; }
.ui-resizable-n{ cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0}
.ui-resizable-w{ cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%}
.ui-resizable-se{ cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px}
.ui-resizable-sw{ cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px}
.ui-resizable-nw{ cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px}
.ui-resizable-ne{ cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px}

#DrawingBoard_0 {
    min-height: 500px;
}

.blueworld-layout-space, .blueworld-layout-column, .blueworld-layout-resizable-column {
    width: 100%;
    height: 100%;
    position: relative;
    float: left; /* to enclose the floating contents */
}
.blueworld-logo {
    display: inline-block;
}
.blueworld-search {
    float: right;
}
.ui-droppable {
    min-height: 20px;
}
.ui-droppable-active {
    background: rgba(0,255,0,0.2);
}

.ui-draggable-dragging {
    list-style: none;
}

#drag_placeholder {
/*    position: relative;*/
    opacity: 0.5 !important;
}
#drag_placeholder .layoutobj {
    outline: 1px dashed yellow;
}
#blueworld_tooltip {
    background: #fff;
    color: #000;
    padding: 3px;
    position: absolute;
    margin-top: 5px;
    margin-left: 10px;
}
.unsized {
    outline: 1px dashed yellow;
}

.toolobj {
    position: relative
}
.blueworld-drag-tool {
    cursor: move;
}
.blueworld-remove-tool {
    cursor: pointer;
}
#blueworld_header {
    position: fixed;
    width: 100%;
    /*height: 132px;*/
    top: 0;
    z-index: 5000;
}
#blueworld_header.relative {
    position: relative;
}
#blueworld_canvas {
    margin: 10px auto 100px;
}
#utilities {
    position: relative;
}
#utilities #toggle_panel {
    position: absolute;
    bottom: -14px;
    left: 50%;
    font-size: 1.8em;
    line-height: 0.8;
    margin: 0;
    border: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: none !important;
    width: 80px;
    margin-left: -40px;
    padding: 0;
    background: url(../images/bgs/charcoal_bg.png);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden; /* Chrome and Safari */
    -moz-backface-visibility:hidden; /* Firefox */
}
#utilities #toggle_panel
{
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
#open-file {
    position: relative;
}
#open-file input, #open-file input[type="file"] {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* General Settings UI
================================================== */

.blueworld-settings-panel
{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.1);
    z-index: 6000;
}
.blueworld-settings-inner {
    min-width: 270px;
    max-width: 750px;
    width: 270px;
    margin: 100px auto 0;
    padding: 25px;
    color: #fff;
    background: rgba(0,0,0,0.6);
    border-radius: 6px;
    position: relative;
    box-shadow:
        inset 0 0 4px rgba(0,0,0,0.2),
        0 0 24px rgba(0,0,0,0.4),
        0 0 60px rgba(0,0,0,0.6);

}

.blueworld-settings-panel.datatable .blueworld-settings-inner,
.blueworld-settings-panel.menu .blueworld-settings-inner
{
    width: 520px;
}
.blueworld-settings-close {
    width: 22px;
    height: 22px;
    line-height: 0.3;
    text-align: center;
    font-size: 2.4em;
    border: 1px solid rgba(255,255,255,0.4);
    -webkit-border-radius: 4px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -khtml-border-radius-bottom-left: 6px;
    -khtml-border-radius-bottom-right: 6px;
      -moz-border-radius-bottomleft: 6px; /* Firefox 1-3.6 */
      -moz-border-radius-bottomright: 6px; /* Firefox 1-3.6 */
           -o-border-radius: 6px;
               border-radius-bottom-left: 6px;
               border-radius-bottom-right: 6px;

               /* useful if you don't want a bg color from leaking outside the border: */

    -webkit-background-clip: padding-box; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-background-clip: padding; /* Firefox 1-3.6 */

         background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */

    position: absolute;
    top: 5px;
    right: 5px;

    cursor: pointer;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.blueworld-settings-close:hover {
    color: #fff;
    opacity: 0.6;
/*
    background: #4488c9;
    box-shadow: 0 0 3px rgba(0,0,0,0.4);
*/
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
{
    border: 1px solid rgba(0,0,0,0.6);
    border-top: 1px solid rgba(0,0,0,0.6);
    border-left: 1px solid rgba(0,0,0,0.6);
    box-shadow:
        rgba(0,0,0,.4) 0 0 1px,
        inset rgba(255,255,255,.3) 0 0 2px;
}
.blueworld-settings-content .control-text
{
    padding: 3px !important;
}
.blueworld-settings-content form.multi.beside fieldset label
{
    width: 48%;
}
.blueworld-settings-content form.multi fieldset label input.mini
{
    width: 3em;
    padding: 1px;
}
.blueworld-settings-content .dd {
    width: 100%;
    min-height: 200px;
    max-height: 500px;
    overflow: auto;
}
.blueworld-settings-content label {
    display: inline-block;
}
.margin-padding-settings .row
{
    margin-bottom: 1em;
}
.margin-padding-settings h5 {
    clear:both;
    color:#fff;
    font-weight:bold;
    margin:20px 0 5px 10px;
}
.margin-padding-settings fieldset {
    float:left;
    width: 20%;
    margin-right: 5%
}
.margin-padding-settings legend
{
    position: relative;
}
.margin-padding-settings legend .styled_select {
    position: absolute;
    top: 0;
    left: 130px;
}
.margin-padding-settings fieldset:last-child
{
    margin-right: 0%;
}
.margin-padding-settings label {
    font-size:0.9em;
    font-weight:normal;
}
.margin-padding-settings input[type=text]
{
    padding: 1px !important;
}
button.control {
    clear:both;
    width: 95%;
    margin: 0.6em 0;
    padding: 0.3em 1.6em;
}
button.control + button.control
{
    margin-top: 0;
}
.blueworld-settings-content p {
    clear: both;
}
.blueworld-settings-content a {
    color: #000;
}
.dd-content {
    padding-right: 0;
}
.dd-content select {
    width: auto;
}
#blueworld-settings-content .menu-import-window {
    width:70%;
    height:129px;
    overflow: auto;
    border: 1px solid #fff !important;
    padding:1em;
    margin: 1em 0;
}
.menu-import-window {
    background: rgba(255,255,255,0.3);
    }
/* Menu manager overrides
================================================== */

.dd-item button,
.dd-item button:active,
.dd-item button:hover,
.dd-item button:focus
{
    box-shadow: none !important;
    background: transparent !important;
    text-shadow: 0 -1px 0 #666;
    color: #cdcdcd;

}

/* UI Effects
================================================== */

.focus
{
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transition: all 600ms ease-out;
    -moz-transition: all 600ms ease-out;
    -o-transition: all 600ms ease-out;
    -ms-transition: all 600ms ease-out;
    transition: all 600ms ease-out;
}
.focus.blur
{
    -webkit-filter: blur(4px);
    filter: blur(4px);
    -webkit-transition: all 400ms ease-in;
    -moz-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
    -ms-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
}

/* Scrollbars
================================================== */

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: rgba(255,255,255,0.8);
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: rgba(95,134,191,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(95,134,191,0.4);
}

/* Headline settings
================================================== */

.headline-settings h1, .headline-settings h2, .headline-settings h3,
.headline-settings h4, .headline-settings h5, .headline-settings h6 {
    display: inline;
}
.headline-settings input {
    display: none;
}
.headline-settings .active {
    border-bottom: 3px solid #000;
}


/* Admin ui-extras
================================================== */
#currentUsers a{ color: #4D4D4D; }
#currentUsers a:hover{ color: #1b378c; }

/* admin table syles */
table.admintable
{
    margin-top: 2em;
}

table.admintable thead th
{
    border-bottom: 1px solid #4566a1;
    background-color: rgb(47,108,184);
    color: #fff;
    text-shadow: -1px 0 0 rgba(0,0,0,0.6);
}

table.admintable tbody td
{
    border-top: 1px solid #fff;
    border-bottom: 1px solid rgba(108,141,200,0.5);
}

table.admintable tbody tr:last-child td
{
    border-bottom: none;
}

table.admintable tbody tr.even td
{
    background-color: rgba(108,141,200,0.1);
}

/* font-size classes */
.fourteen_px{ font-size: 14px !important; }


/* pages palate styles
================================================== */

#pages_palate
{
    position: fixed;
    top: 100px;
    left: -3px;
    height: auto;
    min-width: 250px;

    background-color:#e0e4ea/*  rgba(0,0,0,0.4) */;
    z-index: 10000;
    box-shadow: rgba(0,0,0,0.4) 0 0 6px;
    /* http://css-tricks.com/almanac/properties/b/border-radius/
    */
    -webkit-border-radius: 4px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -khtml-border-radius-bottom-left: 4px;
    -khtml-border-radius-bottom-right: 4px;
      -moz-border-radius-bottomleft: 4px; /* Firefox 1-3.6 */
      -moz-border-radius-bottomright: 4px; /* Firefox 1-3.6 */
           -o-border-radius: 4px;
               border-radius-bottom-left: 4px;
               border-radius-bottom-right: 4px;

               /* useful if you don't want a bg color from leaking outside the border: */

    -webkit-background-clip: padding-box; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-background-clip: padding; /* Firefox 1-3.6 */

         background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */
    /*

    -webkit-transform:scale(0.9);
    -moz-transform:scale(0.9);
    transform:scale(0.9);

    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
*/
}
#pages_palate,
#pages_palate.closed:hover
{
    opacity: 1;
    box-shadow: rgba(0,0,0,0.6) 0 0 6px, rgba(0,0,0,0.4) 0 0 12px, rgba(0,0,0,0.4) 0 0 24px;
    -webkit-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -o-transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    transition: opacity 0.4s ease-in;
}
#pages_palate.closed
{
    left: -170px;
    height: 30px;
    overflow: hidden;
    opacity: 0.4;
    box-shadow: none;

    -webkit-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -o-transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    transition: opacity 0.4s ease-in;
}

#pages_palate .palate_header
{
    padding: 2px 0 6px;
    color: #fff;
    min-width: 130px;
    background: url(../images/bw_styled_elements.png) 0 -2px no-repeat;
}

#pages_palate #skins .skins
{
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
}
#pages_palate #skins .skins li
{
    padding-right: 50px;
    margin-bottom: 0;
}

/* Skins Menu
================================================== */

.skin-drop-zone
{
    display: block;
    height: 25px;
    width: 205px;
    background: #5191c5;
}
#skins ul
{
    list-style: none;
    margin-left: 0;
}
#skins li {
/*
    text-align: center;
    float:left;
*/
    position: relative;
    display: block;
    padding: 5px 0;
    min-height: 25px;
    width: 205px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
}
#skins li .icon {
/*
    display: block;
    line-height: 40px !important;
    height: 40px;
    width: 40px;
    margin-left: 10px;
*/
    cursor: pointer;
    padding: 0 5px;
    float: left;
    display: inline-block;
    margin: 5px;
}
#pages_palate_toggle
{
    margin-top: 7px !important;
    padding-right: 5px;
}
#pages_palate .palate_header .title
{
    padding-left: 10px;
}
#skins li .skin-name {
    display: inline-block;
    min-height: 25px;
    width: 150px;
/*
    min-width: 40px;
*/
}
#skins li input {
    width: 140px;
    font-size: 100%;
}
#skins li:hover
{
    background-color: #c7dbf8;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}
#skins li.add-skin b {
    font-size: 1em !important;
}
#skins li .remove-skin {
    position: absolute;
    top: 4px;
    right: 20px;
    cursor: pointer;
    display: none;
}
#skins li .duplicate-skin {
    position: absolute;
    top: 6px;
    right: 5px;
    cursor: pointer;
    display: none;
}
#skins li:hover .duplicate-skin,
#skins li:hover .remove-skin {
    display: block;
}
#skins li.active {
/*     color: #abc7d9; */
    background-color: #ccd2db;
}
#skins li .duplicate-skin:hover,
.blueworld-add-skin:hover {
    cursor: pointer;
    text-decoration: underline;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.blueworld-tool {
    position: relative;
}
.toolobj:hover {
    outline: 1px dotted rgba(0,0,0,0.5);
}
.mousedrag-handle.ui-resizable-e {
    width: 7px;
    right: -7px;
}

/* sticky notes */
.blueworld-sticky-note {
    position: absolute;
    right: 1.5em;
    top: 1.5em;
    width: 200px;
    max-width: 150px;
    height: 20px;
    min-height: 0;
    font-size: 14px;
    display: block;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    -o-transition: all 0s;
    transition: all 0s;
    z-index: 1;
}

/* preview mode */
.blueworld-preview #blueworld_header,
.blueworld-preview .ui-resizable-handle,
.blueworld-preview .toolbar li,
.blueworld-preview .add-skin,
.blueworld-preview .remove-skin {
    display: none !important;
}
.blueworld-preview #blueworld_canvas {
    margin: 1em auto;
}
.blueworld-preview .toolbar li.blueworld-sticky {
    display: inline-block !important;
}
.blueworld-preview .toolobj:hover {
    outline: 0;
}

.menucontent [contenteditable="true"]
{
    height: 2.3em;
    margin-bottom: 2em;
    background-color: rgba(0,0,0,0.8);
}
.menucontent [contenteditable="true"]:active,
.menucontent [contenteditable="true"]:focus,
[contenteditable="true"]:active,
[contenteditable="true"]:focus
{
    background-color: rgba(255,255,255,0.15);
}
/* settings tabs
================================================== */
/*
.setting-tabs a {
    background: #bbb;
    color: #666;
    border-radius: 5px 5px 0 0;
    padding: 5px;
}
.setting-tabs a.active {
    color: #000;
    background: #fff;
}
*/
.setting-tabs
{
    width: 520px;
}
.setting-tabs a
{
    display: inline-block;
    text-align: center;
    margin-right: -5px;
    width: 23.5%;
    padding-left: 0 !important;
    padding-right: 0 !important
}
.setting-tabs-content .tab {
    display: none;
}
.setting-tabs-content div.active {
    display: block;
    margin-top: 1em;
}

/* datatable settings
================================================== */
.tab-row-settings .dataTable .edit,
.tab-row-settings .dataTable .delete,
.tab-row-settings .dataTable .save {
    cursor: pointer;
}
.tab-import-settings div.import {
    width:90%;
    height:129px;
    overflow: auto;
    border: 1px solid #000;
    border: 1px solid rgba(255,255,255,0.4);
    padding:1em;
    margin: 1em 0;
    background-color: rgba(255,255,255,0.25);
}
.tab-import-settings .import-success {
    display: none;
    font-style: italic;
}

.tab-row-settings div.dataTables_filter input[type="text"]
{
    width: 180px;
}


/* Fancy Checkboxes/Radios  */
.blueworld-settings-content form.multi.beside
{
    margin-bottom: 0;
}
.blueworld-settings-content legend
{
    margin-top: 0.6em;
}
.blueworld-settings-content fieldset
{
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0.3em;
    padding: 0;
}
label.switch,
.setting-tabs a,
.btn-grp,
.tab-row-settings #DataTables_Table_2_previous,
.tab-row-settings #DataTables_Table_2_next
{
    padding: 0.3em 1.6em;
    border-color: transparent;
    border-left: 1px solid #fff;
    border-left: 1px solid rgba(255,255,255,0.3);
    border-right: 1px solid #000;
    border-right: 1px solid rgba(0,0,0,0.6);
    color: #fff;
    text-shadow: 0 -1px 0 #000;
    background-color: #4488c9;
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#4488c9),to(#1969a4));
    background-image:-webkit-linear-gradient(top,#1969a4,#4488c9);
    background-image:   -moz-linear-gradient(top,#1969a4,#4488c9);
    background-image:    -ms-linear-gradient(top,#1969a4,#4488c9);
    background-image:      -o-linear-gradient(top,#1969a4,#4488c9);
    background-image: linear-gradient(top,#1969a4,#4488c9);

    filter:progid:dximagetransform.microsoft.gradient(startColorstr='#4488c9',endColorstr='#1969a4',GradientType=0);
    opacity: 0.6;
    -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;
}
label.switch:hover,
.setting-tabs a:hover,
.btn-grp:hover,
.tab-row-settings #DataTables_Table_2_previous:hover,
.tab-row-settings #DataTables_Table_2_next:hover
{
    color: #fff;
    opacity: 0.8;
    -webkit-transition: all 0.2s ease-in;
     -moz-transition: all 0.2s ease-in;
       -o-transition: all 0.2s ease-in;
          transition: all 0.2s ease-in;
}
label.switch.first,
.setting-tabs a:first-child,
.btn-grp:first-child,
.tab-row-settings #DataTables_Table_2_previous
{
    border-left: 1px solid transparent;
    -o-border-bottom-left-radius: 6px;
    -o-border-top-left-radius: 6px;
    -khtml-border-bottom-left-radius: 6px;
    -khtml-border-top-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-topleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
label.switch.last,
.setting-tabs a:last-child,
.btn-grp:last-child,
.tab-row-settings #DataTables_Table_2_next
{
    border-right: 1px solid transparent;
    -o-border-bottom-right-radius: 6px;
    -o-border-top-right-radius: 6px;
    -khtml-border-bottom-right-radius: 6px;
    -khtml-border-top-right-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-topright: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

input[type=radio].menu-alignment:checked + label.switch,
input[type=checkbox].fancy:checked + label.switch,
.setting-tabs a.active,
.btn-grp:active,
.btn-grp.active,
.tab-row-settings #DataTables_Table_2_previous.active,
.tab-row-settings #DataTables_Table_2_next.active
{
    color: #fff;
    text-shadow: 0 1px 0 #000;
    background-color: #4488c9;
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#4488c9),to(#1969a4));
    background-image:-webkit-linear-gradient(top,#4488c9,#1969a4);
    background-image:   -moz-linear-gradient(top,#4488c9,#1969a4);
    background-image:    -ms-linear-gradient(top,#4488c9,#1969a4);
    background-image:      -o-linear-gradient(top,#4488c9,#1969a4);
    background-image: linear-gradient(top,#4488c9,#1969a4);

    filter:progid:dximagetransform.microsoft.gradient(startColorstr='#4488c9',endColorstr='#1969a4',GradientType=0);
    opacity: 1;
}

input[type=radio].menu-alignment,
input[type=checkbox].fancy
{
    position: absolute;
    opacity: 0;
    /* For mobile, it's typically better to position checkbox on top of clickable
      area and turn opacity to 0 instead. */
}

input[type=checkbox].fancy + label.switch
{
    display: block;
    margin-bottom: 0.6em;
    margin-right: 20px;
    border-radius: 22px;
    padding-left: 35px;
}

input[type=checkbox] + label.switch:before
{
    position: absolute;
    display: block;
    left: 30px;
    color: #fff;
    padding: 5px;
    text-align: right;
    font-family: 'FontAwesome';
    font-size: 1em;
    line-height: 1;
    content: "\f096";
}

input[type=checkbox].fancy:checked + label.switch:before
{
    content: "\f046";
}