/* 

STYLE SHEET FOR SNUB COMMUNICATIONS (2010)
Created by Craig Grannell
www.snubcommunications.com

Table of contents
-------------------
	1. page defaults
	2. main layout
	3. masthead
	4. web design content
	5. copywriting content
	6. shared content styles
	7. footer and email form
-------------------

>> baseline: 20px
>> grid settings: 40|20 

-------------------

Colour settings
>> orange: f26522

-------------------

*/

/* ---- 1. _page defaults  ---- */

@import url(snub-css-defaults.css);

body {
		color: #ffffff;
		background: #212121;
		font-family:  Arial, "Liberation Sans", sans-serif;
		}

#grid {
		position: absolute;
		width: 100%;
		height: 150%;
		background: url(images/grid.png);
		}

a {
		color: #ffffff;
		}

/* ---- 2. _main layout ---- */

#wrapper {
		background: #ffca44 url(images/wrapper-background.jpg) repeat-x;
		}

#masthead,
#wdImagesC,
#cwImagesC {
		width: 740px;
		padding: 0 30px;
		margin: 0 auto;
		} 

#wdText,
#cwText,
#contentBottomSign {
		width: 700px;
		padding: 0 50px;
		margin: 0 auto;
		}

/* ---- 3. _masthead ---- */

#masthead {
		background: url(images/masthead-background.jpg) no-repeat;
		position: relative;
		height: 178px;
		padding-top: 22px;
		}

h1 {/* snub logo */
		background: url(images/snub-communications.gif) 0 0 no-repeat;
		width: 247px;
		height: 61px;
		overflow: hidden;
		font-size: 20px;
		text-indent: -1000px;
		margin: 18px 0 20px 20px;
		}

#masthead h2 {/* I design... */
		padding: 19px 20px 21px 20px;
		background: url(images/masthead-h2-background.gif) repeat-x;
		font: bold 15px/20px Arial, "Liberation Sans", sans-serif;
		text-transform: uppercase;
		color: #777272;
		}
#masthead h2 a {
		color: #f26522;
		text-decoration: none;
		}
#masthead h2 a:hover {
		text-decoration: underline;
		}
		
#contactInfo {/* tel, email box */
		position: absolute;
		top: 40px; 
		right: 50px;
		}
#contactInfo ul {
		padding-top: 1px;
		list-style: none;
		color: #ffffff;
		font-size: 12px;
		line-height: 20px;
		font-weight: bold;
		text-transform: uppercase;
		width: 300px;
		text-align: right;
		}
#contactInfo a {
		text-decoration: none;
		}
#contactInfo a:hover {
		text-decoration: underline;
		}		
		
#externalLinksMH {/* blog links */
		position: absolute;
		top: 140px;
		right: 50px;
		}
#externalLinksMH ul {			
		font-size: 12px;
		line-height: 20px;
		letter-spacing: 0;
		list-style: none;
		text-transform: uppercase;
		text-align: right;
		}
#externalLinksMH a {
		color: #aaaaaa;
		text-decoration: none;
		}
#externalLinksMH a:hover {
		color: #888888;
		text-decoration: underline;
		}		

/* ---- 4. _web design content  ---- */		

#wdImagesC {
		background: url(images/web-design-images-background.jpg) no-repeat;
		height: 397px;
		padding-top: 23px;
		position: relative;
		}
		
#wdText {
		background: url(images/web-design-text-background.jpg) no-repeat;
		height: 260px;
		}

	/* -- _slider and _numeric controls -- */
	

#slider {
		width: 760px;
		height: 374px;
		overflow: hidden; 
		}

#slider ul, #slider li {
		list-style: none;
		}

#slider li { 
		width: 760px;
		height: 374px;
		overflow: hidden; 
		}		
		
#prevBtn, #nextBtn, #slider1next, #slider1prev { 
		display:none;
		}			

ol#controls {
		font: bold 12px/20px "Helvetica Neue", "Liberation Sans", Arial, sans-serif; 
		position: absolute;
		right: 50px;
		top: 420px;
		margin: 0;
		padding: 0;
		height: 20px;
		list-style: none;
		}
ol#controls li{
		margin: 0 1px 0 0; 
		padding: 0;
		float: left;
		height: 20px;
		line-height: 20px;
		}
ol#controls li a {
		float: left;
		height: 20px;
		width: 20px;
		line-height: 20px;
		background: #ffffff;
		color: #555555;
		text-decoration: none;
		text-align: center;
		}
ol#controls a:hover {
		background: #ffca44;
		}
ol#controls li.current a, ol#controls li.current a:hover {
		background: #f26522;
		color: #ffffff;
		}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* ---- 5. _copywriting content  ---- */		

#cwImagesC {
		background: red url(images/copywriting-images-background.jpg) no-repeat;
		height: 397px;
		padding-top: 23px;
		}

#cwText {
		background: url(images/copywriting-text-background.jpg) no-repeat;
		padding-bottom: 20px;
		height: 260px;
		}
		
/* ---- 6. _shared content styles  ---- */		

#wdText h2, #cwText h2 {
		height: 40px;
		position: relative;
		margin: 0 auto;
/*		font: 40px "Century Gothic";*/
font: bold 50px "Helvetica Neue", "Liberation Sans", Arial, sans-serif;
/*		text-transform: uppercase;*/
		color: #ffffff;
		letter-spacing: -1px;
		text-align: center;
		line-height: 40px;
		padding-bottom: 20px;
		}		
h2#wdHeading {
		width: 300px;
		}

.projectC {
		float: left;
		width: 320px;
		border-left: 3px solid #ffffff;
		border-right: 3px solid #ffffff;
		padding: 7px;
		margin-left: 20px;
		}
#cwImagesC .projectC {/* override for copywriting image boxes */
		/*border-top: 3px solid #ffffff;*/
		}
.projectC img {
		margin: -7px 0 0px -7px;
		}

.projectC h3, .projectC p {
		font: bold 13px/20px "Helvetica Neue", "Liberation Sans", Arial, sans-serif;
		}
.projectC h3 {
		margin-top: 4px;
		color: #f26522;
		text-transform: uppercase;
		}
.projectC p {
		color: #777272;
		margin: 0;
		}
		
#wdText p, #cwText p {
		color: #eeeeee;
		font: 13px/20px "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Arial;
		margin-bottom: 20px;
		}
.projectC a {
		color: #777272;
		text-decoration: none;
		}
.projectC a:visited {
		color: #999292;
		}
.projectC a:hover {
		text-decoration: underline;
		}	

#contactInfo a:hover, #wdText a:hover, #cwText a:hover {
		/*border-bottom: 2px solid #f26522;*/
		color: #ffca44;
		}

/* ---- 7. _footer and email form  ---- */		

#contentBottomC {
		background: url(images/content-bottom-background.jpg) repeat-x;
		height: 100px;
		position: relative;
		overflow: hidden;
		}

#contentBottomTrees {
		background: url(images/content-bottom-trees-rv.jpg) 50% 0 no-repeat;
		height: 100px;
		width: 1400px /*1280px*/;
		position: absolute;
		left: 50%;
		margin-left: -700px /*-640px*/;
		}

#footerC {
		border-top: 20px solid #767272;
		background: #212121 url(images/footer-background.gif) 0 100% repeat-x;		
		}

#footer {
		width: 700px;
		margin: 0 auto;
		padding-top: 40px;
		padding-bottom: 40px;
		overflow: hidden;
		position: relative;
		}		

#extraInfo {
		width: 340px;
		float: left;
		margin-right: 20px;
		}

#formContainer {
		width: 340px;
		float: left;
		}


#footer h2 {		
		height: 40px;
		position: relative;
		margin: 0 auto;
/*		font: 40px "Century Gothic";*/
font: bold 50px "Helvetica Neue", "Liberation Sans", Arial, sans-serif;
/*		text-transform: uppercase;*/
		color: #dddddd;
		letter-spacing: -1px;
		text-align: center;
		line-height: 40px;
		padding-bottom: 20px;
		}		
#footer h2 span {
		color: #999999;
		}
		
#footer p {
		color: #dddddd;
		font: 13px/20px "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Arial;
		margin-bottom: 20px;
		}
#footer h3 {
		color: #dddddd;
		font: bold 14px/20px "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Arial;
		}		
#footer ul {		
		font: 13px/20px "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Arial;
		color: #dddddd;
		margin-bottom: 20px;
		}
#footer li {
		}
#footer a {
		color: #cccccc;
		text-decoration: none;
		}
#footer a:visited {
		color: #bbbbbb;
		}
#footer a:hover {
		text-decoration: underline;
		color: #ffca44;
		}		
		
.realname {
		position: absolute;
		right: 1500px;
		}

fieldset {
		border: none;
		}

label {
		color: #dddddd;
		font: 13px/20px "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Arial;
		}
		
.formField {
		background: #dddddd;
		border: none;
		height: 20px;
		font: 14px/20px "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Arial;
		border-left: 10px solid #aaaaaa;
		width: 300px;
		padding-left: 10px;
		margin-bottom: 20px;
		}
textarea.formField {
		height: 80px;
		}
.formField:focus {
		border-left: 10px solid #f26522;
		}
.formField:hover, .formField:focus {
		background: #ffffff;
		}
.submitButton {
		height: 40px;
		background: #dddddd;
		padding: 0 20px;
		font: bold 14px/40px "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Arial;
		border: 0;
		margin-bottom: 20px;
		}
.submitButton:hover {
		background: #f26522;
		cursor: pointer;
		}

#privacyRights {
		clear: both;
		border-top: 20px solid #444444;
		padding-top: 20px;
		}

#formThanksC {
		background: #eb3712;
		height: 80px;
		overflow: hidden;
		}
		
#formThanks {
		width: 740px;
		padding: 0 30px;
		margin: 0 auto;
		background: #eb3712 url(images/thanks-background.jpg) 50% 0 no-repeat;
		height: 80px;
		}
		
#formThanks p {
		margin: 0;
		width: 740px;
		margin: 0 auto;
		text-align: center;
		padding: 20px 0;
		height: 20px;
		line-height: 20px;
		}