/* <!--External CSS file--> */
<!DOCTYPE css>
<css>



/* <!--Things to keep working on in this section:
Increase the text size of each hyperlink by 150% when the mouse hovers over the link
  The text size should return to normal (100%) when the mouse moves away from the link
--> */

<section>
	/*<!--Peronal Web Page-->*/
	<link href = "personal.html"
		  rel = "stylesheet">

	<style>
	/* <!--This needs to be fixed if you have time DELETE THIS--> */
	.oro{
		color:orange;
	}
	
	h2.blu{
		color: blue;
	}
	
	h2.grn{
		color:green;
	}
	
	h2.rd{
		color:red;
		
	}
	
	
	.bol{
		font-weight: bold;
	}
	
	.ital{
		font-style: italic;
	}
	
	.cert{
		text-decoration: underline;
	}

	
	p.inc a:hover{
		font-size: 150%;
	}
	</style>
	
</section>
/* 	<!--Ask if each hyperlink includes the links at the bottom of the page--->
	<!--Ask if there is a better solution this problem (could add a class element to this as well--> */




/* <!--Class Schedule--> */

<section>

<link href = "schedule.html"
	  rel = "stylesheet">
	<link>
	<style> /*Ask if the table needs a border for this project*/
		
		table{
			border: 4px solid black;
		}
		/*<!--Inspiration taken from zybooks section 1.8 on table borders maybe delete**** -->*/
		
		table, td{
			text-align: center;
		}
		
		
		/*See if this should stay green or be another color*/
		th{
			background-color: green;
		}
		
		/*Striping of the data rows starts here*/
		
		tr.redr{
			background-color: red;
			
		}
		
		tr.grnr{
			background-color: green;
		}
		
		
		/*See if you can change these at any point*/
		li.prim {
			list-style-type: arabic;
		}
		
		ol.scnd > li {
			list-style-type: upper-alpha
		}

	</style>

</link>
</section>



<section>
/* <!--Create Account--> */
<link href = "account.html"
	  rel = "stylesheet">
	  <link>

	<style>
		
	 /* Customize the label (the container) */
		/* The container */
		.container {
		  display: block;
		  position: relative;
		  
		  padding-left:35px;
		
		  
		
		
		  margin-bottom: 12px;
		  cursor: pointer;
		  font-size: 22px;
		
		  -webkit-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		   
		}

		/* Hide the browser's default radio button */
		.container input {
		  position: absolute;
		  opacity: 0;
		  cursor: pointer;
		 
		}

		/* Create a custom radio button */
		.checkmark {
		  position: absolute;
		  top:  1;
		  left: 0;
				 transform: translateX(15%);
		  height: 15px;
		  width: 15px;
		  background-color: grey;
		  border-radius: 50%;
		}

		/* On mouse-over, add a grey background color */
		.container:hover input ~ .checkmark {
		  background-color: grey;
		}

		/* When the radio button is checked, add a blue background */
		.container 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 */
		.container input:checked ~ .checkmark:after {
		  display: block;
		}

		/* Style the indicator (dot/circle) */
		.container .checkmark:after {
		  top: 6px;
		  left: 3px;
		  width: 8px;
		  height: 8px;
		  border-radius: 50%;
		  background: white;
		} 
		
		.lbl{
			padding-left: 12px;
			
		}
	/**Ask how much of this can be used/W3schools inspiration can be taken; also ask if
	i should straight delete my radio button in the file proper and start over**/
	
	
		
	
	</style>
	

	<style>
		/* Hide the browser's default checkbox */
		
		.cbcontainer {
		  display: block;
		  position: relative;
		
		  
		 
	
		   padding-left: 50px;
		  margin-bottom: 12px;
		  cursor: pointer;
		  font-size: 22px;
		  -webkit-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		  
		  
		}
		
		.cbcontainer input {
		  position: absolute;
		  opacity: 0;
		  cursor: pointer;
		  height: 0;
		  width: 0;
		}

		/* Create a custom checkbox */
		.checkmarkcb {
		  position: absolute;
		  top: 4;
		  left: 1;
		
		  height: 15px;
		  width: 15px;
		  background-color: grey;
		
		}

		/* On mouse-over, add a grey background color */
		.cbcontainer:hover input ~ .checkmarkcb {
		  background-color: grey;
		}

		/* When the checkbox is checked, add a blue background */
		.cbcontainer input:checked ~ .checkmarkcb {
		  background-color: blue;
		}

		/* Create the checkmark/indicator (hidden when not checked) */
		.checkmarkcb:after {
		  content: "";
		  position: absolute;
		  display: none;
		}

		/* Show the checkmark when checked */
		.cbcontainer input:checked ~ .checkmarkcb:after {
		  display: block;
		}

		/* Style the checkmark/indicator */
		.cbcontainer .checkmarkcb:after {
		  left: 3px;
		  top: 2px;
		  width: 5px;
		  height: 8px;
		  border: solid white;
		  border-width: 0 3px 3px 0;
		  -webkit-transform: rotate(45deg);
		  -ms-transform: rotate(45deg);
		  transform: rotate(45deg);
		}
		
		
		 .l1{
		padding-right: 38px;
		
		}

		.l2{
		padding-left: 57px;
		}

		.l3{
		padding-right: 87px; 
		}

		.l5{

		padding-right: 75px;
	

		}

		.l6{
		padding-right: 40px;
	
		}

		.l7{
		padding-right: 37px;
	
		}

		.l8{
		padding-right: 48.5px;
		
		} 
	
		
		
		/*This will vertically align the checkboxes; Inspiration from W3Schools*/
		#vl1{
			margin:0;
			position: absolute;
			-ms-transform: translateX(57px);
			transform: translateX(61px);
		}
		
		#vl3{
			margin:0;
			position: absolute;
			-ms-transform: translateX(53px);
			transform: translateX(53px);
		}
		
		#vl5{
			margin:0;
			position: absolute;
			-ms-transform: translateX(44px);
			transform: translateX(44px);
		}
	
		#vl7{
			margin:0;
			position: absolute;
			-ms-transform: translateX(5px);
			transform: translateX(5px);
		}
		
		
		
		
		#vl2{
			margin:0;
			position: absolute;
			-ms-transform: translateX(50px);
			transform: translateX(69px);
		}
		
		#vl4{
			margin:0;
			position: absolute;
			-ms-transform: translateX(53px);
			transform: translateX(53px);
		}
		
		#vl6{
			margin:0;
			position: absolute;
			-ms-transform: translateX(20px);
			transform: translateX(20px);
		}
		
		#vl8{
			margin:0;
			position: absolute;
			-ms-transform: translateX(64px);
			transform: translateX(64px);
		}
		
		
	
	<style>
	<body>
	
	
</link>
</section>
</css>