/* --------------------------------------------------------------

  Site: wwww.brothersmedia.nl
  Author: www.brothersmedia.nl

	Date: July 2010

  default.css
  * main stylesheet.

-------------------------------------------------------------- */


/* General
-------------------------------------------------------------- */
html, body {
	font-family: Helvetica, Arial;
	font-size: 14px;
	line-height: 150%;
	height: 100%;
	color: #7e7e7e;
	}

html {
	background: #69acdc url('../images/brothersmedia-background.jpg') no-repeat center top;
	background-attachment: fixed !important; /* BG NOT PERFECT FIT */
	}

body { background: none; }

p { text-align: left; }

h1, h2, h3, h4, h5 { color: #6e6e6e; text-align: left; }
h1 a, h2 a, h3 a, h4 a, h5 a { text-decoration: none; color: #6e6e6e; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover { text-decoration: none; color: #2b96de; }

h1.logo {
	font-size: 490%;
	line-height: 180%;
	}

h2.slogan {
	width: 700px;
	padding-left: 1px;
	font-size: 15px;
	line-height: 120%;
	}

h2 {
	font-size: 20px;
	margin-top: 0;
	}

h3 {
	font-size: 20px;
	margin-top: 0;
	}

h4 {
	font-size: 15px;
	line-height: 100%;
	margin: 0 0 5px 0;
	padding: 0;
	color: #2b96de;
	}

a {
	color: #7e7e7e;
	font-weight: normal;
	text-decoration: underline;
	}
a:hover { text-decoration: underline; color: #2b96de; }


/* Miscellaneous
-------------------------------------------------------------- */
div.line { width: 100%; clear: both; }
div.line div.line-space { height: 25px; }
div.line-small div.line-space { height: 15px; }
div.line-show {	border-top: 1px solid #ccc; }

div#header div.space10 { height: 10px; clear: both; }
div#header div.space30 { height: 30px; clear: both; }
div#header div.space50 { height: 50px; clear: both; }


/* Basics
-------------------------------------------------------------- */
div#wrapper {
	background: transparent url('../images/wrapper-bg.png') repeat-y center;
	min-height: 100%;
	}

div#page {
	width: 980px;
	margin: 0 auto;
	overflow: visible;
	background: transparent url('../images/page-bg.png') no-repeat left top;
	}

div#page-content {
	width: 830px;
	margin: 0 auto;
	}


/* Header Links
-------------------------------------------------------------- */
div#header div.links-wrapper {
	text-align: right;
	font-size: 10px;
	line-height: 250%;
	width: 100%;
	margin: 0 auto;
	}
div#header div.links {
	width: 300px;
	float: right;
	}

div#header div.links * { margin: 0; padding: 0; list-style: none; } /* SMALL RESET */
div#header div.links ul li {
	float: right;
	margin-right: 5px;
	}
div#header div.links ul.qtrans_language_chooser li { margin-right: 8px; }
div#header div.links ul li.active a { font-style: normal; color: #2b96de; }
div#header div.links a { color: #7e7e7e; }
div#header div.links a:hover { color: #2b96de; }
div.qtrans_widget_end { display: none; }


/* Header
-------------------------------------------------------------- */
div#header {
	text-align: left;
	width: 830px;
	}

div#header div.brotherslabs {
	width: 700px;
	height: 90px;
	background: transparent url('../images/brothersmedia-logo.png') no-repeat left top;
	text-indent: -1000000px;
	}


/* Navigation
-------------------------------------------------------------- */
div.navigation a {
	font-size: 15px;
	text-decoration: none;
	}
div.navigation a:hover { color: #2b96de;	}

div.navigation ul {
	list-style: none;
	margin: 0;
	}
div.navigation ul li {
	float: left;
	margin: 0 15px 0 0;
	}
div.navigation ul li.current_page_item a { font-style: normal; color: #2b96de; }


/* Frontpage
-------------------------------------------------------------- */
div#frontpage-videoreel {
	width: 830px;
	height: 250px;
	text-align: left;
	}
div#frontpage-videoreel_intro {
	width: 50%;
	padding: 30px 0 0px 0;
	text-align: left;
	float: left;
	}

div#videoreel {
	background: #ccc url('../images/frontpage-videocontainer.png') no-repeat center 75px;
	width: 830px;
	height: 250px;
	}
div#videoreel p {
	position: relative;
	top: 165px;
	width: 100%;
	text-align: center;
	}
div#frontpage-showreel {
	background: none;
	text-align: left;
	position: relative;
	width: 830px;
	height: 250px;
	overflow: hidden;
	}


/* Projects
-------------------------------------------------------------- */
div.frontpage-project	{
	float: left;
	width: 33%;
	font-size: 12px;
	}
div.frontpage-project	div.thumb {
	float: left;
	overflow: hidden;
	}
div.frontpage-project	div.info {
	padding-top: 5px;
	float: right;
	width: 165px;
	}
div.frontpage-project	img.project_thumbnail {
	border: 1px solid #7e7e7e;
	}


/* Slider
-------------------------------------------------------------- */
div#frontpage-portfolio {
	height: 102px;
	width: 830px;
	text-align: left;
	}

div#frontpage-portfolio ul, div#frontpage-portfolio li {
	margin: 0;
	padding: 0;
	list-style: none;
	}
div#frontpage-portfolio li {
	height: 102px !important;
	width: 830px !important;
	overflow: hidden;
	}

/* Slider Controls */
div#frontpage-project_controls a {
	text-decoration: none;
	font-size: 11px;
	}
span#prevBtn, span#nextBtn {
	display: block;
	margin-top: 5px;
	}
span#prevBtn { float: left; }
span#nextBtn { float: right; }


/* Blog
-------------------------------------------------------------- */
div#blog {
	background: #eee;
	width: 74%;
	float: left;
	text-align: left;
	}


/* Sidebar
-------------------------------------------------------------- */
div#sidebar {
	background: orange;
	width: 23%;
	float: right;
	text-align: left;
	margin: 0;
	padding: 0;
	}

div#sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
	}
div#sidebar li {
	margin-bottom: 25px;
	}

div#sidebar li ul {
	font-size: 12px;
	line-height: 150%;
	}
div#sidebar h2 {
	font-size: 125%;
	margin: 0 0 2px 0;
	}
div#sidebar ul li ul {
	margin: 0;
	background: red;
	}
div#sidebar ul li ul li {
	margin: 0 0 0 10px;
	}

/* widgets */
form#searchform .field {
	width: 96%;
	font-size: 150%;
	}


/* Services
-------------------------------------------------------------- */
div.services {
	text-align: left;
	}

div.services div.column {
	float: left;
	width: 30%;
	margin: 0;
	}
div.services div.column-space {
	float: left;
	width: 5%;
	height: 25px;
	}

div.services-contact p {
	text-align: center;
	font-size: 20px;
	}

div.services-roadmap {
	background: transparent url('../images/services-roadmap.png') no-repeat left top;
	width: 100%;
	}
div.services-roadmap div.stappen {
	width: 20%;
	height: 110px;
	float: left;
	}
div.services-roadmap div.stappen span {
	display: block;
	width: 100%;
	position: relative;
	top: 73px;
	font-size: 15px;
	text-align: center;
	}

div.services-roadmap_intro {
	text-align: left;
	}


/* Portfolio
-------------------------------------------------------------- */
div.portfolio_project	{
	float: left;
	margin: 0 4px 8px 0;
	}

div.entry-content {
  float: left;
  width: 134px;
  margin: 0 0 5px 0;
  text-align: left;
	}

div.entry-content p {
  line-height: 1.3em;
	}
div.entry-content a {
  border: 1px solid #7e7e7e;
  display: block;
  height: 125px;
  width: 125px;
  overflow: hidden;
  position: relative;
  background-color: #191919;
  text-decoration: none;
	}
div.entry-content a img {
  position: absolute;
  z-index: 5;
	}
div.entry-content a span.slide-title {
  position: absolute;
  top: 108px;
  left: 3px;
  width: 300px;
  line-height: 1em;
  color: white !important;
  font-size: .8em;
  z-index: 0;
	}
div.entry-content {
  position: relative
	}
div.entry-content .new {
  display: block;
	position: absolute;
	top: -6px;
	right: 10px;
	width: 42px;
	height: 22px;
	background: url('../images/portfolio-new.png') no-repeat top left;
	z-index: 200;
	}
span.cover-up {
  background: url('../images/portfolio-side.png') no-repeat right top;
  position: absolute;
  right: 0;
  top: 0;
  height: 125px;
  width: 20px;
  z-index: 4;
	}


/* Mobile Apps
-------------------------------------------------------------- */
div#showcase {
	float: left;
	background: url('../images/showcase-iphone.png') no-repeat center bottom;
	width: 42%;
	height: 625px;
	text-align: left;
	}
div#showcase div.iphone {
	background: #2e3e41;
	width: 227px;
	height: 340px;
	position: relative;
	left: 61px;
	top: 116px;
	display: block;
	overflow: hidden;
	}
div#showcase div.iphone ul {
	list-style: none;
	margin: 0;
	}

div#showcase-info {
	float: left;
	width: 55%;
	padding-top: 100px;
	}


/* Contact
-------------------------------------------------------------- */
div.contact {
	text-align: left;
	}

div.contact div.column {
	float: left;
	width: 30%;
	margin: 0;
	}
div.contact div.column-space {
	float: left;
	width: 5%;
	height: 25px;
	}

div.contact-profile { margin-bottom: 25px; }
div.contact-profile	div.photo { float: left; }
div.contact-profile	div.photo img.avatar {
	border: 1px solid #7e7e7e;
	margin: 2px 10px 10px 0;
	}
div.contact-profile	div.info {
	float: left;
	}
div.contact p.head { margin: 0; font-size: 15px; }
div.contact p.title { margin: 0; line-height: 200%; }
div.contact p.other { margin: 0; font-size: 12px; }


/* Footer
-------------------------------------------------------------- */
div#footer {
	padding: 0 0 25px 0;
	text-align: left;
	font-size: 11px;
	line-height: 18px;
	}

div#footer div.column {
	float: left;
	margin: 0;
	}
div#footer div.column-first { width: 28%; }
div#footer div.column-second { width: 30%; }
div#footer div.column-third { width: 42%; }

div#footer div.column-first  a {
	text-decoration: none;
	}

/* tweets & recent posts */
.rcpost, .tweet {
  color: #7e7e7e;
  }
.rcpost .rcpost_list, .tweet .tweet_list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
.rcpost .rcpost_list li, .tweet .tweet_list li {
	overflow: auto;
	padding: .5em;
	border-top: 1px solid #ccc;
	clear: both;
	}
.rcpost .rcpost_list a, .tweet .tweet_list li a { color: #6e6e6e; }
.rcpost .rcpost_list .rcpost_even, .tweet .tweet_list .tweet_first { border-top: 0; }
.rcpost .rcpost_list .rcpost_avatar, .tweet .tweet_list .tweet_avatar { padding-right: .5em; float: left; }
.rcpost .rcpost_list .rcpost_avatar img, .tweet .tweet_list .tweet_avatar img { vertical-align: middle; border: 1px solid #7e7e7e; }


/* Alternative Flavours / WK2010
html { background: #ff611f url('../images/brothersmedia-background-wk2010_sneijder.jpg') no-repeat center top; }
html.w1280 { background: #ff611f url('../images/brothersmedia-background-wk2010_sneijder-1280.jpg') no-repeat center top; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover { text-decoration: none; color: #ff611f !important; }
h4 { color: #ff611f; }
a:hover { text-decoration: underline; color: #ff611f !important; }
div#header div.links ul li.active a { font-style: normal; color: #ff611f; }
div#header div.links a:hover { color: #ff611f; }
div#header div.brotherslabs {	background: transparent url('../images/brothersmedia-logo-wk2010.png') no-repeat left top !important; }
div.navigation a:hover { color: #ff611f;	}
div.navigation ul li.current_page_item a { font-style: normal; color: #ff611f; }
-------------------------------------------------------------- */