/********************************************
*
*       8==8==8==8==8==8==8==8==8==8
*
*               styleSWEET
*           !BY BRENDAN TIMMONS!
*
*       8==8==8==8==8==8==8==8==8==8
*
********************************************/


@import url("reset.css");


/* For IE */
@font-face {
	font-family: 'DinLight';
	src: url('../extras/dinlig-webfont.eot');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'AvantGarde';
	src: url('../extras/avantgarde-bold-webfont.eot');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DinLight';
	src: url('../extras/dinlig-webfont.woff') format('woff'), url('../extras/dinlig-webfont.ttf') format('truetype'), url('../extras/dinlig-webfont.svg#webfont71lN22lZ') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'AvantGarde';
	src: url('../extras/avantgarde-bold-webfont.woff') format('woff'), url('../extras/avantgarde-bold-webfont.ttf') format('truetype'), url('../extras/avantgarde-bold-webfont.svg#webfontY356hDhc') format('svg');
	font-weight: normal;
	font-style: normal;
}




/********************************************
				LAYOUT STYLES
********************************************/



html{background: url(../images/core/bg-pattern.gif) repeat-x #fff;}
body {
  color: #333333;
  background: url(../images/core/splash-inner-bg.gif) center top no-repeat;
	font: 12px/16px Arial, Verdana, Helvetica, sans-serif;
	padding-top: 1px;
}
.container{ 
	margin: 0 auto; 
	width: 1020px; 
}
#header {
	background: #fff;
	height: 73px;  
	margin: 19px auto 20px; 
	padding: 40px 40px 35px;
	position: relative;  
	width: 940px;
}
#content { 
	background: #fff; 
	padding: 0 0 100px 0; 
}
#home-page #content{background: none;}
#footer {
	background: #f8f8f8; 
	color: #7d7d7d;
	height: 150px;
	margin: 0 auto; 
}



/********************************************
				MAIN STYLES
********************************************/



a { color: #7d7d7d; text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3 { padding: 0 0 15px 0; font-weight: normal; line-height: 1; }
h1 { padding: 36px 40px; background: url(../images/core/border-bg.gif) repeat-x bottom; font-size: 34px; letter-spacing: -2.5px !important; }
h2 { font-size: 30px; }
h3 { font-size: 18px; margin-top: 30px; letter-spacing: normal !important; }
h4{margin-bottom: 10px;}
strong { font-weight: bold; }
hr { border: none; background: url(../images/core/border-bg.gif) repeat-x; margin: 10px 0; height: 1px; }
p { margin: 0 0 10px 0; }
ul { margin: 10px 30px; list-style: disc; }

.clear { display: block; clear: both; }
.hidden { display: none; }
.Din { font-family: 'DinLight'; letter-spacing: -1.5px; }
.AvantGarde { font-family: 'AvantGarde'; line-height: 1; letter-spacing: -1.5px; }

.link { color: #7d7d7d; text-decoration: none; padding: 4px; margin: 0 0 0 -4px; }
.link:hover { text-decoration: none; background: #ffff66; color: #333; }

.button { background: url(../images/core/link-bg.gif) no-repeat 97% center; padding: 4px 24px 4px 4px; margin: 0 0 0 -4px; }
.button:hover { background: #ffff66 url(../images/core/link-bg.gif) no-repeat 97% center; color: #333; }
.back-button { background: url(../images/core/link-back-bg.gif) no-repeat 4px center; display: block; padding: 4px 4px 4px 24px; margin: 0 0 0 -4px; width: 73px; }
.back-button:hover { background: #ffff66 url(../images/core/link-back-bg.gif) no-repeat 4px center; color: #333; }
a.active{background: #ffff66; }
.normal{font-weight: normal;}
.content-image{margin-bottom: 30px;}



/********************************************
				LOGO STYLES
********************************************/



#logo{
	display: inline;
	float:  left;
	height: 73px;
	width: 140px;
}



/********************************************
				NAVIGATION STYLES
********************************************/



ul#navigation { 
	font-family: 'DinLight'; 
	letter-spacing: 0; 
	margin: 0; 
	font-size: 14px; 
	list-style-type: none; 
	position: absolute; 
	bottom: 36px; 
	left: 170px; 
}
ul#navigation li { 
	display: inline; 
	float: left; 
	margin: 0 18px; 
	text-align: center; 
}
ul#navigation li a { 
	display: block; 
	margin: 0; 
	text-decoration: none; 
	color:#302d2d; 
	padding: 4px;
}
ul#navigation li a:hover{ background: #ffff66; }



/********************************************
				SEARCH FORM STYLES
********************************************/



#search { 
	bottom: 35px;
	display: block;
	height: 25px; 
	position: absolute;
	right: 41px;  
	width: 32px;
}
#search #keyword { 
	position: absolute; 
	background: #f2f2f2; 
	top: 4px; 
	left: 5px; 
	border: 0; 
	padding: 2px 5px; 
	width: 178px; 
}
#search #show_search { 
	cursor: pointer; 
	display: block; 
	background: url(../images/core/icon-search.gif) no-repeat; 
	text-indent: -99999px; 
	border: 0; 
	position: absolute; 
	top: 5px; 
	right: 5px; 
}
.show { background: #f2f2f2; }



/********************************************
				HOMEPAGE STYLES
********************************************/


#home-page{background: url(../images/core/splash-bg.gif) center top no-repeat;}
#featured-wrap{
  display: block;
  height: 400px;
  margin: 0 auto;
  position: relative;
  width: 1020px;
}
#featured-wrap #controls{
  bottom: 30px;
  height: 18px;
  margin: 0;
  position: absolute;
  right: 30px;
  z-index: 10;
}
#featured-wrap #controls #next, #featured-wrap #controls #prev{
  height: 18px;
  width: 11px;
}
#featured-wrap #controls #next{background: url(../images/core/featured-next.png) no-repeat;}
#featured-wrap #controls #prev{background: url(../images/core/featured-prev.png) no-repeat;}
#featured-wrap #controls #pager{margin: 5px;}
#featured-wrap #controls #pager a{background: url(../images/core/featured-dots.png) -12px 0 no-repeat;}
#featured-wrap #controls #pager a.activeSlide, #featured-wrap #controls #pager a:hover{background-position: 0 0;}
#featured { 
	font-size: 12px; 
	height: 400px; 
	width: 1020px; 
	background: #fff; 
	margin: 0;
	position: relative; 
	overflow: hidden; 
}
#featured li { 
  display: block; 
  left: 0;
  position: absolute;
  top: 0;
}
#featured .white h2,
#featured .white p,
#featured .white a{color: #fff;}
#featured .white a.button{background: url(../images/core/link-bg-white.gif) 97% center no-repeat;}
#featured .white a.button:hover{color: #333; background: #FFFF66 url(../images/core/link-bg.gif) 97% center no-repeat ;}
#featured .text{
  left: 520px;
  position: absolute;
  top: 120px;
}
#featured h2 { 
	font-size: 34px;
	letter-spacing: -2px;
	width: 450px;
}
#featured #intro {
	width: 380px; 
}
#pages { 
	margin: 0; 
	list-style: none; 
}
#pages li { 
	display: block; 
	background: url(../images/core/border-bg.gif) repeat-x bottom; 
	padding: 35px 20px 40px 40px; 
}
#pages li.last { background: none; }
#pages li ul { 
	margin: 0; 
	list-style: none; 
}
#pages li ul li { 
	background: none; 
	display: inline; 
	float: left; 
	width: 220px; 
	padding: 0 20px 0 0; 
}
#pages li ul li .image { 
	border: 1px solid #ccc; 
	width: 218px;
	height: 118px; 
	overflow: hidden; 
	margin: 0 0 5px 0; 
}
#pages li ul li h2, #pages li ul li #from { color: #979696; }
#pages li ul li h3 { 
	font-size: 18px; 
	color: #302d2d; 
}
#pages li ul li .title, #pages li ul li .title a { 
	font-weight: bold; 
	color: #333; 
}
#pages li ul li a span{padding: 1px 3px;}
#pages li ul li:hover a span.title{background: #ffff66;}
#pages #twitter { 
	background: url(../images/core/twitbird.gif) no-repeat 30% center; 
	padding: 0 20px 0 0; 
	margin: 0 0 15px 0; 
}
#pages #blog { 
	background: url(../images/core/rssblog.gif) no-repeat 22% center; 
	padding: 0 20px 0 0; 
	margin: 0 0 15px 0; 
}
#pages #contact { 
	background: url(../images/core/getintouch.gif) no-repeat 53% center; 
	padding: 0 20px 0 0; 
	margin: 0 0 15px 0; 
}
#pages .blog-title { 
	display: block; 
	font-weight: bold; 
}
#pages .gf-title{color: #333;}
#pages .gf-snippet{display: none;}
#pages .by, #pages #phone, #pages #fax { color: #7d7d7d; }
#pages #phone, #pages #fax { font-weight: bold; }
#pages #feeds .gfc-resultsHeader{border-bottom: 0 !important;}
#pages #feeds .gfc-title{color: #979696;}
#twitter-feed .time{display: none;}
#twitter-feed .twittLI{margin: 0 0 10px 0;}
#feed .gfc-resultsHeader{display: none;}



/********************************************
				WORK PAGE STYLES
********************************************/



#clients{margin: 0;}
#clients .client{
	display: inline;
	float: left;
	height: 185px;
	padding: 0 20px 40px 0;
	width: 220px;
}
.client a{display: block;}
.client img{
	border: 1px solid #ccc;
	margin-bottom: 10px;
}
.client a span{padding: 1px 3px;}
.client a:hover span.client-name{background: #ffff66;}
.client-name{ color: #333; font-weight: bold;}



/********************************************
				WORK INNER PAGE STYLES
********************************************/



#work-inner-page h2{margin-top: 25px;}
#work-inner-page h3{margin-top: 0;}
.launch{
	background: url(../images/core/button-launch.gif) no-repeat;
	display: block;
	height: 25px;
	text-indent: -9000px;
	width: 62px;
}
.launch:hover{background-position: 0 -25px;}
.launch:active{background-position: 0 0;}
.fan{
	background: url(../images/core/button-fan.gif) no-repeat;
	display: block;
	height: 25px;
	text-indent: -9000px;
	width: 102px;
}
.fan:hover{background-position: 0 -25px;}
.fan:active{background-position: 0 0;}
.signup{
	background: url(../images/core/button-signup.gif) no-repeat;
	display: block;
	height: 25px;
	text-indent: -9000px;
	width: 102px;
}
.signup:hover{background-position: 0 -25px;}
.signup:active{background-position: 0 0;}
.back-button:last-child{margin-top:30px;}
#work-inner-page #secondary{
	float: right;
	padding-top: 52px;
	padding-right: 40px;
	width: 460px;
}



/********************************************
				CYCLE CAROUSEL STYLES
********************************************/



#controls{
	display: block;
	height: 7px;
	margin: 10px auto 20px;
	width: 100px;
}
#controls #prev, #controls #next{
	display: inline;
	height: 7px;
	width: 15px;
	text-indent: -9000px;
}
#controls #prev{
	background: url(../images/core/link-back-bg.gif) no-repeat; 
	float: left;
}
#controls #next{
	background: url(../images/core/link-bg.gif) no-repeat; 
	float: left;
}
#controls #pager{
	display: inline;
	float: left;
	height: 7px;
	margin: 0 5px;
}
#controls #pager a{
	background: url(../images/core/pager-dots.gif) -15px 0 no-repeat;
	display: inline;
	float: left;
	margin: 0 4px;
	text-indent: -9000px;
	width: 7px;
}
#controls #pager a:hover, 
#controls #pager a.activeSlide{background: url(../images/core/pager-dots.gif) 0 0 no-repeat;}
#cycle-carousel{display: block;}



/********************************************
				WHO WE ARE STYLES
********************************************/


.heading{display: block; padding-left: 75px;}
.heading h2, .heading h3{margin: 0; padding: 0 0 10px 0;}
.heading#creativity{background: url(../images/core/heading-creativity.gif) no-repeat;}
.heading#technology{background: url(../images/core/heading-technology.gif) no-repeat; margin-top: 50px;}
.heading#service{background: url(../images/core/heading-service.gif) no-repeat; margin-top: 50px;}



/********************************************
				PRIMARY STYLES
********************************************/



#primary { 
	width: 720px; 
	float: left; 
	padding: 35px 0 0 20px; 
}
#primary.small-column{width: 455px;}
#work-inner-page #primary.small-column{
	margin-left: 30px;
	width: 370px; 
}
#primary .foreword{
	font-size: 30px;
	line-height: 1.1;
	margin-bottom: 30px;
}



/********************************************
				SECONDARY STYLES
********************************************/



#secondary { 
	width: 220px; 
	float: left; 
	padding: 35px 0 0 40px; 
}
#secondary h2{color: #979696;}



/********************************************
				SECONDARY NAV STYLES
********************************************/



#secondary-nav{font-size: 14px;}
#secondary-nav li a{
	color: #444; 
	padding: 1px 4px; 
	letter-spacing: -0.5px !important; 
}
#secondary-nav li a:hover{background: #ffff66;}
#secondary ul{
	padding: 0;
	margin: 0 0 50px;
}
#secondary ul li{
	list-style: none; 
	margin: 10px 0;
}



/********************************************
				TERTIARY STYLES
********************************************/



#tertiary{
	color: #7d7d7d;
	display: inline;
	float: right;
	padding: 30px 40px 0 0;
	width: 220px;
}
#tertiary ul{margin: 15px 0;}
#tertiary ul li{list-style: none;}



/********************************************
				FORM STYLES
********************************************/



.form ol li{margin: 0 0 20px 0;}
.form label{
	display: block; 
	margin-bottom: 10px;
}
.form input[type="text"]{
	border: 1px solid #c8c8c8;
	display: block;
	height: 15px;
	padding: 4px;
	width: 290px;
}
.form textarea{
	border: 1px solid #c8c8c8;
	display: block;
	font: 11px Arial, Verdana, Helvetica, sans-serif;
	height: 155px;
	padding: 4px;
	width: 290px;
}
.form input[type="text"]:focus,
.form textarea:focus{
	background: #fdfdfd; 
	border: 1px solid #797979;
}
.form input[type="submit"]{
	background: url(../images/core/button-send.gif) no-repeat;
	border: 0;
	display: block;
	height: 25px;
	text-indent: -9000px;
	line-height: 0;
	width: 48px;
}
.form input[type="submit"]:hover{
	background-position: 0 -25px;
	cursor: pointer;
}
.form input[type="submit"]:active{background-position: 0 0;}
.form label.error{
	background: #ffff66;
	display: inline-block;
	margin-top: 3px; 
	padding: 1px 4px; 
}



/********************************************
				FOOTER STYLES
********************************************/



#footer .container { padding: 40px 30px; width: 960px; }
#footer p { margin: 0; }
#footer #small-logo { display: inline; float: left; }
#footer #footer-links { float: right; }
	#footer #footer-links a { color: #333; }
#footer #share { margin: 0; list-style-type: none; }
	#footer #share li { display: inline; padding: 0 10px 0 0; float: left; }
  #footer #share li a { display: block; }