/* @override 
	http://www.crossinghippos.com/css/stylesheet.css
	http://crossinghippos/studio/css/stylesheet.css
	http://en.crossinghippos.local/templates/studio/css/stylesheet.css
	http://en.crossinghippos.local/templates/yellow/css/stylesheet.css
*/

/* Color */

/*
#FC0 (yellow)
#066 (links on yellow)
#099 (links on white)
#300 (accent on yellow) ?
#300 (accent on yellow)
#600 (accent on white)

*/

/* png transparancy for older browsers */

img, div, input {
	behavior: url(/templates/shared/iepngfix/iepngfix.htc)
}

@font-face {
	font-family: 'Public Gothic Circular';
	src: url('type/PublicGothicCircular.eot');
	src: local('PublicGothicCircular'),  
	local('Public Gothic Circular'),  
	url('type/Public Gothic Circular.ttf') format('truetype');
	color: #1a9798;
}

/* Style reset */

a {
	text-decoration: none;
	color: #096;
	font-weight: normal;
	font-style: normal;
}

a:hover {
	color: #300;
}

a img {
	border: none;
}

fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

/* Global styles */

p, ul, dl {
	font: 14px/150% "colaborate-1","colaborate-2";
}

h1, h2, h3, h4, h5, h6, h7, legend, label, .button, dt {
	font-family: "Public Gothic Circular", Impact, Arial, Helvetica, "Helvetica Neue", sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #300;
}

label {
	color: #000;
}

label.required {
	background-image: url(../imgs/invalid.png);
}

input {
	margin: 0 0 5px;
	padding: 0 4px;
	height: 27px;
	border-style: none;
	border-bottom: 1px solid #000;
	background-image: url(../imgs/bg_000-80.png);
	background-color: transparent;
	color: #FFF;
	text-align: left;
	font: 11px/30px "Courier New", Courier, mono;
}

textarea {
	margin: 0;
	border: none;
	border-bottom: 1px solid #000;
	background-image: url(../imgs/bg_000-80.png);
	background-color: transparent;
	color: #FFF;
	padding: 6px 4px 0px;
	font: 11px/18px "Courier New", Courier, mono;
}

.button {
	background: transparent none;
	opacity: 1;
	color: #096;
	font-size: 18px;
	text-align: left;
	margin: 10px 0 0;
	padding: 0;
	cursor: pointer;
	border: none;
}

input.button:hover,
input.button:active {
	color: #300;
}

h2 {
	margin: 0 30px 20px 145px;
	font-size: 28px;
	line-height: 36px;
	margin-bottom: 40px;
}

h2 span.xl {
	font-size: 72px;
	color: #000;
}

h2 span.x {
	font-size: 40px;
}

h2 span.xs {
	font-size: 18px;
	position: relative;
}

h2 span.outset {
	left: -115px;
	position: relative;
	margin-right: -115px;
}

h3 {
	margin-bottom: 0;
}

h4 {
	color: #000;
}

/* Layout */

html {
	background: #fc0 url(../imgs/bg.jpg);
/

*background: #FC0 url(../imgs/grid.png) repeat-y;*/
}

body {
	width: 960px;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 115px;
	overflow-x: hidden;
}

#header {
	background: #FFF;
	height: 115px;
	border-bottom: 1px solid #000;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 2;
}

#header img.logo {
	position: absolute;
	top: 27px;
	left: 20px;
}

#mainmenu {
	position: absolute;
	left: 605px;
	bottom: 20px;
	border: none;
	width: 210px;
	height: 68px;
}

h1 {
	position: absolute;
	left: 145px;
	margin: 0;
	font-size: 28px;
	

/* Positions heading on same line as menu*/
	line-height: 0;
	bottom: 20px;
	color: #000;
}

h1 span {
	color: #600;
}

.header-line {
	margin: 0;
	height: 8px;
	border: none;
	background: url(../imgs/header-line.png) no-repeat;
	position: fixed;
	top: 116px;
	width: 100%;
	z-index: 1;
}

#footer {
	background-color: #033;
	height: 25px;
	position: fixed;
	bottom: 0;
	width: 100%;
}

#footer .positioner {
	width: 960px;
	height: 100%;
}

#footer ul {
	margin: 0 30px;
	padding: 0;
}

#footer li {
	list-style-type: none;
	float: left;
	color: #066;
	font: normal normal 16px/28px "Public Gothic Circular", Impact, Arial, Helvetica, "Helvetica Neue", sans-serif;
	padding-right: 20px;
}

#footer ul.w3 {
	float: right;
	margin: 0;
}

#footer ul.w3 li {
	list-style-type: none;
	float: left;
	font: normal normal 12px/25px "colaborate-1","colaborate-2";
	padding-right: 20px;
}

#footer li a {
	color: #066;
}

#fill {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 960px;
	background-color: #000;
	opacity: 0.2;
	filter: alpha(opacity=20);
	-moz-opacity: 0.2;
	-khtml-opacity: 0.2;
	opacity: 0.2;
	z-index: -1;
}

/* Generic page layout*/

.content {
	width: 960px;
	clear: both;
	float: left;
	padding: 100px 0 30px;
}

div.col.spanthree {
	width: 325px;
}

div.col.spantwo {
	width: 210px;
}

div.col.left {
	margin-left: 145px;
}

/* Homepage */

#welcome {
/*background: url(../imgs/hippo.png) no-repeat 760px 240px;*/
	width: 960px;
	padding-top: 0;
}
#welcome.content {
	padding-bottom: 0;
}
#welcome h2 {
	color: #000;
	padding-top: 0;
}

#welcome h2 .x {
	color: #300;
}

#welcome h2 .xs {
	bottom: 14px;
	z-index: 1;
}

#welcome .col {
	width: 210px;
	float: left;
}

#welcome .col.twitter {
	position: relative;
	left: 145px;
	float: left;
	margin-right: -145px;
}

#welcome .col.blog {
	position: relative;
	left: 310px;
	float: left;
	margin-right: -145px;
}

#welcome .blog .hippo {
	position: absolute;
	top: -20px;
	left: 230px;
}

#welcome .col h4 {
	background: url(../imgs/hr.png) no-repeat right bottom;
	padding: 0 0 10px;
	margin: 0 0 10px;
}

#welcome #tweet ul,
#welcome #blog ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#welcome #tweet ul li,
#welcome #blog ul li {
	font-size: 12px;
	line-height: 15px;
	padding-bottom: 10px;
}

#welcome img.hippo {
	position: relative;
	left: 45px;
	top: 20px;
}

/* Studio */

#studio {
	position: relative;
}

a.anchor {
	display: inline-block;
	height: 100px;
}

#studio h2 {
	line-height: 30px;
}

#studio img#team {
	position: absolute;
	width: 343px;
	height: 560px;
	top: 280px;
	left: 560px;
	background-image: url(../imgs/team.png);
	border: 0;
	display: block;
}
/*
#studio .map {
	position: absolute;
	display: block;
	cursor: pointer;
}

#studio a#development.map {
	width: 89px;
	height: 121px;
	top: 260px;
	right: 159px;
}

#studio a#account.map {
	width: 95px;
	height: 127px;
	top: 447px;
	right: 234px;
}

#studio a#design.map {
	width: 90px;
	height: 130px;
	top: 405px;
	right: 72px;
}
*/
/* Work */

#work h2 .outset {
	left: -45px;
	margin-right: -45px;
}

#work .projects {
	width: 440px;
	float: left;
	margin-left: 20px;
}

#work .projects {
	width: 440px;
	float: left;
	margin-left: 20px;
}

#work .projects img {
	margin-top: 20px;
	border-bottom: 1px solid #000;
}

#work .col {
	float: left;
}

#work .projects .title,
#work .projects .info {
	font: normal normal 13px/100% "Public Gothic Circular", Impact, Arial, Helvetica, "Helvetica Neue", sans-serif;
}

#work .projects .title {
	float: left;
}

#work .projects .info {
	color: #096;
	float: right;
	cursor: pointer;
}

#work .projects .info:hover {
	color: #300;
}

/* Buzz */

#buzz {
	background: url(../imgs/hippo.png) no-repeat -200px 550px;
}

#buzz h2 .outset {
	left: -98px;
	margin-right: -98px;
}

#buzz h3 {
	margin-left: 375px;
	margin-bottom: 10px;
}

#buzz .thanks {
	margin-left: 145px;
}

#buzz form {
	width: 900px;
	position: relative;
	left: 30px;
}

#buzz form fieldset:first-child {
	float: left;
	width: 345px;
	margin-top: 0;
}

#buzz form label {
	width: 95px;
	display: inline-block;
	text-align: right;
	margin-right: 8px;
	padding-right: 8px;
	background-repeat: no-repeat;
	background-position: right top;
}

#buzz form input {
	width: 202px;
}

#buzz form .button {
	width: 555px;
	margin-bottom: 30px;
}

#buzz form textarea {
	width: 547px;
	height: 120px;
}

#buzz .contactdetails {
	margin-left: 260px;
	width: 345px;
}

#buzz .invalid {
	background-color: #600;
	border-bottom: 1px solid #630908;
}

.contactdetails dt {
	width: 95px;
	text-align: right;
	margin-right: 16px;
	display: inline-block;
	color: #000;
	font-size: 16px;
}

.contactdetails dd {
	width: 210px;
	margin: 0;
	display: inline-block;
	padding-bottom: 5px;
}

/* Typekit label */

img#typekit-badge-iob5lcm.typekit-badge {
	
}

/* Tooltips */

.tool-tip {
	float: left;
	background: transparent url(../imgs/bg_000-80.png);
	border-bottom: 1px solid #000;
	padding: 5px;
	max-width: 440px;
	z-index: 2;
}

.tool-tip {
	float: left;
	background: transparent url(../imgs/bg_000-80.png);
	border-bottom: 1px solid #000;
	padding: 5px;
	max-width: 440px;
	z-index: 2;
}

.tool-title {
font: 16px/16px "Public Gothic Circular", Impact, Arial, Helvetica, "Helvetica Neue", sans-serif;
	padding: 0;
	margin: 0;
	background: url(../images/selector-arrow.png) no-repeat;
	text-transform: uppercase;
	color: #fff;
}

.tool-text {
	font-size: 100%;
	margin: 0;
	color: #fff;
}

.tool-text, .tool-text p {
		font: 13px/150% "colaborate-1","colaborate-2";
		padding: 0;
		margin-bottom: -;
}