\@charset "UTF-8";
/* CSS Document */

/* ---------- Universal ---------- */

@font-face
{
font-family: AkzidenzGrotesk;
src: url('assets/akzidenz-grotesk-bold.ttf'),
     url('assets/akzidenz-grotesk-bold.otf'); /* IE9 */
}

@font-face
{
font-family: Avenir;
src: url('assets/avenirnext.ttf'),
     url('assets/avenirnext.otf'); /* IE9 */
}


body {
	background: url('assets/stripebg.png') repeat, url('assets/logo.png') no-repeat center center;
	width: 100%;
}

#wrap {
	width: 320px;
}

header {
	position: fixed;
	width: 100%;
	height: 65px;
	background-color: #ffc627;
	top: 0;
  	left: 0;
  	z-index: 99;
}

footer {
	position: fixed;
	width: 100%;
	height: 65px;
	background-color: #ffc627;
	bottom: 0;
  	left: 0;
  	z-index: 99;
}

#headerlinks, #footerlinks {
	width: 300px;
	margin: 0 auto;
}

#headerlinks img, #footerlinks img {
	padding: 7.5px 10px;
}



/* ---------- Welcome Screen ---------- */
img#logo {
   width: 251px;
   height: 146px;
   position: absolute;
   left: 50%;
   top: 30%; 
   margin-left: -125.5px;
   margin-top: -73px;
}

#start {
	position: absolute;
	width: 251px;
	height: 146px;
	left: 50%;
	top: 65%; 
	margin-left: -125.5px;
	margin-top: -73px;
}

#buttons {
	display: block;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	list-style-type: none;
	font-size: 24px;
	width: 251px;
	padding-left: 0px;
	margin-left: 25px;
	
}

#buttons li {
	cursor: pointer;
	width: 191px;
	height: 28px;
	padding-top: 13px;
	padding-bottom: 8px;
	margin-top: 8px;
	text-align: center;
}

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



#registerLink {
	color: white;
}

#buttons li#login {
	background-color: #f47c00;
}

#buttons li#register {
	background-color: #008ed6;
}

#loginForm {
	display: none;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	font-size: 24px;
	width: 251px;
	padding-left: 0px;
	margin-top: 5px;
	margin-left: 25px;
}

#loginForm input {
	height: 22px;
	width: 175px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#loginForm input[type="submit"] {
	cursor: pointer;
	width: 100px;
	height: 34px;
	border: 0px;
	padding-top: 13px;
	padding-bottom: 8px;
	margin: 8px 34px;
	text-align: center;
	background-color: #008ed6;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	font-size: 16px;
	-webkit-appearance: none;
}

/* ---------- Main Menu ---------- */

img#logo-small {
   width: 140px;
   height: 81px;
   position: fixed;
   right: 20px;
   bottom: 5px; 
}

#menuoptions {
	position: absolute;
	top: 82px;
	left: 0; 
	width: 300px;
	height: 400px;	
}

#menuoptions ul li {
	display: block;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	list-style-type: none;
	font-size: 32px;
	line-height: 54px;
}

/* ---------- Find a Ride/Offer a Ride ---------- */

#findaride-main, #offeraride-main, #findaride234-main, #offeraride234-main {
	position: absolute;
	top: 90px;
	left: 0; 
	width: 300px;
	height: 400px;
}

#findaride5-main, #offeraride5-main, #register2-main {
	position: absolute;
	top: 110px;
	left: 0; 
	width: 300px;
	height: 400px;
	margin-bottom: 40px;
}

#findaride-main h1, #offeraride-main h1, #findaride234-main h1, #offeraride234-main h1, #findaride5-main h1, #offeraride5-main h1 {
	display: block;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	list-style-type: none;
	font-size: 22px;
	width: 320px;
	text-align: center;
}

#register2-main h1 {
	display: block;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	list-style-type: none;
	font-size: 22px;
	width: 300px;
	line-height: 25px;
	text-align: center;
	margin-bottom: 30px;
	margin-left: 8px;
}

#findaride-map, #offeraride-map, #findaride234-map, #offeraride234-map {
	margin-left: 20px;
}

#findaride-buttons, #offeraride-buttons {
	display: block;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	list-style-type: none;
	font-size: 18px;
	width: 280px;
}

#findaride2345-buttons, #offeraride2345-buttons {
	display: block;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	list-style-type: none;
	font-size: 18px;
	width: 300px;
	margin-left: 30px;
}

#findaride-buttons li, #offeraride-buttons li {
	display: inline;
	cursor: pointer;
	width: 135px;
	height: 20px;
	margin-top: 20px;
	margin-right: 10px;
	text-align: center;
	padding: 10px;
}

#findaride2345-buttons li, #offeraride2345-buttons li {
	display: inline;
	cursor: pointer;
	width: 135px;
	height: 20px;
	margin-top: 20px;
	margin-right: 10px;
	text-align: center;
	padding: 10px;
}

#findaride-buttons li#gotopopular, #offeraride-buttons li#gotopopular {
	background-color: #f47c00;
}

#findaride2345-buttons li#gotopopular, #offeraride2345-buttons li#gotopopular {
	background-color: #f47c00;
	
}

#findaride-buttons li#nextback, #offeraride-buttons li#nextback {
	background-color: #008ed6;
}

#findaride2345-buttons li#nextback, #offeraride2345-buttons li#nextback {
	background-color: #008ed6;
}

#findaride2345-buttons li#homebutton, #offeraride2345-buttons li#homebutton {
	background-color: #008ed6;
	margin-left: 16%;
}

#dateselect {
	display: block;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	font-size: 16px;
	width: 300px;
	margin-left: 26%;
	margin-bottom: 20px;
}

#timeselect {
	display: block;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	font-size: 16px;
	width: 300px;
	margin-left: 26%;
	margin-bottom: 40px;
}

select, input[type='time'] {
	background: transparent;
	color: white;
	font-size: 14px;
}

form#specifications {
	color: white;
	font-size: 14px;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	margin-left: 26%;
	margin-bottom: 30px;
}

input[type='checkbox'] {
	margin-left: 10px;
}

#coming, #going {
	display: block;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	font-size: 16px;
	width: 300px;
	margin-left: 26%;
	margin-bottom: 20px;
}

#message {
	display: block;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	font-size: 16px;
	width: 300px;
	margin-bottom: 40px;
	margin-top: 50px;
	text-align: center;
}

/* ---------- Popular Locations Pages ---------- */

img#popularlogo {
   width: 140px;
   height: 81px;
   position: absolute;
   left: 50%;
   top: 15%; 
   margin-left: -70px;
   margin-top: -40.5px;
}

#directions {
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	list-style-type: none;
	font-size: 24px;
	line-height: 34px;
	position: relative;
	top: 150px;
	left: 0; 
	width: 320px;
	height: 400px;
	text-align: center;
	margin-left: -10px;
}

#directions p {
	width: 260px;
	margin: 0 auto;
}

#swipe {
	position: absolute;
	top: 0;
	left: 0; 
	width: 100%;
	height: 20px;
	font-size: 14px;
	color: white;	
}

#swipe p {
	position: absolute;
	width: 300px;
	margin: 1px 18%;
	font-family: "Avenir", Times, "Times New Roman", serif;
}

#popular-picture {
	width: 100%;
	height: 300px;
	position: absolute;
	top: 22px;
	left: 0;
}

#centerimage {
	width: 320px;
	margin: 0 auto;
}

#popular-buttons {
	width: 100%;
	height: 150px;
	position: absolute;
	top: 350px;
	left: 0;
}

#driverbutton, #riderbutton {
	width: 100px;
	height: 100px;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	font-size: 16px;
	padding: 10px;
	text-align: center;
}

#centerbuttons {
	width: 320px;
	margin: 0 auto;
}


#riderbutton {
	background-color: #f47c00;
	float: left;
	margin-left: 20px;
	
}

#driverbutton {
	background-color: #008ed6;
	float: right;
	margin-right: 20px;
	
}

#driverbutton img {
	margin-top: 10px;
}

/* ---------- Search Pages ---------- */

#searchoptions {
	width: 300px;
	height: 400px;
	position: absolute;
	top: 80px;
	margin: 0 auto;
}

#searchoptions ul li {
	display: block;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: #ffc627;
	list-style-type: none;
	font-size: 22px;
	line-height: 27px;
}

#searchoptions h1, #searchdirections h1 {
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	font-size: 24px;
	line-height: 30px;
	text-align: center;
}

#searchpage {
	height: auto;
	width: 100%;
	margin: 80px 0px 0px 0px;
}

#searchdirections {
	position: absolute;
	top: 65px;
	width: 300px;
	margin: 0 auto;	
}

#searchsection {
	width: 300px;
	height: auto;
	margin: 40px auto;
	background-color: white;
	position: absolute;
	top: 90px;
}

#resultone, #resulttwo, #resultthree,
#resultfour, #resultfive, #resultsix {
	height: 100px;
	border-bottom: 1px solid #000000;
}

#searchsection img {
	margin-left: 20px;
	margin-top: 10px;
	float: left;
}

.results {
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: black;
	font-size: 16px;
	text-align: center;
	float: right;
	width: 200px;
	margin-top: 20px;
}

.resultdescription {
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: black;
	font-size: 14px;
	text-align: center;
	line-height: 16px;
	float: right;
	width: 200px;
	margin-top: 10px;
}


#filtersection {
	height: 40px;
	border-bottom: 1px solid #000000;
	width: 100%;
	margin: 0 auto;
}

#dropdown {
	margin: 0 auto;
	width: 160px;
	height: 40px;
	font-size: 18px;
}

#filter {
	margin: 0 auto;
	width: 160px;
	background-color: #efebec;
	color: black;
	height: 40px;
}

/* ---------- Profile Pages ---------- */

#profilesection {
	width: 100%;
	height: 350px;
	position: absolute;
	top: 40px;
	left: 0;
	background-color: white;
	float: left;
}


#centerprofile {
	width: 320px;
	height: 350px;
	margin: 0 auto;
}

#asulogo {
	width: 100%;
	height: 120px;
	position: absolute;
	float: left;
	top: 400px;
	left: 90px;
}

#centerasu {
	width: 320px;
	margin: 0 auto;
	
}

#username {
	position: absolute;
	top: 0;
	left: 0; 
	width: 100%;
	height: 20px;
	font-size: 16px;
	color: white;	
	letter-spacing: 7px;
}

#username p {
	position: absolute;
	width: 320px;
	margin-top: 8px;
	text-align: center;
	font-family: "Avenir", Times, "Times New Roman", serif;
}

#picname {
	position: absolute;
	height: 160px;
	width: 320px;
}

#userinfo {
	position: absolute;
	top: 160px;
	height: 190px;
	width: 320px;
}

#profilepic {
	position: absolute;
	float: left;
	width: 160px;
	height: 160px;
	
}

#profilepic img {
	margin-left: 5px;
	margin-top: 5px;
}

#profilestats {
	position: relative;
	top: 5px;
	float: right;
	width: 160px;
	height: 150px;
}

#starsection {
	height: 25px;
	width: 160px;
	position: absolute;
	top: 5px;
}

#starsection img {
	margin-left: 17.5px;
}

#usernamesection {
	height: 25px;
	width: 160px;
	position: absolute;
	top: 45px;
	text-align: center;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: black;
	font-size: 16px;
	
}

#usernamelocation {
	height: 25px;
	width: 160px;
	position: absolute;
	top: 65px;
	text-align: center;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: black;
	font-size: 16px;
}


#drives {
	height: 25px;
	width: 160px;
	position: absolute;
	top: 100px;
	text-align: center;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: black;
	font-size: 16px;
}


#rides {
	height: 25px;
	width: 160px;
	position: absolute;
	top: 120px;
	text-align: center;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: black;
	font-size: 16px;
}

#profilelinks {
	position: absolute;
	height: 40px;
	width: 320px;
	text-align: center;
}

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #e7e8e9;
	z-index: 1000;
}

#arrow1 {
	position: absolute;
	top: 37px;
	left: 100px;
	display: block;
}

#arrow2 {
	position: absolute;
	top: 37px;
	left: 200px;
	display: none;
}

#contactsection {
	position: relative;
	top: 25px;
	left: 20px;
	height: 120px;
	width: 280px;
	background: #e7e8e9;
	border-radius: 10px;
	display: block;
	color: black;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	font-size: 20px;
	line-height: 25px;
	text-align: center;
}

#contactsection p {
	padding-top: 25px;	
}

.link {
	color: #008ed6;
}

#reviewssection {
	position: relative;
	top: 45px;
	left: 20px;
	height: 120px;
	width: 280px;
	background: #e7e8e9;
	border-radius: 10px;
	display: none;
	color: black;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	font-size: 20px;
	line-height: 10px;
	text-align: center;
	overflow: scroll;
}

#reviewssection p.reviewtext {
	
}

#reviewssection p.reviewerinfo {
	font-size: 14px;
	text-align: center;
	width: 260px;
}

#reviewssection p.writtenreview {
	font-size: 16px;	
	text-align: left;
	padding-left: 15px;
	width: 260px;
	line-height: 16px;
}

#contactbutton {
	color: #8b1c40;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	font-size: 26px;
	margin-right: 10px;
	line-height: 40px;
	cursor: pointer;
}

#reviewsbutton {
	color: #8b1c40;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	font-size: 26px;
	margin-left: 10px;
	line-height: 40px;
	cursor: pointer;
}

/* ---------- Register Pages ---------- */

#registerstart {
	position: absolute;
	width: 251px;
	height: 146px;
	left: 50%;
	top: 90px; 
	margin-left: -125.5px;
	margin-top: -73px;
}

#registerForm {
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	font-size: 19px;
	width: 251px;
	padding-left: 0px;
	margin-top: 5px;
	margin-left: 25px;
}

#registerForm input {
	height: 18px;
	width: 175px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#registerForm input[type="submit"] {
	cursor: pointer;
	width: 100px;
	height: 34px;
	border: 0px;
	padding-top: 13px;
	padding-bottom: 8px;
	margin: 0px 34px;
	text-align: center;
	background-color: #008ed6;
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	font-size: 16px;
	-webkit-appearance: none;
}

/* ---------- Chat Pages ---------- */

#chatsection {
	width: 300px;
	height: auto;
	margin: 40px auto;
	background-color: #373a3a;
	border: 1px solid #ffffff;
	position: absolute;
	top: 90px;
}

#chatsection img {
	margin-left: 20px;
	margin-top: 10px;
	float: left;
}

.chatters {
	font-family: "AkzidenzGrotesk", "Arial Black", Gadget, sans-serif;
	color: white;
	font-size: 22px;
	line-height: 100px;
	text-align: center;
	letter-spacing: 2.5px;
	float: right;
	width: 200px;
}

#chatone, #chattwo, #chatthree,
#chatfour, #chatfive, #chatsix {
	height: 100px;
	border-bottom: 1px solid #ffffff;
}