/**************************** B A S E L I N E ********************/

/*
	basic size 13px;
	line-height: 1.4 = 18px
*/

html {
	font-size: 13px; /*it's pixel time again*/
	font-family: helvetica, arial, sans-serif;
}


/* OPERA, well suck me sideways  - on OSX, the font is 1px to big…*/
/*
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	html {
		font-size: 12px; 
	}

}
*/

h1,h2,h3,h4,h5,h6,p,ul,ol,dl,table {
	/* "one row" of space between blocks*/
	margin-bottom: 18px;
}
/*
.below_space_1 {
	margin-bottom: 18px!important;
}
*/
ul ul, ol ol, dl dl, table table {
	/* but NOTHINg inside themselves*/
	margin-bottom: 0px;
}

/*IE6*/
ul ul, ol ol, dl dl, table table {
	/* but NOTHINg inside themselves*/
	_top: -5px;
}

blockquote {
	margin:18px;
}

h4,h5,h6,p,li,td,th, dt, dd, blockquote, button.a {
	line-height: 18px; /* keep that in sync with margin-bottom above*/
	top: 5px;	
}

br {
	line-height: 18px;
}

/* it depends how you lay your list out, the following is needed when:
	<ul>
		<li>item</li>
		<li>item2
			<ul>
				<li>litem3</li>
			</ul>
		</li>
	<ul>

*/
ul li ul, ol li ol {
	top: -5px;
}


/* OPERA */
/*
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	html {
		font-size: 12px; 
	}

	h4,h5,h6,p,li,td,th, dt, dd, blockquote, button.a {
		top: 6px;	
	}

}
*/


h1,h2,h3	{ 
	line-height: 36px; 
}
/* ATTENTION. YOU MUST CHECK IN ALL BROWSER'S THAT THE DESIRED FONT FITS F.E helvetica 36px for H1 fits for ALL except Opera, the latter needs 33px,
 SAME WITH H4 - in Opera you just cannot have font-size==lone-height */
h1 { font-size: 250%; top: 5px; }
h2 { font-size: 215%; top: 3px; }
h3 { font-size: 170%; top: 8px; }
h4 { font-size: 130%; top: 3px; }
h5 { font-size: 115%; top: 4px; }
h6 { font-size: 100%; top: 5px; }


/* default is 2 lines */
hr { 
	height: 4px; 
	margin: 18px auto 14px auto; 
}

/* IE6 */
hr { 
	_top: -6px;
	_margin: 18px auto 18px auto; 
}

/* invisible */
hr.invisible {
	background: transparent;
	color: transparent;
}

/* single line */
hr.single {
	margin: 7px auto 7px auto; 
}

/* TABLE, WHAT A FUCKING MESS */
table, td, th {
	border:none;
}

/* NO BORDER MOZ & SAF & OPERA */
table.nbo { 
	top: 5px; /* depends on font-size */
}

/* OPERA */
/*
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	table.nbo { 
		top: 6px;
	}
}
*/


/* NO BORDER IE*/
table.nbo { 
	top: 0px\9; 
}


/* ALL BORDER 1px MOZ */
table.abo { 
	border-top: solid 1px #000; 
	margin-bottom: 17px; /* if needed, then line-height - border */
}
table.abo td, table.abo th {
	border-bottom: solid 1px #000;
	padding: 4px 0 13px 0; /* top + bottom = line height - border */ /* top + border seems to be = nbo top */
}

/* OPERA */
/*
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	table.abo td, table.abo th {
		padding: 5px 0 12px 0;
	}
}
*/

/* ALL BORDER IE8*/
table.abo { 
	top: -4px\9; /* ? */
}
table.abo td, table.abo th {
	padding: 3px 0 14px 0\9; /* top + bottom = line height - border */ /* top + border seems to be = nbo top */
}

/* ALL BORDER IE6*/
table.abo { 
	_top: 1px; /* ? */
}

table.abo th,  table.abo td{
	_top: 0px;
}


/* ALL BORDER FF */
table.abo,  x:-moz-any-link  {
	top: 1px; /* border */
	margin-bottom: 18px; /* if needed, then line-height */
}

/* MIDDLE BORDER 1px WITH HEADER BORDER 2px*/
/* MOZ AND SAFARI AND OPERA */
table.mbo { 
	top: -1px; 
	margin-bottom: -1px; 
}

table.mbo th {
	font-weight: bold;
	border-bottom: solid 2px #000; 
	padding: 6px 0 12px 0; 
}

table.mbo td {
	border-top: solid 1px #000; 
	padding: 4px 0px 13px 0; /* same as abo */
}

/* OPERA */
/*
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	table.mbo th {
		padding: 7px 0 11px 0; 
	}
	table.mbo td {
		padding: 5px 0px 12px 0;
	}

}
*/


/* MIDDLE BORDER IE8*/
table.mbo { 
	top: -6px\9; /* ?? */
	margin-bottom: -2px\9; 
}
table.mbo th {
	padding-bottom: 13px\9; 
}
table.mbo td {
	padding: 3px 0px 14px 0\9; /* same as abo */
}

/* MIDDLE BORDER IE6*/
table.mbo th {
	_padding-bottom: 12px; 
}


/* BOXES*/
.bor0 {
	border: none;
	background: #CCC;
	top: 0px;
	padding: 5px 0 13px 0; /* padding + 2*border = line-height*/
	margin-bottom: 0px; 
}
/*IE8*/
.bor0 {
	top: 1px\9;
	padding: 4px 0 14px 0\9;
}

/*IE6*/
.bor0 {
	_top: 0px;
	_padding: 5px 0 13px 0;
}


.bor3 {
	border: 3px #000 solid;
	border-left: none;
	border-right: none;
	top: -2px; /* 1 - border */
	padding: 4px 0 8px 0; /* padding + 2*border = line-height*/
	margin-bottom: 0px; 
}

.bor1 {
	border: 1px #000 solid;
	border-left: none;
	border-right: none;
	top: 0px; /* 1 - border */
	padding: 4px 0 12px 0; /* padding + 2*border = line-height*/
	margin-bottom: 0px; 
}

/*IE6*/
.bor1 {
	_border-top: 2px #000 solid; /* ?!? +1 */
	_padding: 3px 0 12px 0; 
}

.bor3 {
	_border-top: 4px #000 solid; /* ?!? +1 */
	_padding: 3px 0 8px 0; 
}

/*for images no padding */
img.bor3 {
	top: -2px; /* 1 - border */
	margin-bottom: 12px;  /* 18 - 2*border */
	padding:0;
}


/* BOX UNDER - absolute positioned box in HTML is AFTER the content, but CSS moves it UNDER -> usable as background */
.under {
	position:absolute; 
	top:0; 
	left:0;
	z-index:-1000;
	width:100%;
	height: 100%;
	background: none;
}

/*IE8*/
.under {
	top: 1px\9;
}

/*IE6*/
.under {
	_top: 0px;
	_height: expression((ignoreMe = this.parentNode.offsetHeight)+"px");
}

/*
	BASIC HTML
	
	<div class="bgbox">
		<p>some text</p>
		<div class="under"></div>
	</div>
	
*/

/* let's try to visually center it vertically */
.bgbox {
	top: 8px;
	padding: 10px 18px 0px 18px;
	margin-bottom: 8px;
	z-index: 2;
}


/* some IE6 quirk ?!?, how else */
.bgbox {
	_padding-left: 0px;
	_padding-right: 0px;
}
.bgbox p {
	_margin-left: 18px;
	_margin-right: 18px;
}


/* IMG */
.x1 {
	height: 18px;
}
.x2 {
	height: 36px;
}
.x3 {
	height: 54px;
}
.x4 {
	height: 72px;
}
.x5 {
	height: 90px;
}
.x6 {
	height: 108px;
}
.x7 {
	height: 126px;
}
.x8 {
	height: 144px;
}
.x9 {
	height: 162px;
}
.x10 {
	height: 180px;
}
.x11 {
	height: 198px;
}
.x12 {
	height: 216px;
}
.x13 {
	height: 234px;
}
.x14 {
	height: 252px;
}
.x15 {
	height: 270px;
}