/*
=========================
colours:   

#ff5200 bold orange
#777	title light grey		
#272727	off black
#959595	body light grey
=========================		
*/

/* debug lines 

.testemonial, #nav {
	border: 1px solid #333;
}
*/

/* reset tastic */
body{color:#333;background:#fff;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}


html {
	overflow-y: scroll;
}
body {
	text-align:center;
	font-family: "Lucida Grande", "Lucida Sans Unicode","Helvetiva Neue", Helvetica, Arial, sans-serif;
	background: url(/i/bg/1.png) no-repeat center -100px;
}
#wrapper {
	width: 960px;
	text-align: left;
	margin: 0 auto;
	min-height: 800px;
	position: relative
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Rockwell Light", Rockwell;
}
h2	{
	font-size: 30px;
	color: #7f7f7f;
	margin: 14px 0;
	letter-spacing: -1px;
}
h2 span	{
	color: #272727;
}
p	{
	color:#959595;
	font-size: 11px;
	line-height: 18px;
}
/* basic links */
a:link, a:visited {
	color: #ff5200;
} 
a:hover {
	color: #272727;
} 
a:active {
	color: #ff5200;
} 
/* helpers */
.fr {
	float:right;	
}
.fl {
	float:left;	
}
.cl {
	clear:left;	
}
.cr {
	clear:right;	
}
.cb {
	clear:both;
}
#content {
	clear:both;
}

h1 {
	width: 700px;
	height: 300px;
	float:left;
}

/* L O G 0 */
#wrapper h1#logo a {
	background: url(/i/hbStudiosLogo_230pxWide_lightGrey.jpg) top left no-repeat;
	width: 250px;
	height: 64px;
	text-indent: -9999px;
	margin: 22px 0 0 0;
	float:left;
}
/* N A V I G A T I O N */
#nav {
	font-family: "Rockwell Light", Rockwell;
	color: #272727;
	width: 240px;
	float:right;
	position: relative;
	margin : 20px 0 0 0;
}
#nav li {width: 80px;}
#nav a {
	display:block;
	width: 80px;
	text-decoration: none;
	color: #333;
	font-size: 16px;
	line-height: 24px;
	height: 24px;
	text-indent: -9999px;
	background-repeat: no-repeat;
	outline:0;
}
#nav a:hover {
	color: #ff5200;
}
#nhome a {
	background: url(/i/nav.png) 0 0;
}
#nabout a {
	background: url(/i/nav.png) 0 -24px no-repeat;
}
#nportfolio a {
	background: url(/i/nav.png) 0 -48px;
}
#ncontact a {
	background: url(/i/nav.png) 0 -72px;
}
#nnews a {
	background: url(/i/nav.png) 0 -96px;
}
#nlinks a {
	background: url(/i/nav.png) 0 -120px;
}
#nhome a:hover {
	background: url(/i/nav.png) -80px 0;
}
#nabout a:hover {
	background: url(/i/nav.png) -80px -24px;
}
#nportfolio a:hover {
	background: url(/i/nav.png) -80px -48px;
}
#ncontact a:hover {
	background: url(/i/nav.png) -80px -72px;
}
#nnews a:hover {
	background: url(/i/nav.png) -80px -96px;
}
#nlinks a:hover {
	background: url(/i/nav.png) -80px -120px;	
}
/* S U B  N A V */
#nav .sub {
	display:none;
	width: 100px;
	position: absolute;
	/* top: 0; */
	left: 80px;
}
#nav .port {
	top: 48px;
}
#nav .about {
	top: 24px;
}

#nav .sub a {width: 100px;}
#nav li:hover ul, #nav li.sfhover ul {
	display:block;
}

/* portfolio sub nav */
#nanim a {
	background: url(/i/nav.png) -480px 0px;
}
#nweb a {
	background: url(/i/nav.png) -480px -24px;
}
#nident a {
	background: url(/i/nav.png) -480px -48px;
}
#nanim a:hover {
	background: url(/i/nav.png) -640px 0px;
}
#nweb a:hover {
	background: url(/i/nav.png) -640px -24px;
}
#nident a:hover {
	background: url(/i/nav.png) -640px -48px;
}
/* about sub nav */
#nhistory a {
	background: url(/i/nav.png) -160px -24px;
}
#nenvironment a{
	background: url(/i/nav.png) -160px -48px;
}
#ncharity a{
	background: url(/i/nav.png) -160px -72px;
}
#nclients a {
	background: url(/i/nav.png) -160px -96px;
}

#nhistory a:hover {
	background: url(/i/nav.png) -320px -24px;
}
#nenvironment a:hover{
	background: url(/i/nav.png) -320px -48px;
}
#ncharity a:hover{
	background: url(/i/nav.png) -320px -72px;
}
#nclients a:hover {
	background: url(/i/nav.png) -320px -96px;
}

/* C O L S */
.one, .three, .six, .nine {
 	width: 240px ;
	float:left;
}

.aside {
 	width: 220px ;
	float:left;
	margin: 102px 0 0 10px;
}

/* T E S T E M O N I A L S */
.testemonial 	{
	width: 720px;
	padding-right: 20px;
	margin:-10px 0 0 -40px;
	position: relative;
	top: -30px;
	clear:both;
	background: transparent url(../i/l_quote.png) no-repeat 2px 7px;
}

.testemonial blockquote p{
	font-size: 36px;
	color:#d4d5d6;
	font-family: Rockwell;
	font-weight: bold;
	line-height: 30px;
	letter-spacing: -3px;
	/*background: url(/i/50alpha.png) repeat;*/
	
}

.testemonial p {
	font-size: 20px;
	color:#959595;
	font-family: "Rockwell Light";
	font-weight: normal;
	line-height: 30px;
	letter-spacing: -1px;
	padding-left: 40px;
}
/* I N T R O */
.intro 	{
	width: 700px;
	clear:both;
}
.intro h2 {
	font-size: 36px;
	color:#d4d5d6;
	font-family: Rockwell;
	font-weight: bold;
	line-height: 30px;
	letter-spacing: -3px;
}
.intro p.second {
	font-size: 20px;
	color:#959595;
	font-family: "Rockwell Light";
	font-weight: normal;
	line-height: 30px;
	letter-spacing: -1px;
}




/* replacements */
.email a,
.get_in_touch,
.animation_and_design,
.t_from_portfolio,
.t_recently,
.t_web,
.t_anim,
.t_ident,
.t_about,
.t_who,
.t_when,
.t_where,
.t_what,
.t_can,
.t_contact,
.t_news_from,
.t_links,
.t_tel,
.t_fax,
.t_email,
.t_StuAddress,
.t_RegOffice,
.t_mailing,
.t_rfp,
.t_history,
.t_green,
.t_charity,
.t_clients,
.phone {
	text-indent: -1000em;
	background-repeat:no-repeat;
}
.fax {
	text-indent: -1000em;
	background-repeat:no-repeat;
}

h2.animation_and_design {
	height: 99px;
	background-image: url(../i/animation_design.png);
	width: 240px;
	float:right;
	clear:right;
	margin:0 0 12px 0;
}
.email a {
	background-image: url(../i/email.png);
	height: 38px;
	width: 240px;
	display:block;
}
.email a:hover {
	background-position: 0px -36px;
}
.get_in_touch {
	background-image: url(../i/get_in_touch.png);	
	height: 66px;
	width: 240px;
}
.t_from_portfolio {
	background-image: url(../i/t_portfolio.png);	
	height: 34px;
}
.t_recently {
	background-image: url(../i/t_recently.png);	
	height: 34px;
}
.t_about {
	background-image: url(../i/t_about.png);	
	height: 34px;
}
.t_who {
	background-image: url(../i/t_who.png);	
	height: 34px;
}
.t_when {
	background-image: url(../i/t_when.png);	
	height: 68px;
}
.t_where {
	background-image: url(../i/t_where.png);	
	height: 68px;
}
.t_what {
	background-image: url(../i/t_what.png);	
	height: 68px;
}
.t_can {
	background-image: url(../i/t_can.png);	
	height: 68px;
}
.t_contact {
	background-image: url(../i/t_contact.png);
}
.t_news_from {
	background-image: url(../i/t_news_from.png);
	height: 34px;
}
.phone {
	background-image: url(../i/hotboxTelNo_v2009.0.3.png);
	height: 28px;
}
.fax {
	background-image: url(../i/hotboxFaxNo_v2009.0.3.png);
	height: 28px;
}
.t_links {
	background-image: url(../i/t_links.png);
	height: 34px;
}
.t_tel {
	background-image: url(../i/hotboxTel_v2009.0.3.png);
	height: 22px;
}
.t_fax {
	background-image: url(../i/hotboxFax_v2009.0.3.png);
	height: 22px;
}
.t_email {
	background-image: url(../i/hotboxEmail_v2009.0.3.png);
	height: 22px;
}
.t_StuAddress {
	background-image: url(../i/hotboxStuAdd_v2009.0.3.png);
	height: 22px;
}
.t_RegOffice {
	background-image: url(../i/hotboxRegOff_v2009.0.3.png);
	height: 28px;
}
.t_mailing {
	background-image: url(../i/hotboxNews_v2009.0.3.png);
	height: 22px;
}
.t_history {
	background-image: url(../i/t_history.png);
	height: 34px;
}
.t_green {
	background-image: url(../i/t_green.png);
	height: 34px;
}
.t_charity {
	background-image: url(../i/t_charity.png);
	height: 34px;
}
.t_clients {
	background-image: url(../i/t_clients.png);
	height: 34px;
}
.t_rfp {
	background-image: url(../i/hotboxRFP_v2009.0.3.png);
	height: 21px;
}

/* S E C T I O N S */

.section {
	border-bottom: 1px solid #ff5200;
	padding: 22px 0;
	clear:both;
	width: 960px;
	background-image: url(/i/alpha960.png);
}
.section_title {
	width: 240px;
	float:right;
}
.section_title h2 {
	margin-top: 0;
	letter-spacing: -3px;
	margin-top: -5px;
}
.section_desc {
	width: 660px;
}
.sec_m .section_desc p {
	margin: 0 0 1em 0;
}

/* P O R T F O L I O */
.port_item {
	border-bottom: 1px solid #ff5200;
	padding: 12px 0;
	clear:both;
	width: 960px;
}
.port_images {
	width: 624px;
}
.port_images li {
	display:inline;
	margin: 0 6px 6px 0;
	vertical-align: top;
	float:left;
}
.port_desc {
	width: 240px;
	float:right;
}
.port_desc p {
	background: url(/i/alpha220.png) repeat;
}
.port_item h3 {
	color: #666;
	letter-spacing: -2px;
	font-size: 25px;
	line-height: 20px;
}
.port_item h4 {
	letter-spacing: -3px;
	color: #272727;
	font-family: rockwell;
	font-weight: bold;
	font-size: 27px;
	line-height: 18px;
	margin-bottom: 8px;
	margin-top: 0px;
}
.port_item p {
	line-height: 14px;
	color: #777;
} 
.port_item .three {
	padding: 0 10px;
	width: 220px;
	background-image: url(/i/alpha240.png)
}
.port_item .three p {
	line-height: 18px;
	margin:0 0 1em 0;
}
.port_item .three ul, .port_item .three ol {
	margin-bottom: 1em;
	color: #777;
	
}
.port_item .three li {
	font-size: 11px;
	line-height: 18px;
	margin: 0 0 0 18px;
	list-style-type: circle;
}
.port_item p.emph {
	color: #666;
} 
ul.small img {
	max-width: 150px;
}
ul.large img {
	max-width: 470px;
}
#content ul.large {
	width: 470px;
	float:left;
}
#container {min-height: 470px;}

/*
ul.thumbs li.active a {
	border: 2px solid #ff5200;
}
ul.thumbs li a:hover {
	border: 2px solid #ffcbb2;
}
*/
ul.thumbs li a img 			{border: 2px solid #fff;}
ul.thumbs li a:hover img 	{border: 2px solid #ffcbb2;}
ul.thumbs li.active a img 	{border: 2px solid #ff5200;}


body ul.thumbs {
	margin: 6px 0 0 0;
}
body ul.thumbs li {
	float:left;
	margin: 2px 2px 0 0;
	display: inline;
}
body ul.thumbs li a {
	float:none;
	border: 2px solid #fff;
	margin:0;
	height: 72px;
	overflow: hidden;
}

/* galleries in portfolio */
.gallery {margin:0; width: 470px; float:left;}
.big_gallery {margin:0; width: 710px; float:left;}


/* portfolio other projects icons */

#moreprojects li {
	width: 218px;
	float:left;
	margin: 0 20px 10px 0;
	border: 1px solid #fff;
}
#moreprojects li.selected a span {
	color: #959595;
}
#moreprojects li a {
	text-decoration: none;
	display:block;
}
#moreprojects li a img {
	float:left;
}
#moreprojects li a span {
	font-size: 12px;
	position: relative;
	top: 3px;
	left: 3px;
	
}



/* section titles */
.t_web {
	background-image: url(../i/t_webdesign.png); 
	height: 27px;
}
.t_anim {
	background-image: url(../i/t_animation.png); 
	height: 27px;
}
.t_ident {
	background-image: url(../i/t_identity.png); 
	height: 27px;
}
.t_web a, .t_anim a, .t_ident a {
	display:block;
}
/* C O N T A C T */

.form label {
	width: 150px;
	float:left;
	clear:left;
}
.form input {
	width: 300px;
	border: none;
	border-bottom: 1px solid #272727;
}
.form input.noti {
	width: auto;
	border: none;
	margin-left: 240px;
}
.form textarea {
	width: 300px;
	border: 1px solid #272727;
}
.form p {
	margin-top: 18px;
}
.form p.nm {
	margin-top: 0px;
}
.form input.nw {
	width:auto;
	border: none;
}
.form .sub {
	width: 289px;
	float:left;
	clear:left;
}
.form .sub input {
	width: auto;
	border: none;
}

/* N E W S */


.news	{
	width: 710px;
	float: left;
	background: url(/i/alpha710.png) repeat;
}

.news h3 {
	font-size: 54px;
	font-weight: bold;
	font-family: Rockwell;
	letter-spacing: -4px;
	line-height: 50px;
	clear:right;
}
.news h3 a {
	text-decoration: none;
}
.news h3 a:link,.news h3 a:visited {
	color: #272727;
}
.news h3 a:hover {
	color: #474747;
}
.news h3 a:active {
	color: #272727;
}

.news p	{
	font-size: 11px;
	line-height: 18px;
	margin-bottom: 18px;
}

/*
inner news pages
*/
.news h3 {
	font-size: 48px;
}
.news a.npic {
	width: 230px;
	float:right;
	margin-right: 0px;
}
.news a.npic img {
	max-width: 230px;
	margin-bottom: 12px;
	padding-top: 3px;
}
.news p	{
	margin-right: 262px;
}
.news p.news_date {
	color: #272727;	
}
body .news h3.adjust {
	margin: 12px 0 0 0;
}
.newspage .news h3 {
	border-top: 1px solid #ff5200;
}
.newspage .news strong {
	font-weight: bold;
}
.newspage .news em {
	font-style: italic;
}



.newspage .news p.news_date {
/*	border-top: 1px solid #ff5200; */
	text-align: left;
	margin-bottom: 40px;
}
body .newspage .news p.adjust {
	border-top: none;
}
.newspage .news br	{
	line-height: 0;
}
.newspage p {
	/* color: #474747; */
} 

.list {
	font-size: 13px;
	line-height: 18px;
	margin: 12px 0 0 12px;
}
.list li {
	background-position: 0px 0.5em;
	background-repeat: no-repeat;
	background-image: url(../i/bullet.png);
	padding-left: 12px;
}
.list li a {
	text-decoration: none;
	}
.list li a span {
	font-size: 11px;
	font-style: italic;
	color: #272727;
}
.list li a:hover span {
	color: #474747;
}
/* C L I E N T S */
ul.clients li a {
	font-size: 11px;	
}
.com {
	width: 710px;
}
.com p {
	font-size: 13px;
	margin: 18px;
}



/* L I N K S */
.links .section_desc {
	width: 720px;
	background-image: url(/i/alpha730.png);
}
.links li  {
	width: 220px;
	margin-right: 20px;
	float:left;
	font-size: 11px;
	margin-bottom: 22px;
}
.links a img {
/*	display: none; */
}
.links img  {
	display:block;
	max-width: 200px;
	padding-top: 3px;
}

/* M A I L I N G   L I S T */
#subscribe {position:absolute; top: 800px; left: 250px; z-index: 10000; width: 500px; border: 7px solid #d4d5d6; background-color: rgb(255,255,255)}

/* F O O T E R */
#footer {
	clear:both;
	border-top: 2px solid #ff5200;
	padding-top:22px;
}
#footer .nine {
	padding-bottom: 30px;
}
#footer p, #footer li {
	font-size: 11px;
	line-height: 18px;
}
#footer li {
	color: #474747;
	}
#footer li a.highlight {
	background-color: #f4f4f4;
}




/*****************************************************************************
SIFR 3 
See also <http://novemberborn.net/sifr3> and <http://wiki.novemberborn.net/sifr3>.

This software is licensed and provided under the CC-GNU LGPL.
See <http://creativecommons.org/licenses/LGPL/2.1/>
*****************************************************************************/
@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }
  
  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }
  
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}
@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}
@media screen {
/* hide default whilst flash kicks in */
.sIFR-active .port_desc h4 {margin-top: -9px;}
.sIFR-active .testemonial blockquote p {margin-bottom: 0;}

.sIFR-active .port_desc h4,
.sIFR-active .news h3,
.sIFR-active .testemonial blockquote p,
.sIFR-active .testemonial p.author,
.sIFR-active .links h2,
.sIFR-active .history .section_title h2,
.sIFR-active .intro h2 {visibility: hidden;}
}
/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}