@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro|Roboto:300,300italic,500|Roboto+Slab:300,400,700);

@terpRed: #e03a3e;
@terpYlw: #ffe14f;
@dkGrey: #0a0a0a;
@mdGrey: #909090;

@baseSize: 16px;

@opac: 0.25;

* {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}

body {
	background-image:url('bg/brushed.png');
	font-family: "Roboto","MuseoSans300","Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-weight: 300;
	font-size: @baseSize;
	line-height: 1.5*@baseSize;
	color: #202020;
	width: 850px;
	height: 595px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	border:0px solid #aaa;
}


/* Set color of highlighted selection to a light red */
::-moz-selection {
	background-color: #e76669;
}
::selection {
	background-color: #e76669;
}

p {
	margin-top: 0;
	margin-bottom: 1.5*@baseSize;;
}

div.lCol {
	float: left;
	width: 325px;
	height: 100%;
}

div.rCol {
	/*background-color: rgba(0,0,0,0.1);*/
	float: right;
	width: 500px;
	height: 100%;
	.thinBorderBottom;
}

div#myname {
	font-family:"Roboto Slab","MuseoSlab500","Gill Sans","Gill Sans MT","Trebuchet MS",Calibri,serif;
	font-weight:400;
	font-size:		2.0*@baseSize;
	line-height:	3.0*@baseSize;
	letter-spacing: 2px;
	text-align: center;
	color: @dkGrey;
	.thickBorderTop;
}

.altFont {
	font-family: "Roboto Slab";
}

a {
	color: @terpRed;
	text-decoration:underline;
}
a:hover {
	color: @terpRed;
	text-decoration:none;
}
a:visited {
	color: @dkGrey;
}
a:visited:hover {
	color: @terpRed;
	text-decoration:none;
}

/*************************** BUTTONS *************************/

div.button {
	font-family:"Roboto Slab","MuseoSlab500","Gill Sans","Gill Sans MT","Trebuchet MS",Calibri,serif;
	font-size:		1.5*@baseSize;
	line-height:	2.5*@baseSize;
	text-align: center;
	display: inline-block;
	width: 100px;
	text-align: center;
	margin: 20px;
	background-color: @mdGrey;
	color: #f8f8f8;
		      border-radius: 4px;
	   -moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
div.buttonHover {
	
		      border-radius: 0.9*@baseSize;
	   -moz-border-radius: 0.9*@baseSize;
	-webkit-border-radius: 0.9*@baseSize;
	
	/*color: @dkGrey;*/
	background-color: @terpRed;
}

/*************************** PORTRAIT *************************/

figure#portrait {
	margin-left:	0;
	margin-right:	18px;
	margin-top:		0;
	margin-bottom:0;
	float:left;
	padding-top:		8px;
	padding-bottom:	8px;
	.thickBorderTop;
	.thinBorderBottom;
}

figure#portrait > canvas {
	border: 1px solid @dkGrey;
	width:	300px + 2*(8+1); /* base width = 300 */
	height:	458px + 2*(8+1); /* base height = 458 */
	padding: 8px;
	background-color: rgba(255,255,255, 0.75);
	outline: none;
}

figure#portrait > canvas:hover {
					box-shadow: 0px 0px 10px rgba(32,32,40,0.4);
		 -moz-box-shadow: 0px 0px 10px rgba(32,32,40,0.4);
	-webkit-box-shadow: 0px 0px 10px rgba(32,32,40,0.4);
}

figure#portrait > canvas:focus {
					box-shadow: 0px 0px 10px rgba(0,0,8,0.66);
		 -moz-box-shadow: 0px 0px 10px rgba(0,0,8,0.66);
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,8,0.66);
	border-color: @terpRed;
}

figure#portrait > figcaption {
	padding-left:		9px;
	padding-right:	9px;
	padding-top:		8px;
	padding-bottom:	0px;
	font-size: 13px;
	line-height: 18px;
}

/*************************** MIXINS *************************/

.center {
	margin-left: auto;
	margin-right: auto;
	text-align:center;
}

.thickBorderTop {
	border-top:			4px solid @terpRed;
}
.thickBorderBottom {
	border-bottom:	4px solid @terpRed;
}
.thinBorderTop {
	border-top:			1px solid @terpRed;
}
.thinBorderBottom {
	border-bottom:	1px solid @terpRed;
}

/*************************** ANCHOR TITLES *************************/
#anchorTitle {
	        border-radius: 2px;
	   -moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	/*background-color: rgba(255,255,255,0.95);*/
	background-color: #f8f8f8;
	border: solid 1px @mdGrey;
	color: @dkGrey;
	display: none;
	font-family: "Source Code Pro";
	font-size: 0.75*@baseSize;
	line-height: @baseSize;
	max-width: 220px;
	padding: 2px 4px;
	position: absolute;
}

/*************************** ADDRESS *************************/

div#addr {
	/*font-family: "Source Code Pro";*/
	font-size: @baseSize;
	line-height: 2.0*@baseSize;
	.center;
	.altFont;
}

div#addr [class*="char"] {
	padding-left:   3px;
	padding-right:  3px;
	padding-top:    7px;
	padding-bottom: 5px;
	line-height: 2.0*@baseSize;
}

div#addr .char15 { /*period in '.com' */
	top: 0.25em;
	position: relative;
}

#webBar, #twtBar {
	padding: 0;
	position: absolute;
	        border-radius: 7px;
	   -moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	/*background-color: transparent;*/
	background-color: rgba(0,0,0,0.25);
	height: 2.0*@baseSize;
}

#webBar {
	border-bottom: solid 1px @terpRed;
	box-shadow: inset 0 -5px 7px -7px @dkGrey;
}

#twtBar {
	border-top: solid 1px @terpRed;
	box-shadow: inset 0 5px 7px -7px @dkGrey;
}