/* -----
Ateljé Altmann
Version 0.1
2009-07-20
----- */


/* ----- BASIC HTML/BROWSER DEFINITIONS ----- */

/* resetting default browser styles */
*{margin:0px;padding:0px;}

/* removing borders from linked images */ 
a img{border:none;}

/* removing extra margin from form elements */
form{margin:0px;}

/* default font */
body, p, h1, h2, h3, h4, h5, h6, td, pre{
	font-family: Arial, Helvetica, tahoma, Verdana, sans-serif; 
	color: #000;
}

/* link colors */
a:link{color:#000;text-decoration:none;}
a:visited{color:#000;text-decoration:none;}
a:hover{color:#7ea4d7;text-decoration:none;}
a:active{color:#000;text-decoration:none;}

p a:link{color:#888888;text-decoration:none;}
p a:visited{color:#888888;text-decoration:none;}
p a:hover{color:#7ea4d7;text-decoration:none;}
p a:active{color:#888888;text-decoration:none;}

/* form element text */
select, textarea{
	font-family: Verdana, tahoma, Arial, Helvetica, sans-serif;
	color: #000;
}

input{
	font-family: Verdana, tahoma, Arial, Helvetica, sans-serif;
	color: #000;
	padding: 1px 0px;
}

/* body formatting */
body{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	background-color:#fff;
	text-align:center;
/* font size is reset to where 1em = 10px, this will make fonts
   behave better across different browsers */
	font-size:62.5%;
	line-height:1.5em;
}


/* ----- HEADERS AND PARAGRAPHS ----- */

h1{
	margin:0;
	padding:0 0 0.5em 0;
	font-size:2em;
	font-weight:bold;
	line-height:2em;
}

h2{
	margin:0;
	font-size:1em;
	font-weight:bold;
}


/* paragraphs */
p{	padding:0 0 1.2em 0;
	text-align:left;
	line-height:1.2em;
	margin:0px;
}


/* ----- STRUCTURAL AREA DEFINITIONS ----- */

/* container in which the areas are placed */
#areacontainer{
	width:848px;
	height:100%;
	margin:0px 0px 0px 106px;
	text-align:left;
	font-size:1.2em;
}

/* public site header */
.headerarea{ 
	width:848px;
	height:106px;
	float:left;
	clear:both;
}

.headerbox{ 
	width:626px;
	height:18px;
	padding-bottom:10px;
	margin:0 10px 3px 0;
	background-color:#b5d4fe;
	float:right;
	clear:both;
}

/* this is where the content is placed */
.contentarea{
	width:848px;
	padding-top:10px;
	text-align:left;
	float:left;
	clear:both;
}

/* the footer is separated from the content area */
.footerarea{
	width:838px;
	height:50px;
	float:left;
	clear:both;
}



/* ----- COLUMNS ----- */

/* column container, in which all columns are enclosed */
.columncontainer{
	clear:both;
	overflow:hidden;
}

/* columns */
.column {
	width:202px;
	margin-right:10px;
	text-align:left;
	float:left;
}

.doublecolumn {
	width:414px;
	text-align:left;
	float:left;
}

.triplecolumn {
	width:626px;
	text-align:left;
	float:left;
}


/* ----- GENERAL FORMATTING ----- */

/* breaks the flow, plus expands a div containing
other divs if placed at the bottom  */ 
.breaker{
	height:1px;
	margin:0 0 -1px 0;
	padding:0;
	line-height:1px;
	background-color:#fff;
	visibility:hidden;
	clear:both;
}

/* higher (10px) version of breaker */
.breakerspace{
	height:1em;
	line-height:1em;
	background-color:#fff;
	visibility:hidden;
	clear:both
}

/* horizontal lines */

.hrwide{
	width:838px;
	height:1px;
	line-height:1px;
	overflow:hidden;
	margin:0 10px 5px 0;
	padding:0;
	background-color:black;
}

.hrnarrow{
	width:626px;
	height:1px;
	line-height:1px;
	overflow:hidden;
	margin:5px 0 0 0;
	padding:0;
	background-color:black;
	float:right;
	clear:both;
}

.hrimage{
	width:414px;
	height:1px;
	line-height:1px;
	overflow:hidden;
	margin:5px 0 5px 0;
	padding:0;
	background-color:black;
	float:left;
	clear:both;
}


/* general alignment classes */
.center{
	text-align:center;
}

.divcenter{
	margin:0 auto;
}



.right{
	float:right;
	display:inline;
}


/* general color */
.red{
	color:#A31D1D;
}

.grey{
	color:#777;
}


/* ----- IMAGES ----- */


img.left{
	margin:0;
	padding:0;
	float:left;
}
 

img.right{
	float:right;
}

img.inline{
	display:inline;
}

img.middle{
	vertical-align:middle;
}