/* 
 * 'Squares' Portfolio/vCard HTML Template
 * Version: 1.01 (2011-09-17)
 * License: see Envato Licensing Terms (http://wiki.envato.com/support/legal-terms/licensing-terms/)
 * 
 * NOTE: This is NOT a free template and should consequently NOT be redistributed to others.
 * To buy this template, visit http://www.joelb.me/squarestemplate (redirects to Themeforest)
 * 
 * Author: Joel Besada
 * Home Page: http://www.joelb.me
 * Envato Marketplace Profile: http://www.themeforest.com/user/JoelBesada
 * 
 * Built With:
 * 	
 * 	HTML5 ✰ Boilerplate
 *
 * 	What follows is the result of much research on cross-browser styling. 
 * 	Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * 	Kroc Camen, and the H5BP dev community and team.
 *
 *		Detailed information about this CSS: h5bp.com/css 
 * 
 * ======== Table of Contents ===========
 *	1. Normalize CSS
 * 	2. Colors
 * 	3. Background
 * 	4. Fonts
 *  5. Transitions
 * 	6. Primary Styles
 * 		6.1 General (Element) Styles
 * 		6.2 Class Styles
 * 		6.3 Specific (ID) Styles
 * 			6.3.1 Container, Header, Navigation
 * 			6.3.2 Home Page
 * 			6.3.3 Resume Page
 * 			6.3.4 Portfolio Page
 * 			6.3.5 Contact Page
 * 	7. Non-semantic Helper Classes
 * 	8. Media Queries
 * 	9. Print Styles
 */

/* ==========================================================================
   1. Normalize CSS
   ========================================================================== */
  
@import url('normalize.css');

/* ==========================================================================
   2. Colors
   ========================================================================== */
  
@import url('colors/gray.css');
	
/* ==========================================================================
   3. Background
   ========================================================================== */
  
body {
	background-image: url('../img/backgrounds/carbon.png');
}

/* ==========================================================================
   4. Fonts
   ========================================================================== */

body {
	font: 12px Helvetica, Arial, sans-serif;	
}

h1, h2 {
	/* Google Web Font */
	font-family: 'Amaranth', serif; 	
}
  
/* ==========================================================================
   5. Transitions
   ========================================================================== */
  
a, li, #main-navigation a img, #contact-submit, .portfolio-button, .bar-graph li {
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	-ms-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}
  
/* ==========================================================================
   6. Primary Styles
   ========================================================================== */

/* ============ 6.1 General (Element) Styles ============= */

body {
	line-height: 1.5em;
}

li {
	list-style-type: none;	
}

a {
	text-decoration: none;
}

section {
	padding: 30px; 
	padding-left: 60px;	
	height: 300px;
	width: 600px;
}

h1 {
	font-size: 24px;
}

h1 a {
	color: inherit !important;
}

section h1 {
	font-weight: 500;	
}
footer {
	font-size: 11px;
	color: #999;	
	margin-top: 3px;
	margin-left: 5px;
}

footer a, footer a:visited {
	color: #666;	
}

/* ============ 6.2 Class Styles ============= */

.scroll-wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;	
}

.bar-graph aside {
	display: none;	
}

.panel {
	display:none;
	background-image: url('../img/backgrounds/carbon.png');
	width: 60px;
	height: 60px;
	position: absolute;
	z-index: 100;	
	
	-webkit-box-shadow: 1px 1px 0 rgba(0,0,0,0.15), inset 1px 1px 0 rgba(255,255,255,0.15);
	-moz-box-shadow: 1px 1px 0 rgba(0,0,0,0.15), inset 1px 1px 0 rgba(255,255,255,0.15);
	box-shadow: 1px 1px 0 rgba(0,0,0,0.15), inset 1px 1px 0 rgba(255,255,255,0.15);
}

.outer-border {
	position: absolute;
	z-index: 500;
	width: 10px;
	height: 100%;	
	
	-webkit-box-shadow: 1px 0 10px rgba(0,0,0,0.10);
	-moz-box-shadow: 1px 0 10px rgba(0,0,0,0.10);
	box-shadow: 1px 0 10px rgba(0,0,0,0.10);
}

.inner-border {
	width: 5px;	
	
	-webkit-box-shadow: 1px 0 10px rgba(0,0,0,0.10);
	-moz-box-shadow: 1px 0 10px rgba(0,0,0,0.10);
	box-shadow: 1px 0 10px rgba(0,0,0,0.10);
}

.left-column {
 	float:left;
}

.bar {
	clear:left;
	float: left;	
	margin-right:10px;
	
	-webkit-box-shadow: 1px 2px 1px rgba(0,0,0,0.10);
	-moz-box-shadow: 1px 2px 1px rgba(0,0,0,0.10);
	box-shadow: 1px 2px 1px rgba(0,0,0,0.10);
}

.bar-graph li {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

.bar-graph li:hover {
	opacity: 0.85;
	filter: alpha(opacity=85);
	cursor: pointer;	
}

.highlight {
	opacity: 1.0 !important;	
	filter: alpha(opacity=100) !important;
}

.bar-graph-info .content {
	display: none;
}

.portfolio-link {
	font-weight: bold;
	background: url('../img/icons/UI/link.png') 0 0.3em no-repeat;
	padding-left: 16px;	
}

.portfolio-button {
	width: 20px;
	height: 20px;
	float: left;	
	margin-right: 2px;
	opacity: 0.7;
	filter: alpha(opacity=70);
	-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.15), inset 0 0 2px rgba(0,0,0,0.30);
	-moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.15), inset 0 0 2px rgba(0,0,0,0.30);
	box-shadow: 1px 1px 1px rgba(255,255,255,0.15), inset 0 0 2px rgba(0,0,0,0.30);
}

.portfolio-button:hover {
	opacity: 0.9;
	filter: alpha(opacity=90);
}

.portfolio-button.active {
	height: 24px;
	margin-top: -2px;
	opacity: 1.0;
	filter: alpha(opacity=100);
	
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
}

.error, .success {
	display: none;
	font-weight: bold;
}

/* ============ 6.3 Specific (ID) Styles ============= */

/* ------- 6.3.1 Container, Header, Navigation ------- */

#container {
	position:absolute;
	width: 660px;
	height: 470px;
	top: 50%;
	margin-top: -300px;
	left:50%;
	margin-left: -330px;
}

#name-header {
	margin-left: 20px;
}

#name-header h1 {
	font-size: 64px;
	margin-bottom: 0;
}

#name-header h2 {
	font-weight: 400;	
	font-size: 32px;
	margin-top: 0.7em;
	margin-left: 0.6em;
	margin-bottom: 0.5em;
}

#main {
	position: relative;
	width: 660px;
	height: 360px;
	background-image: url('../img/backgrounds/grid.png');
	
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.1), inset 0 0 30px rgba(0,0,0,0.05);
	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.1), inset 0 0 30px rgba(0,0,0,0.05);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1), inset 0 0 30px rgba(0,0,0,0.05);
}

#main-navigation {
	position: absolute;
	z-index: 1000;
	width: 180px;
	height: 60px;	
	top: 300px;
	left: 480px;
}

#main-navigation li {
	float:left;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
}

#main-navigation li:hover {
	cursor: pointer;
}

#main-navigation a {
	color: inherit;	
	display: block;
	position: relative;
	height: 42px;
	padding-top: 18px;
	width: 60px;
}

#main-navigation a img {
	position: absolute;	
	left: 50%;
	margin-left: -12px;
	top: 50%;
	margin-top: -12px;
	
	opacity: 0.7;	
	filter: alpha(opacity=70);
}

#main-navigation a .active-image {
	display: none;
	opacity: 0;
}

#main-navigation a.active img  {
	display: block;
	opacity: 0.8;	
	filter: alpha(opacity=80);
}
#main-navigation a:hover img {
	opacity: 1.0;	
	filter: alpha(opacity=100);
}


/* ------- 6.3.2 Home Page ------- */

#home h1 {
	text-align: center;
	width: 120px;
	margin: 0;
	margin-bottom: 11px;
	
}

#about {
	position: relative;
	float:left;
 	width: 380px;	
 	margin-bottom: 30px;
}

#about .inner-border {
	position: absolute;
	top: 35px;
	height: 230px;	
	margin-left: -10px;	
}

#about aside {
	float: left;	
}

#about aside img {
	width: 120px;
	height: 120px;	
	
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.10);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.10);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.10);
}

#about p {
	display: block;
	width: 230px;
	float: left;
	font-size: 12px;
	margin-left: 10px;	
	margin-top: 7px;
}

#about p.secondary {
	width: 340px;
	margin-top: 0;
	margin-left: 5px;	
}

#social-links {
	float: left;
	width: 180px;
	padding-left: 0px;
	margin-left: 40px;
	margin-top: 35px;
}

#social-links .inner-border {
	height: 170px;	
	float: left;
}

#social-links ul {
	margin: 0;
	padding-left: 12px;	
}

#social-links ul img {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 3px;
}

#social-links ul li {
	opacity: 0.8;
	filter: alpha(opacity=80);
	float: left;
	width: 165px;	
	margin-right: 15px;
	margin-bottom: 11px;
}

#social-links ul li:hover {
	opacity: 1.0;	
	filter: alpha(opacity=100);
}

/* ------- 6.3.3 Resume Page ------- */

.no-js #resume .bar-graph-info .container, .no-js .bar-graph-info .inner-border  {
	display:none;	
}

.no-js #skillset ul {
	margin-top: 20px;
	padding-left: 7px;
}

.no-js #skillset ul li {
	background: url('../img/icons/UI/check.png') 0 0.4em no-repeat;
	padding-left: 17px;	
	margin-bottom: 5px;
	opacity: 1.0;
	filter:alpha(opacity=100);
}

.no-js #resume .bar-graph-info {
	float: left;
	width: 260px;
	margin-top: 100px;
	margin-left: 20px;
}

.no-js #resume .resume-download {
	margin-left: 5px;
}

.no-js #resume h1 {
	font-size: 16px;
	text-align: left;
}

.no-js #work h1 {
	text-align: center;	
}

#resume h1 {
	width: 180px;
	margin-top: 0;	
	margin-bottom: 11px;
	text-align: center;
}

#resume .left-column {
	position: relative;
	width: 240px;	
}

#resume .left-column .inner-border {
	position: absolute;
	top: 35px;
	height: 230px;	
	margin-left: -10px;
}

#skillset {
	position: relative;
	width: 300px;
	height: 120px;
	font-weight: bold;
}

#skillset .bar-graph {
	padding-left: 0;
	height: 115px;
	padding-top: 5px;
}
#skillset .bar-graph li {
	clear: both;	
}

#work {
	float: left;
	margin-top: 5px;
}

#work h1 {
	font-size: 18px;
	margin-bottom: 0;	
}

#work ul {
	font-size: 12px;
	padding-left: 12px;
	margin: 8px 0 8px -5px;
}

#work ul li {
	background: url('../img/icons/UI/check.png') 0 0.4em no-repeat;
	margin-bottom: 2px;
	padding-left: 17px;	
}

#resume .bar-graph-info {
	position: relative;
	width: 300px; 
	float: left;	
}

#resume .bar-graph-info .inner-border {
	position: absolute;
	height: 170px;
	top: 35px;
	
}

#resume .bar-graph-info .container {
	margin-left: 15px;	
	margin-top: 30px;
	height: 185px;
}

#resume .bar-graph-info h1 {
	width: auto;
	text-align: left;
	font-size: 14px;
	margin-top: 5px;
	margin-bottom: 4px;
}

#resume .bar-graph-info p {
	margin-top: 5px;	
}

#resume .bar-graph-info p.secondary {
	margin-top: 11px;	
}

#resume .bar-graph-info p.secondary {
	margin-top: -5px;	
}

#resume .resume-download {
	margin-left: 63px; 
	font-size: 11px;
	font-weight: bold;
	background: url('../img/icons/UI/document_stroke.png') 0 0.2em no-repeat;
	padding-left: 17px;
}
#resume-button {
	width: 160px;
	height: 20px;
	padding: 5px;
	margin-left: 305px;
	text-align: center;
	font-weight: bold;
	font-size: 11px;
}	
#resume-button a {
	color: #f3f3f3;
}

/* ------- 6.3.4 Portfolio Page ------- */

#portfolio-timer {
	display: block;
	position: absolute;
	left:0;
	top:0;
	z-index: 1000;
	width: 0;
	height: 5px;
	opacity: 0.5;
	filter: alpha(opacity=50);
	
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0, 0.25);
	-moz-box-shadow: 0 2px 2px rgba(0,0,0, 0.25);
	box-shadow: 0 2px 2px rgba(0,0,0, 0.25);	
}

#grid-overlay {
	display: none;
	background-image: url('../img/backgrounds/grid.png');
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 500;
	opacity: 0.1;	
	filter: alpha(opacity=10);
}

#grid-overlay:hover {
	cursor: pointer;	
}

#portfolio-navigation {
	display: none;
	position: absolute;
	z-index: 1000;
	left: 20px;
	top: 330px;
}

#portfolio-navigation:hover {
	cursor: pointer;	
}

#portfolio {
	padding: 0;	
	position: relative;
	width: 660px;
	height: 360px;
}

#portfolio-images {
	padding: 0;
	margin: 0;
}

#portfolio-images aside, #portfolio-info {
	display: none;	
	position: absolute;
	z-index: 600;
	top: 20px;
	left: 20px;	
	width: 190px;
	padding: 15px;
}

.no-js #portfolio-images li {
	display: none;	
}

.no-js #portfolio-images .first, .no-js #portfolio-images .first aside {
	display: block;	
}

#portfolio-images aside h1, #portfolio-info h1 {
	margin: 0;
	text-align:center;	
}

#portfolio-images aside .portfolio-link, #portfolio-info .portfolio-link {
	float: right;	
}

#portfolio noscript div {
	position: absolute;
	top: 320px;
	left: 20px;
	padding: 5px 20px;
	font-weight: bold;
}

/* ------- 6.3.5 Contact Page------- */
#contact h1 {
	width: 180px;
	margin-top: 0;	
	margin-bottom: 11px;
	text-align: center;
}

#contact-form {
	position: relative;
	width: 300px;	
	float: left;
}

#contact .inner-border {
	position: absolute;
	top: 5px;
	height: 230px;	
	margin-left: -10px;		
}

#contact-name, #contact-email {
	width: 173px;
	height: 24px;	
	margin: 0 5px 5px 0;
	padding-left: 5px;
	border: 1px solid;
}

#contact-message {
	height: 122px;
	width: 288px;
	padding: 5px;
	border: 1px solid;
	resize: none;	
}

#contact-submit {
	width: 80px;
	height: 30px;
	outline: 0;
	border: 0;
	font-weight: bold;
	margin: 5px;
	margin-left: 0;
}

#contact-info {
	position: relative;
	width: 180px;
	height: 180px;
	float: left;
	margin-left: 70px;	
}

#contact-info .inner-border {
	height: 170px;	
}

#contact-info ul {
	margin: 0;
	padding: 5px 0 0 5px;
}

#contact-info ul li {
	margin-bottom: 10px;	
	opacity: 0.8;
	filter: alpha(opacity=80);
}

#contact-info ul li:hover{
	opacity: 1.0;
	filter: alpha(opacity=100);
}

#contact-info .second-row {
	margin-left: 26px;	
}

#contact-info ul li img {
	margin-right: 8px;	
	width: 16px;
	height: 16px;
}


/* ===== 7. Non-semantic Helper Classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* ===== 8. Media Queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

/* ===== 9. Print Styles =======================================================
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}