/*
 * Defaults
 */



html, body {
	padding: 0;
	margin: 0;
}

html {
	font-size:12px;
}

body {
	font-family: helvlight, sans-serif;
	font-size: 1em;
	background:#f2f2f2 url(/img/bg/designsafe_bg.png) repeat 0 0;
	color: #222;
	text-shadow:0 1px #fff;
}

a {
	color: #f26c52;
	text-decoration: none;
}

a:hover {
	color:#2294ba;	
}

p a {
	padding-bottom: 1px;
}

p a:hover {
	border-bottom: none;
}

img {
	border: none;
}

p {
	padding: 0;
	margin: 0px 0 10px 0;
	line-height: 1.4em;
}

h1, h2 {
	padding: 0;
	margin: 0;
	font-size: 1em;
}

h2 {
	font-weight:100;
	font-size: 2.143em;
}


/*
 * Utilities
 */

.align-left {
	float: left;
}

.align-right {
	float: right;
}

.align-center {
	margin: 0 auto 0 auto;
}

.clear {
	clear:both;
	}

/*
 * Parts
 */
#lighting {
	position:fixed;
	width:100%;
	height:100%;
	background:transparent url(/img/bg/lighting.png) repeat-x 0 0;
	z-index:10;
}

#site {
	position:relative;
	width:100%;
	padding:73px 0 200px;
	z-index:20;
}

#header {
	position:fixed;
	top:0px;
	left:0px;
	height:56px;
	width:100%;
	z-index:10000;
	background: -moz-linear-gradient(center top, #e9e7e2, #f7f5f0 100%);
	background: -o-linear-gradient(top left, #e9e7e2, #f7f5f0 100%);
	background: -webkit-linear-gradient(#e9e7e2, #f7f5f0);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e7e2', endColorstr='#f7f5f0');
	border-bottom:#ccc 1px solid;
	-webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.16);
	-moz-box-shadow: 0 0 7px 0 rgba(0,0,0,0.16);
	box-shadow: 0 0 7px 0 rgba(0,0,0,0.16);
	opacity:0.96;
}

#header #title {
	
}

#header #title a {
	background: transparent url(/img/misc/lloviendo.23px.png) no-repeat 0 0;
	border:none;
	display:inline-block;
	width:129px;
	height:23px;
	margin:17px 0 0 16px;
}

#header #title a:hover {

}

#main {
	margin:0 8px 70px;
}

#content {
	clear: both;
}

.page-text {
	font-size:1.15em;
	color:#333;
	margin: 0px 10px 20px 17px;
	width: 600px;
}

.pagelinks
	{
		margin:0 11px 0 0;	
	}

.lefty {
	float:left;	
}
/*
 * Menu
 */

#menu {
	float:right;
	margin:-26px 7px 0 0;
}

#menu .active a {
	font-family:helvlight;
	color: #000;
	-webkit-box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 0 1px rgba(214,211,205,0.8);
	-moz-box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 0 1px rgba(214,211,205,0.8);
	box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 0 1px rgba(214,211,205,0.8);
	border:1px #9f9d98 solid;
	background-color: #f7f5f0; 
	background: -webkit-linear-gradient(#dbd6cd,#bbb7a4);
	background: -moz-linear-gradient(#dbd6cd,#bbb7a4);
}

#menu .active a:hover {
	color: #000;
	-webkit-box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 0 1px rgba(214,211,205,0.8);
	-moz-box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 0 1px rgba(214,211,205,0.8);
	box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 0 1px rgba(214,211,205,0.8);
	border:1px #9f9d98 solid;
	background-color: #f7f5f0; 
	background: -webkit-linear-gradient(#dbd6cd,#bbb7a4);
	background: -moz-linear-gradient(#dbd6cd,#bbb7a4);
}


#menu a:hover {
	color: #107da1;
	-webkit-box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 0 1px rgba(207,211,200,0.8), 0 0 2px rgba(31,148,186,0.5);
	-moz-box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 0 1px rgba(207,211,200,0.8), 0 0 2px rgba(31,148,186,0.5);
	box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 0 1px rgba(207,211,200,0.8), 0 0 2px rgba(31,148,186,0.5);
	border:1px rgba(31,148,186,0.5) solid;
	background-color: #f7f5f0; 
	background: -webkit-linear-gradient(#f7f5f0,#e9e7e2);
	background: -moz-linear-gradient(#f7f5f0,#e9e7e2);
}

#menu a:active {
	color:#0d5b75;
	border: 1px rgba(31,148,186,0.4) solid; 
	box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 1px 2px rgba(140,135,127,0.4), 0 0 2px rgba(31,148,186,0.5); 
	-moz-box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 1px 2px rgba(140,135,127,0.4), 0 0 2px rgba(31,148,186,0.5); 
	-webkit-box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 1px 4px rgba(140,135,127,0.4);
	background-color: #f7f5f0; 
	background: -webkit-linear-gradient(#f7f5f0,#dddad5);
	background: -moz-linear-gradient(#f7f5f0,#dddad5);
}

#menu ul {
	display: block;
	padding: 0;
	margin: 0;
	list-style: none;
}

#menu li {
	float: left;
	margin-right: 10px;
	list-style: none;
}

#menu li a {
	display: inline-block;
	padding: 4px 10px;
	min-width:56px; 
	text-align: center; 
	line-height: 1em;
	font-size:1.143em;
	color:#676769;
	text-shadow:0 1px #fff; 
	border: 1px #d1cec8 solid; 
	border-radius: 3px; 
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px; 
	box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 0 1px rgba(207,211,200,0.8); 
	-moz-box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 0 1px rgba(207,211,200,0.8); 
	-webkit-box-shadow: 0 2px rgba(255,255,255,0.8), inset 0 0 1px rgba(207,211,200,0.8);
	background-color: #f7f5f0; 
	background: -webkit-linear-gradient(#f7f5f0,#e9e7e2);
	background: -moz-linear-gradient(#f7f5f0,#e9e7e2);
}

/*
 * Projects
 */

.fileGroup {
	float: left;
	margin-bottom: 20px;
}

.slideshow {
	clear: both;
	color: #666;
}

.slideshow-nav {
	margin-bottom: 3px;
	font-size: 0.9em;
}

.slideshow-nav a {
	color: #999;
}

.slideshow-nav a:hover {
	color: #666;
}

#projecttext {
	margin-top:26px;
	min-width:250px;
	max-width:500px;	
}
	
.textblock {
	font-size:1.15em;
	color:#333;
	margin: 0px 10px 20px 0;
}

.file {
	min-width:100px;
	overflow: hidden;
	background-color: #fff;
	border:#ddd 1px solid;
	border-bottom:none;
	margin-bottom: 37px;
	-webkit-box-shadow: 0 5px 7px -4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 5px 7px -4px rgba(0,0,0,0.2);
	box-shadow: 0 5px 7px -4px rgba(0,0,0,0.2);
}

.file img {
	display: block;
	margin:10px;
	
}

.file .info {
	font-size: 1.15em;
	color:#333;
	background: -moz-linear-gradient(center top, #f7f7f7, #fff 100%);
	background: -o-linear-gradient(top left, #f7f7f7, #fff 100%);
	background: -webkit-linear-gradient(#f7f7f7, #fff);
	padding:3px 10px 8px;
	margin:1px 0 0;
	border-top:1px #ddd solid;
	width:447px;
	
	
}

.file .info .title {
	font-size:1.5em;
	line-height:1.5em;
	color:#222;
	display:block;
}

.file .info .caption {
	
}

#projectslist {
	float:left;
	width:100%;
}

.projectpage {
		
}
	

.project {
	float: left;
	display: block;
	margin: 0 8px 17px 8px;
	overflow: hidden;
	outline: none;
	-webkit-box-shadow: 0 5px 7px -4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 5px 7px -4px rgba(0,0,0,0.2);
	box-shadow: 0 5px 7px -4px rgba(0,0,0,0.2);
}

.project .thumbnail {
	display: block;
	overflow: hidden;
	background-color: #fff;
	border:#ddd 1px solid;
	
}

.project .thumbnail img {
	margin:10px 10px 8px;	
}

.project .details {
	max-width:150px;
	padding:7px 10px 6px;
	border-top:1px #c9c9c9 solid;
	color:#222;
	text-shadow:0 1px #fff;
	background: -moz-linear-gradient(center top, #f7f7f7, #fff 100%);
	background: -o-linear-gradient(top left, #f7f7f7, #fff 100%);
	background: -webkit-linear-gradient(#f7f7f7, #fff);
}

.project:hover .details {
	color: #222;
}

.project .details .tags a {
	color: #666;
}

.project.active .details {
	color: #EF2400;
}

.tags {
	margin-bottom: 20px;
	font-size: 1em;
	color: #222;
}

.project-intro .tags {
	margin-bottom: 0;
}

.tags a {
	color: #666;
}

.tags a:hover {
	color: #999;
}

.project-intro {
	position:fixed;
	top:73px;
	left:517px;
	clear: both;
	margin:0 17px 50px 0;
}

.view {
	float: left;
	clear: both;
	padding-bottom: 20px;
	margin:0 8px 20px;
}

.last {
	margin-right: 0;
}


/* FOOTER */
#footer {
	font-size:10px;
	color:#666;
	margin:75px 0 0;
	text-align:center;	
}

#footer .heart
	{
		background: transparent url(/img/misc/heart.png) no-repeat bottom center;
		width:39px;
		height:34px;
		display:inline-block;
		-webkit-transition: 0.1s ease-in all;
	}
	

#footer .heart:hover
	{
		background-position:top;
	}



/*
 * Blog
 */

.post {
	margin: 0px 0 40px 0;
}

.postTitle a:hover {
	text-decoration: underline;
}

.post img {
	display: block;
	margin: 0 0 10px 0;
	padding: 0;
}

.post .text {
	margin: 20px 0 0 0;
	width: 450px;
}

.post .date {
	color: #999;
}

.post .more {
	font-size: 1.2em;
	color: #EF2400;
}

.post .more:hover {
	color: #999;
}