* {
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#index-wrapper {
    height: 100%;
}

@media (min-width: 501px) {
    .main-navi-icon {
        display: none;
    }

    .sidebar-left {
	top: 0;
	left: 0;
	position: fixed;
	z-index: 500;
	overflow-y: auto;
	width: 300px;
	height: 100%;
	background-color: #045FB4;
    }

    .sidebar-left-middle-device-on {
        display: none;
    }
}

.sidebar-left-text {
    color: #A4A4A4;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.body-right {
    margin: 0;
    padding: 0;
    top: 0;
    right: 0;
    position: absolute;
    overflow-y: auto;
    left: 300px;
    height: 100%;
}

.profile {
    width: 100%;
    height: 400px;
}

.profile-picture {
    padding-top: 60px;
    height: 280px;
}

.profile-picture-image {
    margin: auto;
    width: 200px;
    height: 200px;
    background-image: url("../images/pickar-profile-picture-round.png");
    background-size: 100% 100%;
    background-repeat: no-repeat:
    z-index: 1000;
}

.profile-title {
    padding-left: 40px;
    padding-top: 10px;
    height: 150px;
}

.profile-name {
    text-align: left;
    font-size: 26px;
    font-weight: bold;
}

.profile-position {
    padding-top: 8px;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
}

.profile-email {
    padding-top: 8px;
    text-align: left;
    font-size: 20px;
}

.navigation-bar {
    margin: auto;
    width: 100%;
    padding-top: 30px;
    bottom: 0;
}

ul {
    list-style-type: none;
}

.navigation-item {
    height:32px;
}

a:link, a:visited {
    text-decoration: none;
}

a:hover, a:active {
    text-decoration: none;
    color: #4CAF50;
}

.navigation-item-text {
    text-align: left;
    font-size: 20px;
    font-weight: bold;
}

.iframe-display-body {
    width: 100%;
    height: 100%;
    background-color: white;
    border: none;
}

/* for test only, remove later*/
#test {
   font-size: 40px;
}


/*Responsive web design: Middle Devices*/
/*Notice: It hasn't been decided whether to implement design for middle-devices*/
/*Relevant code is commented out for now, can add back/finish implementation when decided*/
/*
@media (min-width: 801px) and (max-width: 1100px) {
    .main-navi-icon {
        display: block;
        position: fixed;
	// TODO: not sure whether below is useful to solve position:fixed in mobile
        // -webkit-backface-visibility: hidden;
        right: 0px;
        top: 0px;
        height: 36px;
        width: 40px;
        cursor: pointer;
        background-image: url("../images/mobile-main-navi-icon.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 1000;
    }
 
    .sidebar-left {
        display: none;
    }

    .sidebar-left-middle-device-on {
        top: 0;
        left: 0;
        position: fixed;
        z-index: 500;
        overflow-y: auto;
        width: 300px;
        height: 100%;
        background-color: #045FB4;
    }

    .body-right {
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
	right: 0;
        position: absolute;
        overflow-y: auto;
	// Below is for scrolling on mobile devices
        // -webkit-overflow-scrolling: touch;
	width: 100%;
        height: 100%;
    }

    .body-right-middle-device-with-sidebar-left {
        margin: 0;
	padding: 0;
	top: 0;
	right: 0;
	position: absolute;
	overflow-y: auto;
	left: 300px;
	height: 100%;
    }
}
*/

/*Responsive web design: Mobile Styles - small devices*/
@media (max-width: 500px) {
    .main-navi-icon {
        display: none;
    }

    .sidebar-left {
        display: none;
    }

    .sidebar-left-middle-device-on {
        display: none;
    }

    .body-right {
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
        right: 0;
        position: absolute;
        overflow-y: auto;
        /*Below is for scrolling on mobile devices*/
        -webkit-overflow-scrolling: touch;
        width: 100%;
        height: 100%;
    }
}