A Pen by Samuel Colburn

Thumbnail
This awesome code was written by smcolburn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright smcolburn ©
  • HTML
  • CSS
  • JavaScript
    
<body id="submitAssignment">
<div id="topbox"> <!-- ************ top box ************ -->
<header> <!-- ************ header ************ -->
		<h1 id="classtitle">
<a href="http://www.uvm.edu/~cems/cs/?Page=default.php">CS</a> 142 (A) 
<a href="syllabus.php?classRegNum=152" class="url">Advanced Web Design: CSS and Usability</a>
</h1>
<div id="toolmenu"><span id="screenSize"></span></div>
</header> <!-- ************ end header  ************ -->

<aside id="studentInfo"> <!-- %^%^%^%^%^ studentInfo %^%^%^%^%^ -->
<span id="studentName">
Student: smcolbur [<a href="https://webauth.uvm.edu/webauth/logout">logout</a>]
</span>
<span id="studentGrade" >Current <a href="https://rerickso.w3.uvm.edu/education/blackboard/grades.php">Grade</a>: 87</span>
<span id="classRank">
Rank: 8 of 43
</span>
</aside> <!-- %^%^%^%^%^ student info %^%^%^%^%^ -->

<nav id="mainMenu"> <!-- %^%^%^%^%^%^%^%^%^%^%^%^ Navigation %^%^%^%^%^%^%^%^%^%^%^%^%^%^%^%^%^% -->
<ol>
<li class="menuLink"><a href="assignments.php">Assignments</a></li>
<li class="menuLink"><a href="calendar.php?abWeek=10">Calendar</a></li>
<li class="menuLink"><a href="lectures.php">Lectures</a></li>
<li class="menuLink"><a href="media.php">Resources</a></li>
<li class="menuLink"><a href="sick.php">Sick</a></li>
<li class="menuLink"><a href="syllabus.php">Syllabus</a></li>
<li class="menuLink activeLink"><a href="submitAssignment.php">Submit Assignment</a></li>
</ol>
</nav> <!-- navigation -->
</div> <!-- ************ top box ************ -->
<!-- place admin menu code here -->
<!-- userlevel = 1.5  -->
<article id="mainContent"> <!-- ######################## main Content 
######################## --><aside id="upcoming"><h1>Milestones</h1><div class="box"><h1>Lecture </h1><ol class="LecturesLink"><li class="title summary"><a class="url" href="lecture.php?lid=108">WU: 5, 6</a></li></ol></div><div class="box"><h1>Assignment </h1><ol class="AssignmentLink"><li class="title summary"><a class="url" href="assign.php?pid=28">Style Before and After</a> Friday the 3rd</li><li class="title summary">Peer Grading <span class="relaseDate">Due Date: 2014-06-13</span> Friday the 13th</li>
</ol></div><div class="box"><h1>Test </h1><ol class="examLink"><li class="title summary">Exam IV Friday the 24th</li></ol></div></aside><section id='submit'>
<h3>Student: <a target='_blank' href='https://smcolbur.w3.uvm.edu/cs142'>Samuel Colburn</a></h3>
  
   <h2>Pick an Assignment:</h2>
<form method='post' id='chooseAssignment' action='/education/blackboard/submitAssignment.php' style='display: inline;'>

  <fieldset>
<input type='submit' value='Style A Form' name='cmdAssignment' />
  </fieldset>
    <fieldset>
<input type='submit' value='Styling a Resume' name='cmdAssignment' />
        </fieldset>
    <fieldset>
<input type='submit' value='Style a Table' name='cmdAssignment' />
        </fieldset>  <fieldset>
<input type='submit' value='Redesign the Course Style' name='cmdAssignment' /> 
    </fieldset>  <fieldset>
  <input type='submit' value='Style Before and After' name='cmdAssignment' /> 
    </fieldset>  <fieldset>
    <input type='submit' value='Web Usability Testing' name='cmdAssignment' /> 
</fieldset>
</form>

</article> <!-- ########### main Content ########### -->
<footer>
<p>Web designed by: <span id="author"></span>
</p>
<div id='logData'></div>
</footer> <!-- end footer -->
</body>
</html>

/*Downloaded from https://www.codeseek.co/smcolburn/a-pen-by-samuel-colburn-jEJJWd */
     
/* Course website sytlesheet redisgn by: Sam Colburn, William Kniffin, Jeremy Valance 

- This stylesheet redesigns Roberk Ericksons CS 142 course website.

*/

/* ==== INTIAL RESETS ===== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

footer {
    display:none;
}
html body header{
    z-index: 5 !important;
}

/* ====== BEGIN STYLESHEET =======*/




/* @@@@@@@@@@@@@@@@@@@@@@@@@   GENERAL  @@@@@@@@@@@@@@@@@@@@@@@ */ 

*::after, *::before {
    content: '';
}
html, body {
}
body {
    font-family: "Century Gothic", sans-serif;
    color: #222;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color:#eee;

}
a {
    text-decoration: none;
}

h1{
    font-weight:normal;
    padding-bottom:10px;
    font-size: 24px;
    margin-bottom:15px;
}


h2{
    font-weight:normal;
    font-size: 24px;
    margin-bottom:25px;

}

h3{
    margin-bottom:25px;
    margin-top:25px;
    font-weight:normal;
}
/* ~~~~~~~   main article   ~~~~~~~ */ 
#mainContent {
    padding: 5%;
    background:#fff;
    margin:0 auto;
    width:80%;

}




/* @@@@@@@@@@@@@@@@@@@@@@@@@@  Assignment and Lecture List Pages  @@@@@@@@@@@@@@@@@@@@@@@@ */ 

#assignments #mainContent , #lectures #mainContent {
}


/*      general list style      */
#assignments ol.AssignmentsLink,ol.LecturesLink{
    list-style-type:none;
    padding:0;
    margin:0;
    width:560px;
}

/* li element style       */
#assignments ol.AssignmentsLink li ,ol.LecturesLink li{
    color:#222;
    background-color:#FFF;
    padding:20px;
    border-radius:0px;
    position:relative;
    padding-left:48px;
    width:500px;
}
/* gives a top border to the first li element
li.title.summary:first-of-type{
    border-top:thin solid #999;
}
*/


/* LINK STYLE */
li.title.summary a.url{
    color:blue;

}
#assignments ol.AssignmentsLink li:hover a , #lectures ol.LecturesLink li:hover a{
    text-decoration:underline;
}

#assignments ol.AssignmentsLink li a:hover , #lectures ol.LecturesLink li a:hover{
    color:white;
}
#assignments ol.AssignmentsLink li:hover , #lectures ol.LecturesLink li:hover {
    background-color:#649158;
    color:#FFF;
    border-radius:2px;
}

/* button style */
#assignments ol.AssignmentsLink li::before,#assignments ol.AssignmentsLink li::after,
#lectures ol.LecturesLink li::before, #lectures ol.LecturesLink li::after
{
    content:"";
    position: absolute;
    top: 26px;
    left: 20px;
    height: 2px;
    width: 12px; 
    background-color: #424f5c;
    /* this fixes a bug where pseudo elements are slighty off position */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
}
#assignments ol.AssignmentsLink li::before,
#lectures ol.LecturesLink li::before
{
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);


}
#assignments ol.AssignmentsLink li::after ,
#lectures ol.LecturesLink li::before
{


}

#assignments ol.AssignmentsLink li:hover::before ,
#lectures ol.LecturesLink li:hover::before
{
    background-color: white;
    -webkit-transform: rotate(-0deg);
    -ms-transform: rotate(-0deg);
    transform: rotate(-0deg);
}


#assignments ol.AssignmentsLink li:hover::after,
#lectures ol.LecturesLink li:hover::after
{
    background-color: white;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*------------------ scaling style     ------------------*/
@media screen and (max-width: 800px){
    #mainContent{
    }

}

@media screen and (max-width: 650px){
    #mainContent{
        padding-left:1%;
    }

}







/*@@@@@@@@@@@@@@@@@@@@  Individual Assignment and Lecture Pages   @@@@@@@@@@@@@@@@@@@@@@@*/

#otherMedia {

}

#slide a{
    text-decoration:none;
}

#slide a:visited {
    color:blue;
}

#slide a:hover {
    text-decoration:underline;
}
#slide h1 {
    font-weight:normal;
    padding-bottom:10px;
    font-size: 24px;
    margin-bottom:15px;

}

#slide h1+h2 {
    font-weight:bold;
}

#slide h2 {
    border:none;
    font-size: 16px;
    padding-top: 5px;
    padding-bottom:5px;
    margin:0;

}

#slide p {
    margin-top:5px;
    margin-bottom:5px;
}

#slide p.firstLine {
    display:block;
    margin-bottom:50px;
    /* makes line  match header*/
}

#slide p+h1 {
    display: none;
}

#slide hr{
    display:none;
}

#slide b{
    font-weight:bold;
}

/* lists */
#slide ol {
    padding-bottom:10px;
    padding-left:3em;
    list-style-type:decimal;
}

#slide ol li{
    padding-top:5px;
    padding-bottom:5px;
}

/* sublists */
#slide li ol {
    padding-left:30px;
    list-style-type:decimal;
    padding-right:0px;
}

#slide li ol li ol {
    list-style-type:decimal;
}

#slide li ol li {
    padding-top:5px;
    padding-bottom:5px;
}


/* ~~~~ lecture page specific ~~~~~ */
/*code div */

#slide div {
    font-family: monospace;
    margin-top:10px;
}




#lecture article>p {
    margin-bottom: 15px;
}

/* @@@@@@@@@@@@@@@@@        Calendar page         @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* ~~~~~~~~~~~~ header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* minor adjustments to account for calendar size */
#calendar h2 {
}


/* ~~~~~~~~~~~~ General Table Style ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#calendar table td {
    vertical-align:top;
    padding:4px; 
    border: thin solid #999;
    height:100px;
    width:14%;
    background-color:#fafafa;  /* sets  calendar non-days to gray*/
}

#calendar table td.days {
    background-color:#fff;
}


.monthHeader th{
    padding-top:25px;
    padding-bottom:5px;
}

/* Day Number */ 
div.date{
    padding: 0.5em 0.5em 0.5em 0.5em; 
    text-align:left; 
}

/* day rows */
tr.days{

}

#calendar table tr.days th,  table tr.days th {
    color: #3399FF;
    font-weight: bold;
    padding: 1px 0.33em;
    text-align: center;
}


tr.days th.sat, tr.days th.sun {
}


.event {
    padding:0.5em;
}



#calendar table td.Sat {
}


#calendar div.event a:hover {
    text-decoration:underline;
}

/*
td.Sat div.date, td.Sun div.date{
    border-width: 0;
    color: black; 
    background: transparent;
}

td.Jun div.date, td.Aug div.date{
    border-width: 0; 
    color: black; 
    background: transparent;
}	

#calendar table td.Sat, #calendar table td.Sun {
    
}
*/

#calendar table td.atoday {
    border-width:4px;
}

#calendar #mainContent table td:hover{
    background-color:#eee;
}

/* ~~~~~~~~~~ Attendance Markers ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* adjust attendance row height */ 
tr#attendanceRow td, tr#attendanceRow th{
    height: 35px;
    vertical-align: middle;
}

.Absent{
    color: #222 !important;
    background: #ff9e4e !important;
    text-align: center;	

}
.Excused{
    color: #aa0011 !important;
    background: #ffadad !important;
    text-align: center;	
}

.FreeDay{
    color: #222 !important;
    background: #BDF8BD !important;
    text-align: center;	
}

.Late{
    color: #222 !important;
    background: #FFC89A !important;
    text-align: center;	
}

.Personal{
    color: #222 !important;
    background: #86DDDD !important;
    text-align: center;	   
}

.Present{
    color: #222 !important;
    background: #90EE90 !important;
    text-align: center;
}

.Sick{
    color: #222 !important;
    background: #FFFF64 !important;
    text-align: center;	
}

/* ~~~~~~ assignments, tests, projects, labs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
.assignment{
    color: white;
    margin:0;
    padding: 0.5em; 
    margin-top:2px;
}

.labComplete{
    color: #24B300 !important;
    background: #ffcfcf !important;
}


.presentation{
    border: dashed medium #ff0000 !important;
}

/* submitted assignments */
.submitted{
    background:#43613b;
}
#calendar .event.vevent.assignment.submitted a {
    text-decoration:underline;
    color:white;
}
#calendar .event.vevent.assignment.submitted a:visited {
    color:white;
}
#calendar .event.vevent.assignment.submitted a:hover{
    text-decoration:none;
}
/* not submitted assignments */
#calendar .notSubmitted{
    color:white;
    background:#c0392b;
}
#calendar .event.vevent.assignment.notSubmitted a {
    text-decoration:underline;
    color:white;
}
#calendar .event.vevent.assignment.notSubmitted a:visited {
    color:white;
}
#calendar .event.vevent.assignment.notSubmitted a:hover{
    text-decoration:none;

}



.TOPIC { 
    color: #4444CC; 
    text-align:center; 
    padding: 0.125em 0.25em 0 0; 
    margin:0;  
}

/* ~~~~~~~ vacation weeks ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#calendar table td.days.VACA {
    background-color: #EABFFF; /*#EABFFF;*/ 
}

/* ~~~~~~~~~~~~~  ta styling ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

ol.taVisits { min-height: 45px;
}
ol.taVisists li{
    list-style-type: none;
    margin-left: 0;
}

ol.taVisists li.null{
    font-weight: bold;
}
ol.taVisists li.null:before{
    content: "Appt ";
}

ol.taVisists li.Show{
    background: none repeat scroll 0 0 #ccffbf !important;
    color: #24b300 !important;
}
ol.taVisists li.NoShow{
    background: none repeat scroll 0 0 #aa0011 !important;
    color: #ffbfbf !important;
}




/* ~~~~~~ misc ~~~~~~~~   */
.callInSick{
    float: left;
    margin: 0;
}

#fullCalendar{
    float:right;
    font-size: small;
}


/* @@@@@@@@@@@@@@@@@  Sick Page         @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */



#sick p{
}
/* @@@@@@@@@@@@@@@@@  Submit Assignment Page        @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */


/* ~~~~~~~~~~~~~~~ general style ~~~~~~~~~~~~*/



#submitAssignment h1{
    margin-left:0px;

}
#submitAssignment h3{
    margin-left:00px;

}
#submitAssignment a:hover{
    text-decoration:underline;
}

/* ~~~~~~~~~~ form style ~~~~~~~~~~~~~~~~~~~~~ */
#submitAssignment fieldset {
    padding-bottom:20px;
}

#submitAssignment select{
    font-family:"Century Gothic", sans-serif;
    font-size:16px;
    padding:6px;
    border-radius:3px;
    margin:0;
}


#submitAssignment input[type="submit"]{
    margin:1px;
    border-radius: 3px;
  border:thin solid transparent;
  width:300px;
  text-align:left;
    padding: 10px;
    color: white;
    font-family: "Century Gothic";

    /*/* gradient background */ 
    background: -webkit-linear-gradient(left top, #649158 , #43613b); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
    background: -webkit-linear-gradient(top left, #649158, #43613b);
    background: linear-gradient(to bottom right, #649158 , #43613b); /* Standard syntax */

}

#submitAssignment input[type="submit"]:hover{
    background: -webkit-linear-gradient(left top, #43613b , #1B4011); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
    background: -webkit-linear-gradient(top left, #43613b, #1B4011);
    background: linear-gradient(to bottom right, #43613b , #1B4011); /* Standard syntax */
    cursor: pointer;
}


/* ~~~~~~~~~~~~~~~~ results ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#submitAssignment h2+h2{
    font-size:20px;
    border:none;
}

#submitAssignment form > h2 {
    font-size:20px;
    border-width:1px;
}


#submitAssignment p{
    padding:10px;
}



#submitAssignment iframe{
    width:80%;
    min-height:200px;
    overflow:auto;
    padding:10px;
}


/* Can't access iframe styling due to linked stylesheet closer to the element */

/* @@@@@@@@@@@@@@@@@@@ grades @@@@@@@@@@@@@@@@@@@@@@@@   */

#grades a:hover{
    text-decoration:underline;
}


#grades table.standard {
    background-color: white;
    border-radius: 10px;
}

#grades table.standard {
    margin-top: 15px;
    text-align:left;


}

#grades th {
    border-style: solid;
    border-width: 2px;
    border-color: black;
    text-align: left;
    padding: 10px;
    background-color: #3399FF;
    border-spacing: 10px;

}
#grades td {
    border: 2px solid black;
    text-align: left;
    border-spacing: 10px;
    padding: 10px;

}

#grades tr {
    background-color: white;
}

#grades .GradesReleased {
    background-color: #BDF8BD;
}
#grades .NotGraded {
    background-color: #FFC89A;
}

#grades .GradingStarted {
    background-color: #EABFFF
}

#grades .avggrade {
    background-color: antiquewhite;
}

#grades tr:hover {
    background-color: yellow;
}

td.category {
    width:10%
}

td.grade {
    width:10%;
}

td.comments {
    width:70%;
}

td.avggrade {
    width:10%;
}
/* @@@@@@@@@@@@@@@ Resources Page @@@@@@@@@@@@@@@@@@@@@@@@ */

#media article{
}

#media h1+h1 {
    border:none;
    font-size:20px;
}
/* @@@@@@@@@@@@@@@ TA Request Help Page / Sick Submission Page @@@@@@@@@@@@@@@@@@@@@@@@ */

#requestTa form, #sick form{
    padding-left:15%;
    padding-right:15%;
    width:70%;
}

#requestTa  fieldset, #sick  fieldset {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
}

/* fieldset given */
#requestTa fieldset.given , #sick fieldset.given{
    margin-bottom:20px;
}

#requestTa p ,#sick p {
    padding-top:5px;
    padding-bottom:5px;
}

#requestTa fieldset.given label ,#sick fieldset.given label {
    padding-top:10px;
    padding-bottom:10px;
}

#requestTa input#txtAppointmentDate , #sick input#txtAppointmentDate{
    padding-top:10px;
}

/*  fieldset radio */
#requestTa fieldset.radio label,#sick fieldset.radio label{
    padding-top:5px;
}

fieldset fieldset:nth-child(2){
    margin-bottom:20px;
}


/* comments  */

fieldset fieldset:nth-child(3){
    margin-bottom:20px;
}

fieldset fieldset:nth-child(3) label{
    margin-bottom:5px;
}

#requestTa textarea#txtComments,#sick textarea#txtComments{
    width:365px;
    height:75px;
    border-radius:3px;
}

/* submissionm terms checkbox */

#requestTa fieldset.checkbox #sickfieldset.checkbox{
    width:500px;
}

/* submit button  */
fieldset fieldset:nth-child(4) label{
    margin-bottom:20px;

}



#requestTa input[type="submit"],#sick input[type="submit"]{
    margin:1px;
    border-radius: 3px;
    padding: 10px;
    color: white;
    font-family: "Century Gothic";

    /* gradient background */ 
    background: -webkit-linear-gradient(left top, #649158 , #43613b); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
    background: -webkit-linear-gradient(top left, #649158, #43613b);
    background: linear-gradient(to bottom right, #649158 , #43613b); /* Standard syntax */

}

#requestTa input#btnSubmit[type="submit"]:hover , #sick input#butSubmit[type="submit"]:hover{
    background: -webkit-linear-gradient(left top, #43613b , #1B4011); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
    background: -webkit-linear-gradient(top left, #43613b, #1B4011);
    background: linear-gradient(to bottom right, #43613b , #1B4011); /* Standard syntax */
    cursor: pointer;
}


/* @@@@@@@@@@@@@@@@@@@@@@@   TOP BOX   @@@@@@@@@@@@@@@@@@@@@@@@@ */ 


/* ~~~~~~~   NAV   ~~~~~~~ */ 

nav {
    position: fixed;
    width: 100%;
    top: 0px;
    background-color: #649158;
    z-index: 15;
    left: 0;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.5);
}
nav ol {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-left: 2em;
}
nav ol::before {

}
nav ol li {
    padding: 13px 0.8em 13px 0.8em;
    cursor: pointer;
}
nav ol li a {
    color: white;
    font-weight: normal;
    font-size: 13px;
    cursor: pointer;
}

nav ol li:hover {
    background-color:#43613b;
}
nav ol li a:hover {
    text-decoration:underline;
}
nav ol li:nth-child(6) {
    position: relative;
    left: -5px;
}
nav ol li:nth-child(5) {
    position: absolute;
    top: 42px;
    left: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 32px;
    padding-right:8px;
    width:58px;
    background-color: #213633;
    border-bottom:thin solid white;
    transition:0.5s;

}
nav ol li:nth-child(5):hover {
    background-color:black;
}


nav ol li:nth-child(5)::before {
    width: 2px;
    height: 12px;
    background-color: white;
    position: absolute;
    left: 10px;
    top: 12px;
    z-index: 99;
    transition: transform 0.6s;
    transform: rotate(-90deg);
}
nav ol li:nth-child(5)::after {
    width: 2px;
    height: 12px;
    background-color: white;
    position: absolute;
    left: 10px;
    top: 12px;
    z-index: 99;
    transition: transform 0.6s;
}

nav ol li:nth-child(5):hover::before{
    transform: rotate(-0deg);
}

nav ol li:nth-child(5):hover::after{
    transform: rotate(180deg);

}

nav ol li:nth-child(7) {
    position: absolute;
    top: 75px;
    left: 0px;
    padding-top: 9px;
    padding-left: 31px;
    padding-bottom:12px;
    padding-right:0px;
    background-color: #213633;
    border-radius: 0px 0px 5px 0px;
    text-align:right;
    width:67px;
    transition:0.6s;
}

nav ol li:nth-child(7) a{
    width: 43px;
    overflow: hidden;
    display: block;
    text-overflow: clip;
    height: 13px;
}


nav ol li:nth-child(7):hover {
    background-color:black;
}

nav ol li:nth-child(7)::before {
    width: 2px;
    height: 12px;
    background-color: white;
    position: absolute;
    left: 10px;
    top: 12px;
    z-index: 99;
    transition: transform 0.6s;
    transform: rotate(-90deg);

}

nav ol li:nth-child(7):hover::before{
    transform: rotate(-0deg);
}


nav ol li:nth-child(7)::after {
    width: 2px;
    height: 12px;
    background-color: white;
    position: absolute;
    left: 10px;
    top: 12px;
    z-index: 99;
    transition: transform 0.6s;
}
nav ol li:nth-child(7):hover::after{
    transform: rotate(180deg);

}

/* ~~~~~~~   HEADER   ~~~~~~~ */ 

header {
    position: relative;
    height: 110px;
    background-color: #426D66;
    z-index:5;
}
#classtitle {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    top: 65px;
    width: 100%;
    color: white;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: normal;
    border:none;
    margin:0;
}
#classtitle a {
    color: white;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: normal;
    top: 70px;
    padding: 0px 3px 0px 3px;
}


/* ~~~~~~~   STUDENT INFO   ~~~~~~~ */ 

#studentInfo {
    position: fixed;
    top: 0px;
    right: 0px;
    color: white;
    z-index: 20;
    font-size: 12px;
    border-left: thin solid white;
    background-color: rgba(0,0,0,0.6);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 42px;
}

#studentInfo span {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0.8em;
}

span#classRank {
    padding: 0.5em;
}


#studentInfo a {
    color: #87AD3C;
    padding: 0px 2px 0px 2px;
}
#studentInfo a:hover {
    text-decoration:underline;
    color:white;
}



/* @@@@@@@@@@@@@@@@@@@@@@ SYLLABUS PAGE @@@@@@@@@@@@@@@@@@@@ */
#syllabus strong{
    font-weight:bold;
}

#syllabus h2 {
    margin-bottom:10px;
    margin-top:35px;
}
#syllabus p{
    margin-top:5px;
    margin-bottom:5px;
}


/* lists */
article > ol {
    padding-bottom:10px;
    padding-left:3em;
    list-style-type:decimal;
}
article > ul {
    padding-bottom:10px;
    padding-left:3em;
    list-style-type: circle;
}
article > ol li , article> ul li{
    padding-top:5px;
    padding-bottom:5px;
}

/* sublists */
article > ol li ol , article > ul li ol{
    padding-left:30px;
    list-style-type:decimal;
    padding-right:0px;
}

article > ul li ul, article > ol li ul  {
    padding-left:30px;
    padding-right:0px;
    list-style-type: disc;
}

article > li ol li ol {
    list-style-type:decimal;
}

article > li ol li {
    padding-top:5px;
    padding-bottom:5px;
}


#mainContent h1 + p {
    font-size: 12px;
}
#mainContent h2 + p + p + table {
    margin: 30px;
    border: thin solid grey;
}

#mainContent h2 + p + p + table tr:nth-child(1), #mainContent h2 + p + p + table tr:nth-child(4) {
    font-size: 23px;
    height: 30px;
    background-color: #849E9A;
    line-height: 40px;
}
#mainContent h2 + p + p + table tr:nth-child(2) th, #mainContent h2 + p + p + table tr:nth-child(5) th {
    padding: 10px;
    padding-bottom:0px;
    font-size: 18px;
    width: 180px;
}
#mainContent h2 + p + p + table tr:nth-child(6) td{
    border-bottom:thin solid grey;
}

#mainContent h2 + p + p + table td {
    padding: 1em;
}

#tahours {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 2em;
    margin-top: 3em;
    margin-left: -227px;
}
#tahours::before {
    content: "TA Office Hours";
    position: relative;
    top: -37px;
    left: 225px;
    font-size: 24px;
    width: 304px;
}
#tahours h2 {
    display: none;
}
.dayColumn .filler {
    display: none;
}
.dayColumn .header {
    font-weight: bold;
    background-color: #849E9A;
    text-align: center;
    padding: 10px 0px 10px 0px;
    color: white;
    line-height: normal;
}
.dayColumn {
    width: 200px;
    line-height: 0px;
}
.dayColumn a {
    padding: 1em;
}
.hourBox {
    border: thin solid black;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    padding: 1em;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: normal;
    color: #222;
}
.hourBox .startTime {
    font-size: 20px;
}
.hourBox .endTime {
    font-size: 20px;
}
.hourBox span {
    padding: 3px;
}

#tahours + p + p {
    padding: 1em;
    font-size: 15px;
}




/* @@@@@@@@@@@@@@@@@@@@@@@@@@@  UPCOMING / MILESTONES   @@@@@@@@@@@@@@@@@@@@@@ */ 
#upcoming {
    position: fixed;
    z-index: 12;
    top: 41px;
    right: 0px;
    background-color: #dbe2e9;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    font-size: 14px;
    border-radius: 0px 0px 0px 5px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    box-sizing:border-box;
    width:411px;
}
#upcoming::after {
    content: "Milestones";
    font-size: 14px;
    color: white;
    position: fixed;
    background-color: grey;
    border-radius: 0px 0px 0px 0px;
    top: 0px;
    left: -98px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:1em;
    padding-left: 1em;
    z-index: 12;
    -webkit-transition: -webkit-transform 0.4s 0.4s;
    transition: transform 0.4s 0.4s;

}
#upcoming:hover {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}
#upcoming:hover::after {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}
#mainContent #upcoming h1 {
    font-size: 13px;
    padding: 0.2em;
    font-weight: bold;
    margin-bottom:0;
    padding-left:1em;
}
#upcoming .box h1 {
    font-size: 13px;
    font-weight: bold;
    padding: 0.2em 0em 0.2em 1em;
}

#mainContent #upcoming ol {
    width: 100%;
    margin: 0 auto;
    padding-left:1.5em;
}

#mainContent #upcoming li {
    padding: 0.3em;
    width:100%;
    background-color:#dbe2e9;

}

#mainContent #upcoming li:hover{
    background-color:#dbe2e9;
}
#mainContent #upcoming li a:hover{

}

#mainContent #upcoming li::before,#mainContent #upcoming li::after{
    content:"";
    height:0px;
}

#upcoming a {
    color: blue;
    text-decoration: underline;
}
#upcoming a:hover {
    color: white;
}

aside#upcoming div:nth-child(2){
    padding-bottom:5px;
}



/* @@@@@@@@@@@@@@@@@@ Additional Resources @@@@@@@@@@@@@@@ */
#otherMedia {
    position: fixed;
    top: 75px;
    right: 0px;
    color: white;
    z-index: 11;
    font-size: 12px;
    border-left: thin solid white;
    background-color: rgba(0,0,0,0.6);
    width: 300px;
    border-radius: 5px 0px 0px 5px;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
}
#otherMedia::before {
    content: "Resources";
    position: fixed;
    font-size: 14px;
    top: 0px;
    color: black;
    left: -99px;
    color: white;
    background-color: grey;
    padding-top:10px;
    padding-bottom:10px;
    padding-left: 1.05em;
    padding-right: 1.05em;
    border-radius: 0px 0px 0px 5px;
    -webkit-transition: -webkit-transform 0.4s 0.4s;
    transition: transform 0.4s 0.4s;
    border-top:thin solid white;
}
#otherMedia:hover {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);

}
#otherMedia:hover::before {
    -webkit-transform: translateY(-210%);
    -ms-transform: translateY(-210%);
    transform: translateY(-210%);
    border:0;
}
#otherMedia h1 {
    display: none;
}
#otherMedia ol {
    background-color: #dbe2e9;
    line-height: 20px;
    padding-top: 10px;
    border-radius: 5px 0px 0px 5px;
}
#otherMedia img {
    display: none;
}
#otherMedia a {
    color: #87AD3C;
    padding: 0px 2px 0px 15px;
}
#otherMedia a::before {
    content: "-";
}
#otherMedia a:hover {
    text-decoration:underline;
    color:white;
}


#media #mainContent #otherMedia {
    position: initial;
    font-size: 16px;
    border-left: none;
    background-color: rgba(0,0,0,0.6);
    width:auto;
    border-radius: 0px 0px 0px 0px;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    color: #222;
}
#media #mainContent #otherMedia::before {
    content: "";
    background-color: transparent;
}
#media #mainContent #otherMedia h1 {
    display: none;
}
#media #mainContent #otherMedia ol {
    background-color: white;
    line-height: 30px;
    padding-top: 10px;
    border-radius: 0px 0px 0px 0px;
}
#media #mainContent #otherMedia ol li {
    list-style-type: none;
    border: thin solid black;
    width: 60%;
    padding: 1em;
}
#media #mainContent #otherMedia ol li:nth-child(odd) {
    background-color: rgba(0,0,0,0.3);
}
#media #mainContent #otherMedia img {
    display: none;
}
#media #mainContent #otherMedia a {
    color: #222;
    padding: 0px 2px 0px 0px;
    font-size: 18px;
    font-weight: bold;
}
#media #mainContent #otherMedia a::before {
    content: "";
}
#media #mainContent #otherMedia a:hover {
    text-decoration:underline;
    color:green;
}
@media (max-width: 840px) {
    span#classRank {
        display: none;
    }
    #studentInfo {
        font-size: 10px;
    }
    nav ol {
        margin-left: 1em;
    }
    nav ol li {
        padding: 13px 0.3em 13px 0.3em;
    }
    nav ol li a {
        font-size: 11px;
    }
    nav ol li:nth-child(5) {

    }
    nav ol li:nth-child(7) {
        padding-left:26px;
        padding-right:5px;
    }


    #mainContent {
        width: 100%;
    }
}
@media (max-width: 640px) {  
    #classtitle {
        font-size: 14px;
    }
    #classtitle a {
        font-size: 14px;
    }
}


@media(max-width:600px){
    span#studentName{
        display:none;
    }
}

@media(max-width:450px){
    #studentInfo{
        display:none;
    }
}

#adminMenu {
    position: fixed;
    right: 0px;
    top: 86px;
    width: 200px;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
}
#adminMenu::before {
    content: "Admin";
    position: relative;
    font-size: 15px;
    left: 200px;
    top: 16px;
    background-color: grey;
    color: white;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    padding: 1em;
    border-radius: 0px 5px 5px 0px;
}
#adminMenu:hover {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}
#adminMenu ol {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 200px;
    padding: 0px;
    margin: 0px;
}
#adminMenu ol li {
    width: 60px;
}
#adminMenu ol li:hover {
    background-color: #649158;
}


/*Downloaded from https://www.codeseek.co/smcolburn/a-pen-by-samuel-colburn-jEJJWd */
    

Comments