*{
	margin:0;
	padding:0;
}
body{
	background:#222 url('/interface/lace5percent.jpg');
	background: -webkit-radial-gradient(50%, closest-side,rgba(255,255,255,0.25), rgba(34,34,34,0)) no-repeat,
									url('/interface/lace5percent.jpg');
	background:    -moz-radial-gradient(50%, closest-side,rgba(255,255,255,0.25), rgba(34,34,34,0)) no-repeat,
							    url('/interface/lace5percent.jpg');
	font:11px Helvetica Neue, Helvetica, sans-serif;
}
table, tr, td{
	border:0;
	font-style:inherit;
	font-size:inherit;
	/* to override any user agent stylesheet defaults */
}

a,
a:hover,
a:active,
a:link,
a:visited{
	color:inherit;
}
a[href^="http://"]{
	background: url(interface/external_link_black.png) center right no-repeat;
    padding-right:14px;
}
#container{
	margin:10px auto;
	width:600px;
	min-height:600px;=
	background:#a7a7a7; /*fallback*/
	/*
	gradient from dark to light starts at top left, goes all the way across and halfway down the page.
	gradient from light to dark starts at bottom right, goes all the way across and halfway up the page.
	*/
	background:
	linear-gradient(135deg, transparent 55px, rgba(167,167,167,0.75) 55px),
	linear-gradient(315deg, transparent 58px, rgba(167,167,167,0.75) 58px);
	background:
	-webkit-linear-gradient(315deg, transparent 58px, rgba(167,167,167,0.75) 58px),
	-webkit-linear-gradient(135deg, transparent 55px, rgba(167,167,167,0.75) 55px);
	
	background-position:top left, bottom right;
	background-size: 100% 50%, 100% 50%;
	background-repeat: no-repeat;
}
#content{
	margin:32px;
}
#header{
	width:600px;
	height:226px;
	position:relative;
}
#header_img{
	-webkit-mask-image: url(interface/head_mask.png);
	-moz-mask-image: url(interface/head_mask.png);
}
#title_nav{
	position:absolute;
	top:40px;
	left:10px;
	padding-left:50px;
	width:510px;
	background:
	-webkit-linear-gradient(315deg, transparent 50px, rgba(96,96,96,0.5) 50px) top left;
}
#footer{
	margin-left:30px;
	margin-top:10px;
	position:relative;
	bottom:10px;
	width:540px;
	height:30px;
	padding:10px;
	background:
	-webkit-linear-gradient(135deg, transparent 50px, rgba(86,86,86,0.75) 50px) bottom right;
}
h1{
	margin:10px;
	margin-left:50px;
	color:white;
	font-size:24px;
	font-weight:100;
	white-space:nowrap;
	vertical-align:top;
}
h1 strong{
	font-weight:400;
	vertical-align:top;
}

.outer_item{
	display:inline-block;
	vertical-align:top;
	position:relative;
	width:100px;
}
.submenu{
	position:absolute;
	left:0;
	width:100%;
	height:100%;
	display:none;
	font-size:16px;
	text-align:center;
	vertical-align:top;
}
.submenu li{
	list-style-type:none;
	vertical-align:top;
}
.outer_item a, .outer_item a:hover, .outer_item a:active{
	color:white;
	text-decoration:none;
}
.outer_item:hover strong, .outer_item:active strong{
	visibility:hidden;
}
.outer_item:hover .submenu, .outer_item:active .submenu{
	display:inline-block;
}
#software .submenu{
	margin-top:-4px;
}
#photos .submenu{
	margin-top:-5px;
	font-size:14px;line-height:95%
}

.gallery{margin:0; border:0; padding:0; padding-bottom:50px; width:536px; background:#e5e5e5 url(interface/grade.jpg) top left no-repeat; list-style-type:none;}
.gallery li{padding-top:50px;}
.gallery li div{text-align:right;}

.album{
	text-align:left;
	background: #e0e0e0 url('interface/grade2.jpg') top left no-repeat;
	position:relative;
}

.gallery p{
	margin:5px;
}
.scrollinglist{/*max-width:512px;*/ text-align:left; vertical-align:bottom; white-space:nowrap; overflow-y:hidden; overflow-x:auto; margin-bottom:20px;}

.scrollinglist .thumbnail{
	/*border:10px solid #A7A7A7;*/
	display:inline-block;
	background: rgb(167, 167, 167); /* The Fallback */
   	background: rgba(167, 167, 167, 0.5);
	vertical-align: middle;
   	text-align:center;
   	width:85px;
   	height:85px;
   	padding:10px;
	margin-left:-50px;
	transform:		skew(0,-15deg) scale(0.75,0.75);
	-ms-transform:		skew(0,-15deg) scale(0.75,0.75); /* IE 9 */
	-webkit-transform:	skew(0,-15deg) scale(0.75,0.75); /* Safari and Chrome */
	-o-transform:		skew(0,-15deg) scale(0.75,0.75); /* Opera */
	-moz-transform:		skew(0,-15deg) scale(0.75,0.75); /* Firefox */
}
.scrollinglist .thumbnail img{
	//position:relative;
	margin-left: auto;
	margin-right: auto;
}
.scrollinglist .thumbnail:hover, .scrollinglist .thumbnail:focus, .thumbnail:target{
	margin-right:50px; margin-left:0px;
	transform:		skew(0,0) scale(1,1);
	-ms-transform:		skew(0,0) scale(1,1); /* IE 9 */
	-webkit-transform:	skew(0,0) scale(1,1); /* Safari and Chrome */
	-o-transform:		skew(0,0) scale(1,1); /* Opera */
	-moz-transform:		skew(0,0) scale(1,1); /* Firefox */
}
.scrollinglist .thumbnail:first-child{
	margin-left:0;
}
.scrollinglist .thumbnail:last-child:hover, .scrollinglist .thumbnail:last-child:focus{
	margin-right:0;
}
.larger{
	background: white url(interface/loading.gif) center center no-repeat;
	/*margin:8px;*/
	z-index:1;
	max-height:0;
	overflow:hidden;
	position: absolute;
	top: 140px;
	width: 100%;
}

.gallery li div .larger{
	text-align:center;
}
.larger:target{
	max-height:2000px;
	margin-bottom:50px;
	transition:			all 2s ease, padding 0;
	-webkit-transition:	all 2s ease, padding 0;
	-moz-transition:	all 2s ease, padding 0;
	-o-transition:		all 2s ease, padding 0;
	position: relative;
	top: 0;
}
.larger img{
	display:block;
}

.largerimg{
	margin:4px auto;
}

.closebutton{
	position:absolute;
	top:10px;
	right:0;
}
.prevbutton{
	position:absolute;
	top:45%;
	left:0;
}
.nextbutton{
	position:absolute;
	top:45%;
	right:0;
}
.larger .nextbutton img{
	padding-left:none;
}

/*----- styling for iPhone/mobile -----*/

@media screen and (max-device-width: 640px){
	h1 strong{
		font-weight:700;
		/*
		 Mobile Safari doesn't render the ultra light text as any lighter, so have to compensate by making it render the normal text as heavier.
		 In future, will change to a CDN hosted font with more weights available.
		 */
	}
}