all other file

2 files changed, 248 insertions, 19 deletions

diff --git a/assets/css/creative.css b/assets/css/creative.css
index 79a56f2..535e830 100644
--- a/assets/css/creative.css
+++ b/assets/css/creative.css
@@ -1,3 +1,41 @@
+/*div {*/
+    /*box-sizing: border-box;*/
+/*}*/
+main .search {
+    width: 60%;
+    height: 100%;
+}
+
+.search-cover {
+    /*height: auto;*/
+    padding-bottom: 10%;
+}
+
+.search-reduced {
+    min-width: 60%;
+}
+
+/* For better viewing for mobile displays */
+@media only screen and (max-width: 768px) {
+    main {
+        padding-top: 10%;
+        padding-bottom: 10%;
+    }
+}
+
+
+/*main #solutions {
+    padding-top: 65px;
+}*/
+
+
+h2 {
+font-family: 'Lato', sans-serif;
+color: gray;
+font-size: 2.5em;
+margin: 4%;
+padding-top: 200px;
+}
 
 .navbar-default {
     border-color: rgba(34,34,34,.05);
@@ -105,3 +143,192 @@
         /*color: #f05f40;*/
     }
 }
+
+
+header {
+    position: relative;
+    width: 100%;
+    min-height: auto;
+    text-align: center;
+    /*color: #fff;*/
+    background-image: url("../images/main.jpg");
+    /*background-color: #5bc0de;*/
+    background-size: 250px 250px;
+    background-position: center;
+    /*-webkit-background-size: cover;*/
+    /*-moz-background-size: cover;*/
+    /*background-size: cover;*/
+    /*-o-background-size: cover;*/
+
+}
+
+header .header-spec {
+    text-align: left;
+}
+
+header .header-content {
+    position: relative;
+    width: 100%;
+    padding: 100px 15px;
+    text-align: center;
+}
+
+header .header-content .header-content-inner h1 {
+    margin-top: 0;
+    margin-bottom: 0;
+    text-transform: uppercase;
+    font-weight: 700;
+}
+
+header .header-content .header-content-inner hr {
+    margin: 30px auto;
+}
+
+/*header .header-content .header-content-inner p {
+    margin-bottom: 50px;
+    font-family: 'Lato', sans-serif;
+    color: red;
+    font-size: 2.5em;
+    /color: #333333
+}*/
+
+
+
+@media (min-width: 320px) {
+    header {
+        min-height: 100%;
+    }
+
+    header .header-content {
+        position: absolute;
+        top: 50%;
+        padding: 0 50px;
+        -webkit-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        transform: translateY(-50%);
+    }
+
+    header .header-content .header-content-inner {
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 1000px;
+    }
+
+    header .header-content .header-content-inner p {
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 80%;
+        font-size: 18px;
+        color: #333333;
+    }
+    
+}
+
+@media(min-width:768px) {
+    header {
+        min-height: 100%;
+    }
+
+    header .header-content {
+        position: absolute;
+        top: 50%;
+        padding: 0 50px;
+        -webkit-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        transform: translateY(-50%);
+    }
+
+    header .header-content .header-content-inner {
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 1000px;
+    }
+
+    header .header-content .header-content-inner p {
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 80%;
+        font-size: 32px;
+        font-family: 'Lato', sans-serif;
+        color: gray;
+        font-size: 2.5em;
+    }
+
+    header .header-content-inner {  
+        flex: 1;
+        width: 60%;
+        height: 100%;
+        background-color: rgba(235,235,235, 0.7);
+        padding-top: 22%;
+        padding-bottom: 22%;
+    }
+
+}
+
+.rounded {
+    border-radius: 20px;
+}
+
+.dropdown-submenu {
+  position: relative;
+}
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+}
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+.dropdown-submenu:hover > a:after {
+  border-left-color: #fff;
+}
+.dropdown-submenu.pull-left {
+  float: none;
+}
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+}
+
+
+
+/******************************************************/
+
+
+.user-row {
+    margin-bottom: 14px;
+}
+
+.user-row:last-child {
+    margin-bottom: 0;
+}
+
+.dropdown-user {
+    margin: 13px 0;
+    padding: 5px;
+    height: 100%;
+}
+
+.dropdown-user:hover {
+    cursor: pointer;
+}
+
+.table-user-information > tbody > tr {
+    border-top: 1px solid rgb(221, 221, 221);
+}
+
+.table-user-information > tbody > tr:first-child {
+    border-top: 0;
+}
+
+
+.table-user-information > tbody > tr > td {
+    border-top: 0;
+}
+.toppad
+{margin-top:20px;
+}
+
+
diff --git a/assets/css/style.css b/assets/css/style.css
index 614d0c2..dc27602 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,5 +1,6 @@
 
 html, body {
+	width: 100%;
 	height: 100%;
 	font-family: 'Roboto', sans-serif;
 }
@@ -105,17 +106,10 @@ h1{
 			}
 
 			.drop-down:hover .drop-menu {
-				display: block;
-
-			}
-
-			.side-menu {
-				/* This line of code is incomplete - Humair */
-				/*display */
+			    display: block;
 			}
 
 
-
 main {
 	
 	background-image: url("../images/main.jpg");
@@ -134,17 +128,19 @@ main{
 	align-items: center;
 	justify-content: center;
 	flex-flow: column; /* Makes it grow vertically */
+	/*padding-bottom: 5%;
+	padding-top: 5%;*/
 }
 
-/*************************** SEARCH - index.html *********************************/
 
 /* Changes - search is a flex container for h2 and bar, removed various attributes */
 main .search {
 	flex: 1;
 	min-width: 60%;
 	min-height: 100%;
-	background-color: rgba(235,235,235, 0.6);
+	background-color: rgba(235,235,235, 0.7);
 	overflow: auto;
+
 }
 
 /* Changes - added h2 styiling for main */
@@ -156,11 +152,11 @@ main .search h2{
 	padding-top: 200px; /* Change to move search bar content. Keep as pixel*/
 }
 
-main #search-select {
+.search-select {
 	display: inline-block;
 }
 
-main #search-select select {
+.search-select select {
 	color: black;
 	width: 100px;
     padding: 5px;
@@ -175,31 +171,34 @@ main #search-select select {
 	margin-right: -5px;
 }
 
-main .search input[type=text] {
+.search input[type=text] {
 	display: inline;
     width: 250px;
+    height: 40px;
     text-align: center;
     box-sizing: border-box;
+    border: 2px solid #ccc;
     font-size: 16px;
+    border-radius: 10px;
     background-color: white;
     background-image: url('../images/search_icon.png');
     background-size: 20px 20px;
     background-position: 9px 9px;
     background-repeat: no-repeat;
     padding: 12px 20px 12px 40px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     -webkit-transition: width 0.4s ease-in-out;
     transition: width 0.4s ease-in-out;
-    border-top-right-radius: 10px;
-	border-bottom-right-radius: 10px;
 }
 
-main .search input[type=text], main #search-select select {
+
+.search input[type=text], .search-select select {
 	height: 40px;
 	border: 2px solid #ccc;
 	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 }
 
-main .search input[type=text]:focus {
+.search input[type=text]:focus {
     width: 50%;
 }
 
@@ -208,6 +207,9 @@ main .search img {
 	display: inline;
 }
 
+
+
+
 /*************************** END OF SEARCH - index.html *********************************/
 
 /*************************** USER SOLUTIONS - user_solutions.html *********************************/
@@ -398,7 +400,7 @@ main [id^="sol-"] div.comments ul li p.user-comment {
 
 
 /*************************** END OF USER SOLUTIONS - user_solutions.html *********************************/
-
+/*
 footer {
 	background-color: #333333;
 	bottom: 0;
@@ -431,7 +433,7 @@ footer nav a {
 	color: darkgray;
 	vertical-align: top;
 }
-
+*/
 /***********************************************************************************************************************/
 
 /*THE SOLUTIONS PAGE BEGINS HERE*/