/* ================================================================================== */
/* =============================== HTML ELEMENT STYLES ============================== */
body, html {
   margin:0;
}

body {
    font-family:'Segoe UI', Arial, sans-serif;
    background-color:#eeeeee;
}

h2 {
    font-size:1.2em;
}

/* ================================================================================== */
/* =============================== END HTML ELEMENT STYLES ========================== */

/* ================================================================================== */
/* =============================== HEADER SECTION STYLES ============================ */
#MainHeader {
    width: 1020px;
    height: 60px;
    margin: 0px auto;
    padding: 0px 20px;
    position:relative;
    background-color:#fff;
}

    #MainHeader #Logo {
        width: 700px;
        display:inline-block;
    }

        #MainHeader #Logo h1 a {
            color:#003053;
            text-decoration:none;
        }
            #MainHeader #Logo h1 a:hover {
                color:#005ea3;
                text-decoration:none;
            }

    #MainHeader #Login {
        /*position:absolute;
        right:0px;*/
        width:260px;
        display:inline-block;
        font-size:85%;
    }

#AdminContent {
    background-color: transparent !important
}
/* ================================================================================== */
/* =========================== END HEADER SECTION STYLES ============================ */

/* ================================================================================== */
/* =========================== CONTENT AREA STYLES ================================== */
#Background {
     background-color:#eeeeee;
     width:100%;
}

#MainContent {
    width: 940px;
    margin:0px auto;
    min-height:400px;
}

#MainContent h1 {
    margin-top:0px;
}
/* ================================================================================== */
/* ======================= END CONTENT AREA STYLES ================================== */

/* ================================================================================== */
/* ======================= FOOTER STYLES ============================================ */
#MainFooter {
    width: 100%;
    min-height:60px;
    height:100%;
    display:block;
    background-color:#eeeeee;
    color:black;
    position:relative;
}

    #MainFooter section {
        width:1020px;
        padding:20px;
        margin:auto;
    }
/* ================================================================================== */
/* ======================= END FOOTER STYLES ======================================== */

/* ================================================================================== */
/* ======================= BLOG PAGE STYLES ========================================= */

.ReadBlogLeftColumn {
            display:inline-block; 
            width:68%
        }

        .ReadBlogRightColumn {
            display:inline-block; 
            vertical-align:top; 
            margin-left:20px; 
            margin-top:75px
        }
            .RightTopRow {
                vertical-align:top;
                box-shadow: 1px 1px 1px #333333;
                border-radius: 5px;
                padding:15px 10px 10px 10px;
                background-color:#81c6fb;
                color:white
                
            }
            .RightMiddleRow {
                vertical-align:top;
                box-shadow: 1px 1px 1px #333333;
                border-radius: 5px;
                padding:15px 10px 10px 10px;
                background-color:#81c6fb;
                color:white;
                font-size:13px;
                width:265px;
            }
                .RightMiddleRow a{
                    color:white
                }
                .RightMiddleRow a:hover{
                    color:#808080
                }

            .RightBottomRow {
                vertical-align:top;
                box-shadow: 1px 1px 1px #333333;
                border-radius: 5px;
                padding:15px 10px 10px 10px;
                background-color:#81c6fb;
                color:white
            }
/* ================================================================================== */
/* ======================= END BLOG PAGE STYLES ========================================= */

/* ================================================================================== */
/* ======================= BLOG LIST SLIDER STYLES ================================== */
    .arl,
    .arr {
	    margin-top: 20px;
	    float: left;
	    width: 24px;
	    height: 24px;
	    display: block;
	    background-color: #eee;
	    cursor: default;
	    -webkit-transition: all 200ms ease-in-out;
	    -moz-transition: all 200ms ease-in-out;
	    -o-transition: all 200ms ease-in-out;
	    -ms-transition: all 200ms ease-in-out;
	    transition: all 200ms ease-in-out;
	    box-shadow:  inset 0px -1px 0px 0px rgba(0,0,0, 0.05);
	    margin-right: 1px;
    }

    .arl i,
    .arr i { 
        margin-left:6px;
        margin-top:4px; 
        color: #c8c8c8;
    }

    .arl { border-radius: 2px 0 0 2px; }
    .arr { border-radius: 0 2px 2px 0 }

    .arl.active i,
    .arr.active i {color: #fff;}

    .arl.active,
    .arr.active { background-color: #ccc; cursor: pointer; box-shadow: inset 0px -1px 0px 0px rgba(0,0,0, 0.07); }

    .arl.active:hover,
    .arr.active:hover { background-color: #169fe6; box-shadow: inset 0px -1px 0px 0px rgba(0,0,0, 0.1); }

    .carousel-navi { margin: -10px 0 40px 0; float: left; }

    .jcarousel a {
        text-decoration:none;
    }

    figure {padding:0px; margin:5px}

        figure img {
            -webkit-transition: opacity 180ms ease-in-out;
	        -moz-transition: opacity 180ms ease-in-out;
	        -o-transition: opacity 180ms ease-in-out;
	        -ms-transition: opacity 180ms ease-in-out;
	        transition: opacity 180ms ease-in-out;
            display:block;
        }

        figure:hover img {
            opacity: 0.7;
	        filter: alpha(opacity=70);
        }

        figure:hover .item-description {
            -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.1);
	        box-shadow: 0 1px 1px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.1);
	        border-top: 5px solid #169fe6;
        }

    .item-description {
	    padding: 0px 0 5px 0;
	    background: #fff;
        color:black;
	    border-radius: 0 0 2px 2px;
	    border-top: 5px solid #e5e5e5;
	    text-align: center;
	    -webkit-transition: all 180ms ease-in-out;
	    -moz-transition: all 180ms ease-in-out;
	    -o-transition: all 180ms ease-in-out;
	    -ms-transition: all 180ms ease-in-out;
	    transition: all 180ms ease-in-out;
	    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.1);
	    box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.1);
    }

    .rightColumn {
        vertical-align:top
    }

    .leftColumn {
        padding-right:10px;
    }

    .active .Arrow {
        background-image: url('../Images/glyphicons_halflings-white.svg');
    }

    .inactive .Arrow {
        background-image: url('../Images/glyphicons_halflings.svg');
    }

    .Arrow {
        display: inline-block;
        width: 14px;
        height: 14px;
        line-height: 14px;
        vertical-align: text-top;
        background-position: 0 0;
        background-repeat: no-repeat;
        vertical-align: top;
        *display: inline;
        *zoom: 1;
    }
    .LeftArrow {
        background-position: -432px -72px;
    }
    .RightArrow {
        background-position: -456px -72px;
    }
/* ====================================================================================== */
/* ======================= END BLOG LIST SLIDER STYLES ================================== */