/*
    AUTHOR: JERE SALONEN
            me@jeresalonen.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
@font-face {
	font-family: 'SangBleuBPSansLight';
	src: url('sangbleubpsans-light-webfont.eot');
	src: local('☺'), url('sangbleubpsans-light-webfont.woff') format('woff'), url('sangbleubpsans-light-webfont.ttf') format('truetype'), url('sangbleubpsans-light-webfont.svg#webfont9GwLTJ2o') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* BASIC PAGE SETUP, BASIC TYPOGRAPHY */
body, html {height: 100%; background-color: #dddee0;}
body {font-weight: normal; font-style: normal; line-height:normal; font-family: 'SangBleuBPSansLight',Courier new, Helvetica, sans-serif; font-size-adjust: 0.48;}
p {font-size: 12px; line-height: 15px; color: #8a8b8d;}
a {color: #8a8b8d; text-decoration: none; }
a:hover {text-decoration: line-through;}
a.selected {text-decoration: line-through;}

#page-wrap {height: 100%;}



/* TOOLBOX CSS */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }

/* LOADING */
#loading {height: 100%; width: 100%; position: fixed; color: #8a8b8d; z-index: 9999; background-color: #000;}
#load-top {color: #fff;}
#load-bot {padding-top: 12px;}
.outer {height: 100%; width: 100%; overflow: visible;} /* or without overflow */
.outer[class] {display: table; position: static;}

.middle {position: absolute; top: 50%;} /* for explorer only*/
.middle[class] {display: table-cell; vertical-align: middle; position: static;}

.inner {position: relative; top: -50%;} /* for explorer only */
.horizontal {margin-left: auto; margin-right: auto; text-align: center;}

#loading-wrap {width: 400px;}
#loading-bar {width: 100%; height: 1px; background-color: #3F3F3F; margin: 6px;}
#loading-progress {width: 0%; height: 1px; background-color: #dddee0;}
/* optional: #inner[id] {position: static;} */


/* CONTENT */
#content {}


/* HEADER */
#header {margin: 0 auto; width: 100%; text-align: center; position: relative; top: 50px;}
a#home {text-decoration: none;}
span#ramon {color: #000;}
#logo-line {position: relative; top: 6px; width: 400px; height: 12px; border-top: 1px solid #8a8b8d; text-align: center; margin: 0 auto;}
.gray-text {color: #8a8b8d;}

/* CENTER */
.center-wrap {position: relative; top: 100px; width: 100%; }

/* IMAGE-GALLERY */
#prev {position: absolute; left: 0px; top: 0px; text-align: right; width: 50px; overflow: hidden; z-index: 100;}
#next {position: absolute; right: 0px; top: 0px; text-align: left; width: 50px; overflow: hidden; z-index: 100;}

/* FOOTER */
#footer {text-align: center; margin: 0 auto; font-size: 12px; line-height: 15px; position: relative; top: 125px; width: 800px; padding-bottom: 15px;}
#clients {margin: 0 auto;}
#clients li {float: left;}

/* INFO */
div#info {color: #8a8b8d; padding-bottom: 20px; width: 100%; text-align: center;}
#info li.title {text-decoration: underline; padding-top: 15px;}
ul.info {font-size: 15px; line-height: 18px;}