CSY2028-assignment-2/public/styles.css

/* import fonts */
@import url('https://stockfont.org/?3e1218d9a01517d5734a1be9e67be4af797abff1230ab272235ec8ed759251d6');
* {margin: 0; padding: 0;}

html {font-family: 'Oxygen-Regular', verdana, sans-serif; }

body {background-color: #eaeaea;}
header {background-color: #4b72ad

; color: white;

height: 200px;

}

header img {width: 500px; float: left; background-color: white; border-radius: 20px; margin-top: 20px;}
header aside {float: right; margin-top: 15px;}
header section {width: 1000px; display: block; margin:auto;}
header h1 {float: left; margin-left: 20px;}
nav {width: 100%; background-color: #264f87; overflow: auto;}
body > img {width: 100%; display: block;}
nav ul {width: 1000px; margin: auto; display: block; list-style-type: none;}
nav ul li {width: 25%; float: left; overflow: auto; text-align: center;}
nav li {color: white; padding-top: 10px; display: block;}
nav a {color: white; text-decoration: none}
nav ul ul {
	max-height: 0;
	position: absolute;
	overflow: hidden;
	background-color: #264f87;
	transition: max-height 0.5s;
	margin-left: 4em;
	width: 20vw;
}
main ul {
	margin-left: 3em;
}

nav ul ul li { float: none; text-align: left;  margin-left: 3em; width: auto;}

 li:hover ul { max-height: 400px; }


main a {
	color: #333;
}

nav {font-family: 'Oxygen-Regular';}
header section {  display: block; font-family: 'Oxygen-Regular', cursive;}

header h1 {font-weight: normal;}


h1 { font-size:4em; color: white; text-align: center; padding-top: 20px; text-shadow: 2px 2px 2px #000;}

main {min-height: 50vh; background-color: #fff; width: 70vw; display: block; margin: auto; box-shadow: 0px 0px 10px #888; color:#444;}
footer {min-height: 5vh; color: white;}

main h2 {font-size:2em;}
.home {padding: 5vw; width: 60vw;}

p, li, h2 {margin-bottom: 1em;}
ol {margin-left: 30px;}

pre {margin-top: 20px;}
code {background-color: #ccc;}
pre code {display: block;}

footer {background-color: #4b72ad; padding: 10px; color: white;}

form select, form label, form input, form textarea {float: left; width: 200px; padding: 10px; margin-top: 20px;}
form label {clear: left;}
textarea {height: 100px;}
form input[type="text"], form input[type="password"], textarea {color: #999; font-family: verdana, sans-serif}
input[type="submit"] {clear: both; margin-left: 220px; width: 220px;}


.left ul {list-style-type: none }
section a {color: #444;}

form select {width: 220px;}
table {width: 100%; margin-top: 20px;}
td {padding: 5px; border-bottom: 1px solid #333;}

.jobs {list-style-type: none}
.jobs strong {width: 150px; float:  left; clear: left;}
.jobs p {width: 500px; float: left;}

.jobs li {padding-top: 20px; padding-bottom: 20px; border-bottom: 2px solid #aaa; overflow: auto}
.jobs a {float: right; clear: both;}

img.shop {width: 800px;}

.stock, .sidebar {display: table;}
.stock > ul, .sidebar .left { width: 10vw; list-style-type: none; display: table-cell; padding: 10px; background-color: #555; margin: 0;}

.stock .products, .sidebar .right {display: table-cell; padding: 20px;}

.stock > ul a, .sidebar .left a {color: white; text-decoration: none;}

table td input[type="submit"] {margin: 0; float: right; width: auto; padding: auto;}

.listing ul {margin-top: 40px; list-style-type: none;}
.listing li {border-top: 2px solid #888; padding: 20px; overflow: auto;}

.listing li .noimage, .listing li img {width: 20%; margin-right: 4%; min-height: 50px; float: left;}
.listing .info {float: left; width: 75%;}

.current {background-color: #ddd; color: #333; display: block; }
.current a {color: #333 !important;}
.stock > ul .current a {color: #333;}
.categories li {margin: 0; padding: 0.5em; font-size: 2em;}

.products > img {max-height: 300px;}

a:hover {color: #ccc !important;}

.right {padding: 20px;}

main h1 {color: #666;}

main img {display: block;}