@font-face {
  font-family:'heading';
  src: url('../FONTS/raleway_thin-webfont.eot?') format('eot'), 
  url('../FONTS/raleway_thin-webfont.woff') format('woff'), 
  url('../FONTS/raleway_thin-webfont.ttf') format('truetype');
}

@font-face {
font-family:'body';
  src: url('../FONTS/Junction-webfont.eot?') format('eot'), 
  url('../FONTS/Junction-webfont.woff') format('woff'), 
  url('../FONTS/Junction-webfont.ttf') format('truetype');
}


BODY {
min-width:800px;
margin:0px;
padding:0px;
font-family:heading, sans-serif;
font-size:.9em;
}

LI {
margin:20px 0px 0px 0px;
padding:0px;
}

LI.first {
margin:0px;
}

STRONG {
font-weight:700;
}

.bold {
font-weight:700;
}


/**** Box Shadow ****/

#header, .cat-holder, .project-holder , #back-top {
box-shadow:2px 2px 5px 0px rgba(0,0,0,0.5);
}

.note A, .note .note_text {
box-shadow:2px 2px 5px 0px rgba(0,0,0,0.4);
}

/**** Header Styles ****/

#header {
position:fixed;
z-index:4;
height:35px;
width:100%;
min-width:800px;
margin:-2px 0px;
padding:0px;
border-width:0px;
clear:both;
white-space:nowrap;
font-family: heading, sans-serif;
font-size:1.2em;
}

#header .fill {
position:absolute;
top:0px;
left:0px;
z-index:4;
width:100%;
height:100%;
}

#header UL {
position:absolute;
bottom:0px;
display:inline-block;
width:290px;
margin:0px;
padding:25px 0px 6px 15px;
list-style:none;
}

#header LI {
display:inline-block;
margin:0px;
padding:0px;
}

#header A, #header A:visited {
position:relative;
z-index:6;
margin:0px 0px 0px 4px;
padding:7px 10px 6px 10px;
text-decoration:none;
-webkit-transition:1s cubic-bezier(0.25,0.1,0.25,1.0);
-moz-transition:1s cubic-bezier(0.25,0.1,0.25,1.0);
-o-transition:1s cubic-bezier(0.25,0.1,0.25,1.0);
-ms-transition:1s cubic-bezier(0.25,0.1,0.25,1.0);
transition:1s cubic-bezier(0.25,0.1,0.25,1.0);
}

#header A:hover, #header #current {
/* check theme for bgcolor */
}

#header H1 {
position:absolute;
bottom:0px;
right:0px;
z-index:5;
display:inline-block;
width:calc(100% - 352px);
margin:0px;
padding:10px 20px 0px 20px;
text-align:center;
font-size:1.6em;
}

#header H1 A {
padding-bottom:0px;
}

/**** Faded Background Style ****/

.bg {
position:absolute;
top:0px;
left:0px;
z-index:2;
width:100%;
height:100%;
}

/**** Category Column Styles ****/

#cat{
margin:58px 0px 0px 0px;
padding:0px 20px 0px 0px;
display:inline-block;
list-style:none;
float:left;
}

.cat-holder {
position:relative;
height:200px;
width:100px;
background-position:center;
}

.cat-link, .cat-link:visited {
	position:absolute;
	z-index:2;
	left:100px;
	top:0px;
	opacity:0;
	filter:alpha(opacity=0); /* For IE8 and earlier */
	width:200px;
	height:100px;
	margin:0px;
	padding:0px;
	border:none;
	display:table;
	vertical-align: middle;
	text-align:center;
	text-decoration: none;
	font-size:1.7em;
	font-weight:100;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
	-webkit-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    -o-transform:rotate(90deg); 
	-webkit-transition:.5s cubic-bezier(0.25,0.1,0.25,1.0);
	-moz-transition:.5s cubic-bezier(0.25,0.1,0.25,1.0);
	-o-transition:.5s cubic-bezier(0.25,0.1,0.25,1.0);
	-ms-transition:.5s cubic-bezier(0.25,0.1,0.25,1.0);
	transition:.5s cubic-bezier(0.25,0.1,0.25,1.0);
}

.cat-link SPAN {
	position:relative;
	z-index:3;
	display:table-cell;
	vertical-align: middle;
	text-align:center;
}

.cat-link:hover, .current A {
	opacity:1;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}



/**** Projects Column Styles ****/

#projects{
margin:58px 0px 0px 0px;
padding:0px 20px 0px 20px;
display:inline-block;
list-style:none;
float:left;
border-style:solid;
border-width:0px 0px 0px 1px;
}

.project-holder {
position:relative;
width:150px;
height:150px;
background-position:center;
}

.project-holder A, .project-holder A:visited {
position:absolute;
z-index:2;
opacity:0;
filter:alpha(opacity=0); /* For IE8 and earlier */
margin:0px;
padding:0px;
height:150px;
width:150px;
border:none;
display:table;
vertical-align: middle;
text-align:center;
text-decoration: none;
font-size:1.2em;
font-weight:100;
-webkit-transition:.5s cubic-bezier(0.25,0.1,0.25,1.0);
-moz-transition:.5s cubic-bezier(0.25,0.1,0.25,1.0);
-o-transition:.5s cubic-bezier(0.25,0.1,0.25,1.0);
-ms-transition:.5s cubic-bezier(0.25,0.1,0.25,1.0);
transition:.5s cubic-bezier(0.25,0.1,0.25,1.0);
}

.project-holder A SPAN {
position:relative;
z-index:3;
display:table-cell;
vertical-align: middle;
text-align:center;
}

.project-holder A:hover, .current A {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}



/**** Note Styles ****/

.arrow {
position:relative;
height:200px;
padding-left:107px;
display:table-cell;
vertical-align: middle;
white-space:nowrap;
border-style:solid;
border-width:0px 1px 0px 0px;
}

#projects .arrow {
height:150px;
padding-left:157px;
}

.arrow IMG {
margin-right:-1px;
}

.note {
position:relative;
z-index:1;
height:200px;
padding-left:120px;
display:table-cell;
vertical-align: middle;
white-space:nowrap;
}

.project-holder .note {
padding-left:170px;
height:150px;
}

.note A, .note A:visited {
position:relative;
z-index:2;
display:inline-block;
vertical-align: middle;
margin:0px;
padding:10px;
font-size:1.5em;
font-weight:100;
text-transform:uppercase;
text-decoration:none;
border-style:solid;
border-width:2px;
}

.note A:hover {
text-decoration:none;
}

.note .note_text {
position:relative;
z-index:2;
display:inline-block;
vertical-align: middle;
margin:0px;
padding:10px;
font-size:1em;
font-weight:100;
border-style:solid;
border-width:2px;
}

.note SPAN {
position:relative;
z-index:4;
text-align:center;
}

.note IMG {
position:relative;
z-index:4;
display:inline;
vertical-align: middle;
margin:0px -1px 0px 0px;
padding:0px;
border:none;
}



/**** General Content ****/

#content {
position:relative;
z-index:0;
width:calc(100% - 352px);
margin:58px 0px 40px 0px;
padding:0px 20px 0px 20px;
display:inline-block;
float:left;
line-height:1.5em;
font-size:1em;
font-weight:100;
font-family:body;
border-style:solid;
border-width:0px;
}

#content H2 {
border-width:0px;
border-style:solid;
}

#content A, #content A:visited {
/* Check theme for color */
text-decoration:underline;
}

#content A:hover {
/* Check theme for color */
}

#content .credits {
margin:0px;
}

#back-top {
position:fixed;
bottom:0px;
left:40px;
display:none;
}

#back-top SPAN {
display:table;
width:230px;
height:35px;
}

#back-top a, #back-top a:visited {
white-space:nowrap;
font-family: heading, sans-serif;
font-size:1.2em;
text-decoration:none;
display:table-cell;
text-align:center;
vertical-align:middle;
-webkit-transition:2s cubic-bezier(0.25,0.1,0.25,1.0);
-moz-transition:2s cubic-bezier(0.25,0.1,0.25,1.0);
-o-transition:2s cubic-bezier(0.25,0.1,0.25,1.0);
-ms-transition:2s cubic-bezier(0.25,0.1,0.25,1.0);
transition:2s cubic-bezier(0.25,0.1,0.25,1.0);
}

#back-top a:hover {
}

#footer {
clear:both;
}