*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    background:#e8ddbf;
    color:#000;
}

/* Header */

.top-header{
    width:100%;
    height:105px;
    background:#000;
    display:flex;
    justify-content:center;
    align-items:center;
}

.logo{
    text-align:center;
    color:#fff;
}

.oakland{
    font-family: "Times New Roman", serif;
    font-size:58px;
    line-height:48px;
    letter-spacing:-2px;
}

.university{
    font-family:"Times New Roman", serif;
    font-size:34px;
    letter-spacing:1px;
    margin-top:-5px;
}

.gold-divider{
    height:8px;
    background:#9c8450;
}

/* Layout */

.container{
    width:740px;
    margin:20px auto;
    display:flex;
    gap:30px;
}

/* Panels */

.login-panel{
    width:470px;
}

.sidebar{
    width:220px;
}

.panel-header{
    background:#9b824d;
    color:#fff;
    padding:8px 14px;
    font-size:14px;
    font-weight:normal;
    border:1px solid #8f7743;
}

.panel-body,
.sidebar-body{
    background:#fff;
    border:1px solid #c6b38b;
    border-top:none;
    padding:15px;
}

/* Form */

label{
    display:block;
    font-size:15px;
    font-weight:bold;
    margin-bottom:8px;
    margin-top:2px;
}

.netid-wrapper{
    display:flex;
    border:1px solid #c9a45a;
    margin-bottom:16px;
}

.netid-wrapper input{
    flex:1;
    border:none;
    padding:8px 12px;
    background:#eaf2ff;
    font-size:15px;
}

.netid-wrapper span{
    width:120px;
    background:#eaf2ff;
    border-left:1px solid #c9a45a;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#444;
    font-weight:bold;
}

input[type=password]{
    width:100%;
    padding:8px 12px;
    border:1px solid #c9a45a;
    background:#eaf2ff;
    font-size:15px;
    margin-bottom:16px;
}

div.body{font-size: 8px;

}

button{
    background:#0071bc;
    color:#fff;
    border:none;
    padding:9px 16px;
    font-weight:bold;
    font-size:13px;
    border-radius:3px;
    cursor:pointer;
    margin-bottom:18px;
}

button:hover{
    background:#005f9d;
}

a{
    color:#004ea2;
    text-decoration:underline;
}

.panel-body h4{
    margin-top:12px;
    margin-bottom:12px;
    font-size:16px;
    font-weight:normal;
}

.panel-body p{
    font-size:13px;
    line-height:1.45;
    margin-top:10px;
    margin-bottom:12px;
}

.warning{
    margin-top:12px;
}

/* Sidebar */

.sidebar-body ul{
    margin-left:18px;
}

.sidebar-body li{
    margin-bottom:7px;
    font-size:13px;
}

.sidebar hr{
    margin:16px 0;
    border:none;
    border-top:1px solid #c9b58a;
}

.help{
    margin-top:15px;
    font-size:13px;
}

.browser{
    margin-top:14px;
    font-size:13px;
    line-height:1.4;
}

/* Match Screenshot Dimensions */

@media (min-width:1200px){

    .container{
        margin-top:20px;
    }

    .login-panel{
        width:470px;
    }

    .sidebar{
        width:220px;
    }
}