diff --git a/site.css b/site.css
index e1249f2..ff6b98e 100755
--- a/site.css
+++ b/site.css
@@ -1,68 +1,159 @@
-#container
+BODY /* applies global body style, same as using inside
tag */
+{
+ background: #000;
+}
+
+img
+{
+ max-width: 80%;
+}
+
+#container /* Contains everything */
{
margin: 0 auto;
width: 100%;
- background: #fff;
+ background: #000;
}
-#header
+/* Begin stuff for header */
+
+#header-bg-bg /* The background of the background of the header */
{
- text-align: center;
- background: #ccc;
- padding: 5px;
+ background: #333;
+ width: 100%;
+ float: left;
+ border:0px solid gray;
+ resize:none;
+ outline:0;
+ padding:2px;
+ border-top-right-radius:20px;
+ border-top-left-radius:20px;
+ -webkit-box-shadow:0px 0px 16px 1px gray;
}
-#header h1 { margin: 0; }
+#header-bg /* The background of the header */
+{
+ margin-left: 12%;
+ margin-right: 10%;
+ width: 1060px;
+ background: #444;
+ border:0px solid gray;
+ resize:none;
+ outline:0;
+ border-radius:80px;
+ -webkit-box-shadow:0px 0px 20px 1px gray;
+}
-#navigation
+#header /* The header - Transparent image */
+{
+ margin-left: 0%;
+ margin-right: 0%;
+ text-align: center;
+ float: center;
+ padding: 0px;
+}
+
+/* End stuff for header, begin stuff for navigation */
+
+#navigation-bg
{
float: left;
width: 100%;
background: #333;
- text-align: center;
+ border:0px solid gray;
+ resize:none;
+ outline:0;
+ padding:2px;
+ border-bottom-left-radius:20px;
+ border-bottom-right-radius:20px;
+ -webkit-box-shadow:0px 0px 16px 1px gray;
}
-#navigation ul
+#navigation /* Navigation menu -- Such a pain to center it to the header */
+{
+ float: center;
+ width: 100%;
+ text-align: center;
+ padding: 0px 8%;
+}
+
+#navigation ul /* Formatting to center text in list */
{
margin: 0;
- padding: 0;
}
-#navigation ul li
+#navigation ul li /* Formatting to render list as bar */
{
list-style-type: none;
display: inline;
- text-align: center;
}
-#navigation li a
+#navigation li a /* Add some coolness to the links and change text size to fit */
{
- text-align: center;
- display: block;
+ font-size: 18px;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
+ border-left: 1px solid #fff;
+ -webkit-transition: all 0.35s ease;
+ -moz-transition: all 0.35s ease;
+ -o-transition: all 0.35s ease;
+ -ms-transition: all 0.35s ease;
+ transition: all 0.35s ease;
}
-#navigation li a:hover { background: #383; }
+#navigation li a:hover /* Create the purple halo with blue background effect on mouse:hover */
+{
+ text-align: center;
+ background: #009999;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 15px rgba(179, 51, 229, 0.9) !important;
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 15px rgba(179, 51, 229, 0.9) !important;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 15px rgba(179, 51, 229, 0.9) !important;
+ border:0px solid gray;
+ resize:none;
+ outline:0;
+ padding: 5px 10px;
+ border-right: 1px solid #fff;
+ border-left: 1px solid #fff;
+}
-#content-container1
+/* End navigation, begin cc1 or left side */
+
+#content-container1 /* Allows left side of page to shrink or grow depending on window size */
{
float: left;
width: 100%;
- background: #fff url(layout-three-liquid-background1.gif) repeat-y 20% 0;
+ background: #777677 url(left.gif) repeat-y 20% 0;
+ border:0px solid gray;
+ resize:none;
+ outline:0;
+ padding:2px;
+ border-top-right-radius:20px;
+ border-top-left-radius:20px;
+ -webkit-box-shadow:0px 0px 16px 1px gray;
}
-#content-container2
+/* Begin cc2 or right side */
+
+#content-container2 /* Allows right side of page to shrink or grow depending on window size */
{
float: left;
width: 100%;
- background: url(layout-three-liquid-background2.gif) repeat-y 80% 0;
+ background: url(right.gif) repeat-y 80% 0;
+ border:0px solid gray;
+ resize:none;
+ outline:0;
+ padding:2px;
+ border-top-right-radius:20px;
+ border-top-left-radius:20px;
+ -webkit-box-shadow:0px 0px 16px 1px gray;
}
-#section-navigation
+/* Begin left panel navigation - (Services Offered) */
+
+#section-navigation /* Basic aligning stuff */
{
float: left;
width: 16%;
@@ -71,30 +162,195 @@
display: inline;
}
-#section-navigation ul
+#section-navigation ul /* Draw a box with rounded corners and shadow around the list */
{
margin: 0;
padding: 0;
+ border:0px solid gray;
+ resize:none;
+ outline:0;
+ padding:5px;
+ border-radius:30px;
+ -webkit-box-shadow:0px 0px 20px 1px gray;
+ float: center;
+ border-color: #B333E5;
+ background-color:#777;
+ color:#ffffff;
}
-#section-navigation ul li
+#section-navigation ul li /* Format the list, similar to navigation above */
{
margin: 0 0 1em;
padding: 0;
list-style-type: none;
}
-#content
+#section-navigation ul li h4 /* center
tags */
+{
+ text-align: center;
+ padding: 0;
+}
+
+#section-navigation ul li img
+{
+ border:0px solid #F8DAE2;
+ resize:none;
+ outline:0;
+ padding:0;
+ border-radius:15px;
+ -webkit-box-shadow:0px 0px 18px 1px #443377;
+ float: center;
+ border-color: #F8DAE2;
+}
+
+/* End left panel navigation, begin main content or center content */
+
+#content /* To the right of #section-navigation this is the main part of page*/
{
float: left;
width: 56%;
- padding: 20px 0;
- margin: 0 0 0 2%;
+ padding: 18px 8px;
+ margin: 0 0 0 1.34%;
}
-#content h2 { margin: 0; }
+#content h2 /* Format a transparent box with rounded edges around colored bolded
tags with shadow */
+{
+ margin: 0;
+ padding: 0px;
+ text-align: center;
+ border-radius:10px;
+ -webkit-box-shadow:0px 0px 8px 1px #333;
+ color: #443377;
+ text-shadow: 0 0 0.3em #87F;
+ font-weight: 900;
+}
-#aside
+/* Begin content post stuff - renders posts */
+
+.content-post-wrapper { /* Responsible for outer design on left and right sides along with shadows on the posts */
+ border:0px solid #b333e5;
+ resize:none;
+ outline:0;
+ padding:5px;
+ border-radius:15px;
+ -webkit-box-shadow:0px 0px 18px 1px gray;
+ float: center;
+ border-color: #B333E5;
+ background-color:#444;
+ color:#ffffff;
+ text-align: left;
+ padding: 1px 6px;
+ -moz-box-shadow: 2px 2px 2px 3px #999;
+ -webkit-box-shadow: 0px 0px 18px 1px gray, 2px 2px 2px 3px #999;
+ box-shadow: 2px 2px 2px 3px #999;
+}
+
+#content-post /* Basic box with rounded corners */
+{
+ border:0px solid #b333e5;
+ resize:none;
+ outline:0;
+ padding:5px;
+ border-radius:15px;
+ -webkit-box-shadow:0px 0px 18px 1px gray;
+ float: center;
+ border-color: #B333E5;
+ background-color:#444;
+ color:#ffffff;
+}
+
+#content-post p /* Make the text to the left with a little bit of spacing for readibility */
+{
+ text-align: left;
+ padding: 1px 6px;
+}
+
+#content-post h3 /* Format
tags to center top of post with a font size of 16 */
+{
+ text-align: center;
+ padding: 0px;
+ font-size: 16px;
+ top: 100%;
+}
+
+#content-post p:last-child:after { /* Adds the 'Φ' to the right corner of posts */
+ content: "\03A6"; /* capital Phi */
+ font-size: 130%;
+ padding-left: 10px;
+ float: right;
+ position: relative;
+ top: 15px;
+}
+
+#content-foot
+{
+ position: relative;
+ top: 100%;
+ bottom: auto;
+ width: 100%;
+ border:0px solid #fff;
+ resize:none;
+ outline:0;
+ padding:5px;
+ border-radius:15px;
+ -webkit-box-shadow:0px 0px 18px 1px gray;
+ float: center;
+ border-color: #B333E5;
+ background-color:#444;
+ color:#ffffff;
+}
+
+#content-foot p
+{
+ text-align: right;
+ padding: 1px 6px;
+}
+
+/* Begin content post links - Still WIP */
+
+#content-post a /* Draw box around link */
+{
+ border:0px solid gray;
+ resize:none;
+ outline:0;
+ padding:2px;
+ border-radius:2px;
+ -webkit-box-shadow:0px 0px 2px 1px gray;
+ text-decoration: none;
+ -webkit-transition: all 0.35s ease;
+ -moz-transition: all 0.35s ease;
+ -o-transition: all 0.35s ease;
+ -ms-transition: all 0.35s ease;
+ transition: all 0.35s ease;
+}
+
+#content-post a:hover /* Change box to oval and change unvisited link color */
+{
+ border:0px solid gray;
+ resize:none;
+ background: #444;
+ color: blue;
+ outline:0;
+ padding:2px;
+ border-radius:10px;
+ -webkit-box-shadow:0px 0px 16px 1px gray;
+}
+
+#content-post a:visited /* Change box to oval and change visited link color */
+{
+ border:0px solid gray;
+ resize:none;
+ background: #444;
+ color: red;
+ outline:0;
+ padding:2px;
+ border-radius:10px;
+ -webkit-box-shadow:0px 0px 16px 1px gray;
+}
+
+/* End content post stuff, begin right panel - Still WIP */
+
+#aside /* Everything on the right side of page */
{
float: right;
width: 16%;
@@ -103,13 +359,76 @@
display: inline;
}
-#aside h3 { margin: 0; }
+#aside ul
+{
+ margin: 0;
+ padding: 0;
+ border:0px solid gray;
+ resize:none;
+ outline:0;
+ padding:5px;
+ border-radius:30px;
+ -webkit-box-shadow:0px 0px 20px 1px gray;
+ float: center;
+ border-color: #B333E5;
+ background-color:#777;
+ color:#ffffff;
+}
-#footer
+#aside ul li /* Format the list, similar to navigation above */
+{
+ margin: 0 0 1em;
+ padding: 0;
+ list-style-type: none;
+}
+
+/*#aside h3 { margin: 0; } /* fix spacing for right-side
tags */
+
+/* End right panel, begin footer - Still WIP */
+
+#footer /* Very bottom of document - small alignment and fitting to keep everything fluid */
{
clear: both;
- background: #ccc;
+ background: #aaa;
text-align: right;
- padding: 5px;
- height: 1%;
+ padding: 5px 0px;
+ margin: 10px auto;
}
+
+/* End main formatting, begin misc formatting */
+
+/* -------------------------------------------------------------------------- */
+
+#ads
+{
+ padding: 0;
+ text-align: center;
+}
+
+/* Begin noads for when ads are blocked or JS disabled - Still WIP */
+
+#noa { /* Shows up inside