main.css

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; border:none;
 }

 a {
 	text-decoration: none;
 	color: black;
 }

 body {
 	background-color: #C0DEED;
 }


.remove-css {
	border: none;
	padding: 0;
	margin: 0;
}

/*header elements*/
 #main-header {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	padding: 10px;
 	background-color: #2c3e50;
 	box-shadow:0px 5px 5px #888888;
 	height: 57px;
 }


 .header-text {
 	display: inline-block;
 	padding-left: 15%;
 	padding-right: 20px;
 }
 .header-text a {
 	color: white;
 }

 #random-quote{
 	color: white;
 }

 .header-sublist {
 	padding: 0 20px;
 	border-right: 1px solid white;
 	font-size: 16px;
 	display: inline-block;
 	height: 25px;
 	font-weight: normal;
 	line-height: 25px;

 }
.header-sublist-container {
	float: right;
	display: inline-block;
	padding: 10px;
	padding-right: 15%;

}

.star-container {
	display: inline-block;
	padding-left:10px;
}

#drop-down-box {
	height: 500px;
	width: 100px;
}

.star-header {
	height: 20px;
	width: 20px;
	vertical-align: middle;
	cursor:pointer;
}

/*form elements*/
 #input-form {
 	width: 400px;
 	top:200px;
 	left: -360px;
 	position: absolute;
 	margin: 0 auto;
 	background-color: #8EC1DA;
 	overflow: hidden;
 	z-index: 2;
 	border-top-right-radius: 40px;
 	border-bottom-right-radius: 40px;
	box-shadow: 5px 5px 5px #888888;
	-webkit-transition: all .75s ease-out;
 }
#formQuote {
	font-size: 12px;
	border-radius: 4px;
	margin: 10px;
	height: 100px;
	width: 300px;
	padding: 4px;
	background-color: white;
	border: 1px solid gray;
 }

 #formAuthor{
 	font-size: 12px;
	border-radius: 4px;
	margin: 10px;
	padding: 4px;
	background-color: white;
	border: 1px solid gray;
 }

 .error {
 	font-size: 12px;
 	padding-left: 10px;
 	color: white;
 	display: block;
 }

 #input-form form {
 	padding: 20px 40px;
 }

#submit-button {
	padding: 4px 15px;
	font-size: 12px;
	border-radius: 3px;
	margin-left: 10px;
	margin-top: 10px;
	border: 1px solid gray;
	box-shadow: 1px 1px #888888;
	font-weight: normal;
	background: linear-gradient(white,gray) ;
}

.slide-out {
	position: absolute;
	right: -30px;
	top: 110px;
	color: white;
	font-weight: lighter;
	font-size: 16px;
	text-shadow: 1px 1px #888888;
	cursor: pointer;
	-webkit-transform:rotate(90deg);
}




/*filter box*/
.filter-box {
	display: inline;
	background-color: white;
	font-size: 14px;
	border-radius: 10px;
	padding: 4px 10px;
	border: 1px solid lightgray;
}

#close-filter {
	color: lightgray;
	padding: 2px;
	padding-left: 10px;

}

.author-filter {
	font-size: 12px;
	font-weight: bold;
	padding-right: 12px;
	border-right: 1px solid lightgray;
}


/* buttons */
#confirmation {
	max-width: 100%;
	height: 100px;
	padding: 10px;
}

.confirmation-text {
	font-size: 20px;
	padding-bottom: 10px;
}


.undo {
	box-shadow:inset 0px 1px 0px 0px #c1ed9c;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b) );
	background:-moz-linear-gradient( center top, #9dce2c 5%, #8cb82b 100% );
	background-color:#9dce2c;
	border-radius: 20px;
	text-indent:0;
	border:1px solid #83c41a;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:50px;
	line-height:50px;
	width:100px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #689324;
}

.delete {
	box-shadow:inset 0px 1px 0px 0px #f29c93;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
	background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
	background-color:#fe1a00;
	border-radius: 20px;
	text-indent:0;
	border:1px solid #d83526;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:50px;
	line-height:50px;
	width:100px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #b23e35;
}

.delete:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
	background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
	background-color:#ce0100;
}

.undo:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a5cc52), color-stop(1, #b8e356) );
	background:-moz-linear-gradient( center top, #a5cc52 5%, #b8e356 100% );
	background-color:#a5cc52;
}

.delete:active{
	position:relative;
	top:1px;
}

.undo:active{
	position:relative;
	top:1px;
}
/*main container elements*/
.hidden {
	display: none;
}

 .main-container {
 	margin-top: 57px;
 

 }
 #content {
 	background-color: rgba(255,255,255,.5);
 	max-width: 70%;
 	margin: 0 auto;
 	padding: 20px;
 }

 .quote-box {
 	background-color: white;
 	border-radius: 15px;
 	border: 1px solid lightgray;
 	padding: 10px;
 	position: relative;
 	overflow: hidden;
 	margin: 10px 0;
 }

 .float-left {
 	float: left;
 }

 .float-right {
 	float: right;
 }
.quote{
	font-family: 'Nothing You Could Do', cursive;
	font-size: 20px;
}
.quote-author {
 	width: 80%;
 	padding: 10px;
 }
.author {
	margin: 0;
	padding: 8px 0 0px 15px;
}
.submitted-date {
	margin: 0;
	padding: 4px 0 4px 15px;
	color: gray;
	font-style: italic;
	font-weight: lighter;
}
.rating-close {
	width: 20%;
	padding: 10px;
	overflow: hidden;
}

.close-x {
	position: absolute;
	color: lightgray;
	padding: 2px;
	top: 8px;
	right: 12px;

}
.star-rating{
	position: absolute;
	bottom: 6px;
	right: 10px;
	margin: 0px;	
}

.star-rating>li>img {
	height: 20px;
	width: 20px;

}

.inline-list {
	cursor: pointer;
	display: inline-block;
	list-style: none;
}