@bgcolor: #7e002f;
@hcolor: #fff;
@greypink: #b29ea5;
@btncolor: #800032;


body {
	
	background:url(../images/bg.jpg) repeat-x @bgcolor; /* ie 6 - 7 */
	background:url(../images/rol_bg.jpg) 50% 0px no-repeat,
	url(../images/bg.jpg) repeat-x @bgcolor;
	
	
}

/* css3 defaults */

.text-shadow {

	text-shadow: 0px 2px 1px #690931;
	
}

.boxd-shadow {

	-webkit-box-shadow: 5px 0px 5px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 5px 0px 5px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 5px 0px 5px 5px rgba(0, 0, 0, 0.3);
	
}

.rounded (@radius: 12px) {
	
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
	
}

#overlay {

	width:100%;
	height:100%;
	background:#fff;
	display:block;
	position:absolute;
	
}

div#portfoliowrapper {

	min-height:600px;
	
}

div.fullsize {

	padding-top:80px;
	padding-bottom:40px;
	
}

div.fullsize {

	color:#fff;

}

div.fullsize p.desc {

	font-family:Calibri, Helvetica, Arial, sans-serif;
	text-shadow: 0px 1px 1px #330015;
	text-align:justify;
	
}

.overflow {

	overflow:visible;
	
}

a.online:link,
a.online:visited {
	
	font-family:Calibri, Helvetica, Arial, sans-serif;
	color:@hcolor;
	text-decoration:none;
	font-weight:bold;
	float:left;
	text-shadow: 0px 1px 1px #000;
	clear:none;
	background:url(../images/btnbg.jpg) repeat-x;
	.rounded(4px);
	padding:8px 22px 8px 22px;
	margin:0px;
	position:relative;
	top:10px;
	display:block;
	-webkit-transition: color 200ms ease-in;
	-moz-transition: color 200ms ease-in;
	-o-transition: color 200ms ease-in;
	transition: color 200ms ease-in;
	
}

a.online:hover {
	
	background:url(../images/btnbghover.jpg) left bottom repeat-x;
	color:#eee;
	-webkit-transition: color 200ms ease-in;
	-moz-transition: color 200ms ease-in;
	-o-transition: color 200ms ease-in;
	transition: color 200ms ease-in;
	text-shadow: 0px 1px 1px #000;
	
}

a.online:active {

	position:relative;
	top:12px;
	
}

div.fullsize h3 {

	.text-shadow;
	margin:4px 0px;
	padding-top:40px;
	padding-bottom:10px;
	
}

div.fullsize img {

	float:left;
		
}

div.fullsize a.url {

	background:#800032;
	color:#fff;
	text-decoration:none;
	padding:6px 12px 6px 12px;
	clear:none;
	float:left;
	.rounded;
	
}

div.fullsize div.left {

	color:#fff;
	
}

#header {

	
	padding-top:30px;
	padding-bottom:30px;
	background:url(../images/header_bg.png) bottom left repeat-x;

}

#header h1,
#header h2 {
	
	color:@hcolor;
	text-align:center;

	
}

#header h1 {

	text-transform:uppercase;
	
}

#header a.contact {

	display:none;
	text-align:center;
	color:#fff;
	text-decoration:none;
	
}

#portfolio {

	padding-top:40px;
	
}

#portfolio div.workitem {

	display:none;
	position:relative;
	
}

#portfolio div.workitem img {

	background:#000;
	
}

a.top:link,
a.top:visited {

	float:right;
	clear:both;
	display:block;
	color:#fff;
	text-indent: -9999em;
	width:29px; 
	height:18px;
	background:url(../images/top.png) top center no-repeat;
	
}

a.top:hover {
	
	width:29px; 
	height:18px;
	background:url(../images/top.png) bottom center no-repeat;
	
	
}

.inset {
	
	-webkit-box-shadow: inset 0px 0px 25px 25px rgba(10, 10, 10, 0.4);
	-moz-box-shadow: inset 0px 0px 25px 25px rgba(10, 10, 10, 0.4);
	box-shadow: inset 0px 0px 25px 25px rgba(10, 10, 10, 0.4);
	
}


#portfolio div.workitem a:link,
#portfolio div.workitem a:visited {

	text-decoration:none;
	
}


div.projectinfo {
	
	display:none;
		
	}


#portfolio div.workitem a:hover {

	color:@greypink;
	
	
}



/*
#portfolio div.workitem a:hover {

	background:url(../images/thumbnail-hover.png) no-repeat;
	z-index:10000000;
	display:block;
}
*/



#portfolio h2,
#portfolio h3,
 {

	color:@hcolor;
	text-align:center;
	.text-shadow;
	
}

#portfolio  h2 {

	font-style:italic;
	
}

#portfolio h3 {

	padding-top:6px;
	
}

/* footer */

#footer {

	background:url(../images/footer_bg.png) repeat-x;
	margin-top:40px;
	padding-top:40px;
	min-height:140px;
	color:#fff;

}

#footer ul.contact {
	
	color:#fff;
	font-family:Calibri, Helvetica, Arial, sans-serif;

	
}

#footer ul.contact li {

	list-style:none;
	float:left;
	text-align:center;
	
}


#footer ul.contact li a:link,
#footer ul.contact li a:visited {
	
	color:@hcolor;
	text-decoration:none;
	font-weight:bold;
	display:block;
	background:url(../images/btnbg.jpg) repeat-x;
	.rounded(4px);
	padding:8px 22px 8px 22px;
	margin:6px;
	
}

#footer ul.contact li a:hover {

	color:#fff;
	-webkit-transition: color 200ms ease-in;
	-moz-transition: color 200ms ease-in;
	-o-transition: color 200ms ease-in;
	transition: color 200ms ease-in;
	background:url(../images/btnbghover.jpg) left bottom repeat-x;

}

#footer ul.contact li a:active {

	position:relative;
	top:2px;
	
}

#footer h2 {

		color:@hcolor;
		.text-shadow;
	
}