/* @group • Essentials */

/* Brand Repubic CSS Framework
/* Template:CSS_FRAMEWORK_BASE*/

/* Author:Jurre-Jan Smit*/

/* Version:0.6*/

/* Date:29 - 08 - 08*/

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

/* Preferable editor:CSSEdit */

/* @group Library */

/*Reset browser defaults*/

@import "lib/reset.css";

/*Setting some decent font defaults*/

@import "lib/typography.css";

/* Simple form styles -Optional 

@import "lib/forms.css";*/

/* Tabbed menu styles -Optional 

@import "lib/plugins/tabs.css";*/

/* Reset Unordered List styles -Optional 

@import "lib/plugins/ul_menu.css";*/

/* @end */

/* @end */

/* @group Outer Frame */

html, body{
			margin : 0;
			padding : 0 ;
			color : #333333 ;
			overflow : auto ;
			}

body
			{
			background : url(http://img.creativeconnection.nl/static/background_1.jpg) center center fixed;
			}

.ie6 body
			{overflow-x:hidden;
			}

#container
			{
			margin-top : 50px;
			width : 100% ;
			white-space : nowrap ;
			}
.low #container{
			margin:10px 0 0 0;
			}

#content-container
			{
			white-space : nowrap ;
			height : 650px ;
			background-image : url(http://img.creativeconnection.nl/static/000-0_05.png) ;
			display : block ;
			position:absolute ;
			left :230px;
			right : 0px;	
			overflow: hidden;
			}

.low #content-container
			{
			height : 550px ;
			}

.webkit #content-container, .ff3 #content-container
			{
			background-image : none ;
			background-color : rgba(0,0,0,0.5) ;
			}

.ie6 #content-container
			{		
			background-image : none ;
			background-color : transparent ;			
			}
.contentwrapper {
			width : 20000px;
			}

#menu-container
			{
			height : 650px ;
			background-image : url(http://img.creativeconnection.nl/static/000-0_05.png) ;
			display : block ;
			position:absolute ;
			}

.low #menu-container
			{
			height : 550px ;
			}

.webkit #menu-container, .ff3 #menu-container
			{			
			background-image : none ;
			background-color : rgba(0,0,0,0.5) ;
			}

.ie6 #menu-container{		
			background-image : none ;
			background-color : transparent ;
			}

.shield{
			position : absolute;
			right : -20px;
			left :0px;
			top : 0px;
			bottom : -10px;
			background :url(http://img.creativeconnection.nl/nixel.gif);
			z-index : 10000;
			height : 610px;
			cursor : pointer;			
			}

.ie6 .shield{
			display : none;		
			}

.low .shield{
			height : 510px;			
			}
p.creds a{
			position : absolute;
			right : 3px;
			bottom : 3px;
			font-family:helvetica,arial;
			text-transform:uppercase;
			font-weight:600 ;
			font-size : 9px;
			line-height:9px;
			margin : 0;
			padding:0;
			color : #fff;
			opacity:0.4;
			filter: alpha(opacity=40);
			}

p.creds a:hover{
			opacity:0.7;filter: alpha(opacity=70);
			text-decoration:none ;
			}
/* @end */

/* @group Menu */

#menu
			{
			
			background-image : url(http://img.creativeconnection.nl/static/FFF-0_08.png) ;
			display : block ;
			padding : 10px ;
			width : 200px ;
			height : 590px ;
			margin : 20px 10px 20px 0px ;
			white-space: normal ;
			vertical-align : bottom ;
			position: relative ;
			}

.low #menu
			{
			height : 490px ;
			}

.ff3 #menu, .webkit #menu		{
			background-image : none ;
			background-color : rgba(255,255,255,0.8) ;			
			}

.ie6 #menu		{
			background-image : none ;
			background-color : rgb(255,255,255) ;		
			}

#menu h1 a{
			display : block;
			width : 200px;
			height : 200px;
			background : url(http://img.creativeconnection.nl/static/logo.png) center center no-repeat;
			text-indent : -999px;
			overflow : hidden;			
			}

.ie6 #menu h1 a{
			background-image : url(http://img.creativeconnection.nl/static/logo_matte.gif);
			}

#menu .menu{
			list-style : none ;
			position : absolute;
			bottom : 0px;
			width : 160px;
			margin : 20px 30px;
			padding : 10px 0;
			left : 0;
			font-size : 14px;
			line-height : 24px;
			text-align : right ;
			border : dotted #999;
			border-width : 1px 0;
			}
#menu .menu a{			
			color : #000;
			}

#menu .menu a.active{			
			color : #E21716;
			}

div.nav{
			display : none ;
			width : 130px;			
			background-image : url(http://img.creativeconnection.nl/static/000-0_05.png) ;
			height : 20px;
			margin : 0 0px;
			padding : 5px;
			z-index : 100;
			position:absolute;
			top:700px;
			}
			
.ff3 div.nav, .webkit div.nav{
			background-image : none ;
			background-color : rgba(0,0,0,0.5) ;			
			}

.ie6 div.nav{
			background-image : none ;
			background-color : #fff;
			color: #333;
			top:690px;						
			}

.low #container div.nav{
			top:560px;						
			}

.low.webkit #container div.nav{
			top:568px;						
			}

.ie6.low #container div.nav{
			top:550px;						
			}

.ie6 div.nav a{
			background-image : none ;
			color : #333;	
			}

div.nav a{
			color:#fff;
			font-family:Helvetica, arial;
			background : url(http://img.creativeconnection.nl/static/arrows-right.png) no-repeat 100px center;
			display : block;
			height : 20px;
			line-height:20px;
			margin-left : 5px;
			}

div.nav.previous a{
			background : url(http://img.creativeconnection.nl/static/arrows-left.png) no-repeat 7px center;
			text-align:right ;
			margin-right : 10px ;
			margin-left : 0 ;
			}
div.next	{		
			right : 10px;
			}
div.previous{		
			left : 230px;
			
			}
			


/* @end */

/* @group Content */

.page
			{
			float : left ;
			clear : none ;
			display : inline ;
			border : 10px solid ;
			border-color :  rgb(255,255,255);
			background-image: url(http://img.creativeconnection.nl/static/diago-stripe_fff_90.png) ;
			height : 570px ;
			margin : 20px 0px 0px 10px ;
			white-space:normal;
			padding:10px;
			vertical-align :bottom;
			position : relative ;
			overflow : hidden ;
			}

.page .page-content
			{
			width : 520px;
			}

.low .page
			{
			height : 470px
	}
.ff3 .page, .webkit .page, .ff3 #content-container .page-sub .page-content, .webkit #content-container .page-sub .page-content{
			border-color :  rgba(255,255,255,0.5);
			background-color :  rgba(255,255,255,0.9);	
			background-image: url(http://img.creativeconnection.nl/static/diago-stripe.png) ;
			}			

.ie6 .page, .ie6 #content-container .page-sub .page-content
			{
			background-image: url(http://img.creativeconnection.nl/static/diago-stripe_fff.gif) ;
			border-color :  rgb(255,255,255);
			}

.page.first
			{
			margin-left : 0;
			}

.page.last
			{
			margin-right : 3000px;
			}
.page a.email{
			display : block;
			text-indent : -9999px;
			width : 20px;
			height : 18px;
			overflow : hidden ;
			background : none ;
			margin-right : 10px;
			}

.page a.email:hover{
	background:none ;
			}
.page a.email span{
			display : block;
			width : 18px;
			height : 15px;
			overflow:hidden ;
			text-indent : -9999px;
			background : url(http://img.creativeconnection.nl/static/envelope.gif) 0px 0px;
			position:relative;
			top : 2px;
			right : 2px;
			
			}

.page a.email:hover span{
			display : block;
			width : 18px;
			height : 15px;
			overflow:hidden ;
			text-indent : -9999px;
			background : url(http://img.creativeconnection.nl/static/envelope.gif) 0 16px;;
			
			}
/* @end */

/* @group Page Contents */

.page .wrapper{
			width : 300px;
			height : 110px;
			position:relative;
			margin:0 0 30px;
			}
.page .heading{
			position:absolute;
			bottom : 0px;
			width : 280px
			}

.low .page .wrapper{
			width : 500px;
			height : 60px;
			}
.low .page .heading{
			width : 500px
			}
			

.page h2
			{
			font-size : 34px;
			line-height : 32px;
			letter-spacing:-1px;
			color : #fff;
			background : #333;
			display : inline;
			font-weight:100 ;
			margin : 0;
			padding : 0;
			}

.ie7 .page h2
			{
			line-height : 36px;
			}

.page p
			{
			font-size : 14px;
			line-height : 22px;
			color : #333;
			font-weight:100 ;
			margin : 0 0 10px;
			padding : 0;
			}

.low .page p
			{
			font-size : 13px;
			line-height : 18px;
			color : #333;
			font-weight:100 ;
			margin : 0 0 10px;
			padding : 0;
			}

.page p em
			{
			color : #E21716;
			font-style:normal ;
			}

.page a
			{
			background:#E21716;
			padding : 0 2px;
			line-height:16px;
			color : #fff;
			display : inline-block;
			}

.page a:hover
			{
			background:#fff;
			color : #E21716;
			}

.page table
			{
			background : #fff;
			}

.page table caption
			{
			padding :5px;
			font-size : 14px;
			font-weight:bold ;
			background : #ccc;
			}

.page table td
			{
			padding-left : 5px;
			}



/* @end */

/* @group subpage */

#content-container .page-sub
			{
			float : left ;
			clear : none ;
			display : inline ;
			border : none ;
			background: none ;
			margin : 20px 0px 0px 10px ;
			padding : 0;
			height : 610px;
			}

#content-container .page-sub .sub .wrapper
			{
			display : none ;
			width :auto;
			height :auto;
			margin:0 0 30px;
			position:static
			}

#content-container .page-sub div.logo
			{
			text-align : left ;
			margin : 0px 0px 15px;
			padding : 15px;
			background :url(http://img.creativeconnection.nl/static/FFF-0_07.png) ;
			border : 2px solid rgb(230,230,230);
			width : auto ;
			
			}

.ff3 #content-container .page-sub div.logo, .webkit #content-container .page-sub div.logo
			{
			background : rgba(255,255,255,0.65);
			border : 2px solid rgba(190,190,190,0.5);			
			}

#content-container .page-sub div.logo ul
			{			
			padding : 0;
			margin:10px 0 0 0;
			list-style:none ;
			white-space:nowrap;
			height : 20px;
			}

#content-container .page-sub div.logo li
			{
			background:#333;
			color:#fff;
			padding :1px 2px;
			margin : 0 2px 2px 0;
			float : left ;
		font-size : 9px;
			line-height:16px;
			height : 16px;
			}
			

.low #content-container .page-sub
			{
			height : 510px;
			}

#content-container .page-sub .page-content
			{
			border : 10px solid ;
			border-color :  rgb(255,255,255);
			background-image: url(http://img.creativeconnection.nl/static/diago-stripe_fff_90.png) ;
			padding : 10px;
			overflow : hidden;
			height : 570px;
			}

.low #content-container .page-sub .page-content
			{
			height : 470px;
			}


			

/* @end */

/* @group submenu */
div.sub-wrapper{
			position : absolute;
			bottom : 0px;
			right : 10px;
			width : 150px;
			height : 124px;
			z-index : 100
			}

div.sub-wrapper .img{
			position : absolute;
			bottom : 10px;
			right : 5px;
			z-index : 100;
			}

ul.submenu{
			margin : 0px;
			padding : 10px 0px 10px 10px ;
			list-style : none;			
			z-index : 50;
			width : 405px;
			top : 0px;
			right : 130px;
			position:absolute;
			font-family:helvetica,arial;
			white-space:nowrap;				
			}

ul.submenu li{
			float : left ;
			height : ;
			padding : 0;
			margin : 0 4px 4px 0;
			background-image: url(http://img.creativeconnection.nl/static/000-0_05.png) ;
			height:18px;
			}

ul.submenu li a{
			padding:0px 4px;
			float : left ;
			font-size : 10px;
			line-height:18px;		
			text-transform:uppercase;
			font-weight:400 ;
			background: #E21716;
			position:relative ;
			top : 2px;
			left : 2px;
			}

ul.submenu li a:hover{
			top : 1px;
			left : 1px;
			}

ul.submenu li a.active{
			background: #333 ;
			color : #aaa;
			top : 0px;
			left : 0px;
			}


/* @end */

::selection {
			background:#fff; 
			color:#E21716;
}
::-moz-selection { 
			background:#fff; 
			color:#E21716;
}