Layout

Golden Steel Athletic Association uses a 970 grid system with a 10px padding around the container. There is a margin of 10px between each div. For more information about the website layout please see the wireframes.

Brand

The color palette is 3 colors:

Black #000;
White #fff;
Red #f00;

Type

The font used for the h1, h2, h3 and any branding element is "Franklin Gothic Medium". The font used for body text is "Arial, Helvetica, sans-serif".

Nav

The main navigation css code:


						nav a {
							color: #fff;
							font-size: 1.5em;
							display: block;
							text-align: center;
							padding: 10px 5px;
							font-family: "Franklin Gothic Medium";
							text-transform: uppercase;
						}

The main navigation submenu css code:


						.submenu {
							position: absolute;
							border: 1px solid #000;
							display: none;
							background: #fff;
							text-transform: none;
							z-index: 100000;
						}
						.submenu li {
							width: 110px;
							float: none;
							margin: 0px;
						}
						.submenu a {
							color: #000;
							padding: 0px 5px 10px 5px;
						}
						nav li:hover .submenu {
							display: block;
						}

The right sidebar navigation css code:


						.box150 ul {
							list-style-type: none;
							border: 1px solid #000;
						}
						.box150 li {
							
							text-align: center;
							
							border-bottom: 1px solid #fff;
						}
						.box150 li a {
							padding: 10px 0px 10px 0px;
							background: #000;
							color: #fff;
							display: block;
						}
						.box150 li a:hover {
							color: #f00;
							background: #fff;
						}

The header text links css code:


						a{
							color:#000;
							font-family: "Gothic Franklin Medium";
						}
						a:hover {
							color: #f00;
						}

The global text links css code:


						a {
							text-decoration: none;
							color: #f00;
						}
						a:hover {
							color: #000;
						}

HTML

The h1, h2, h3 css code:


						h1 {
							font-size: 2em;
							margin-bottom: 10px;
						}
						h2 {
							font-size: 1.5em;
							margin-bottom: 10px;
						}
						h3 {
							font-size: 1.125em;
							margin-bottom: 10px;
						}

The search form css code:


						.search {
							border: 1px solid black;
							overflow: hidden;
							margin-bottom: 10px;
						}
						.search input[type=text] {
							width: 383px;
							float: left;
							margin-right: 10px;
							border: none;
							font-family: franklin;
							font-size: 1.5em;
							padding: 5px 0px 5px 5px;
						}
						.search input[type=image] {
							float: left;
						}

The register button css code:


						.register {
							overflow: hidden;
						}
						.register a {
							display: block;
							background: green;
							color: #fff;
							font-family: franklin;
							text-align: center;
							font-size: 1.5em;
							padding: 5px;
							width: 268px;
							float: right;
							border: 1px solid #000;
						}
						.register a:hover {
							background: #fff;
							color: green;
						}

The contact form css code:


						.contact, .contact form {
							overflow: hidden;
						}
						.contact form label {
							display: block;
							font-family: franklin;
						}
						.contact form input {
							display: block;
							width: 388px;
							border: 1px solid #000;
							padding: 10px 0px;
							margin-bottom: 10px;
						}
						.contact form textarea {
							display: block;
							width: 388px;
							border: 1px solid #000;
							margin-bottom: 10px;
							min-height: 150px;
							padding: 10px 0px;
						}
						.contact input[type=submit] {
							width: 148px;
							text-align: center;
							font-family: franklin;
							font-size: 18px;
							background: #000;
							color: #fff;
						}
						.contact input[type=submit]:hover {
							cursor: pointer;
							background: #f00;
							color: #000;
						}

MEDIA

The recommended home page slideshow images dimensions are 630 x 267
The home page blog thumbnail width is 310px wide and the height will auto resize
The home page photos thumbnail width is 230px wide and the height will auto resize
The photos page thumbnails are 190 x 190.
The blog page thumbnails width is 150px wide and the height will auto resize

UX DOCUMENTS

SiteMap
Wireframes
Visual Designs
HTMl Templates
- Home
- Main
- Photos
- FAQ
- Blog
- Single