@import url("http://139.62.210.181/default.css");

body{
	color: beige;
	background-color: rgb(36, 36, 36);
	padding:0px;
}



.comic-neue-light {
	font-family: "Comic Neue", cursive;
	font-weight: 300;
	font-style: normal;
  }
  
  .comic-neue-regular {
	font-family: "Comic Neue", cursive;
	font-weight: 400;
	font-style: normal;
  }
  
  .comic-neue-bold {
	font-family: "Comic Neue", cursive;
	font-weight: 700;
	font-style: normal;
  }
  
  .comic-neue-light-italic {
	font-family: "Comic Neue", cursive;
	font-weight: 300;
	font-style: italic;
  }
  
  .comic-neue-regular-italic {
	font-family: "Comic Neue", cursive;
	font-weight: 400;
	font-style: italic;
  }
  
  .comic-neue-bold-italic {
	font-family: "Comic Neue", cursive;
	font-weight: 700;
	font-style: italic;
  }
  
#aboutme{color:#ee87be;}
#hobbies{color:#4d58a7;}
#education{color: #54c2c1;}

#adbanner img{height:100px;}
#adbanner{background-color: #54c2c1;text-align: center;padding:10px;margin:10px;}

body{background-image: url('../project1/images/90sbackround.jpg');font-family: 'Comic Neue';}
ol {list-style-type: decimal;}
ol ol { list-style-type: upper-alpha; }
#middle{margin-left: 20%;  margin-right:20%; background-color: #4d58a7; padding: 30px}
h1{text-align:center; background-color: #4d58a7;color:black;}
h2{margin:0px; text-align: center;padding:30px;background-color: #fee44f;color:black;}

#welcomephoto{display:block; margin-left:calc(50% - 150px);}
#navbar{margin-left: 20%;  margin-right:20%; background:#f276ac;border-width:5px;border:solid #fee44f;}
a{color:#000000;}
a:hover{background-color: #54c2c1;}

#turkey{position:absolute;margin-left:30%;margin-top:20%;}

.personalWebpage a:hover{font-size:150%;}

#courseSchedule table{border:solid #f276ac;}
#courseSchedule table th{background-color: #fee44f;color:#f276ac}
#courseSchedule table tr{border:solid #f276ac;}
#courseSchedule table tr td{border:solid #54c2c1;padding:10px;}
#courseSchedule table tr:nth-child(even){background-color: #ee87be;color:black;}

#left
{
	margin-left:5%;
	text-align: center;
	float: left;
}
#left a{
	border:solid white;
	padding:10px 16px;
	display:block;
	width:120px;
}
#left:hover{background-color:#54c2c1;}
#mid
{
	width:120px;
	display:block;
	text-align: center;
	margin-left: calc(50% - 80px);
}
#mid a{
	border:solid white;
	padding:10px 16px;
	display:block;
	width:120px;
}
#mid:hover{ background-color:#54c2c1;}
#right
{
	margin-right:5%;
	text-align: center;
	float: right;
}
#right a{
	border:solid white;
	padding:10px 16px;
	display:block;
	width:120px;
}
#right:hover{ background-color:#54c2c1;}
#personalinfo tr td{text-align: right;}

div.row {
    clear: both;
}
#password label {
	text-align: right;
    display: inline-block;
	width: 200px;
}

#personalinfo label {
	text-align: right;
    display: inline-block;
	width: 200px;
}

input {
    display: inline-block;
}
#formsubmitbuttons{
	padding:20px;
	padding-left:10%
}
#formsubmitbuttons input{
	width:100px; height:50px;
}
#formsubmitbuttons #reset{
	float:right;
	padding-right:10%
}

#courseSchedule{
	padding:40px;
}

#courseSchedule table{
	text-align: center;
}

input[type = "radio"]{
	background-color: green;
	box-shadow:solid green;
}

.customRadio {
	display: block;
	position: relative;
	padding-left: 25px;
	margin-bottom: 5px;
  }
  
  /* Hide the browser's default radio button */
  .customRadio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
  }
  
  /* Create a custom radio button */
  .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 15px;
	width: 15px;
	background-color: grey;
	border-radius: 50%;
  }
  
  /* On mouse-over, add a grey background color */
  .customRadio:hover input ~ .checkmark {
	background-color: #ccc;
  }
  
  /* When the radio button is checked, add a blue background */
  .customRadio input:checked ~ .checkmark {
	background-color: green;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .customRadio input:checked ~ .checkmark:after {
	display: block;
  }

  /* The container */
.customCheck {
	padding:10px;
	display: block;
	position: relative;
	padding-left: 25px;
	margin-bottom: 10px;
	cursor: pointer;
  }
  
  /* Hide the browser's default checkbox */
  .customCheck input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
  }
  
  /* Create a custom checkbox */
  .boxCheckmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color:grey;
  }
  
  /* On mouse-over, add a grey background color */
  .customCheck:hover input ~ .boxCheckmark {
	background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .customCheck input:checked ~ .boxCheckmark {
	background-color:blue;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .boxCheckmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the checkmark when checked */
  .customCheck input:checked ~ .boxCheckmark:after {
	display: block;
  }
  
  /* Style the checkmark/indicator */
  .customCheck .boxCheckmark:after {
	left: 0px;
	top: 0px;
	width: 10px;
	height: 20px;
	content:"👍";
  }

  #adbanner a{
	display:block;
}

#adbanner a:hover{
	font-size: 100%;;
}


/* You will use this CSS file for each of your projects. Simply add new CSS selectors and elements to the end of the file. */

/* Be careful to keep your selector names unique to avoid collisions, which can cause confusion. */

/* DO NOT MODIFY THE @import STATEMENT ABOVE */
/* ----------------------------------------- */