From c145847decc3353f0f43c7830b9d9ea7edc36551 Mon Sep 17 00:00:00 2001
From: unknown <jbbenson12@gmail.com>
Date: Thu, 30 May 2019 21:17:18 -1000
Subject: [PATCH 1/4] gee-mail

---
 css/style.css | 239 ++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    | 130 +++++++++++++++++++++++++--
 2 files changed, 364 insertions(+), 5 deletions(-)

diff --git a/css/style.css b/css/style.css
index e69de29b..7f2353ac 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,239 @@
+body{
+    font-family: 'Poppins', sans-serif; 
+}
+.topheader{
+    border: solid;
+    color: #eeeeee;
+    margin: 25 -10 20 -10px;
+}
+.fa-bars{
+    float: left;
+    margin: 15px 15px 0px 15px;
+    font-size: 150%;
+    color: #727272;
+}
+#tooltipbars{
+    position: relative;
+    display: inline-block;
+}
+.fa-bars #tooltiptextbars{
+    visibility: hidden;
+    position: absolute;
+}
+.fa-bars:hover #tooltiptextbars{
+    visibility: visible;
+    font-family: 'Poppins', sans-serif;
+    font-size: 15px;
+    margin-top: 15px;
+    margin-left: -10px;
+    padding: 5px;
+    border-radius: 5px;
+    background-color: #424242;
+    color: white;
+}
+.fa-bars:hover{
+    margin: 5px;
+    background-color: #dddddd;
+    background-size: 100px;
+    padding: 10px;
+    border-radius: 50px;
+}
+.fa-envelope{
+    float: left;
+    margin-top: 5px;
+    margin-left: 5px;
+    font-size: 300%;
+    color: #D44638;
+}
+.fa-envelope:hover{
+    margin: -5px;
+    margin-right: -10px;
+    background-color: #dddddd;
+    background-size: 100px;
+    padding: 10px;
+    border-radius: 50px;
+}
+#topHeader{
+    float: left;
+    margin-top: 10px;
+    margin-left: 15px;
+    color: #727272;
+    font-family: 'Poppins', sans-serif;
+}
+#topnav{
+    float: left;
+    margin-top: 5px;
+    margin-left: 50px;
+}
+input[type=text]{
+    font-size: 150%;
+    color: #727272;
+    font-family: 'Poppins', sans-serif;
+    border-radius: 5px;
+    background-color: #eeeeee;
+    width: 150%;
+}
+#acctSym{
+    float: right;
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 15px;
+    color: white;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    font-family: 'Poppins', sans-serif;
+    background-color: #D44638;
+    border-radius: 40px;
+}
+.fa-th{
+    float: right;
+    margin-right: 10px;
+    margin-top: 15px;
+    font-size: 175%;
+    color: #727272;
+}
+.fa-question-circle{
+    float: right;
+    margin-right: 15px;
+    margin-top: 15px;
+    font-size: 175%;
+    color: #727272;
+}
+aside{
+    float:left;
+    margin-right: 135px;
+}
+.fa-plus{
+    float: left;
+    font-size: 150%;
+    color: #D44638;
+}
+.composetext{
+    padding-left: 15px;
+}
+#compose{
+    border-style: outset;
+    border-radius: 30px;
+    padding: 15px;
+}
+.sidebaricons{
+    float: left;
+    margin-left: 10px;
+    font-size: 150%;
+    color: #727272;
+}
+.sidebartext{
+    margin-left: 15px;
+}
+.fa-square{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-top: 20px;
+}
+.fa-sort-down{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-left: 10px;
+    margin-top: 15px;
+}
+.fa-redo{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-left: 30px;
+    margin-top: 20px;
+}
+.fa-ellipsis-v{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-left: 30px;
+    margin-top: 20px;
+}
+.fa-cog{
+    float: right;
+    font-size: 150%;
+    color: #727272;
+    margin-right: 20px;
+    margin-top: 20px;
+}
+.fa-chevron-right{
+    float: right;
+    font-size: 150%;
+    color: #727272;
+    margin-right: 30px;
+    margin-top: 20px;
+}
+.fa-chevron-left{
+    float: right;
+    font-size: 150%;
+    color: #727272;
+    margin-right: 30px;
+    margin-top: 20px;
+}
+#primary{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-top: 5px;
+}
+#social{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-left: 100px;
+    margin-top: 5px;
+}
+#promotions{
+    float: left;
+    font-size: 150%;
+    color: #727272;
+    margin-left: 100px;
+    margin-top: 5px;
+}
+.inboxes{
+    float: left;
+    margin-left: 20px;
+    margin-top: 5px;
+}
+.lineprimary{
+    border: solid;
+    color: #eeeeee;
+    margin-top: 30px;
+    margin-left: 285px;
+}
+.lineemail{
+    border: solid;
+    color: #eeeeee;
+    margin-top: 20px;
+    margin-left: 285px;
+}
+#senderStart{
+    float: left;
+    column-count: 1;
+}
+#subjectStart{
+    float: left;
+    margin-left: 75px;
+    column-count: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 800px;
+}
+#dateStart{
+    float: right;
+    column-count: 1;
+}
+#emailCounter{
+    float: right;
+    margin-right: 20px;
+    margin-top: 20px;
+}
+#inboxCounter{
+    float: right;
+    margin-left: 50px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a8a1aad9..1c5c01be 100644
--- a/index.html
+++ b/index.html
@@ -2,17 +2,137 @@
 	<head>
 		<script src="js/mail-generator.js"></script>
 		<link href="css/style.css" rel="stylesheet" media="screen">
+		<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
+		<script src="https://kit.fontawesome.com/268ac8feec.js"></script>
     <script>
       window.onload = function(){
         // ALL OF YOUR JAVASCRIPT CODE SHOULD GO HERE. 
-        // We have to use window.onload so your JavaScript doesn't execute until the page has loaded and all HTML has been downloaded to your browser
-        
+				// We have to use window.onload so your JavaScript doesn't execute until the page has loaded and all HTML has been downloaded to your browser
+				
+				for (i=0; i<geemails.length; i++){
+
+					var senderBox = document.createElement('div')
+					senderBox.className = "sender";
+					senderBox.innerHTML = geemails[i].sender
+					senderStart.appendChild(senderBox);
+
+					//geemails.body.fontcolor(#dddddd)
+					var subjectBox = document.createElement('div')
+					subjectBox.className = "subject";
+					subjectBox.innerHTML = geemails[i].subject + " - " + geemails[i].body
+					subjectStart.appendChild(subjectBox);
+
+					//substring(5, 21)
+					var dateBox = document.createElement('div')
+					dateBox.className = "date";
+					dateBox.innerHTML = geemails[i].date
+					dateStart.appendChild(dateBox);
+				}
+				var totalEmails = document.createElement('div')
+					totalEmails.className = "count";
+					totalEmails.innerHTML = "1 - " + geemails.length + " of " + geemails.length
+					emailCounter.appendChild(totalEmails);
+
+				var totalEmailsCount = document.createElement('div')
+					totalEmailsCount.className = "count";
+					totalEmailsCount.innerHTML = geemails.length
+					inboxCounter.appendChild(totalEmailsCount);
+				console.log(geemails);
       };
     </script>
 	</head>
 	<body>
-		<div class="container" id="main">
-			Build Me!
-		</div>
+			<header>
+					<i class="fas fa-bars">
+							<div class="container" id="main">
+									<div id="tooltipbars">
+										<div id="tooltiptextbars">Main menu</div>
+									</div>
+							</div>
+					</i>
+					<i class="far fa-envelope"></i>
+					<h2 id="topHeader">Gee-mail</h2>
+					<div id="topnav">
+						<input type="text" placeholder="Search mail">
+					</div>
+					<h2 id="acctSym">J</h2>
+					<i class="fas fa-th"></i>
+					<i class="far fa-question-circle"></i>
+			</header>
+			<br><br>
+			<hr class="topheader">
+			<section>
+					<aside>
+						<div id="compose">
+							<i class="fas fa-plus"></i>
+							<span class="composetext">Compose</span>
+						</div>	
+							<br><br>
+							<div class="sidebaricons">
+								<i class="fas fa-inbox"></i>
+							</div>
+								<span class="sidebartext">Inbox</span><span id="inboxCounter"></span>
+							</div>	
+							<br><br>
+							<div class="sidebaricons">
+								<i class="fas fa-star-of-david"></i>
+							</div>
+								<span class="sidebartext">Starred</span>
+								<br><br>
+								<div class="sidebaricons">
+										<i class="fas fa-clock"></i>
+									</div>
+										<span class="sidebartext">Snoozed</span>
+										<br><br>
+						<div class="sidebaricons">
+								<i class="fas fa-angle-double-right"></i>
+							</div>
+								<span class="sidebartext">Important</span>
+								<br><br>
+						<div class="sidebaricons">
+								<i class="fas fa-paper-plane"></i>
+							</div>
+								<span class="sidebartext">Sent</span>
+								<br><br>
+						<div class="sidebaricons">
+								<i class="fas fa-file"></i>
+							</div>
+								<span class="sidebartext">Drafts</span>
+								<br><br>
+						<div class="sidebaricons">
+								<i class="fas fa-folder"></i>
+							</div>
+								<span class="sidebartext">Categories</span>
+					</aside>
+					<i class="far fa-square"></i>
+					<i class="fas fa-sort-down"></i>
+					<i class="fas fa-redo"></i>
+					<i class="fas fa-ellipsis-v"></i>
+					<i class="fas fa-cog"></i>
+					<i class="fas fa-chevron-right"></i>
+					<i class="fas fa-chevron-left"></i>
+					<div id="emailCounter"></div>
+					<br>
+					<hr class="lineprimary">
+					<div id="primary">
+						<i class="fas fa-inbox"></i>
+					</div>
+						<span class="inboxes">Primary</span>
+					<div id="social">
+						<i class="fas fa-user-friends"></i>
+					</div>
+						<span class="inboxes">Social</span>
+					<div id="promotions">
+						<i class="fas fa-tag"></i>
+					</div>
+					<span class="inboxes">Promotions</span>
+			</section>
+			<br>
+			<hr class="lineemail">
+			<section>
+				<p id="senderStart"></p>
+				<p id="subjectStart"></p>
+				<p id="dateStart"></p>
+			</section>
 	</body>
 </html>
\ No newline at end of file

From 4ed23e46580e459aa872565b969901c035bcce2f Mon Sep 17 00:00:00 2001
From: unknown <jbbenson12@gmail.com>
Date: Fri, 31 May 2019 19:42:49 -1000
Subject: [PATCH 2/4] gee-mail

---
 css/style.css |  74 +++++++++++++++++++++++++++++++------
 index.html    | 100 ++++++++++++++++++++++++++++++++++++++------------
 2 files changed, 138 insertions(+), 36 deletions(-)

diff --git a/css/style.css b/css/style.css
index 7f2353ac..b7e6c8f3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -103,6 +103,7 @@ input[type=text]{
 aside{
     float:left;
     margin-right: 135px;
+    height: 100%;
 }
 .fa-plus{
     float: left;
@@ -199,6 +200,14 @@ aside{
     margin-left: 20px;
     margin-top: 5px;
 }
+#emailCounter{
+    float: right;
+    margin-right: 20px;
+    margin-top: 20px;
+}
+#inboxCounter{
+    float: right;
+}
 .lineprimary{
     border: solid;
     color: #eeeeee;
@@ -213,27 +222,68 @@ aside{
 }
 #senderStart{
     float: left;
-    column-count: 1;
 }
 #subjectStart{
     float: left;
     margin-left: 75px;
-    column-count: 1;
     overflow: hidden;
-    white-space: nowrap;
+    white-space: wrap;
+    max-width: 400px;
     text-overflow: ellipsis;
-    max-width: 800px;
+}
+/* #hyphenStart{
+    float: left;
+    margin-top: 15px;
+    margin-right: 5px;
+} */
+#bodyStart{
+    float: left;
+    display: none;
+    word-wrap: break-word;
+    overflow: hidden;
+    white-space: wrap;
+    text-overflow: ellipsis;
+    max-width: 400px;
 }
 #dateStart{
     float: right;
-    column-count: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 200px;
 }
-#emailCounter{
-    float: right;
-    margin-right: 20px;
-    margin-top: 20px;
+.sender{
+    /* float: left; */
+    display: inline;
 }
-#inboxCounter{
-    float: right;
-    margin-left: 50px;
+.subject{
+    /* float: left; */
+    display: inline;
+    margin: 50px;
+}
+.theBody{
+    /* float: left; */
+    display: none;
+    margin: 50px;
+}
+.date{
+    /* float:right; */
+    display: inline;
+    overflow: hidden;
+    white-space: nowrap;
+    margin: 50px;
+}
+.nextEmailSend{
+    display: inline;
+}
+.nextEmailSub{
+    display: inline;
+}
+.nextEmailBod{
+    display: inline;
+}
+.nextEmailD{
+    display: inline;
+}
+#allEmails{
+    display: inline;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 1c5c01be..e447356c 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 	<head>
 		<script src="js/mail-generator.js"></script>
 		<link href="css/style.css" rel="stylesheet" media="screen">
+		<link rel="icon" href="http://www.iconarchive.com/download/i98301/dakirby309/simply-styled/Gmail.ico">
 		<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
 		<script src="https://kit.fontawesome.com/268ac8feec.js"></script>
     <script>
@@ -9,36 +10,87 @@
         // ALL OF YOUR JAVASCRIPT CODE SHOULD GO HERE. 
 				// We have to use window.onload so your JavaScript doesn't execute until the page has loaded and all HTML has been downloaded to your browser
 				
+				var totalEmails = document.createElement('div');
+					totalEmails.className = "counts";
+					totalEmails.innerHTML = "1 of 1"
+					emailCounter.appendChild(totalEmails);
+						
+				var totalEmailsCount = document.createElement('div');
+					totalEmailsCount.id = "count";
+					totalEmailsCount.innerHTML = geemails.length;
+					inboxCounter.appendChild(totalEmailsCount);
+
+					var emailBox = document.createElement('div');
+					allEmails.appendChild(emailBox);
+
 				for (i=0; i<geemails.length; i++){
 
-					var senderBox = document.createElement('div')
+					var senderBox = document.createElement('div');
 					senderBox.className = "sender";
-					senderBox.innerHTML = geemails[i].sender
-					senderStart.appendChild(senderBox);
+					senderBox.innerHTML = geemails[i].sender;
+					emailBox.appendChild(senderBox);
 
-					//geemails.body.fontcolor(#dddddd)
-					var subjectBox = document.createElement('div')
+					var subjectBox = document.createElement('div');
 					subjectBox.className = "subject";
-					subjectBox.innerHTML = geemails[i].subject + " - " + geemails[i].body
-					subjectStart.appendChild(subjectBox);
+					subjectBox.innerHTML = geemails[i].subject;
+					subjectBox.addEventListener('click', showEmail)
+					emailBox.appendChild(subjectBox);
 
-					//substring(5, 21)
-					var dateBox = document.createElement('div')
+					var bodyBox = document.createElement('p');
+					bodyBox.className = "theBody";
+					bodyBox.style.color = "#aaaaaa"
+					bodyBox.innerHTML = geemails[i].body;
+					subjectBox.appendChild(bodyBox);
+
+					var dateBox = document.createElement('div');
 					dateBox.className = "date";
-					dateBox.innerHTML = geemails[i].date
-					dateStart.appendChild(dateBox);
+					dateBox.innerHTML = geemails[i].date;
+					emailBox.appendChild(dateBox);
+
+					allEmails.appendChild(emailBox);
+
 				}
-				var totalEmails = document.createElement('div')
-					totalEmails.className = "count";
-					totalEmails.innerHTML = "1 - " + geemails.length + " of " + geemails.length
-					emailCounter.appendChild(totalEmails);
 
-				var totalEmailsCount = document.createElement('div')
-					totalEmailsCount.className = "count";
-					totalEmailsCount.innerHTML = geemails.length
-					inboxCounter.appendChild(totalEmailsCount);
-				console.log(geemails);
-      };
+					function showEmail(){
+						var emailBody = this.querySelector(".theBody");
+						if (emailBody.style.display === "block"){
+							emailBody.style.display = "none";
+						}else{
+							emailBody.style.display = "block";
+						}
+				}
+			}
+
+var newEmail = setInterval(genEmail, 3000);
+					
+	function genEmail(){
+	var newMail = getNewMessage()
+	/* var newEmailBox = document.createElement('div');
+	newEmailBox.id = "randomEmails";
+//	newEmailBox.innerHTML = "";
+	emailBox.appendChild(newEmailBox); */
+
+/* 	var senderBox = document.createElement('div');
+					senderBox.className = "sender";
+					senderBox.innerHTML = newMail.sender;
+					emailBox.appendChild(senderBox); */
+/*
+	var nextEmailSubject = newMail.subject;
+	nextEmailSubject.className = "nextEmailSub";
+	allEmails.innerHTML += nextEmailSubject + "<br>";
+	
+	var nextEmailBody = newMail.body;
+	nextEmailBody.className = "nextEmailBod";
+	allEmails.innerHTML += nextEmailBody + "<br>";
+
+	var nextEmailDate = newMail.date;
+	nextEmailDate.className = "nextEmailD";
+	allEmails.innerHTML += nextEmailDate + "<br>";
+
+	count.innerHTML++;
+*/
+}
+			
     </script>
 	</head>
 	<body>
@@ -130,9 +182,9 @@ <h2 id="acctSym">J</h2>
 			<br>
 			<hr class="lineemail">
 			<section>
-				<p id="senderStart"></p>
-				<p id="subjectStart"></p>
-				<p id="dateStart"></p>
+				<div id="allEmails">
+				</div>
+				<!-- <div id="emailBox"></div> -->
 			</section>
 	</body>
 </html>
\ No newline at end of file

From 62c34ac9a28c57eac218df8b01521f08d5d82794 Mon Sep 17 00:00:00 2001
From: unknown <jbbenson12@gmail.com>
Date: Fri, 31 May 2019 20:49:47 -1000
Subject: [PATCH 3/4] gee-mail

---
 css/style.css |  1 -
 index.html    | 78 ++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/css/style.css b/css/style.css
index b7e6c8f3..d4f4affb 100644
--- a/css/style.css
+++ b/css/style.css
@@ -263,7 +263,6 @@ aside{
 .theBody{
     /* float: left; */
     display: none;
-    margin: 50px;
 }
 .date{
     /* float:right; */
diff --git a/index.html b/index.html
index e447356c..157caad6 100644
--- a/index.html
+++ b/index.html
@@ -20,21 +20,25 @@
 					totalEmailsCount.innerHTML = geemails.length;
 					inboxCounter.appendChild(totalEmailsCount);
 
-					var emailBox = document.createElement('div');
-					allEmails.appendChild(emailBox);
+					/* var emailBox = document.createElement('div');
+					allEmails.appendChild(emailBox); */
 
 				for (i=0; i<geemails.length; i++){
 
+					var wrapper = document.createElement('div');
+					wrapper.className = "container";
+					allEmails.appendChild(wrapper);
+
 					var senderBox = document.createElement('div');
 					senderBox.className = "sender";
 					senderBox.innerHTML = geemails[i].sender;
-					emailBox.appendChild(senderBox);
+					wrapper.appendChild(senderBox);
 
 					var subjectBox = document.createElement('div');
 					subjectBox.className = "subject";
 					subjectBox.innerHTML = geemails[i].subject;
 					subjectBox.addEventListener('click', showEmail)
-					emailBox.appendChild(subjectBox);
+					wrapper.appendChild(subjectBox);
 
 					var bodyBox = document.createElement('p');
 					bodyBox.className = "theBody";
@@ -45,9 +49,7 @@
 					var dateBox = document.createElement('div');
 					dateBox.className = "date";
 					dateBox.innerHTML = geemails[i].date;
-					emailBox.appendChild(dateBox);
-
-					allEmails.appendChild(emailBox);
+					wrapper.appendChild(dateBox);
 
 				}
 
@@ -59,22 +61,56 @@
 							emailBody.style.display = "block";
 						}
 				}
-			}
 
-var newEmail = setInterval(genEmail, 3000);
+	var newEmail = setInterval(genEmail, 3000);
 					
 	function genEmail(){
 	var newMail = getNewMessage()
-	/* var newEmailBox = document.createElement('div');
-	newEmailBox.id = "randomEmails";
-//	newEmailBox.innerHTML = "";
-	emailBox.appendChild(newEmailBox); */
 
-/* 	var senderBox = document.createElement('div');
-					senderBox.className = "sender";
-					senderBox.innerHTML = newMail.sender;
-					emailBox.appendChild(senderBox); */
-/*
+	var wrapper = document.createElement('div');
+		wrapper.className = "container";
+		allEmails.appendChild(wrapper);
+
+		var senderBox = document.createElement('div');
+		senderBox.className = "sender";
+		senderBox.innerHTML = newMail.sender;
+		wrapper.appendChild(senderBox);
+
+		var subjectBox = document.createElement('div');
+		subjectBox.className = "subject";
+		subjectBox.innerHTML = newMail.subject;
+		subjectBox.addEventListener('click', showEmail)
+		wrapper.appendChild(subjectBox);
+
+		var bodyBox = document.createElement('p');
+		bodyBox.className = "theBody";
+		bodyBox.style.color = "#aaaaaa"
+		bodyBox.innerHTML = newMail.body;
+		subjectBox.appendChild(bodyBox);
+
+		var dateBox = document.createElement('div');
+		dateBox.className = "date";
+		dateBox.innerHTML = newMail.date;
+		wrapper.appendChild(dateBox);
+
+		function showEmail(){
+						var emailBody = this.querySelector(".theBody");
+						if (emailBody.style.display === "block"){
+							emailBody.style.display = "none";
+						}else{
+							emailBody.style.display = "block";
+						}
+				}
+		
+		count.innerHTML++;
+	}
+}
+	/*
+	var senderBox = document.createElement('div');
+	senderBox.className = "sender";
+	senderBox.innerHTML = newMail.sender;
+	emailBox.appendChild(senderBox);
+
 	var nextEmailSubject = newMail.subject;
 	nextEmailSubject.className = "nextEmailSub";
 	allEmails.innerHTML += nextEmailSubject + "<br>";
@@ -88,8 +124,8 @@
 	allEmails.innerHTML += nextEmailDate + "<br>";
 
 	count.innerHTML++;
-*/
-}
+
+ */
 			
     </script>
 	</head>
@@ -183,8 +219,6 @@ <h2 id="acctSym">J</h2>
 			<hr class="lineemail">
 			<section>
 				<div id="allEmails">
-				</div>
-				<!-- <div id="emailBox"></div> -->
 			</section>
 	</body>
 </html>
\ No newline at end of file

From 4171a3ad424b287e58acc3d0d88d1a7cb20bdb62 Mon Sep 17 00:00:00 2001
From: unknown <jbbenson12@gmail.com>
Date: Fri, 31 May 2019 21:28:03 -1000
Subject: [PATCH 4/4] gee-mail

---
 css/style.css | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/css/style.css b/css/style.css
index d4f4affb..5c78f88b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -104,6 +104,7 @@ aside{
     float:left;
     margin-right: 135px;
     height: 100%;
+    position: fixed;
 }
 .fa-plus{
     float: left;
@@ -132,6 +133,7 @@ aside{
     font-size: 150%;
     color: #727272;
     margin-top: 20px;
+    margin-left: 285px;
 }
 .fa-sort-down{
     float: left;
@@ -180,6 +182,7 @@ aside{
     font-size: 150%;
     color: #727272;
     margin-top: 5px;
+    margin-left: 285px;
 }
 #social{
     float: left;
@@ -231,11 +234,6 @@ aside{
     max-width: 400px;
     text-overflow: ellipsis;
 }
-/* #hyphenStart{
-    float: left;
-    margin-top: 15px;
-    margin-right: 5px;
-} */
 #bodyStart{
     float: left;
     display: none;
@@ -254,22 +252,26 @@ aside{
 .sender{
     /* float: left; */
     display: inline;
+    margin-left: 285px;
 }
 .subject{
     /* float: left; */
     display: inline;
-    margin: 50px;
+    column-span: inherit;
 }
 .theBody{
     /* float: left; */
     display: none;
+    column-span: inherit;
+
 }
 .date{
     /* float:right; */
     display: inline;
+    column-span: inherit;
+
     overflow: hidden;
     white-space: nowrap;
-    margin: 50px;
 }
 .nextEmailSend{
     display: inline;
@@ -285,4 +287,8 @@ aside{
 }
 #allEmails{
     display: inline;
+}
+.container{
+    display: flex;
+    justify-content: space-between;
 }
\ No newline at end of file