/* STRUCTURAL */

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 14px;
	line-height: 1.4em;
	color: #444;
	background: #FFF top left repeat-x url(../images/bg.gif);
}

.wrapper {
	clear: both;
}

#footer-wrapper {
	width: 100%;
	height: 100px;
	background: #CCFF00;
}

#footer .call-out h3 {
	margin-top: 20px;
}

#copyright {
	float: right;
	margin-top: 50px;
}

.container {
	width: 1050px;
	margin: 0 auto;
	text-align: left;
}

#page {
	font-size: 96%;
}

.main {
	float: left;
	width: 630px;
}

.sub {
	float: right;
	width: 350px;
}

.seo-results {
	position: relative;
	top: -155px;
	border-bottom: 2px dashed #CCFF00;
	padding-top: 20px;
}

.seo-results.last {
	border-bottom: none;
}

.seo-results .sub {
	float: left;
	margin: 20px 0;
}

#logo {
	margin: 20px 0 30px 0;
	width: 420px;
	height: 90px;
	background: no-repeat url(../images/clockworkdesignlogo.gif);
	text-indent: -9999px;
}

#page .main, #design-services {
	position: relative;
	top: -125px;
}

#home #page .main {
	top: 20px;
	margin-bottom: 80px;
}

#home #page #nav {
	top: -30px;
	left: 194px;
}

#home #page .sub{
	margin-top: 18em;
}

#services-page #page .sub {
	position: relative;
	top: -100px;	
}

#home h2 {
	width: 100%;
	clear: both;
}

/* NAV */

.hmenu {
	float: left;
	list-style: none;
	color: #000;
	font-weight: bold;
}

.hmenu li {
	float: left;
	width: 145px;
}

#nav-intro {
	width: 185px;
	text-align: left;
}

.hmenu li.last {
	width: 125px;
}

.hmenu a {
	color: #000;
	border-bottom: none;
}

.hmenu a:hover, .hmenu .current a:hover, #subnav a:hover {
	color: #666;
	border-bottom: none;
}

.hmenu .current, .hmenu .current a {
	color: #333;
}

#nav {
	position: relative;
	top: -60px;
}

#subnav {
	display: none;
	color: #000;
}

#subnav a {
	color: #000;
}

#nav li {
	font-size: 140%;
	margin: 20px 0;
	border-right: 2px solid #CCFF00;
	text-align: center;
}

#subnav li {
	font-size: 70%;
}

#nav li.last, #subnav li {
	border-right: none;
}

/* FONT STYLING */

h2 {
	letter-spacing: -6px;
}

h3, #nav{
	letter-spacing: -1px;
}

h2 {
	font-size: 500%;
	color: #333;
	margin: 50px 0 0.25em 0;
}

h3 {
	font-size: 140%;
	padding: #222;
	margin: 2em 0 0.75em 0;
}

a {
	text-decoration: none;
	color: #333;
}

a, #accordion h3 {
	border-bottom: 1px dashed #CCFF00;
}

a:hover, #accordion h3:hover {
	color: #CCC;
	border-bottom: 1px dashed #CCC;
}

#accordion h3 {
	width: 100%;
	cursor: pointer;
}

p {
	margin-bottom: 0.75em;
}

#accordion {
	margin: 2em 0;
	padding: 0 0px 2em 0px;
	border: 0px solid #EEE;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

ul.callout {
	padding: 0 18px 1em 18px;
	font-size: 150%;
letter-spacing: -1px;
}

.seo-results {
	float: left;
	clear: both;
	width: 1050px;
}

/* CALL-OUTS */

.call-out {
	float: left;
	width: 350px;
	margin: 1em 0 1.5em 0;
}

.call-out h3, .call-out p, .call-out ul {
	float: left;
	width: 280px;
	margin-top: 0;
}

.call-out h3, .call-out ul {
	margin-bottom: 4px;
}

.call-out p {
	margin-bottom: 0;
}

.seo-results .call-out p {
	width: 260px;
}

.portfolio .call-out, .home-bar .call-out {
	width: 300px;
}

.call-out.first {
	margin-right: 30px;
}

.home-bar .call-out {
	padding: 1em 0 2em 0;
}

.call-out.full {
	width: 370px;
	padding: 0 130px 1em 130px;
}

.home-bar .call-out h3, .home-bar .call-out p {
	width: 230px;
}

blockquote {
	font-size: 120%;
	color: #999;
	border-left: 4px solid #CCFF00;
	padding-left: 20px;
	margin: 1em 0 0.5em 0;
	clear: both;
	float: left;
}

cite {
	font-size: 80%;
}

ul.client-list {
	margin: 0.5em 0 1em 1em;
	line-height: 1.5em;
}

ul.links-list {
	margin-bottom: 60px;
}

ul.links-list li {
	margin-bottom: 1.5em;
}

#design-services {
	float: left;
	width: 100%;
	clear: both;
}

#design-services .call-out {
	width: 310px;
}

#design-services .call-out.first {
	margin-right: 60px;
}

#design-services .call-out h3, #design-services .call-out p {
	width: 220px;
}

/* ICONS */

a.icon, a.seo-link, a.portfolio-link {
	float: left;
	overflow: hidden;
	text-indent: -9999px;
	border-bottom: none;
}

a.icon:hover, a.seo-link:hover, a.portfolio-link:hover {
	border-bottom: none;
}

a.portfolio-link {
	height: 150px;
	width: 300px;
	background: url(../images/portfolio-sprite.png) no-repeat;
}

a.icon {
	height: 60px;
	width: 60px;
	margin: 2px 10px 0 0;
	background: url(../images/icon-sprite.gif) no-repeat;
}

a.seo-link {
	height: 70px;
	width: 200px;
	background: url(../images/seo-sprite.gif) no-repeat;
}

a#digital-print-icon {
	background-position: 0 0;
}

a#digital-print-icon:hover {
	background-position: 0 -60px;
}

a#web-design-icon {
	background-position: -60px 0;
}

a#web-design-icon:hover {
	background-position: -60px -60px;
}

a#illustration-icon {
	background-position: -120px 0;
}

a#illustration-icon:hover {
	background-position: -120px -60px;
}

a#photography-icon {
	background-position: 0 -120px;
}

a#photography-icon:hover {
	background-position: 0 -180px;
}

a#copywriting-icon {
	background-position: -60px -120px;
}

a#copywriting-icon:hover {
	background-position: -60px -180px;
}

a#contact-icon {
	background-position: -120px -120px;
}

a#contact-icon:hover {
	background-position: -120px -180px;
}

a#graphic-design-icon {
	background-position: -180px 0;
}

a#graphic-design-icon:hover {
	background-position: -180px -60px;
}

a#portfolio-icon {
	background-position: -180px -120px;
}

a#portfolio-icon:hover {
	background-position: -180px -180px;
}

a#links-icon {
	background-position: -240px 0;
}

a#links-icon:hover {
	background-position: -240px -60px;
}

a.seo-link.google, a.seo-link.yahoo, a.seo-link.ms-live {
	margin-right: 150px;
}

a.seo-link.google {
	background-position: 0 0;
}

a.seo-link.google:hover {
	background-position: 0 -70px;
}

a.seo-link.yahoo {
	background-position: -200px 0;
}

a.seo-link.yahoo:hover {
	background-position: -200px -70px;
}

a.seo-link.ms-live {
	background-position: -400px 0;
}

a.seo-link.ms-live:hover {
	background-position: -400px -70px;
}

a#corporate-branding {
	background-position: 0 0;
}

a#corporate-branding:hover {
	background-position: 0 -150px;
}

a#brochures {
	background-position: -300px 0;
}

a#brochures:hover {
	background-position: -300px -150px;
}

a#illustrations{
	background-position: -600px 0;
}

a#illustrations:hover {
	background-position: -600px -150px;
}

a#website-design {
	background-position: -900px 0;
}

a#website-design:hover {
	background-position: -900px -150px;
}