html {
    height: 100%;
}



img {
    border-style: none;
    border-color: inherit;
    border-width: 0;
    
}

.header_text {
    text-align: center;
    font-size: xx-large;
    font-weight: bold;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color:cadetblue;
    color:white;

}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.7);
}

textarea, input, select {
    outline: none;
    font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
}

.hidden {
    display: none;
}

.clear {
    clear: both;
}

.transition_all {
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    opacity: 0.5;
    width: 120%;
    height: 120%;
}

.text_shadow {
    color: #222222;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3);
}

.spacer_20 {
    height: 20px;
    clear: both;
}

#widget_scroll_container {
    overflow: hidden;
    margin: 0px auto;
    position: absolute;
    top: 8%;
    left: 60px;
}

#widget_preview {
    top: 50%;
    right: 50%;
    left: 50%;
    bottom: 50%;
    position: fixed;
    overflow: hidden;
    color: #FFFFFF;
    z-index: 200;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    cursor: default;
}

    #widget_preview a {
        color: #FFFFFF;
    }

    #widget_preview.open {
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
    }

    #widget_preview.loading {
        background: url('../images/page_loader.gif') no-repeat scroll 50% 50%;
    }

    #widget_preview > div.dot {
        position: absolute;
        width: 5px;
        height: 5px;
        background: #FFFFFF;
        right: 100%;
    }

        #widget_preview > div.dot.open {
            right: 0%;
        }

#widget_sidebar {
    position: absolute;
    display: table;
    height: 100%;
    top: 0px;
    bottom: 0px;
    right: -66px;
    z-index: 500;
    width: 76px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -0-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

    #widget_sidebar.open,
    #widget_sidebar:hover {
        right: 0px;
        background-color: #111111;
    }

    #widget_sidebar > div {
        display: table-cell;
        vertical-align: middle;
    }

        #widget_sidebar > div > div {
            background-repeat: no-repeat;
            background-position: 50% 10px;
            height: 84px;
            cursor: pointer;
            position: relative;
        }

            #widget_sidebar > div > div:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }

            #widget_sidebar > div > div.cancel {
                background-image: url('../images/metro/cancel.png');
            }

            #widget_sidebar > div > div.download {
                background-image: url('../images/metro/save.png');
            }

            #widget_sidebar > div > div.back {
                background-image: url('../images/metro/back.png');
            }

            #widget_sidebar > div > div.next {
                background-image: url('../images/metro/next.png');
            }

            #widget_sidebar > div > div.refresh {
                background-image: url('../images/metro/refresh.png');
            }

            #widget_sidebar > div > div > span {
                font-size: 0.7em;
                text-align: center;
                display: block;
                position: absolute;
                bottom: 0px;
                left: 0px;
                right: 0px;
                bottom: 10px;
            }

#widget_preview_content {
    overflow: auto;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    font-size: 0.9em;
    -webkit-animation: widget_preview 0.2s linear;
    -moz-animation: widget_preview 0.2s linear;
    -ms-animation: widget_preview 0.2s linear;
    -o-animation: widget_preview 0.2s linear;
    animation: widget_preview 0.2s linear;
    -webkit-overflow-scrolling: touch;
    -moz-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

div.page_content {
    padding: 16px;
}

div.widget_container {
    position: relative;
    margin-right: 50px; /* when this value is changed, make sure its also updated in ui class ($container_margin) */
    float: left;
    padding: 10px; /* when this value is changed, make sure its also updated in ui class ($container_padding) */
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
}

    div.widget_container:last-child {
        margin-right: 0px;
    }

div.widget {
    float: left;
    position: relative;
    color: #FFFFFF;
    cursor: pointer;
    margin: 5px; /* when this value is changed, make sure its also updated in ui class ($widget_margin) */
    opacity: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
    -ms-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
    -o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

    div.widget.unloaded {
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
        -o-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    div.widget.animation {
        -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
        -moz-transition: opacity 0.3s, -moz-transform 0.3s;
        -ms-transition: opacity 0.3s, -ms-transform 0.3s;
        -o-transition: opacity 0.3s, -o-transform 0.3s;
        transition: opacity 0.3s, transform 0.3s;
    }

    div.widget:hover {
        z-index: 10;
        border: 3px solid rgba(255, 255, 255, 0.4);
        -webkit-transform: scale(1.01);
        -moz-transform: scale(1.01);
        -ms-transform: scale(1.01);
        -o-transform: scale(1.01);
        transform: scale(1.01);
    }

div.widget_link {
    cursor: pointer;
}

div.widget div.main {
    overflow: hidden;
    position: absolute;
    left: 0px;
    right: 0px;
    height: 100%;
    top: 100%;
    -webkit-transition: top 0.4s;
    -moz-transition: top 0.4s;
    -ms-transition: top 0.4s;
    -o-transition: top 0.4s;
    transition: top 0.4s;
}

div.widget div.main {
    height: 100%;
    top: 0px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

div.widget div.widget_content {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    overflow: hidden;
}

div.widget div.main > span {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    -ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    -o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}





/*
Widget Theme
*/


div.widget_peach,
div.widget_container.blue div.widget {
    background-color: #ffdfc4;
    color:#4e2b2b;
}

div.widget_blue,
div.widget_container.blue div.widget {
    background-color: #0097AA;
}

div.widget_royalblue, div.widget_container.royalblue div.widget {
    background-color: #0000CC;
}
div.widget_orange,
div.widget_container.orange div.widget {
    background-color: #F29500;
}

div.widget_darkorange, div.widget_container.darkorange div.widget {
    background-color: #FF3300;
}

div.widget_red,
div.widget_container.red div.widget {
    background-color: #C23916;
}

div.widget_green,
div.widget_container.green div.widget {
    background-color: #94C849;
}


div.widget_poop,
div.widget_container.green div.widget {
    background-color: #948a54;
}


div.widget_lav,
div.widget_container.green div.widget {
    background-color: #b3a2c7;
}


div.widget_orangemoldy,
div.widget_container.green div.widget {
    background-color: #f79646;
}



div.widget_darkgreen,
div.widget_container.darkgreen div.widget {
    background-color: #00b727;
}

div.widget_purple,
div.widget_container.purple div.widget {
    background-color: #91009B;
}

div.widget_darkred,
div.widget_container.darkred div.widget {
    background-color: #BE213E;
}

div.widget_darkblue,
div.widget_container.darkblue div.widget {
    background-color: #24575f;
}

div.widget_yellow,
div.widget_container.yellow div.widget {
    background-color: #D9B700;
}

div.widget_grey,
div.widget_container.grey div.widget {
    background-color: #4C4C4C;
}

div.widget_white,
div.widget_container.white div.widget {
    background-color: #fff;
}

div.widget_black,
div.widget_container.white div.widget {
    background-color: #000;
}

div.widget_navyblue,
div.widget_container.navyblue div.widget {
    background-color: #00223f;
}

div.widget_clear,
div.widget_container.clear div.widget {
    background-color: none;
}

div.widget_pink,
div.widget_container.clear div.widget {
    background-color: #b80093;
}

div.widget_lightblue,
div.widget_container.clear div.widget {
    background-color: #36d0e8;
}

div.widget_yetanotherblue, div.widget_container.clear div.widget {
    background-color: #003E3E;
}




/* when this value is changed, make sure its also updated in ui class ($widget_width_big) */

div.widget1x05 {
    width: 95px;
    height: 46px;
}

div.widget1x1 {
    width: 95px;
    height: 95px;
}

div.widget2x1 {
    width: 200px;
    height: 95px;
}

div.widget1x2 {
    width: 95px;
    height: 200px;
}

div.widget2x2 {
    width: 200px;
    height: 200px;
}

div.widget2x3 {
    width: 200px;
    height: 290px;
}

div.widget2x4 {
    width: 200px;
    height: 410px;
}

div.widget4x1 {
    width: 410px;
    height: 95px;
}

div.widget4x2 {
    width: 410px;
    height: 200px;
}

div.widget4x3 {
    width: 410px;
    height: 290px;
}

div.widget3x05 {
    width: 290px;
    height: 50px;
}
div.widget3x1 {
    width: 290px;
    height: 100px;
}

div.widget3x2 {
    width: 290px;
    height: 200px;
}

div.widget3x3 {
    width: 290px;
    height: 290px;
}

div.widget3x4 {
    width: 290px;
    height: 410px;
}

div.widget4x4 {
    width: 410px;
    height: 410px;
}

div.widget6x1 {
    width: 590px;
    height: 95px;
}

div.widget6x3 {
    width: 590px;
    height: 290px;
}

div.widget8x4 {
    width: 830px;
    height: 410px;
}

div.widget a {
    color: #FFFFFF;
}

div.widget100 {
    width: 100%;
    height: 95px;
}


/*
Compact Mode
*/


@media screen and (max-width: 1024px) {
    /* when this value is changed, make sure its also updated in ui class ($widget_width_small) */
    div.widget1x1 {
        width: 95px;
        height: 95px;
    }

    div.widget2x1 {
        width: 200px;
        height: 95px;
    }

    div.widget1x2 {
        width: 95px;
        height: 200px;
    }

    div.widget2x2 {
        width: 200px;
        height: 200px;
    }

    div.widget2x3 {
        width: 200px;
        height: 290px;
    }

    div.widget2x4 {
        width: 200px;
        height: 410px;
    }

    div.widget4x1 {
        width: 200px;
        height: 95px;
        line-height: none; 
        font-size: 0.8em;      
        padding: 15px 0;
    }

    div.widget4x2 {
        width: 410px;
        height: 200px;
    }

    div.widget4x3 {
        width: 410px;
        height: 290px;
    }

    div.widget3x1 {
        width: 290px;
        height: 100px;
    }

    div.widget3x2 {
        width: 290px;
        height: 200px;
    }

    div.widget3x3 {
        width: 290px;
        height: 290px;
    }

    div.widget3x4 {
        width: 290px;
        height: 410px;
    }

    div.widget4x4 {
        width: 410px;
        height: 410px;
    }

    div.widget6x1 {
        width: 590px;
        height: 95px;
    }

    div.widget6x3 {
        width: 590px;
        height: 290px;
    }

    div.widget8x4 {
        width: 830px;
        height: 410px;
    }

    div.widget a {
        color: #FFFFFF;
    }

    div.widget100 {
        width: 100%;
        height: 95px;
    }
}


/*
touch
*/
body.touch {
    overflow: auto;
}

    body.touch div.widget:hover {
        border: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

/*
Page Content
*/
#widget_preview h1 {
    position: relative;
    margin: 0px 0px 20px 0px;
    padding: 0px;
    font-size: 1.5em;
    color: #111111;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3);
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);
    -ms-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);
    -o-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);
}

#widget_preview h2 {
    font-size: 1.4em;
    margin-left: 20px;
}

#widget_preview h3 {
    font-size: 1.3em;
    margin-left: 20px;
}

#widget_preview h4 {
    font-size: 1.2em;
    margin-left: 20px;
}

#widget_preview h5 {
    font-size: 1.1em;
    margin-left: 20px;
}

#widget_preview h6 {
    font-size: 1em;
    margin-left: 20px;
}

#widget_preview p {
    padding: 20px;
    margin: 0px 20px 20px 20px;
    color: #000000;
    background-color: #FFFFFF;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

    #widget_preview p.dark {
        background-color: #111111;
        color: #FFFFFF;
    }

#widget_preview div.grid4 {
    float: left;
    width: 22.75%;
    margin: 0px 1.5%;
}

    #widget_preview div.grid4:first-child {
        margin-left: 0px;
    }

    #widget_preview div.grid4:last-child {
        margin-right: 0px;
    }

#widget_preview p input[type="text"],
#widget_preview p input[type="email"],
#widget_preview p input[type="password"],
#widget_preview p textarea {
    border: none;
    padding: 8px 10px;
    margin-bottom: 20px;
    background-color: #F9F9F9;
    resize: none;
    -webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
    -o-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

#widget_preview p input[type="text"],
#widget_preview p input[type="email"],
#widget_preview p input[type="password"] {
    width: 50%;
}

#widget_preview p textarea {
    width: 100%;
    height: 150px;
}

    #widget_preview p input[type="text"]:focus,
    #widget_preview p input[type="email"]:focus,
    #widget_preview p input[type="password"]:focus,
    #widget_preview p textarea:focus {
        -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4);
        -ms-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4);
        -o-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4);
    }

    #widget_preview p input.invalid,
    #widget_preview p textarea.invalid {
        background-color: #FFEDED;
    }

#widget_preview p input[type="button"],
#widget_preview p input[type="submit"] {
    border: none;
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-color: #222222;
    padding: 8px 20px 8px 20px;
    font-size: 0.8em;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-box-shadow: 1px 1px 6px #999999;
    -moz-box-shadow: 1px 1px 6px #999999;
    -ms-box-shadow: 1px 1px 6px #999999;
    -o-box-shadow: 1px 1px 6px #999999;
    box-shadow: 1px 1px 6px #999999;
}

    #widget_preview p input[type="button"]:hover,
    #widget_preview p input[type="submit"]:hover {
        background-color: #333333;
    }

    #widget_preview p input[type="button"]:active,
    #widget_preview p input[type="submit"]:active {
        -webkit-box-shadow: 2px 2px 6px #000000 inset;
        -moz-box-shadow: 2px 2px 6px #000000 inset;
        -ms-box-shadow: 2px 2px 6px #000000 inset;
        -o-box-shadow: 2px 2px 6px #000000 inset;
        box-shadow: 2px 2px 6px #000000 inset;
    }

#widget_preview ul {
    padding: 0px 10px;
    margin: 0px;
    list-style: none;
    padding: 20px;
    margin: 0px 20px 20px 20px;
    color: #000000;
    background-color: #FFFFFF;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

#widget_preview li {
    background: url('../images/bullet.png') no-repeat 10px 50%;
    padding: 10px 10px 10px 45px;
    background-color: #EEEEEE;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

    #widget_preview li:first-child {
        border-top: none;
    }

    #widget_preview li:last-child {
        border-bottom: none;
    }

    #widget_preview li:hover {
        background-color: #DDDDDD;
        background-position: 20px 50%;
        padding-left: 55px;
    }

@-webkit-keyframes widget_preview {
    from {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
}

@-moz-keyframes widget_preview {
    from {
        opacity: 0;
        -moz-transform: translateY(-20px);
    }

    to {
        opacity: 1;
        -moz-transform: translateY(0px);
    }
}

@-ms-keyframes widget_preview {
    from {
        opacity: 0;
        -ms-transform: translateY(-20px);
    }

    to {
        opacity: 1;
        -ms-transform: translateY(0px);
    }
}

@-o-keyframes widget_preview {
    from {
        opacity: 0;
        -o-transform: translateY(-20px);
    }

    to {
        opacity: 1;
        -o-transform: translateY(0px);
    }
}

@keyframes widget_preview {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* C DATA ADD ONS */

div.widget_container {
    /*Cancels out top padding on left widget container is question sections*/
    padding: 0 0 0 10px;
}

    div.widget_container.threequarter {
        /*Creates a new sub container which is three quarters width of the screen*/
        width: 75%;
        top: 1px;
        left: 0px;
    }

    div.widget_container.single {
        /*Creates a new sub container which creates a single column of width 2 tiles*/
        width: 140px;
    }

.header_text {
    /*This one is just to add colour to the header text of question sections */
    color: #fff;
}

.questionsectiontitle {
    /*Style for the Question Section title, located in the 2x4 white box*/
    padding: 80px 10px;
}

.questionsubtitle {
    /*The style for the little headers in the questions page*/
    color:#1d6099;
    background-color: #dce6f2;
    margin: 0px;
}
.username {
    /*Adds style to the username that shows at the top*/
    font-size: 22px;
    color: #000;
}

.client_vendor_name {
    /*Adds style to the name used int he client vendor info tiles*/
    font-size: 12px;
    color: #000;
    position: absolute;
    bottom: 0px;
}

.widget_content > span {
    /*changes the font colour for the R5 statement*/
    color: #333;
}

/*.tasksbutton {
    /*Adds flavour to the buttons on the Tasks page*/
    color: #1a183d;
    background-color: #bccfe6;
    font-size: 14px;
    font-weight:bold;
    border: 2px groove #a19fbf;
    border-radius: 2px;

}*/






.taskheader {
    /*header for task portal*/
    color: #c0d6f0;
    font-size: 18px;
}


/*here are some quick fix changes*/
.radiotable {
    border: 0px;
    width: 100%;
}


th {
    border: 0;
}

.radio {
    width: 5%;
}

.radiodesc {
    width: 95%;
}
.maxwidth {
    max-width: 160px;
}


/*the next section is a widget div for preesed or selected buttons*/
div.widget_d {
    float: left;
    position: relative;
    color: #FFFFFF;
    margin: 5px; /* when this value is changed, make sure its also updated in ui class ($widget_margin) */
    opacity: 1;

    -webkit-box-shadow:inset  0 0 10px #000000;
    -moz-box-shadow:inset  0 0 10px #000000;
    box-shadow:inset  0 0 10px #000000;

}

    div.widget_d.unloaded {
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
        -o-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    div.widget_d.animation {
    }

    div.widget_d:hover {
    }

div.widget_d_link {
    cursor:not-allowed;
}

div.widget_d div.main {
    overflow: hidden;
    position: absolute;
    left: 0px;
    right: 0px;
    height: 100%;
    top: 100%;
    -webkit-transition: top 0.4s;
    -moz-transition: top 0.4s;
    -ms-transition: top 0.4s;
    -o-transition: top 0.4s;
    transition: top 0.4s;

    height: 100%;
    top: 0px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

div.widget_d div.main > span {
    display: block;
    position: absolute;
    bottom: 5px;
    left: 0px;
    right: 0px;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    -ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    -o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}



/*the next section is a widget div without all the fancy animations, background etc i.e. no effects (ne)*/
div.widget_ne {
    float: left;
    position: relative;
    /*color: #FFFFFF;*/
    margin: 5px; /* when this value is changed, make sure its also updated in ui class ($widget_margin) */
    opacity: 1;
}



    div.widget_ne.unloaded {
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
        -o-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    div.widget_ne.animation {
    }

    div.widget_ne:hover {
    }

div.widget_ne_link {
    cursor: pointer;
}

div.widget_ne div.main {
    overflow: hidden;
    position: absolute;
    left: 0px;
    right: 0px;
    height: 100%;
    top: 100%;
    -webkit-transition: top 0.4s;
    -moz-transition: top 0.4s;
    -ms-transition: top 0.4s;
    -o-transition: top 0.4s;
    transition: top 0.4s;

    height: 100%;
    top: 0px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

div.widget_ne div.main > span {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    -ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    -o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}




.logon_bg {
    background-image: url('images/metro_bg_homepage.jpg');
    background-color: #BA6826;
    background-repeat: no-repeat;
    background-position: center top;
}