/* ------------ DEFAULT ------------ */

* { margin: 0pt; padding: 0pt;}
span, p, h1, h2, h3, h4, h5, h6, dt, .caps { font-size: 1.2em; font-weight: normal; font-style: normal; line-height: 1.25em; margin: 0pt; padding: 0pt; }

html {height: 100%}
body { font-family: Arial, Helvetica, sans-serif; font-size: 62.5%; color: #454647; margin: 0; padding: 0; text-align: left; background-color: #2c2d2d; height: 100%}
body, div { font-size: 10px;}

a:link:focus, a:visited:focus { -moz-outline : 0px; }
a { text-decoration: none; color: #0093D3; }
:focus, a { }
a:hover { }

em {font-weight: normal; font-style: normal}
blockquote {margin-bottom: .1em}
blockquote p {}
blockquote p:after {content: '"'}
blockquote p:before {content: '"'}

hr {clear: both; margin: 0; padding: 0; display: none;  }

ul { list-style-type: none; }

span, p, h1, h2, h3, h4, h5, h6, dt, .caps {font-size: 1.2em; font-weight: normal; font-style: normal; line-height: 1.25em;  margin: 0; padding: 0}

small
{
	font-family: Georgia,"Times New Roman",Times,serif;
	font-style: italic;
	font-variant: normal;
	font-weight: normal;
	font-size: 1.1em;
	line-height: 1.45em;
	font-size-adjust: none;
	font-stretch: normal;
	-x-system-font: none;
	color: #454647;
}

p em
{
	background-color: transparent;
	background-image: url("../images/hash_yellow.png");
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
}

img.floatLeft {margin: -5px 0 5px -5px}
img.floatRight {margin: 0 10px 10px 10px}

/* ------------ MISC ------------ */

#wrap {position: relative; margin: 0 0 0 2em; width: 96.9em; background-color: white; min-height: 100%; min-height: 969px;   }
#wrap-inner {padding-bottom: 14em}

.floatLeft {float: left; text-align: left}
.floatRight {float: right; text-align: right}
.left_col {float: left; width: 14.9em; padding-left: 1.5em; margin-right: 2.1em}
.right_col {float: left; width: 77.4em}
.cleaner {clear: both}

.no_line
{
	border-top-style: none;
	border-right-style-value: none;
	border-bottom-style: none;
	border-left-style-value: none;
	border-left-style-ltr-source: physical;
	border-left-style-rtl-source: physical;
	border-right-style-ltr-source: physical;
	border-right-style-rtl-source: physical;
	margin-top: 0.1em;
}

/*
.hidden {background-color: transparent}
*/


/* ------------ ALL ------------ */

#mission .right_col, #clients .right_col, #services .right_col, #follow .right_col { padding-bottom: 4em; }
#mentions, #locations, #clients, #projects, #services, #mission, #follow { overflow: hidden; width: 100%; }
#projects, #services, #follow, #clients, #mentions, #locations, #footer { background-color:#FFF; }

.column_2 {float: left; width: 35.9em}
.column_3 {float: left; width: 23.9em}
.column_4 {float: left; width: 18.4em}
.column_5 {float: left; width: 37.0em; margin-left:0.9em; }

.gutter9  {margin-right: 0.9em}
.gutter11 {margin-right: 1.1em}
.gutter21 {margin-right: 2.1em}
.gutter41 {margin-right: 3.1em}
.gutter51 {margin-right: 3.6em}

.thin_bar_379, .thin_bar_184 {height: 0.1em; background-color: #E0E1E2; display: block}
.thin_bar_379 {width: 37.9em}
.thin_bar_184 {width: 18.4em}

.dot_bar_184 {background: url(../images/checker_grey.png) repeat-x; height: 1px; margin-bottom: 0em}
.dot_bar_184 {width: 18.4em}

.big_paragraph {padding-top: .1em; padding-bottom: .3em}
.big_paragraph .caps {font: 2em/25px Arial, Helvetica, sans-serif; color: #1f1c1c}
.big_paragraph p {font: 2em/25px Georgia, "Times New Roman", Times, serif; color: #1f1c1c; padding-bottom: .5em }
.big_paragraph p .caps {font-size: .9em}
.big_paragraph p strong {font-style: italic}
.big_paragraph p em 
{
	font-style: normal; 
	background-color: transparent;
	background-image: url("../images/hash_yellow.png");
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
}
.big_paragraph p a 
{
	font: 12px Arial, Helvetica, sans-serif; display: block; 
	padding: 3px 0px 3px 33px;
	background: transparent url(../images/download.png) no-repeat center left;
}
.big_paragraph p a:hover 
{
	padding: 3px 0px 3px 33px; text-decoration:underline;
	background: transparent url(../images/download.png) no-repeat center left;
}

.megatitle em, .megatitle a, .megatitle strong { font-size: 1em; }
.megatitle, .megatitle em, .megatitle strong, .megatitle .caps, .megatitle a
{
	font-family: Georgia,"Times New Roman",Times,serif;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 2em;
	line-height: 30px;
	font-size-adjust: none;
	font-stretch: normal;
	-x-system-font: none;
	color: #1f1c1c;
}
.megatitle em { font-style: italic; }

.side_header
{
	padding-bottom: 0.5em;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #e0e1e2;
	padding-top: 3.9em;
}

.side_header_no_line
{
	padding-bottom: 0.5em;
	padding-top: 3.9em;
}

.standard_paragraph p {padding-bottom: 1.25em; line-height:1.5em;}
.standard_paragraph p a {display: block; }
.standard_paragraph p a:hover {display: block; background: url(../images/hash_white.png) repeat;}
.standard_paragraph h4 {font-family: "Arial Rounded MT Bold", Arial; color: #1e1c1c; padding-bottom: 0.83333333em}
.standard_paragraph h5 {font-family: "Arial Rounded MT Bold", Arial; padding-bottom: 0.41666667em}
.standard_paragraph small {display: block; padding-bottom: 1.36363637em; color: #939599}
.standard_paragraph blockquote {display: block; padding-left: 1em; margin-top: .1em; padding-top: .1em; padding-bottom: .3em; margin-bottom: 2em; border-left: 1px solid #e0e1e2}
.standard_paragraph blockquote p {font: normal normal 2em/25px Georgia, "Times New Roman", Times, serif; color: #1f1c1c; padding-bottom: 0em}
.standard_paragraph img {display: block; padding-bottom: 1em;}
.standard_paragraph ul {padding-bottom: 1em}
.standard_paragraph ul li {font-size: 1.2em; padding-bottom: 0.5em; list-style-position: inside; list-style-type: disc}

/* ------------ HEADER ------------ */

#header { height: 13em; background-color:#FFED00; }
#header img { float:left; }
#address { float:right; width:394px; margin-top:38px; }
#address h4 { font-family: "Arial Rounded MT Bold", Arial; color: #1e1c1c; padding-bottom: 0.83em}
#address p { padding-bottom: 0.83em; }
#address a { display: block; }
#address a:hover
{
display: block;
background-color: transparent;
background-image: url("../images/hash_yellow.png");
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
#teaser { overflow-x: hidden; overflow-y: hidden; width: 100%; background-color: #f6f7f2; }

/* ------------ MISSION ------------ */

#introduction { padding-top: 3.5em; padding-bottom: 2em; }

/* ------------ FOLLOW ------------ */

#follow #listing-container ul li { float: left; }
#follow #listing-container ul li a, .client_name
{
	display: block;
	width: 18.4em;
	padding-bottom: 0.5em;
	padding-top: 0.9em;
}
#follow #listing-container ul li a:hover
{
	background-color: transparent;
	background-image: url("../images/hash_yellow.png");
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
}

/* ------------ NEWSLETTER ------------ */

#newsletter ul {overflow: hidden; width: 100%; }
#newsletter ul li {overflow: hidden;}

#newsletter .column_41 {padding-top: 3.5em; padding-bottom: 4em; }
#newsletter .column_2 {padding-top: 3.5em; padding-bottom: 30px; }

#newsletter p.nl-info
{
	margin-top: 3px;
	line-height: 1.5em;
}

#newsletter #mc_embed_signup{}
#newsletter #mc-embedded-subscribe-form
{
	font: normal 100% Arial, sans-serif; margin:4px 0 0 0; padding:0 0 0 0; font-size: 12px;
}
#newsletter .mc-field-group{clear: both; overflow: hidden;}
#newsletter .nl-label{display: block; margin:0 0 5px 0;}
/*#newsletter input.mce-EMAIL{margin-right:1.5em; padding:.2em .3em; width:95%; float:left; z-index: 999;}*/
#newsletter input 
{
	padding:3px 3px 3px 3px; 
	width:95%; 
	float:left; 
	z-index: 999;
	font-family: Arial, sans-serif;
	font-size:12px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size-adjust: none;
	font-stretch: normal;
	-x-system-font: none;
	vertical-align: middle;
	color: #333;
	border-width: 1px;
	border-style: solid;
	border-color: #bbbbbb;
	margin-bottom:5px;
	outline-width: medium;
	outline-style: none;
	outline-color: -moz-use-text-color;
}
#newsletter input:focus, #newsletter button:focus
{
	border-color: #333;
	color: #000;
}

#newsletter input[type=button], #newsletter input[type=submit]
{
	font-weight: bold;
	color: #0093D3;
	border-color: #0093D3;
	cursor:pointer;
	background-color:#fff;
	border-width: 2px;
}


.mce-responses{float:left; top:-0.5em; padding:0 0 0 0; overflow:hidden; width:90%; margin:0 0; clear:both;}

.response {
	display:none; 
	margin: 0px 0 5px 0;
	padding:3px 3px 3px 3px;
	width:95%;
	float: left;
	font-style: normal;
	font-variant: normal;
	font-size:12px;
	font-weight: normal;
	font-size-adjust: none;
	font-stretch: normal;
	-x-system-font: none;
	vertical-align: middle;
	color:#006600;
	outline-width: medium;
	outline-style: none;
	outline-color: -moz-use-text-color;
	/*background-color:#9AEB9A;*/
	z-index:1;
}

#newsletter .btn {clear:both;width:auto;display:block;margin: 0 0 0 0;}
#mc_embed_close{display: none;}

#newsletter .mce_inline_error, #newsletter #mce-error-response
{
	margin: 5px 0 5px 0;
	padding:3px 3px 3px 3px;
	width:95%;
	float: left;
	font-style: normal;
	font-variant: normal;
	font-size:12px;
	font-weight: normal;
	font-size-adjust: none;
	font-stretch: normal;
	-x-system-font: none;
	vertical-align: middle;
	color:#CC0000;
	/*border-width: 1px;
	border-style: solid;
	border-color: #bbbbbb;
	margin-bottom:5px;*/
	outline-width: medium;
	outline-style: none;
	outline-color: -moz-use-text-color;
	/*background-color:#FF9A9A;*/
	z-index: 1;
}

#newsletter input.mce_inline_error 
{
	color:#333;
	font-weight: normal;
	background-color:#FFF;
	width:95%;
	margin: 0;
}



/* ------------ NEWS STREAM ------------ */

#news-stream ul {overflow: hidden; width: 100%; }
#news-stream ul li {overflow: hidden;}

#news-stream .column_41 {padding-top: 3.5em; padding-bottom: 4em; }
#news-stream .column_2 {padding-top: 3.5em; padding-bottom: 4em; }

#news-stream #stream-link, #news-stream #twitter-link { padding-top: 0.4em; }
#news-stream #stream-link a:hover, #news-stream #twitter-link a:hover { text-decoration:underline;}

#news-stream #stream-link a
{
	background:url('//www.dctrl.ch/images/feed-16x16-grey.png') no-repeat 0 0px;
	padding:2px 0 0 22px; height:16px;
}

#news-stream #stream-link a:hover
{
	background:url('//www.dctrl.ch/images/feed-16x16.png') no-repeat 0 0px;
	padding:2px 0 0 22px; height:16px;
}

#news-stream #twitter-link a
{
	background:url('//www.dctrl.ch/images/twitter-16x16-grey.png') no-repeat 0 0px;
	padding:2px 0 0 22px; height:16px;
}
#news-stream #twitter-link a:hover
{
	background:url('//www.dctrl.ch/images/twitter-16x16.png') no-repeat 0 0px;
	padding:2px 0 0 22px; height:16px;
}

#news-stream #stream-date { padding-top: 1.5em; }	
#news-stream #stream-title 
{
	padding-top: 0.2em; padding-bottom: 0em; 
	font-family: Georgia,"Times New Roman",Times,serif;
	font-style: italic;
	font-variant: normal;
	font-weight: normal;
	font-size: 2em;
	/*line-height: 30px;*/
	font-size-adjust: none;
	font-stretch: normal;
	-x-system-font: none;
	color: #1f1c1c;
}
#news-stream #stream-body { padding-top: 0.5em; line-height: 1.5em;}	
#news-stream #stream-more { padding-top: 0.2em; display:block; font-style: italic;  }

#news-stream #stream-more a
{
	width: 100%;
	display:block;
	padding-bottom: 0.2em;
	padding-top: 0.3em;
}
#news-stream #stream-more a:hover {
	background-color:#FFED00;
	background-color: transparent;
	background-image: url("../images/hash_yellow.png");
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
	}

#news-stream #twitter-box
{
	padding-top: 0em;
}

#news-stream #twitter-msg
{
	padding-top: 1.8em;
}

#news-stream #twitter-body
{ 
	margin-top: 0.4em;
	font-family: Georgia,"Times New Roman",Times,serif;
	font-style: italic;
	font-variant: normal;
	font-weight: normal;
	font-size: 2em;
	font-size-adjust: none;
	font-stretch: normal;
	-x-system-font: none;
	color: #1f1c1c;
	padding-top: 1.0em;
}

#news-stream #twitter-body a:hover { text-decoration:underline;}

#news-stream #twitter-date a
{
	font-variant: normal;
	font-weight: normal;
	font: 12px Arial, Helvetica, sans-serif;
	font-style: italic;
}

#news-stream #twitter-date a:hover { text-decoration:underline;}

/* ------------ FLICKR FEED ------------ */
#flickr-feed ul {overflow: hidden; width: 100%; }
#flickr-feed ul li {overflow: hidden;}

#flickr-feed .column_4 {padding-top: 3.5em; padding-bottom: 4em; }
#flickr-feed .column_4 {padding-top: 3.5em; padding-bottom: 4em; }

#flickr-feed #flickr-link { padding-top: 3.3em; }
#flickr-feed #flickr-link a:hover { text-decoration:underline;}

#flickr-feed #flickr-link a
{
	background:url('//www.dctrl.ch/images/flickr-16x16-grey.png') no-repeat 0 0px;
	padding:2px 0 0 22px; height:16px;
}

#flickr-feed #flickr-link a:hover
{
	background:url('//www.dctrl.ch/images/flickr-16x16.png') no-repeat 0 0px;
	padding:2px 0 0 22px; height:16px;
}

#flickr-bar
{
	padding-top: 1.8em;
	padding-bottom: 4em;
}
.flickr-img
{
	width:113px;
	height:113px;
	border-width: 1px;
	border-style: solid;
	border-color: #e0e1e2;
	margin-left:9px;
	float:left;
	padding:2px;
	overflow-x: hidden;
	overflow-y: hidden;
	overflow: hidden;
}

.flickr-img a img {-moz-outline : 0px; border-width: 0px;}
.flickr-img a:hover img {border-color: #0093D3;}
.flickr-img-first {margin-left:0px;}


/* ------------ SERVICES ------------ */

#services ul { padding-top: 3.8em; padding-bottom: 2em; }
#services ul li
{
	height: 1.5em;
	width:100%;
	margin-bottom: 0.4em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e0e1e2;
	padding-bottom: 0.833333em;
}

/* ------------ PROJECTS ------------ */

#projects ul {overflow: hidden; width: 100%; }
#projects ul li {overflow: hidden;}
#projects ul li a {display: block; width: 100%; }
#projects ul li:hover {background-color:#FFED00;}
#projects ul li .column_2 a:hover {background: url(../images/hash_white.png) repeat;}

#projects img { display: block; border: 1px solid #2c2d2d; }

#projects .column_5 {padding-top: 3.5em; padding-bottom: 2em; }
#projects .column_2 {padding-top: 3.5em; padding-bottom: 2em; }

#projects #name { padding-top: 0em; }
#projects #bio { padding-top: 1em; }	
#projects #title { padding-top: 1em; padding-bottom: .5em; }

#project_kind { display: block; padding-top: 1em; overflow: hidden;}
#project_kind ul { overflow: hidden; width: 15em; padding-top: 1em; padding-bottom: 2em;}
#project_kind ul li { height: 1.5em; margin-bottom: 0.4em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e0e1e2;}
#project_kind ul li h4 {color: #1e1c1c; padding-bottom: 0.416667em; }
#project_kind ul li p {padding-bottom: 0.833333em; }

/* ------------ CLIENTS ------------ */

#clients #listing-container { padding-top: 2.5em; }
#clients #listing-container ul li { float: left; }
#clients #listing-container ul li a, .client_name
{
	display: block;
	width: 18.4em;
	padding-bottom: 0.5em;
	padding-top: 0.9em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e0e1e2;
}
#clients #listing-container ul li a:hover
{
	background-color: transparent;
	background-image: url("../images/hash_yellow.png");
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
}

/* ------------ MENTIONS ------------ */

#mentions ul
{
	padding-top: 3.4em;
	padding-bottom: 2.5em;
	overflow: hidden;
	width: 100%;
}
#mentions ul li { float: left; }
#mentions ul li p { padding-bottom: 0.833333em; }
#mentions ul li h4
{
	font-family: "Arial Rounded MT Bold",Arial;
	color: #1e1c1c;
	padding-bottom: 0.416667em;
}

/* ------------ LOCATIONS ------------ */

#locations #addresses { float: left; }
#locations ul
{
	padding-top: 3.4em;
	padding-bottom: 2.5em;
	width: 100%;
	float: left;
}

#locations ul li { width: 36em; }
#locations ul li h4 {font-family: "Arial Rounded MT Bold",Arial; color: #1e1c1c; padding-bottom: 0.416667em;}
#locations ul li p {padding-bottom: 0.833333em; }
#locations a {display: block; }	
#locations a:hover {display: block; background: url(../images/hash_yellow.png) repeat; }

#maps {
	padding-top: 3.6em;
	float: left;
	overflow-x: hidden;
	overflow-y: hidden;
	overflow: hidden;
}	
#maps img {
	display: block;
	width: 351px;
	height: 282px;
	border: 1px solid #e0e1e2;
	margin-bottom: .9em;
}
#maps a:hover img {border-color: #0093D3; }

/* ------------ FOOTER ------------ */

#footer {text-align: left; padding-bottom: 1.4em;  overflow: hidden; width: 100%; position: absolute; bottom: 0}
#back-to-top {float: left; width: 16.4em; padding-right: 2.1em}
#back-to-top a {display: block; width: 12.9em; height: 2.5em; border-bottom: 1px solid #E0E1E2; padding-top: 1.4em; padding-left: 3.5em; background: url(../images/arrow_top.png) no-repeat 0 0; text-indent: -100em}
#back-to-top a:hover {background-position: 0 -100px; text-indent: 0}
.bread_crumb {float: left; width: 50.9em; margin-right: 1.1em}
.bread_crumb .on {float: left; display: block; height: 2.5em; padding-top: 1.4em; color: #454647}