/*  CSS for: visual styling [see styles_utility.css for resets/isotope/fonts] */

html {
	background: url(back_concrete.jpg);
	/* -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover; */
	}

body {
	font-family: 'OpenSansRegular', Helvetica, Arial, sans-serif;
	color:#000;
	font-size: 100%;
	margin:0px;
	padding:0px;
	}
#header {
	width:1060px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	height:50px;
	background: #444444;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU0NTQ1NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #444444 0%, #0e0e0e 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#0e0e0e));
	background: -webkit-linear-gradient(top,  #444444 0%,#0e0e0e 100%);
	background: -o-linear-gradient(top,  #444444 0%,#0e0e0e 100%);
	background: -ms-linear-gradient(top,  #444444 0%,#0e0e0e 100%);
	background: linear-gradient(top,  #444444 0%,#0e0e0e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#0e0e0e',GradientType=0 );
	-webkit-border-top-right-radius: 12px;
	-webkit-border-top-left-radius: 12px;
	-moz-border-radius-topright: 12px;
	-moz-border-radius-topleft: 12px;
	border-top-right-radius: 12px;
	border-top-left-radius: 12px;
	}
h1	{font-size: 260%;font-family: 'OpenSansLight', Arial, Helvetica, sans-serif; color: #fff;letter-spacing:4px;}
h2	{font-size: 120%;font-family: 'OpenSansBold', Arial, Helvetica, sans-serif;display:block;margin-bottom:10px;}
h3	{font-size: 104%;font-family: 'OpenSansRegular', Arial, Helvetica, sans-serif;display:block;color:#999;}
h4  {font-weight:bold;display:block;margin-bottom: 8px;}
p	{font-family: 'OpenSansRegular', Arial, Helvetica, sans-serif;margin-bottom:20px;line-height: 155%;font-size: 97%;}
p.fine	{font-size: 84%; line-height: 125%;}
.strong {font-family: 'OpenSansBold';font-weight:600;display:block;margin-top: 8px;color: #444;}
.small{font-size:70%;font-weight:normal;}
a:link {color:#0066cc;text-decoration: none;}      /* unvisited link */
a:visited {color:#0066cc;text-decoration: none;}  /* visited link */
a:hover {color:#0066ff;text-decoration: underline;}  /* mouse over link */
a:active {color:#660000;text-decoration: underline;}  /* selected link */

a.word { /* show Word doc image along with link text */
	background: url(word.gif) no-repeat 6px center;
	padding-left: 30px;
	}
a.pdf { /* show PDF doc image along with link text */
	background: url(pdf.gif) no-repeat 6px center;
	padding-left: 30px;
	}
a.images { /* show "images" image along with link text */
	background: url(images.png) no-repeat 6px center;
	padding-left: 30px;
	}
a.html { /* show "html page" image along with link text */
	background: url(page.png) no-repeat 6px center;
	padding-left: 30px;
	}
h1 a:link, h1 a:visited {font-family: 'OpenSansLight', Arial, Helvetica, sans-serif; color: #fff;text-decoration:none;}
h1 a:hover, h1 a:active {font-family: 'OpenSansLight', Arial, Helvetica, sans-serif; color:#F5D053;text-decoration:none;}

br.clearfix { clear: both; }

/* #wrapper {width:100%; padding: 0 0 100px 0;margin:0; background: #ddd;} */
#nav_container {width: 1020px;padding: 0;margin-left: auto; margin-right:auto;}
#logo {
	width: 320px;
	float:left;
	line-height: 46px;
	margin-left:10px;
	}

/* top-level site navigation */
#navigation {
	height: 50px;
	padding: 0;
	line-height: 46px;
	float: right;
	margin-right: 100px;
	}
#navigation a:link, #navigation a:visited {
	font-size: 100%;
	text-decoration: none;
	font-family: 'OpenSansSemiBold', Arial, Helvetica, sans-serif;
	color: #fff;
	}
#navigation a:hover, #navigation a:active {
	font-size: 100%;
	text-decoration: none;
	font-family: 'OpenSansSemiBold', Arial, Helvetica, sans-serif;
	color:#F5D053;
	}
#navigation ul {
	list-style: none;
	}
#navigation ul li {
	float:left;
	padding: 0;
	margin: 0;
	}
#navigation ul li:hover {
	background: url(ie_navbackground.png); /* for IE browsers that don't get rgba - a #000 pixel with 50% opacity */
	background: rgba(0,0,0,0.2);
	}
#navigation ul li a {
	display:block;	padding: 0px 60px;}
#navigation a.backlink {
	font-size: 60%;font-family: 'OpenSansRegular', Arial, Helvetica, sans-serif;}
#navigation .current_page a {
	color:#F5D053;
	}

/* main body of page for content */
#body_wrapper {
	padding: 20px;
	width: 1020px;
	margin-left: auto;
	margin-right:auto;
	background: #fff;
	-webkit-box-shadow: 0px 0px 12px rgba(50, 50, 50, 0.3);
	-moz-box-shadow:    0px 0px 12px rgba(50, 50, 50, 0.3);
	box-shadow:         0px 0px 12px rgba(50, 50, 50, 0.3);
	-webkit-border-bottom-right-radius: 12px;
	-webkit-border-bottom-left-radius: 12px;
	-moz-border-radius-bottomright: 12px;
	-moz-border-radius-bottomleft: 12px;
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
	}
#body_leftcol {
	float:left;
	background:#e5e5e5;
	width:320px;
	border-radius: 5px;
	padding-bottom: 20px;
	}
#body_leftcol h2 {margin-left: 10px;}
#body_leftcol iframe { margin-left: 10px;}
#body_leftcol p.fine {
	width:300px;
	padding: 0 10px 0 10px;
	}
#body_leftcol img {
		margin: 10px 0 40px 10px;
	}
#body_rightcol {
	width:660px;
	float:right;
	position:relative;
	}
#body_rightcol p.fine.left {
	float:left;
	width:45%;
	}
#body_rightcol p.fine.right {
	float:right;
	width:45%;
	}
#body_rightcol iframe {
	margin:0px 20px 0 0;
	z-index: 10;
	}
#body_rightcol #ddcam {position:relative;float:left;}
#body_rightcol #ddcam img {margin:0 0 20px 80px;}
#body_rightcol #ddcam p {width:300px;}
ul.writing {line-height:24px;}
ul.writing li {
	margin-bottom:10px;
	padding-bottom:4px;
	line-height:26px;
	padding-left: 36px;
	background-repeat: no-repeat;
	}

.caption {display:block;font-size: 75%; margin-bottom:25px;}

#summary {
	width:616px;
	background-color: #efefef;
	padding:0 12px 0 12px;
	border: 1px solid #ddd;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	}

/* work sample details lightbox */
#work_samples{
	position: relative;
	z-index:100;
	width:100%;
	}
#button_holder {
	position:relative;
	z-index:3000;
	top:250px;
	margin: auto;
	max-width:1200px;
	}
#button_previous {
	float:left;
	margin-left: 20px;
	font-size: 150%;
	font-family: 'OpenSansSemiBold', Arial, Helvetica, sans-serif;
	color:#ccc;
	cursor:pointer;
	padding:10px;
	border-radius: 10px;
	background: #666;
	/* RGBa with 0.6 opacity */
	background: rgba(55, 55, 55, 0.6);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}
#button_next {
	float:right;
	margin-right: 20px;
	font-size: 150%;
	font-family: 'OpenSansSemiBold', Arial, Helvetica, sans-serif;
	color:#ccc;
	cursor:pointer;
	padding:10px;
	border-radius: 10px;
	background: #666;
	/* RGBa with 0.6 opacity */
	background: rgba(55, 55, 55, 0.6);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}
 #button_next:hover {background: rgba(0, 0, 0, .7);color:#0066cc;}
#button_previous:hover {background: rgba(0, 0, 0, .7);color:#0066cc;}

a:link.button  {text-decoration: none;}
a:visited.button  {text-decoration: none;}
a:hover.button  {text-decoration: none;}
a:active.button  {text-decoration: none;}
.detail_pane {
	position: relative;
	top: 0;
	background-color: #efefef;
	padding:24px;
	width: 850px;
	margin-left:auto;
	margin-right:auto;
	border-radius: 12px;
	z-index:2000;
	-webkit-box-shadow: 0px 10px 12px rgba(0, 0, 0, 1.0);
	-moz-box-shadow:    0px 10px 12px rgba(0, 0, 0, 1.0);
	box-shadow:         0px 10px 12px rgba(0, 0, 0, 1.0);
	}
.detail_background {
	position: absolute;
	top: -20px;
	background: #333;
	/* RGBa with 0.6 opacity */
	background: rgba(0, 0, 0, 0.8);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	margin:0;
	z-index:1000;
	width:100%;
	height:3000px;
	padding-top:20px;
	}
.detail_pane:hover {cursor:pointer;}
div.detail_pane h2 {float:left;margin-bottom:20px;}
div.detail_pane h3 {float:right;margin-bottom:20px;}
div.detail_pane img {
	-webkit-box-shadow: 0px 1px 5px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 1px 5px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 1px 5px rgba(50, 50, 50, 0.75);
	margin: 10px 0 20px 0;
	}
div.detail_pane img:hover { cursor:default;}
.detail_images {float:right;}
.detail_text {float:left;}
#details_couponsAB .detail_text {width:490px;}
#details_friendfinder .detail_text {width:430px;}
#details_speeddate  .detail_text {width:400px;}
#details_persona  .detail_text {width:430px;}
#details_hitachi  .detail_text {width:350px;}
#details_couponsUX  .detail_text {width:400px;}
#details_mobile_tablet .detail_text {width:400px;}
#details_mobile_giq .detail_text {width:450px;}
div.detail_pane ul {line-height:24px;}
div.detail_pane ul li {
	margin-bottom:10px;
	padding-bottom:4px;
	line-height:26px;
	padding-left: 36px;
	background-repeat: no-repeat;
	}

/* END work sample details lightbox */


/* START isotope work samples thumbnail container */

#container {
	margin-bottom:20px;
	}
#container p {
	font-size: 65%;
	line-height:105%;
	font-family: 'OpenSansSemiBold', Arial, Helvetica, sans-serif;
	text-align:center;
	margin: 2px 0 0 0;
	}
#container img {
	border-radius: 7px;  /* this creates the illusion of a rounded-corner box for the shadow   */
	-webkit-box-shadow: 0px 1px 5px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 1px 5px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 1px 5px rgba(50, 50, 50, 0.75);
	cursor: pointer;
	}
#container img:hover {
	-webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.75);
	-moz-box-shadow:    0px 1px 8px rgba(0, 0, 0, 0.75);
	box-shadow:         0px 1px 8px rgba(0, 0, 0, 0.75);
	cursor: pointer;
	}
.element {
	text-align:center;
	width:80px;
	margin: 0 24px 15px 0;
	padding: 4px 2px 0 2px;
	}
ol.portfolio {
	list-style-type:decimal;
	display:block;
	margin-left: 24px;
	line-height:180%;
	}