@smdred: #f90;

@smdcomp: spin(@smdred, 155);

@smdcomp_l1 : lighten(@smdcomp, 5%);	// Lighten complimentary
@smdcomp_l2 : lighten(@smdcomp, 10%);
@smdcomp_l3 : lighten(@smdcomp, 15%);
@smdcomp_l4 : lighten(@smdcomp, 20%);



@smdcyan: #00aeef;
@smdblack: #111;
@smdgrey: #999;
@smdaltgrey: #656565;
@smdlightgrey: #5d5d5d;
@smdverylightgrey: #cac7c7;
@typeshadow: 1px 1px 1px #111;


/* html, body, div, dl, ul {outline:1px solid red;} */

/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

body {
    margin: 0 auto;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-weight: 300;
   	font-size: 62.5%;
	line-height: 125%;
	color: black;
	text-align: left;
	background-color: black;
/* 	background-image: url('images/concrete_wall.jpg'); */
}
.content {
	max-width: 860px;
    margin: 0 auto;
	margin-bottom: 1em;
    margin-top: 2em;
	font-size: 1.2em;
	line-height: 145%;
	behavior: url(PIE.htc);
	padding: 2em;
}
.col-left {
	float: left;
	width: 15%;
	text-align: left;
	color: white;
	font-size: 1.2em;
	line-height: 145%;
}
.col-right {
	float: right;
	width: 80%;
	min-height: 30em;
}
.col-left { 
	p {
		margin-top: 4em;
	}
	p a:link, a:visited {
		color: white;
		font-size: 1.6em;
		text-decoration: none;
    font-family: Georgia, Times, Times New Roman, Palatino, Palatino Linotype, serif;
	}
	p a:hover {
		color: @smdcyan;
	}
}


/* Default col-right paragraph styling */
.col-right p, .col-right ul, .note-item ul, dd {
	font-size: 15px;
	text-shadow: @typeshadow;
	line-height: 155%;
	margin-bottom: 1.25em;
	color: white;
	-webkit-transition: color 0.25s linear;
	-webkit-transition: border-bottom 0.25s linear;
}
.col-right p {
	max-width: 90%;
}
.col-right p em {
}

pre {
	font: 11px/21px;
	font-family: Courier;
	color: white;
	margin-bottom: 2em;
}
.col-right p a:link, .col-right p a:visited, .col-right ul li a:link, .col-right ul li a:visited {
	color: white;
	text-decoration: none;
	border-bottom: 1px dotted @smdverylightgrey;
	padding-bottom: 2px;
		-webkit-transition: color 0.15s linear;
		-webkit-transition: border-bottom 0.15s linear;
}
.col-right p a:hover, .col-right ul li a:hover {
	color: @smdred;
	border-bottom: none;
}

p.summary {
	font-family: 'Bitter', serif;
	font-size: 1.6em;
	max-width: 90%;
}
strong {
	font-weight: bold;
}
em {
	font-style: italic;
}

img.logoimg {
	max-width: 100%;
	margin-bottom: 3em;
}
.work img.logoimg, .notes img.logoimg {
	opacity: .1;
}
.logo {
	 width: 11em;
	height: 11em;
	-webkit-border-radius: 5.5em;
	   -moz-border-radius: 5.5em;
	        border-radius: 5.5em;
	behavior: url(PIE.htc);
	display: block;
	text-align: center;
	margin-bottom: 2em;
	color: white;
}
h1, h2, h3, h4, h5 {
	font-weight: normal;
	color: white;
	text-shadow: @typeshadow;
	text-align: left;
}
h1 {
	font-size: 2.2em;
	font-family: 'Bitter', serif;
	color: @smdred;
}
h2 {
	font-family: 'Bitter', serif;
	font-size: 1.3em;
	line-height: 150%;
	margin-bottom: .25em;
	color: @smdcomp;
}

h5.comment {
	a:link, a:visited {
		color: white;
		text-decoration: none;
		font-weight: bold;
		border-bottom: 1px dotted white;
	}
	a:hover {
		color: @smdred;
		border-bottom: none;
	}
}

.home h2 {
	font-family: 'Bitter', serif;
	font-size: 1.65em;
/* 	width: 90%; */
	margin-bottom: 1.6em;
	color: white;
	font-weight: normal;
}
.home h2 strong {
	font-weight: normal;
	color: @smdred;
}
.home .col-right p {
	font-size: 1.6em;
}


/* Navigation */

ul.nav {
	margin-top: 4.35em;
	margin-left: -2.2em;
}
.sticky-top {
	position: fixed;
	position: fixed;
	width: 160px;
	height: 180px;
	z-index: auto;
	top: 0px; 
}
ul.nav li span {
	float: right;
	margin-right: 1em;
	display: none;
	color: white;
}
ul.nav li a:link, ul.nav li a:visited {
	font-family: 'Bitter', serif;
	line-height: 30px;
	font-size: 15px;
	color: white;
	display: block;
	text-decoration: none;
	cursor: pointer;
/* 	text-transform: uppercase; */
	padding-left: 2.5em;
	text-shadow: @typeshadow;
	-webkit-transition: color 0.15s linear;
	cursor: pointer;
}
ul.nav li a:hover {
	text-decoration: none;
	color: @smdverylightgrey;
}
ul.nav li.current a {
	color: @smdred;
/* 	font-weight: 700; */
	padding-left: .75em;
}
ul.nav li.current a:before {
	content: "\2192";
	margin-right: .75em;
	color: white;
}
ul.nav li.current a:hover {
	cursor: default;
	color: @smdred;
}
ul.nav li.current a span {
	display: inline;
}

div.work-item-tile:nth-of-type(even) {
	float: right;
}
div.work-item-tile {
	float: left;
	width: 48%;
	height: 190px;
	margin-bottom: 4em;
	div.img-panel {
		max-width: 100%;
		height: 150px;
		overflow: hidden;
		-webkit-transition: border 0.25s linear;
	    -webkit-box-shadow: 0px 0px 6px #222;
	img {
		width: 100%;
	}
	a img.tile {
		max-width: 100%;
	}

	}
	a:link {
		text-decoration: none;
	}
	div.panel {
		padding-top: .7em;
		h3 {
			font-family: 'Bitter', serif;
			font-size: 16px;
			line-height: 23px;
			color: white;
			text-decoration: none;
			-webkit-transition: color 0.25s linear;
		}
		h4 {
		    font-family: Georgia, Times, Times New Roman, Palatino, Palatino Linotype, serif;
			font-weight: normal;
			font-style: italic;
			font-size: 12px;
			color: white;
		}
		span {
			float: right;
		}
	}
	a:hover h3 {
		color: @smdred;
	}
	a:hover .img-panel {
	    -webkit-box-shadow: 0px 0px 6px black;
	}
}






ul.work-tiles {
	list-style-type: none;

	li {
		float: left;
		width: 48%;
		list-style-type: none;
		h2 {
			font-family: 'Bitter', serif;
			font-size: 16px;
			line-height: 23px;
			color: white;
			text-decoration: none;
			-webkit-transition: color 0.25s linear;
		}
		h3 {
		    font-family: Georgia, Times, Times New Roman, Palatino, Palatino Linotype, serif;
			font-weight: normal;
			font-style: italic;
			font-size: 12px;
			color: white;
			margin-bottom: 1em;
		}
		img {
			max-width: 100%;
		}
		a:link {
			text-decoration: none;
		}
	}

}


/* Work page styling */

.col-right h1, .col-right dt {
	margin-bottom: 1em;
	line-height: 36px;
	text-shadow: @typeshadow;
}
h1 span a:link, h1 span a:visited {
	text-decoration: none;
	text-transform: lowercase;
	font-size: 11px;
	float: right;
	color: white;
	padding: 0 1em;
	-webkit-border-radius: .25em;
     	-moz-border-radius:.25em;
	         border-radius:.25em;
	background-color: rgba(0,0,0,0.2);
	-webkit-transition: background-color 0.25s linear;
}
.notes h1 span a:hover {
	background-color: @smdred;
}
h1 span a:hover {
	background-color: black;
	color: white;
}
.work-item dl {
	float: left;
	width: 50%;
	margin-bottom: 2em;
}
.work-item img {
	max-width: 100%;
	margin-bottom: 1em;
}
.work .work-item ul, .services .work-item ul {
	list-style-type: disc;
	margin-left: 1.2em;
	color: white;
}
.col-right ul {
	list-style-type: disc;
	margin-left: 1.2em;
	color: white;
}
.work-list .col-right ul, .home .col-right ul {
	margin-left: 0;
}
div.note-item {
	background-color: rgba(200,200,200,0.1);
	padding: 2em;
	-webkit-border-radius:.25em;
 	   -moz-border-radius:.25em;
            border-radius:.25em;
}
img.align_center {
	margin: 0 auto;
	display: block;
}

/* Services */
ul.services-list {
	font-size: 1.1em;
	line-height: 155%;
	list-style-type: disc;
	color: @smdlightgrey;
}
ul.services-list li a:link, ul.services-list li a:visited {
	color: white;
	text-decoration: none;
}
ul.services-list li a:hover {
	color: #ccc;
}
ul.services-list li.current a {
	color: @smdred;
}

dl.serv-list {
	clear: left;
	overflow-y: auto;
}
dl.serv-list dt {
	font-family: 'Bitter', serif;
	font-size: 1.3em;
	line-height: 150%;
	height: 76px;
	-webkit-border-radius: .25em;
     	-moz-border-radius:.25em;
	         border-radius:.25em;
	float: left;
	width: 22%;
	margin-right: 1.5em;
	color: white;
	background-color: rgba(200,200,200,0.1);
	padding: 1em;
	a:link, a:visited {
		text-decoration: none;
		color: white;
	}
	a:hover {
		border-bottom: 1px solid black;
	}
}
dl.serv-list dd {
	float: left;
	width: 60%;
	padding: 1em 0;
}
dl.serv-list dt.web-design {
	background-color: red;
}
dl.serv-list dt.artist-portfolio-websites {
	background-color: #69c;
}
dl.serv-list dt.content-management {
	background-color: #369;
}
dl.serv-list dt.web-development-for-designers {
	background-color: #993;
}
dl.serv-list dt.not-for-profit-websites {
	background-color: #c96;
}






/* Notes page styling */
dl.notes-list {
	color: white;
	dt {
		font-family: 'Bitter', serif;
		font-size: 1.6em;
		text-transform: none;
		margin-bottom: .25em;
		text-shadow: @typeshadow;
	}
	dt a:link, dt a:visited {
		color: white;
		text-decoration: none;
		-webkit-transition: color 0.25s linear;
	}
	dt a:hover {
		color: @smdred;
	}
	
	dd {
		width: 70%;
		margin-bottom: 2em;
		border-left: 1px solid @smdlightgrey;
		padding-left: 1em;
		color: @smdverylightgrey;
	}
	.time {
		font-size: 11px;
		text-transform: uppercase;
		text-shadow: @typeshadow;
		margin-bottom: 1em;
		color: @smdgrey;
		padding-left: 0;
		border-left: 0;
	}
	a.ext:link, a.ext:visited{
		color: @smdcyan / .25;
	}
}

a.read-more:link, a.read-more:visited, p a.read-more:link, p a.read-more:visited {
	color: @smdred;
		font-size: 12px;
	margin-left: .75em;
	border-bottom: none;
	text-decoration: none;
}
a.read-more:hover, p a.read-more:hover {
	color: white;
}
.note-item {
	h3 {
		font-size: 1.5em;
		font-weight: bold;
		line-height: 145%;
		color: @smdlightgrey;
	}
	time {
		display: block;
		font-size: 11px;
		text-transform: uppercase;
		text-shadow: @typeshadow;
		margin-bottom: 1.8em;
		color: white;
	}
	p em, p.quote {
    font-family: Georgia, Times, Times New Roman, Palatino, Palatino Linotype, serif;
	    font-style: italic;
	}
	
	blockquote p {
		font-size: 2.2em;
		margin-left: -2em;
		margin-top: 1em;
		margin-bottom: 1em;
		font-style: italic;
	}
	img {
		margin-top: 1em;
		margin-bottom: 1em;
		max-width: 100%;
	}
	p.caption {
		font-size: 1.3em;
		width: 35%;
		float: left;
		font-style: italic;
		color: @smdlightgrey;
		text-align: right;
		margin-left: -14em;
		margin-top: 2em;
	}
}


/* next/prev nav */
ol.projectnav {
	margin-top: 2em;
	font-size: 1.3em;
}

ol.projectnav li {
	float: left;
	list-style-type: none;
	font-size: .75em;
}
ol.projectnav li a:link, ol.projectnav li a:visited {
	padding: .75em 1em;
	color: #ccc;
	background-color: rgba(0,0,0,0.2);
	text-decoration: none;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
	 border-bottom: 0;
	-webkit-transition: color 0.25s linear;
	-webkit-transition: background-color 0.25s linear;
}
ol.projectnav li a:hover {
	color: white;
	text-shadow: @typeshadow;
	background-color: rgba(0,0,0,0.6);
}
ol.projectnav li#next {
	float: right;
}
ol.projectnav li#next a span {
	margin-left: .5em;
}
ol.projectnav li#prev a span {
	margin-right: .5em;
}

form#page-changer {
	text-align: center;
	margin-bottom: 1em;
}

/* Footer bizo */

p.copy, p.hagd {
	width: 80%;
	float: right;
	text-shadow: @typeshadow;
	color: white;
	border-top: 1px dotted @smdlightgrey;
	padding-top: .75em;
	font-size: 11px;
	margin: 2em 0;
	a:link, a:visited {
		color: white;
		text-decoration: none;
	}
	a:hover {
		color: white;
		padding-bottom: .2em;
		border-bottom: 1px solid #999;
	}
	span {
		margin: 0 .6em;
	}
}

/* Edit button when logged in */
a.editpage {
	font-size: 11px;
	font-family: Georgia;
	font-style: italic;
	padding: 1em;
	margin: 1em;
	background-color: black;
	position: fixed;
	top: 0;
	left: 0;
}
a.editpage:link, a.editpage:visited {
	color: white;
	text-decoration: none;
}
a.editpage:hover {
	color: black;
	background-color: white;
}

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.content {
	width: 90%;
    margin-top: 2em;
}
}

@media only screen and (max-device-width: 480px) {

.body {
    margin: 0;
    padding: 0;
	padding: 2em;
}
.content {
	width: 90%;
    margin-top: 2em;
	padding: 1em;
}
.col-left, .col-right {
	clear: both;
	max-width: 100%;
	width: 100%;
}
img.logoimg {
	max-width: 100%;
	margin-bottom: 1em;
}
ul.nav {
	margin-bottom: 1em;
	overflow: auto;
}
ul.nav li a {
}
ul.nav li a:link, ul.nav li a:visited {
	width: 25%;
	float: left;
	padding-left: 0;
	text-align: center;
	background-color: rgba(0,0,0,0.3);
}
ul.nav li.current a {
	color: white;
	background-color: @smdred;
}
ul.nav li.current a span {
	display: none;
}

h1 span a:link, h1 span a:visited {
	float: none;
	display: block;
	padding: 0 0 0 1em;
	text-align: left;
}
.h1 {
	line-height: 1;
/* 	margin-bottom: 0; */
}
div.work-item-tile {
	width: 100%;
	float: none;
	margin-bottom: 4em;
	div.img-panel {
	width: 100%;
	height: 160px;
	overflow-y: hidden;
	img {
		max-width: 100%;
	}
	}
	div.panel {
	max-width: 100%;
	}
}
.col-right p {
	max-width: 100%;
}
div.work-item-tile:nth-of-type(even) {
	float: none;
}
.col-right p.summary {
/* 	font-size: 1em; */
}

p.copy {
	width: 100%;
}

}