@import url("reset.css");
@import url("typography.css");

/* @override http://newmarketing.garage.upstruct.com/css/framework.css */


#base{ width: 946px; height: 621px; background-color: white; position: absolute; top:50px; left:50px;
	border: 15px solid white;
}
#frame{ float: left; width: 946px; height: 621px; } 

#shadow-rigth{ width: 6px; height: 100%; float: right; background: url(../images/framework/shadow-right.gif) no-repeat; font-size: 0px; line-height: 0px; }
#shadow-bottom{ clear: both; height: 6px; background: url(../images/framework/shadow-bottom.gif) no-repeat; font-size: 0px; line-height: 0px; }


/*
///////////////////////////////////////////////////////////////////////////////////
//
//  Navigator / Navigation
//
///////////////////////////////////////////////////////////////////////////////////
*/
#logo{ position: relative; left: 215px; top: 30px; cursor: pointer; }
#navigator{ width: 295px; height: 613px; float: left; margin: 3px; }
#navigation{ position: relative; left: -45px; top: 75px; text-align: right; }
#navigation a{
	color: white;
	font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	font-size: 14px;
	text-decoration: none;
	line-height: 1.6em;
}
#navigation a:hover{ color: #0097C4;; }
#navigation a.active{
	color: #0097C4;
	text-decoration: none;
}
/*
///////////////////////////////////////////////////////////////////////////////////
//
//  Page containers
//
///////////////////////////////////////////////////////////////////////////////////
*/
#content{
	position:relative;
	padding: 0px;
	width: 642px;
	height: 613px;
	float: left;
	margin: 3px 0px 0px 0px;
}

.page-box{
	width: 602px;
	height: 570px;
	padding: 25px 20px 20px;
}

/*
///////////////////////////////////////////////////////////////////////////////////
//
//  Frontpage
//
///////////////////////////////////////////////////////////////////////////////////
*/
.frontpage-box,.frontpage-double-box{
	width: 172px;
	height: 260px;
	float: left;
	padding: 25px 20px 20px;
	overflow: hidden;
	/*width: 192px;
	height: 286px;
	float: left;
	padding: 10px;
	overflow: hidden*/;
}

.frontpage-double-box{ width: 387px; }

.frontpage-box h1,.frontpage-double-box h1{
	border-bottom: 1px dotted black;
}

.box-margins {
	margin-top:3px; margin-right:3px;
}


.box-margins-first {
	margin-right:3px;
}

.box-margins-last {
	margin-top:3px;
}

/*
#news-all-button{ float: left; position: relative; z-index: 201; top: -50px; left: 0px; width: 70px; padding: 5px; border-top: 3px solid white; border-bottom: 3px solid white; border-left: 3px solid white;
}*/

/*
///////////////////////////////////////////////////////////////////////////////////
//
//  Projects
//
///////////////////////////////////////////////////////////////////////////////////
*/
.list{ margin-top: 10px; }
.list a{ text-decoration: none; margin-right: 3px; margin-left: 3px; }
.list a:hover{ text-decoration: underline; }

#project-container{ width: 622px; overflow: hidden; position: relative;  }

.project{ width: 622px; height: 400px; float: left; }
.project-description{ margin-top: 10px; margin-bottom: 10px; }
#project-slider{ position: relative; left: 0px; width: 5000px; }
a.next-project,a.prev-project{ position: absolute; text-decoration: none; top: 382px; }
a.next-project{ left: 622px; }
a.prev-project{ left: 607px; }

/*
///////////////////////////////////////////////////////////////////////////////////
//
//  Box-colours
//
///////////////////////////////////////////////////////////////////////////////////
*/
/*.darkgrey{ background-color: #37393C; }
.lightgrey{ background-color: #9FA2A8; }
.orange{ background-color: #FF601B; }
.lime{ background-color: #50BB27; }
.blue{ background-color: #0097C4; }
.gold{ background-color: #7B5718; }
.white{ background-color: white; }*/
.darkgrey{ background-color: #37393C; }
.semigrey{ background-color: #999999; }
.lightgrey{ background-color: #D6D6D6; }
.orange{ background-color: #FF601B; }
.lime{ background-color: #50BB27; }
.blue{ background-color: #0097C4; }
.gold{ background-color: #7B5718; }
.white{ background-color: white; }

.preamble p {
	display: inline;
}

.readmore {
	display: inline;
/*	float: right;
	position: relative;
	top: -18px;*/
}

.frontpage-double-box {
	background: #d6d6d6 url(../images/framework/cellefyll-trans.png) no-repeat 20px 100%;
}

.frontpage-double-box .preamble {
	float: right;
	width: 215px;
}

.article-body h1 {
	font-size: 22px;
}

/* lightbox stuff */
.matrix-image {
 	float: left;
 	margin-right: 3px;
 	margin-bottom: 3px;
}
	
.matrix-image.last { margin-right: 0px; }

.matrix-image.last-row { margin-bottom: 0; }

.matrix-image a {
	display: block;
	height: 151px;
	width: 212px;
	background-repeat: no-repeat;
	background-position: top left;
}

.matrix-no-link {
	cursor: default;
}

#matrix-1  a { background-image: url('/public/image/matrix/1_1.jpg'); }
#matrix-1  a:hover { background-image: url('/public/image/matrix/1_1-over.jpg'); }
#matrix-2  a { background-image: url('/public/image/matrix/1_2.jpg'); }
#matrix-2  a:hover { background-image: url('/public/image/matrix/1_2-over.jpg'); }
#matrix-3  a { background-image: url('/public/image/matrix/1_3.jpg'); }
#matrix-3  a:hover { background-image: url('/public/image/matrix/1_3-over.jpg'); }
#matrix-4  a { background-image: url('/public/image/matrix/2_1.jpg'); }
#matrix-4  a:hover { background-image: url('/public/image/matrix/2_1-over.jpg'); }
#matrix-5  a { background-image: url('/public/image/matrix/2_2.jpg'); }
#matrix-5  a:hover { background-image: url('/public/image/matrix/2_2-over.jpg'); }
#matrix-6  a { background-image: url('/public/image/matrix/2_3.jpg'); }
#matrix-6  a:hover { background-image: url('/public/image/matrix/2_3-over.jpg'); }
#matrix-7  a { background-image: url('/public/image/matrix/3_1.jpg'); }
#matrix-7  a:hover { background-image: url('/public/image/matrix/3_1-over.jpg'); }
#matrix-8  a { background-image: url('/public/image/matrix/3_2.jpg'); }
#matrix-8  a:hover { background-image: url('/public/image/matrix/3_2-over.jpg'); }
#matrix-9  a { background-image: url('/public/image/matrix/3_3.jpg'); }
#matrix-9  a:hover { background-image: url('/public/image/matrix/3_3-over.jpg'); }
#matrix-10 a { background-image: url('/public/image/matrix/4_1.jpg'); }
#matrix-10 a:hover { background-image: url('/public/image/matrix/4_1-over.jpg'); }
#matrix-11 a { background-image: url('/public/image/matrix/4_2.jpg'); }
#matrix-11 a:hover { background-image: url('/public/image/matrix/4_2-over.jpg'); }
#matrix-12 a { background-image: url('/public/image/matrix/4_3.jpg'); }		
#matrix-12 a:hover { background-image: url('/public/image/matrix/4_3-over.jpg'); }