/*

Interested in working for us?
-----------------------------
If you're reading this then you're more than likely the sort of 
inquiring mind we like at Integrate. If you're a web developer 
or designer looking to join a creative development team, I'd 
personally love to hear from you and see what you're capable of.

Please take a look at the careers section of our site for specific
jobs, but if you've read this, send me your CV and link(s) and
I'll give them my personal attention based on your initiative alone!

Send details to: ireadyoursourcecode@integratelondon.com

*/


@import "reset.css";

body { background: url("../images/bg.png") repeat-x #f7f6f6; text-align: center; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
body#flash { background: white; }

.pink { color: #F70399; }
.grey { color: #666666; }
.dark-grey { color: #333333;}
.black { color: #000000; font-weight: bold; }

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

a .grey { color: #666666; }
a .grey :hover { text-decoration: none; }

h1 { font-size: 23px; }
h2 { font-size: 20px; }

#container { width: 990px; text-align: left; margin: 0 auto; }
#flash #container { width: 100%; text-align: left; height: 100%; }

#header { width: 950px; height: 163px; text-align: left; margin: 0 auto; }
#header #logo { float: left; margin: 8px 0 0 0; }
#header #slogan { display: block; margin: 48px 0 0 0; float: right; width: 700px; color: #333; text-align: right; font-size: 14px; }
#header #slogan span.dark-blue { color: #2a559d; }
#header #slogan span.light-blue { color: #5596cc; }
#header #slogan img { margin-left: 4px; }
#header #menu { clear: both; }
#header ul { float: left; padding-top: 38px; display: block; }
#header ul li { float: left; text-align: center; margin: 0 6px 0 0; background: url("../images/menu-button-left.png") no-repeat; }
#header ul li a { float: left; padding: 0 16px 0 16px; color: white; line-height: 29px; font-size: 14px; height: 29px; text-decoration: none; background: url("../images/menu-button-right.png") no-repeat; background-position: 100% 0%; }
#header ul li a:hover, #header ul li.on a { background-position: 100% -29px; color: black; }
#header ul li:hover, #header ul li.on { background-position: 0 -29px; }
#header ul#right { clear: none; float: right; margin-right: 8px; }



#body-container { width: 100%; float: left; text-align: left; margin: 0 auto; background: url("../images/bg-body.png") repeat-x white; background-position: left bottom; padding-bottom: 17px; } 


#body { width: 960px; text-align: left; margin: 0 auto; margin-bottom: 17px; }
#flash #body { margin: 0px; float: left; width: 100%; }

#body ul { list-style: none; } 
#body ul li { color: #F70399; padding-left: 10px; background: url("../images/bullet-1.png") no-repeat; background-position: 0px 5px; }

#body p, #body h1, #body h2, #body h3, #body h4, #body ul { padding: 2px 10px 6px 22px; }.work h2 { padding: 122px 140px 16px 122px; }

#body .box { background: url("../images/box-top.png"); width: 305px; float: left; margin: 10px 15px 0 0; }
#body .box-bottom { background: url("../images/box-bottom.png") no-repeat; float: left; width: 305px; margin: 0 15px 0 0; height: 14px; }

#body .box-medium { background: url("../images/box-top-medium.png"); width: 634px; float: left; margin: 10px 6px 0 0; }
#body .box-medium-bottom { background: url("../images/box-bottom-medium.png") no-repeat; float: left; width: 634px; margin: 0 6px 0 0; height: 14px; }

#body .box-long { background: url("../images/box-top-long.png"); width: 946px; float: left; margin: 10px 6px 0 0; }
#body .box-long-bottom { background: url("../images/box-bottom-long.png") no-repeat; float: left; width: 946px; height: 14px; }

#body .box h2, #body .box-medium h2, #body .box-long h2 { font-size: 18px; padding: 18px 22px 0 22px; }
#body .box p, #body .box-medium p, #body .box-long p { font-size: 12px; padding: 10px 22px 0 22px; }

#body .row { float: left; width: 960px; clear: both; display: block; }
#body .row-bottom { float: left; width: 960px; clear: both; display: block; }

.hero { float: left; width: 100%; margin: 0 auto; text-align: center; clear: both; display: block; background: url("../images/bg-blue.png") repeat-x; width: 100%; margin-top: 17px; }
.hero-black-texture { float: left; width: 100%; margin: 0 auto; text-align: center; clear: both; display: block; background: url("../images/bg-black-texture.png") repeat-x; width: 100%; margin-top: 17px; }
.hero-grey-texture { float: left; width: 100%; margin: 0 auto; text-align: center; clear: both; display: block; background: url("../images/bg-grey-texture.png") repeat-x; width: 100%; margin-top: 17px; }
.hero-midblue-texture { float: left; width: 100%; margin: 0 auto; text-align: center; clear: both; display: block; background: url("../images/bg-midblue-texture.png") repeat-x; width: 100%; margin-top: 17px; }
.hero-pink { float: left; width: 100%; margin: 0 auto; text-align: center; clear: both; display: block; background: url("../images/bg-pink.png") repeat-x; width: 100%; margin-top: 17px; }
.hero-contact { float: left; width: 100%; margin: 0 auto; text-align: center; clear: both; display: block; background: url("../images/bg-contact.png") repeat-x; width: 100%; margin-top: 17px; }
.hero-animation { float: left; width: 100%; margin: 0 auto; text-align: center; clear: both; display: block; background: url("../images/bg-animation.png") repeat-x; width: 100%; margin-top: 17px; }
.hero-animation-2 { float: left; width: 100%; margin: 0 auto; text-align: center; clear: both; display: block; background: url("../images/bg-animation-2.jpg") repeat-x; width: 100%; margin-top: 17px; }
.hero-activ-1 { float: left; width: 100%; margin: 0 auto; text-align: center; clear: both; display: block; background: url("../images/bg-activ-1.jpg") repeat-x; width: 100%; margin-top: 17px; }


.separator { width: 100%; background: url("../images/page-separator.png") repeat-x; height: 17px; float: left; margin: 40px 0 10px 0; }


#signup-container { margin-top: 16px; width: 100%; float: left; text-align: center; background: url("../images/signup-bg.png") no-repeat; background-position: center center; }
#signup { color: #333; margin: 0 auto; width: 947px; height: 45px; display: block; }
#signup #left { float: left; width: 450px; text-align: left; margin-left: 18px; }
#signup #left p { line-height: 45px; font-size: 13px; }
#signup #right { float: left; text-align: left; margin-left: 18px; width: 460px; }
#signup #right p { line-height: 45px; float: left; font-size: 13px; }
#signup #right form { float: right; margin: 6px 15px 0 0; }
#signup #right form input#email { outline-style: none; margin: 3px 20px 0 0; background: none; font-size: 13px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; border: 0; width: 185px; height: 30px; }
#signup #right form input#submit { border: 0; cursor: pointer; background: url("../images/sign-up-button.jpg"); width: 81px; height: 29px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } 




#footer { clear: both; float: left; text-align: center; height: 18px; background: url("../images/footer-bg.png") repeat-x; width: 100%; }
#footer #rebrand { padding: 60px 0 27px 0; display: block; }
#homepage #footer { clear: both; float: left; text-align: center; height: 217px; background: url("../images/bg-footer.png") repeat-x; width: 100%; }
#homepage #footer #footer-container { width: 955px; margin: 0 auto 0 auto; text-align: left; }
#homepage #footer a { color: #ff009d; }
#footer a:hover { text-decoration: none; }
#homepage #footer #details { margin-top: 136px; display: block; font-size: 11px; }
#homepage #footer #details #logo { float: left; margin-left: 48px; } 
#homepage #footer #details #block-one { float: left; margin: 6px 0 0 14px; }
#homepage #footer #details #block-two { float: right; margin: 6px 50px 0 0; }
#homepage #footer #banner { float: left; margin-top: 38px; }



/* Flash container styles */
#flash-cover { position:relative; }
#over {
	position:absolute;
	left:53px;
	top:191px;
	z-index:9999;
	padding:5px;
	width: 300px;
	text-align: left;
}
#over a{color:#ccc; font-family:Arial, Helvetica, sans-serif; font-size:11px; text-decoration:none}
		
#header-container { background: url("../images/bg.png") repeat-x; width: 100%; position: absolute; height: 163px; top: 0px; left: 0px; }
#header-margin { position: absolute; width: 990px; height: 163px; top: 0px; left: 50%; margin-left: -495px; }
#header-flash { position: absolute; width: 950px; height: 163px; text-align: left; top: 0px; left: 50%; margin-left: -475px; }
#footer-flash { background: url("../images/footer-bg.png") repeat-x; width: 100%; position: absolute; height: 18px; left: 0px; bottom: 0px; }