/* dpqb.net master CSS */

/* color reference
---------------------------
background: #e6e6e6 (top) blends to #d2d2d2 (bottom)
text: #222
light text: #888
links: #4990ff
---------------------------*/

/* css reset 
---------------------------*/
html, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strike, strong, sub, sup, 
tt, var, 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; vertical-align: baseline; background: transparent; }
table{ border-spacing: 0; border-collapse: collapse; }
caption, th, td{ text-align: left; font-weight: normal; }
blockquote, q{ quotes: none; }
:focus{ outline: 0; }


/* general
---------------------------*/
body{
	background:#d2d2d2 url(../images/bg.gif) repeat-x top left;
	color:#222;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin:0 0 10px 0;
	padding:0 0 10px 0;
}
#page{
	float:left;
	margin:0 auto;
}
p{
	font-size:0.85em;
	line-height:1.5em;
}


/* links
---------------------------*/
a{
	color:#0087ef; /* #4990ff 0087ef */
	font-size:1.0em;
	text-decoration:none;
}
a:hover{
	color:#222;
}
/* button effect */
a:active{
	position:relative;
	top:1px;
}


/* header
---------------------------*/
#header{
	float:left;
	width:927px;
}
#stamp{
	background:url(../images/stamp.png) 0 0 no-repeat;
	float:left;
	height:127px;
	width:240px;
}
h1{
	text-indent:-99999px;
}
h1{
	background:url(../images/dpqb.png) 0 0 no-repeat;
	height:54px;
	margin:30px auto 20px auto;
	width:154px;
}


/* projects & bookmarks
---------------------------*/
#portfolio{
	margin:10px 0 10px 235px; /* alternate top offset: 120px */
}
#services p, 
#contact p{
	font-family: Georgia, serif;
}
.block{
	background:#fff;
	display:none;
	position:absolute;
	/* rounded corners in newer browsers (CSS3) */
	-khtml-border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}
.block div{
	padding:10px;
}
h2,
h3{
	color:#222;
	font:normal 1.4em Verdana, sans-serif;
}
.block h2{
	margin:0 0 3px 0;
}
.new{
	text-indent:-99999px;
}
.description{
	color:#333;
	margin:0 0 10px 0;
}
.roles,
.technologies,
.tags{
	color:#999;
	font-size:0.7em;
	line-height:1.4em;
	margin:2px 0 0 0;
	text-transform:uppercase;
	word-spacing:3px;
}
.roles,
.tags{
	margin:10px 0 0 0;
}
.technologies{
	margin-bottom:-2px;
}
.new{
	background:url(../images/new.gif) 0 0 no-repeat;
	height:31px;
	left:184px;
	position:absolute;
	top:-2px;
	width:52px;
}
/* project blocks */
.project a{
	width:320px;
	margin:0 10px 0 -10px;
	padding:5px 15px 6px 10px;
	background:#fff url(../images/arrow.gif) 100px right no-repeat;
}
#portfolio .project a:hover{
	margin:0 10px 0 -12px;
	padding:5px 15px 6px 12px;
	background:#999 url(../images/arrow.gif) center right no-repeat;
	color:#fafaff;
}
/* info blocks */
.info{
	background:none;
}
.info div{
	padding:0 10px;
}
.info p{
	font:1.15em/1.45em Georgia, serif;
	color:#222;
}
.info a{
	color:#0087ef; /* 4990ff 0087ef*/
}
.info a:hover{
	color:#222;
}
/* site credit block */
.credits{
	background:#e6e6e6;
}
.credits .roles,
.credits .technologies{
	color:#888;
}
/* screenshots */
.screen{
	display:none;
}
p.caption{
	margin:5px 0 0 0;
	font-size:0.75em;
	line-height:1.4em;
}


/* bookmarks
---------------------------*/
#bookmarks{
	margin:10px 0 10px 240px; /* alternate top offset: 120px */
}
#bookmarks h2{
	font-size:1.1em;
}
#bookmarks p.description{
	font-size:0.80em;
	line-height:1.4em;
}

#bookmarks .project a{
	background:none;
}
/*
#bookmarks .project:hover{
	border:1px solid #ebeb9c;
}
*/
#bookmarks .project a:hover{
	color:#222;
}
/*
#bookmarks .tags a{
	position:relative;
	color:#999;
	font-size:0.8em;
	line-height:1.4em;
	margin:2px 6px 0 0;
	padding:0;
	text-transform:uppercase;
}
#bookmarks .tags a:hover{
	text-decoration:underline;
}
*/
/*
----------------------
Gradation backgrounds - scheme #1
----------------------
.bookmark1{
	background:rgb(255,255,255);
}
.bookmark2{
	background:rgb(253,253,253);
}
.bookmark3{
	background:rgb(251,251,251);
}
.bookmark4{
	background:rgb(249,249,249);
}
.bookmark5{
	background:rgb(247,247,247);
}
.bookmark6{
	background:rgb(245,245,245);
}
.bookmark7{
	background:rgb(243,243,243);
}
.bookmark8{
	background:rgb(241,241,241);
}
.bookmark9{
	background:rgb(239,239,239);
}
.bookmark10{
	background:rgb(237,237,237);
}
.bookmark11{
	background:rgb(235,235,235);
}
.bookmark12{
	background:rgb(233,233,233);
}
.bookmark13{
	background:rgb(231,231,231);
}
.bookmark14{
	background:rgb(228,228,228);
}
.bookmark15{
	background:rgb(224,224,224);
}
.bookmark16{
	background:rgb(221,221,221);
}
.bookmark17{
	background:rgb(218,218,218);
}
.bookmark18{
	background:rgb(215,215,215);
}
.bookmark19{
	background:rgb(213,213,213);
}
.bookmark20{
	background:rgb(210,210,210);
}
*/
/*
----------------------
Gradation backgrounds - scheme #2
----------------------
*/
.bookmark1, 
.bookmark2,
.bookmark3,
.bookmark4,
.bookmark5{
	background:rgb(255,255,255);
}
.bookmark6,
.bookmark7,
.bookmark8,
.bookmark9,
.bookmark10{
	background:rgb(239,239,239);
}
.bookmark11,
.bookmark12,
.bookmark13,
.bookmark14,
.bookmark15{
	background:rgb(226,226,226);
}
.bookmark16,
.bookmark17,
.bookmark18,
.bookmark19,
.bookmark20{
	background:rgb(217,217,217);
}

/*
----------------------
Color backgrounds - scheme #3
----------------------
*/
/*
.bookmark1, 
.bookmark2,
.bookmark3,
.bookmark4,
.bookmark5{
	background:#fff;
}
.bookmark6,
.bookmark7,
.bookmark8,
.bookmark9,
.bookmark10{
	background:#dfc46b;
}
.bookmark11,
.bookmark12,
.bookmark13,
.bookmark14,
.bookmark15{
	background:#ea6c32;
}
.bookmark16,
.bookmark17,
.bookmark18,
.bookmark19,
.bookmark20{
	background:#da372e;
}
*/


/* print
---------------------------*/
@media print{ 
	h1, 
	h2,
	h3,
	p, 
	.new{
		color:#000;
	}
	.project{
		width:100% !important;
		padding:10px 0 0 0;
		border-top:1px solid #000;
	}
}