/*

Cubique Webcreations
CaballeroFabriek
Saturnusstraat 60 - 111
2516 AH  Den Haag
www.cubique.nl
info@cubique.nl

*/

/* -------------------------------------------------------------- layout kenmerken  ------ */

body {
	margin:0;
	background: #fff;
}
#container {
	margin:auto;
	position:relative;
}
#outer {
	padding: 0;
}
#header{
	position:absolute;
	top: 0;
	
	
	overflow:hidden;
	border-bottom: 1px solid #868889;
}
#header {
	height:25px;
}
#clearheader {
	height:30px;
}
#content {
	position: relative;
	min-height: 300px;
	height:auto !important;
}
#header, #footer, #content, #centrecontent, #container, #outer, #header-image {
	width:900px;
}

/* -------------------------------------------------------------- algemene kenmerken  ------ */

p, td {
	font-family: arial, tahoma, verdana;
}
td {
	vertical-align: top;
}
img {
	border: none;
}
form {
	margin: 0;
	padding: 0;
}
/* -------------------------------------------------------------- header kenmerken  ------ */

#header p {
	float: right;
	font-size: 71%;
	color: #868889;
	margin: 0;
	padding: 10px 5px 0 0;
}

/* -------------------------------------------------------------- header-image kenmerken  ------ */

#header-image {
	height: 200px;
	border-bottom: 1px solid #868889;
	margin-bottom: 10px;
	background: url('img/headers/logo-cubique.gif') no-repeat;
	background-position: right top;
}
#header-image ul {
	margin:  0;
	padding: 16px 0 0 0;
	list-style-type: none;
	float: right;
}
#header-image li {
	width: 190px;
	height: 27px;
	float: left;
	display: block;
}
#header-image .diensten {
	background: url('img/main/menu-diensten.gif');
	margin-right: 6px;
}
#header-image .about {
	background: url('img/main/menu-about.gif')
}

/* -------------------------------------------------------------- splitting content kenmerken  ------ */

#container-left {
	width: 514px;
}
#container-right {
	width: 386px;
}
#container-left, #container-right {
	float: left;
	display: inline;
	margin-bottom: 20px;
}

/* -------------------------------------------------------------- homepage kenmerken  ------ */

#introductie {
	width: 508px;
	min-height: 140px;
	height: auto !important;
	height: 140px;
	background: #b7d5de;
}
#concept, #vormgeving, #promotie {
	border-right: 1px solid #868889;
	float: left;
	display: inline;
	margin-top: 15px;
	min-height: 300px;
	height: auto !important;
	height: 300px;
}
#concept {
	width: 161px;
}
#vormgeving, #promotie {
	width: 172px;
}
#vormgeving .imgintro, #promotie .imgintro {
	margin-left: 11px;
}
.readmore {
	display: inline;
	margin: 0 0 0 5px;
	padding: 0;
}
#concept p, #vormgeving p, #promotie p, #adres-submenu p, #page p, #page li, #blog p, #blog li  {
	color: #58585A;
	font-size: 84%;
	font-family: arial, verdana;
	margin: 0;
	line-height: 140%;
}
#vormgeving p, #promotie p {
	padding: 6px 11px 20px 11px;
}
#concept p {
	padding: 6px 11px 20px 0px;
}
#introductie h1, #page h1, #page h2, #blog h1 {
	color: #86111E;
	text-transform: uppercase;
	font-family: tahoma, arial, verdana;
	font-size: 117%;
	margin:0;
	padding: 15px 15px 10px 15px;
	font-weight: normal;
}
#introductie h1 {
	padding-top: 10px;
}
#introductie p {
	color: #38373A;
	margin: 0;
	font-family: arial, verdana;
	font-size: 84%;
	padding: 0 10px 10px 10px;
}
#concept h1, #vormgeving h1, #promotie h1, #recent-projects h1, #page h1, #submenu2 h1, #blog h1 {
	text-transform: uppercase;
	font-family: tahoma, arial, verdana;
	font-size: 105%;
	margin: 0;
	font-weight: normal;
}
#concept h1, #vormgeving h1, #promotie h1 {
	color: #117391;
	padding: 0 6px 11px 12px;
}

/* -------------------------------------------------------------- menu kenmerken  ------ */

#menu {
	width: 386px;
	height: 140px;
	overflow: hidden;
}
#menu ul.navigation {
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu ul.navigation li a {
	width: 190px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding: 0;
}
#menu ul.navigation li {
	margin: 0 0 1px 0;	
}
#menu ul.navigation li a:hover {
	background-position: -190px 0px;
}
#menu ul.navigation li a {
	height: 27px;
 }
#menu .menleft {
	float: left;
}
#menu .menright {
	float: right;
}

#menu a#concept-ontwikkeling	{background-image: url('img/menu/concept.gif'); }
#menu a#design					{background-image: url('img/menu/vormgeving.gif'); }
#menu a#technologie				{background-image: url('img/menu/technologie.gif'); }
#menu a#internet-marketing		{background-image: url('img/menu/internet-marketing.gif'); }
#menu a#content-management		{background-image: url('img/menu/content-management.gif'); }

#menu a#werkwijze				{background-image: url('img/menu/werkwijze.gif'); }
#menu a#over-cubique			{background-image: url('img/menu/over-cubique.gif'); }
#menu a#contact					{background-image: url('img/menu/contact.gif'); }

#menu img {
	float: right;
	margin-top: 1px;
}
#menu span {
	visibility: hidden;
	height: 0;
	width: 0;
	display: none;
}

/* -------------------------------------------------------------- recente projecten kenmerken  ------ */

#recent-projects {
	margin-top: 14px;
	float: left;
	display: inline;
	padding-bottom: 7px
}
#recent-projects.start {
	width: 189px;
	border-right: 1px solid #868889;
	min-height: 280px;
	height: auto !important;
	height: 280px;
}
#recent-projects.pages {
	width: 386px;
	border-top: 1px solid #868889;
	border-bottom: 1px solid #868889;
	padding-top: 10px;
}
#recent-projects h1 {
	color: #86111E;
	padding: 0 6px 11px 0;
}
#recent-projects.pages h1 {
	padding: 0 6px 11px 6px;
}
#recent-projects ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#recent-projects li {
	width: 80px;
	height: 80px;
	float: left;
	margin: 0;
	padding: 0 10px 11px 4px;
}

/* -------------------------------------------------------------- adres - submenu kenmerken  ------ */

#adres-submenu {
	width: 190px;
	margin-top: 14px;
}
#adres-submenu.home {
	float: right;
}
#adres-submenu p {
	padding: 0 0 25px 3px;
}
#adres-submenu a, #submenu2 li a {
	text-decoration: none;
	color: #38373A;
}
#adres-submenu a:hover, #submenu2 li a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------- pagina kenmerken  ------ */

#page {
	margin-bottom: 30px;
}
#page p, #blog p {
	padding: 0 30px 10px 0;
	text-align:  justify;
}
#page h2 {
	font-size: 84%;
}
#page a {
	color: #117391;
	text-decoration: none;
}
#page a:hover {
	text-decoration: underline;
}
#page td {
	color: #58585A;
	font-size: 84%;
}
#page li {
	padding-right: 45px; 
}
/* -------------------------------------------------------------- submenu kenmerken  ------ */

#submenu2 {
	width: 190px;
	background: #ededee;
	height: 280px;
	float: left;
	margin-top: 10px;
	border-bottom: 10px solid #fff;
}
#submenu2 h1 {
	padding: 10px 6px 10px 6px;
	color: #117391;
}
#submenu2 ul {
	margin: 0;
	padding: 0 0 15px 6px;
	list-style-type: none;
}
#submenu2 li {
	line-height: 140%;
	font-family: arial, verdana;
	font-size: 84%;
}

/* -------------------------------------------------------------- nieuwsbrief kenmerken  ------ */

.subscribe, .offerte {
	margin-top: 15px;
}
.subscribe .kolom1 {
	width: 80px;
	text-align: right;
	font-weight: bold;
}
.subscribe .namemail, .offerte .namemail  {
	vertical-align:  10%;
}
.subscribe .formfield, .offerte .formfield {
	color: #58585a;
	font-size: 100%;
	font-family: arial, verdana;
	padding: 2px;
	width: 200px;
	border: 1px solid #868889;
}
.buttoncontact a:hover {
	background-position: -100px 0;
}
.buttoncontact a {
	width: 100px;
	height: 22px;
	display: block;
	background: url('img/main/button-verzenden.gif');
}
.buttoncontact a img {
	display:none;
}
#formerror {
	width: 460px;
	border: 1px solid #86111e;
	background: #edeeee;
	padding: 10px;
	margin: 15px 0 15px 0;
}
#formerror.hidden {
	display: none;
	visibility: hidden;
}
#formerror ul {
	margin: 0;
	padding: 0 0 0 20px;
}

/* -------------------------------------------------------------- offerte aanvraag kenmerken  ------ */

.offerte .kolom1 {
	width: 110px;
	text-align: right;
	font-weight: bold;
}
.offerte .formfield {
	width: 300px;
}

/* -------------------------------------------------------------- blog kenmerken  ------ */

#blog .year, #page .year, #page ul  {
	margin: 0;
	padding: 10px 0 15px 30px;
	list-style: none url('img/main/readmore.gif');
}
#blog li a, #more li a {
	color: #58585a;
	text-decoration: none;
}
#blog li a:hover {
	text-decoration: underline;
}
#blog h3, #page h3 {
	font-size: 100%;
	font-family: arial, verdana;
	color: #117391;
	font-weight: normal;
	margin: 0;
	padding: 10px 0 0 12px;
	border-top: 1px solid #868889;
	width: 480px;
}

/* -------------------------------------------------------------- gallery kenmerken */

#gallery-block {
	margin: 10px 0 0 0px;
	width: 480px;
}
.fotoklein img, .fotoklein2 img {
	margin: 3px;
	}
.fotoklein, .fotoklein2  {
	position: relative;
	float: left;
	margin-right: 12px;
	margin-top: 12px;
	width: 138px;
	height: 138px;
	padding: 0;
	text-align: center;
	background: url('img/main/newsblog-background.gif') repeat-x;
	border: 1px solid #e4e4e4;
}
.fotoklein2  {
 	background-position: 0 -40px;
 	border: 1px solid #d1d1d1;
}

/* -------------------------------------------------------------- slimbox effect kenmerken */

#lbOverlay {
	position: absolute;
	left: 0;
	width: 100%;
	background-color: #000;
	cursor: pointer;
}
#lbCenter, #lbBottomContainer {
	position: absolute;
	left: 50%;
	overflow: hidden;
	background-color: #fff;
}
.lbLoading {
	background: #fff url(img/gallery/loading.gif) no-repeat center;
}
#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}
#lbPrevLink {
	left: 0;
}
#lbPrevLink:hover {
	background: transparent url(img/gallery/prevlabel.gif) no-repeat 0% 15%;
}
#lbNextLink {
	right: 0;
}
#lbNextLink:hover {
	background: transparent url(img/gallery/nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}
#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(img/gallery/closelabel.gif) no-repeat center;
	margin: 5px 0;
}
#lbCaption, #lbNumber {
	margin-right: 71px;
}
#lbCaption {
	font-weight: bold;
}

/* -------------------------------------------------------------- recent projects kenmerken */

#page .recentproject {
	width: 500px;
	padding-bottom:  10px;
}

#page .recentproject .description P {
  display: inline;
  padding: 0;
}

#page .recentproject .project-image {
	padding: 4px;
	border: 1px solid #e4e4e4;
	float: left;
	display: inline;
	margin-right: 10px;
}
#page .recentproject h4, #page h4 {
	font-family: tahoma, arial, verdana;
	text-transform: uppercase;
	font-size: 84%;
	color: #58585a;
	font-weight:  normal;
	margin: 0;
	padding: 10px 0 3px 0px;
}
#page .projects li a {
	color: #58585A;
}