/*	Authors		Craig Rozynski craigrozynski.com, dinosaurswithlaserz.com 
							Marco Lago marcolago.com
		Version		2.0 2011-07-15 */

/* CSS Reset (customised) */

/* Clear all styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;}
    
    
    
body { display: block; }
html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
a:link { -webkit-tap-highlight-color: #3b7cbf; }
.ie7 img { -ms-interpolation-mode: bicubic; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }

/* Primary Styles */
	nav li {padding-right: 1.0em; padding-left: 1.0em; }

  
#port a, #port a:link, #port a:visited, #port a:active, #port .title, #port .category {
	float: left;
	width: 80%;
	height: auto;
	margin:0 9% 30px 9%;
	text-decoration: none;
	border:thin solid black;

}

#name, h3  {font-size: 2.5em; }
h3 {color: #bbb; margin-bottom: .5em;}
h1, h2 { font-size: 2.8em; }
#port h1 {
	line-height: 1;
	letter-spacing: -0.05em;
}
#port h2 {
	line-height: 1;
	letter-spacing: -0.05em;
}
#port h3 {
	line-height: 1;
	letter-spacing: -0.05em;
}
#port i {
	font-size: 1.25em; 
	line-height: 1.15;
	margin: 0.75em 0;
	font-style: normal;
}
#port small {
	font-size: 1em; 
}
#port img { max-width: 100%; z-index: 0;}

.square{
color: black;
font-size: .8em;
text-align: left;
width:100%;

}

.square b {
	font-size: 1.5em; 
	font-family: ColaborateRegular, Arial, Helvetica, sans-serif;
}


.square span{ 
	text-align: center;
	float:left; 
	width: 97%;
	height:97%; 
	color: black; 
	position: relative;
	margin:auto;
    top: 0px;
	left: 0;
	opacity:1;
    z-index: 9;
    padding:3% 3% 0% 1%;
}



/* Media Queries */

/* Column Control Media Queries */

@media screen and (min-width:500px) {
	body {
		max-width: 1600px;
		margin: 0 auto;
		overflow: hidden;
	}
	
	#port a {
		-webkit-transition: background-color .3s linear;
		-moz-transition: background-color .3s linear;
		transition: background-color .3s linear;
	}
	#port a:hover {}
	#port a.title { background-color: #f2f1db; }
	#port a, #port a:link, #port a:visited, #port a:active, #port .title, #port .category {
		position: relative;
		top: 0;
		overflow: hidden;
	}
	#port div, #port h2 { position: absolute; }
}

/* Two Column */

@media screen and (min-width:500px) {
	#port a, #port a:link, #port a:visited, #port a:hover, #port a:active, #port .title, #port .category {
		width: 31%;
		margin: 0 1% 20px 1%;
		padding-bottom: 31%;
	}
	.square span {	position: absolute; 	background-color: #9f7ab6; 	opacity:0;}
}

/* Three Column */

@media screen and (min-width:800px) {
	#port .title, #port .category, #port a, #port a:link, #port  a:visited, #port a:hover, #port a:active {
		width: 22.68%;
		margin: 20px 1% 0 1%;
		padding-bottom: 22%;
	}
	
}

/* Four Column */

@media screen and (min-width:1200px) {
	#port .title, #port .category, #port a, #port a:link, #port a:visited, #port a:hover, #port a:active {
		width: 22.68%;
		margin: 20px 1% 0 1%;
		padding-bottom: 22%;
	}
}