/*-----------------------------------------------------------------------------
Sugar Rush Creative (Porfolio 2010)

version:   1.0
author:    Clark Caughey
email:     clark.c@sugarrushcreative.com
website:   http://www.sugarrushbelfast.com/
-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/


* {
	margin: 0;
	padding: 0;
}


.clear {
	clear:both;
}

img {
	border: 0;
}

a {
   outline: none;
}

#container {
	width: 940px;
	margin: 0 auto 40px auto;
	padding: 0 20px;
}

ul {
	list-style: none;
}


/* =Typography
-----------------------------------------------------------------------------*/

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 150%;
	background: url(images/bg.jpg) top center no-repeat #FFFFFF;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	font-style: italic;
}

h1 {
	font-size: 30px;
	color: #333;
	margin: 30px 0;
}

h2 {
	font-size: 22px;
	color: #333;
	margin: 40px 0 30px 0;
}

p {
	margin: 0 0 20px 0;
}

.pinkHeader {
	font-size: 24px;
	font-weight: normal;
	color: #FFFFFF;
	background: #BE006A;
	width: 208px;
	padding: 7px 10px;
}

#quoteDiv {
	width: 160px;
	float: right;
}


/* =Headings
-----------------------------------------------------------------------------*/

#introduction {
	display: none;
	margin: 0;
	font-size: 1px;
}


/* =Links
-----------------------------------------------------------------------------*/

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

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

h1 a:active,
h2 a:active,
h3 a:active,
h4 a:active,
p a:active {
	position: relative;
	top: 2px;
}


/* =Branding
-----------------------------------------------------------------------------*/

#logo {
	width: 300px;
	height: 141px;
	background: url(images/logo.gif) top left no-repeat;
	float: left;
	margin: 0;
}

#logo h2{
	text-indent: -10000px;
}


/* =Main Nav
-----------------------------------------------------------------------------*/

#nav {
	width: 620px;
	float: right;
	margin: 0;
}

#nav ul {
	list-style: none;
	margin: 95px 0 0 0;
}

#nav li {
	float: left;
	width: 131px;
	border-left: 1px dotted #999999;
	padding: 10px 0px 10px 20px;
	font-size: 10px;
	color: #333333;
	text-transform: uppercase;
	font-weight: bold;
}

#nav li strong{
	display: block;
	font-family: "Times New Roman", Times, serif;
	font-size: 22px;
	font-style: italic;
	text-transform: none;
	padding: 0 0 3px 0;
}

#nav li a {
	color: #333333;
	text-decoration: none;
}

#nav li a:hover {
	color: #BE006A;
	text-decoration: none;
}

#nav li a:active{
	position: relative;
	top: 2px;
}



/* =Sub Nav
-----------------------------------------------------------------------------*/




/* =Main Content
-----------------------------------------------------------------------------*/

#showreel {
	width: 929px;
	height: 292px;
	background: url(images/showreel-bg.png) top left no-repeat;
	padding: 12px 0 0 11px;
	margin: 40px 0 0 0;
}

#showreel h1 {
	text-indent: -10000px;
}

#latest li {
	width: 300px;
	padding: 174px 0 0 10px;
	float: left;
	margin: 0 3px 0 0;
	
}

#latestInfo{
	
}

#latest strong{
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 20px;
	color: #FFF;
	padding: 5px 10px;
	font-weight: normal;
	background: #333;
}

#latest em{
	font-size: 10px;
	text-transform: uppercase;
	color: #BE006A;
	padding: 5px 10px;
	font-weight: bold;
	font-style: normal;
	background: #333;
}

#latest a {
	display: block;
	height: 100%;
	width: 100%;
}


/* =Secondary Content
-----------------------------------------------------------------------------*/

#contactHome {
	float: right;
	width: 280px;
	margin: -20px 0;
}

#contactHome #large{
	font-size: 18px;
	font-weight: bold;
	line-height: 150%;
}

#blogPosts {
	width: 620px;
	margin: -20px 0 20px 0;
	border-bottom: 1px solid #CCCCCC;
	float: left;
}

#blogPosts a{
	font-size: 11px;
	font-weight: bold;
}

#blogPosts h3{
	padding: 0 0 5px 0;
	
}

#blogPosts h3 a{
	font-size: 20px;
	color: #BE006A;
	text-decoration: none;
}

#blogPosts h3 a:hover{
	font-size: 20px;
	color: #9E0059;
	text-decoration: none;
}

.post {
	border-top: 1px solid #CCCCCC;
	
}
	
.date {
	width: 130px;
	margin: 20px 30px 0 0;
	float: left;
	text-align: right;
	font-size: 11px;
	color: #666666;
}

.date p{
	padding: 0 0 5px 0;
	margin: 0;
}

.date p a{
	font-size: 11px;
	color: F03204;
	text-decoration: none;
}

.date p a:hover{
	font-size: 11px;
	color: #D20F01;
}

.entry {
	width: 460px;
	float: right;
	display: block;
	margin: 20px 0 0 0;
}

.entry p a{
	color: #F03204;
	text-decoration: none;
}

.entry p a:hover{
	color: #D20F01;
	text-decoration: none;
}


/* =About Us
-----------------------------------------------------------------------------*/

#about, #aboutQuote, #aboutImage {
	width: 300px;
	float: left;
}

#about, #aboutQuote {
	margin: 0 20px 0 0;
}

.quote {
	background-color: #BE006A;
	font-size: 22px;
	line-height: 29px;
	color: #FFF;
	font-family:"Times New Roman", Times, serif;
	padding: 5px;
	margin: 0 0 10px 0;
}

.quoter {
	background-color: #333;
	font-size: 11px;
	line-height: 16px;
	color: #FFF;
	padding: 5px;
}

.services {
	padding: 20px 0 0 0;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	margin: 10px 0;
}

.services a{
	display: block;
	margin: 5px 0 0 0;
	font-size: 11px;
	font-weight: bold;
}

.services h2{
	margin: 0 0 20px 0;
}

.services h3{
	color: #BE006A;
	font-size: 16px;
	margin: 0 0 10px 0;
}

.services li {
	width: 140px;
	float: left;
	padding: 0 16px 0 0;
}

.last{
	padding: 0;
}

#aboutWhy {
	margin: -10px 0 30px 0;
}


/* =Blog
-----------------------------------------------------------------------------*/

#blog {
	width: 540px;
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	padding: 30px 40px 20px 40px;
	margin: 40px 0 0 0;
float:right;
}

#blog h1 {
	font-size: 28px;
	color: #C80853;
	line-height: 120%;
	margin: 0;
	padding: 0;
}

#blog h4 {
	font-size: 11px;
	color: #333333;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
}

#blog p {
	margin: 15px 0;
}

#blogSidebar {
	width: 280px;
	float: left;
	margin: 40px 0 0 0;
}

#blogArchive {
	width: 250px;
	background: url(images/sidebar-arrow.png) top left no-repeat;
	border-bottom: 1px solid #EEEEEE;
	padding: 20px 30px 20px 20px;
	margin: 20px 0 0 0;
}

#blogArchive h2{
	margin: 0 0 20px 0;
}

#blogArchive h3{
	margin: 20px 0 0 0;
}

#blogArchive a{
	display: block;
	background: url(images/post-dot.png) top left no-repeat;
	padding: 0 0 0 15px;
	margin: 5px 0;
}

#blogArchive a:active {
	position: relative;
	top: 2px;
}

#blogArchive h3 a{
	display: block;
	background: none;
	padding: 0 0 0 0;
	margin: 5px 0;
	color: #333;
	text-decoration: none;
}

#blogArchive h3 a:hover{
	text-decoration: underline;
}

#authbio {
	width: 250px;
	background: url(images/sidebar-arrow.png) top left no-repeat;
	border-bottom: 1px solid #EEEEEE;
	padding: 20px 30px 20px 20px;
}

#authbio img{
	float: left;
	margin: 0 20px 20px 0;
	width: 68px;
	height: 68px;
	padding: 4px;
	border: 1px solid #EEEEEE;
}

#authbio h2{
	margin: 3px 0;
}

#authbio h3{
	margin: 0;
	font-size: 11px;
	text-transform: uppercase;
	color: #C80853;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
}

#authbio p{
	margin: 0;
	font-size: 11px;
	line-height: 150%;
	color: #666666;
}

#commentDiv {
	width: 620px;
	float: right;
}

.comments {
	margin:0;
	padding:0;
	}

#commentDiv li {
	margin-bottom:14px;
	padding: 20px 20px 30px 20px;
	list-style: none;
	}
	
.odd{
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	}
	
.even{
	background: #EEEEEE;
	border: 1px solid  #CCCCCC;
	}
	
#commentDiv li img{
	padding: 5px 15px 5px 5px;
	background: url(images/avatar-bg.png) top left no-repeat;
	}
	
.comment-text p{
	margin: 10px 0 0 0;
	width: 495px;
	float: right;
	}

.commentAuthor {
	font-size: 20px;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	font-style: italic;
	color:#333;
	margin: 0 10px 0 0;
}

.commentAuthor a{
	color:#333;
}

.commentAuthor a:hover{
	text-decoration: underline;
}

.commentDate {
	font-size: 11px;
	font-weight: bold;
	text-transform:uppercase;
	color:#333333;
}



/* =Client Section
-----------------------------------------------------------------------------*/

#clientList {
	width: 980px;
	margin: 20px 0 0 -20px;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
}

#clientList ul {
	padding: 10px 0 0 20px;
	margin: 20px 0;
}

#clientList li {
	width: 300px;
	float: left;
	margin: 0 20px 0 0;
}

#clientList h2{
	margin: 0 0 20px 0;
}

#clientList li p{
	font-size: 11px;
	margin: -5px 0 10px 0;
}

#clientOverview {
	width: 300px;
	float: left;
	margin: 10px 0 0 0;
}

#clientShowcase {
	width: 620px;
	float: right;
}

ul.thumb li {
	float: left;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 140px;
	height: 99px;
	margin: 0 20px 10px 0px;
	background: #FFFFFF;
}

ul.thumb li.last{
	margin: 0 0 20px 0;
}

ul.thumb li a{
	color: #CCCCCC;
	text-decoration: none;
}

ul.thumb li a:hover{
	color: #CCCCCC;
	text-decoration: none;
}

ul.thumb li p{
	font-family: "Times New Roman", Times, serif;
	font-size: 10px;
	line-height: 10px;
	font-weight: bold;
	font-style: italic;
	overflow: hidden;
}

ul.thumb li img {
	width: 140px; height: 99px; /* Set the small thumbnail size */
	-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
	background: #f0f0f0;
	position: absolute;
	left: 0; top: 0;
}

ul.thumb li img.hover {
	border: none;
}

.case {
	display: none;
}

ul.featured li {
	float: left;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 220px;
	height: 155px;
	margin: 0 20px 20px 0px;
}

ul.featured li.last{
	margin: 0 0 20px 0;
}

ul.featured li a{
	color: #666;
	text-decoration: none;
}

ul.featured li a:hover{
	color: #666;
	text-decoration: none;
}

ul.featured li p{
	font-family: "Times New Roman", Times, serif;
	font-size: 50px;
	line-height: 32px;
	font-weight: bold;
	font-style: italic;
	overflow: hidden;
}

ul.featured li img {
	width: 220px; height: 155px; /* Set the small featurednail size */
	-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
	background: #f0f0f0;
	position: absolute;
	left: 0; top: 0;
}
ul.featured li img.hover {
	border: none;
}

/* =Client Slider
-----------------------------------------------------------------------------*/

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
width: 620px; /*width of featured content slider*/
height: 412px;
}

.sliderwrapper .contentdiv{
	visibility: hidden; /*leave as is*/
	position: absolute; /*leave as is*/
	left: 0;  /*leave as is*/
	top: 0;  /*leave as is*/
	background: white;
	width: 620px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
	height: 100%;
	filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.pagination{
	width: 600px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
	text-align: right;
	background-color: #EEEEEE;
	padding: 5px 10px 7px 10px;
	text-indent: -100000px;
}

.pagination a{
	background: url(http://www.sugarrushbelfast.com/images/dot-inactive.jpg) center no-repeat;
	font-size: 1px;
	padding: 7px 10px 6px 10px;
	color: #CCCCCC;
}

.pagination a:hover {
	opacity:0.7;
	filter:alpha(opacity=70);
}

.pagination a.selected{
	background: url(http://www.sugarrushbelfast.com/images/dot-active.jpg) center no-repeat;
	color: #666666;
}

.pagination .next{
	background: url(http://www.sugarrushbelfast.com/images/arrow-right.jpg) center right no-repeat;
	padding: 7px 7px 6px 17px;
	color: #EEEEEE;
}

.pagination .prev{
	background: url(http://www.sugarrushbelfast.com/images/arrow-left.jpg) center left no-repeat;
	padding: 7px 17px 6px 7px;
	color: #EEEEEE;
}


/* =Footer
-----------------------------------------------------------------------------*/



/* =Forms
-----------------------------------------------------------------------------*/

fieldset {
	margin-top: 30px;
	padding: 0;
	border: none;
	color: #666;
	}

input[type="text"]{
	width: 280px;
	padding: 5px 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	background: #FFFFFF;
	border: 1px solid #E1E1E1;
	text-shadow:0px -1px 0px #000, 0px 1px 0px #fff;
	}

input[type="text"]:focus{
	background: #F6F6F6;
	}

input[type="submit"]{
	margin: 0;
	padding: 5px 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	background: #FFFFFF;
	border: 1px solid #E1E1E1;
	font-weight: bold;
	}

input[type="submit"]:hover{
	background: #BE006A;
	color: #FFF;
	}

input[type="submit"]:focus{
	background: #BE006A;
	color: #FFF;
	}

textarea {
	width: 280px;
	padding: 5px 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	background: #FFFFFF;
	border: 1px solid #E1E1E1;
	}

textarea:focus{
	background: #F6F6F6;
}


option {
	margin: 5px 5px;
	border: none;
	background: #FFFFFF;
	}

option:focus {
	margin: 5px 5px;
	border: none;
	background: #FFFFFF;
}

label {
	font-size: 11px;
	background: #E1E1E1;
	padding: 2px 5px;
	}
	
.wpcf7-response-output {
	position: absolute;
	top: 230px;
	left:50%;
	background: #000;
	width: 460px;
	margin-left: -250px;
	background: #fff;
	border: 5px solid #e5e5e5;
	padding: 20px;
	font-weight: bold;
}


#contactInfo {
	float: left;
	width: 300px;
}

#contactMap {
	float: right;
	width: 620px;
}



/* =Tables
-----------------------------------------------------------------------------*/

table { 
  border-spacing: 0;
	border-collapse: collapse;
}

td {
  text-align: left;
	font-weight: normal;
}



/* =Misc 1
-----------------------------------------------------------------------------*/

#pageTurn {
	position: absolute;
	top: 0;
	left: 0;
	width: 180px;
	height: 160px;
	background: url(images/page-turn.gif) top left no-repeat;
	text-indent: -10000px;
}


		#comments-form {width: 600px;}
		.formFloat { width: 190px; margin: 0 20px 0 0; float: left; }
		.formFloatLast { width: 180px; float: right; }
		
button[type="submit"]{
	margin: 0;
	padding: 5px 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	background: #FFFFFF;
	border: 1px solid #E1E1E1;
	font-weight: bold;
	}

button[type="submit"]:hover{
	background: #BE006A;
	color: #FFF;
	}

button[type="submit"]:focus{
	background: #BE006A;
	color: #FFF;
	}

#comments-form input {
	width: 180px;
	margin: 0 0 20px 0;
}

#comments-form textarea {
	width: 600px;
	margin: 0 0 20px 0;
}

.footer {
	margin: 20px 0 0 0;
	color: #666;
	font-size: 11px;
}

.footerLinks a {
	font-size: 11px;
	text-decoration: none;
}

.brands {
	border-top: 1px solid #CCCCCC;
	padding: 9px 0 12px 0;
}

.leftFloat {
	float: left; margin: 0 20px 0 0;
}


.boxgrid{ 
width: 220px; 
height: 155px;
margin: 0 20px 10px 0;
float:left; 
background: #e5e5e5;
overflow: hidden; 
position: relative; 
}

.boxgrid.last{ 
margin: 0 0 10px 0;
}

.boxgrid img{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	border: 0; 
}

.boxgrid h2{ 
	text-indent: -10000px;
}
 
 
.boxgrid h3{ 
	color: #999;
	font-size: 50px;
	line-height: 70%;
	overflow: hidden;
}


 #pageNav {
	width: 600px;
	float: right;
	text-align: right;
	padding: 0 10px;
}

 #pageNav a{
	 font-size: 40px;
	 font-family: "Times New Roman", Times, serif;
	 font-weight: bold;
 }
 
.fbLikeContainer {
	 padding: 15px 0 0 0;
 }