GAMA-Site/site.css

434 lines
8.9 KiB
CSS
Raw Normal View History

BODY /* applies global body style, same as using inside <body> tag */
{
background: #000;
}
img
{
max-width: 80%;
}
#container /* Contains everything */
{
margin: 0 auto;
width: 100%;
background: #000;
}
/* Begin stuff for header */
#header-bg-bg /* The background of the background of the header */
{
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-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;
}
#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;
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 /* 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;
}
#navigation ul li /* Formatting to render list as bar */
{
list-style-type: none;
display: inline;
}
#navigation li a /* Add some coolness to the links and change text size to fit */
{
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 /* 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;
}
/* 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: #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;
}
/* 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(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;
}
/* Begin left panel navigation - (Services Offered) */
#section-navigation /* Basic aligning stuff */
{
float: left;
width: 16%;
padding: 20px 0;
margin: 0 2%;
display: inline;
}
#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 /* Format the list, similar to navigation above */
{
margin: 0 0 1em;
padding: 0;
list-style-type: none;
}
#section-navigation ul li h4 /* center <h4> 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: 18px 8px;
margin: 0 0 0 1.34%;
}
#content h2 /* Format a transparent box with rounded edges around colored bolded <h2> 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;
}
/* 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 <h3> 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%;
padding: 20px 0;
margin: 0 2% 0 0;
display: inline;
}
#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;
}
#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 <h3> tags */
/* End right panel, begin footer - Still WIP */
#footer /* Very bottom of document - small alignment and fitting to keep everything fluid */
{
clear: both;
background: #aaa;
text-align: right;
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 <noscript> tag - draws a bordered box */
padding: 5px 10px;
margin: 10px;
border: 1px dashed #fff;
text-align: center;
float: center;
color: #ffe;
border-radius:10px;
-webkit-box-shadow:0px 0px 16px 1px gray;
-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
2012-11-17 01:35:58 +00:00
}
/* End noads, begin text highlight coloring */
::-moz-selection {
background-color: #009999;
color: #fff;
}
::selection {
background-color: #009999;
color: #fff;
}
/* End text highlight coloring */