/*--------------------------------------------------------------------------
   

	Typebig Resume / CV

	0. YUI Library is used for CSS reset (http://yuilibrary.com/yui/docs/cssreset/)
	1. Body
	2. Typography
	3. Page Sections
		3.1. Topbar
		3.2. Intro
		3.3. Resume
		3.4. Works
			3.4.1 jQuery Reveal Plugin
		3.5. Contact / References / Testimonials
		3.6. Footer


--------------------------------------------------------------------------*/

/*
    Optional colors
    #446CBC
    #446CBC
    */

/*--------------------------------------------------------------------------
	1. Body
--------------------------------------------------------------------------*/

body {
	color: #333;
	background: #fff;
	font: 14px/22px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}




/*--------------------------------------------------------------------------
	2. Typography
--------------------------------------------------------------------------*/

/* Headings Default */
h1 { font-size: 17px; line-height: 20px; font-weight: bold; }
h2 { font-size: 18px; line-height: 27px; }
h3 { font-size: 14px; line-height: 22px; }
h4 { font-size: 13px; line-height: 23px; }
h6 { font-size: 12px; line-height: 14px; }

/* Links */
a, a:visited { color: #333; text-decoration: none; outline: 0; }
a:hover, a:focus { color: #000; }
p a, p a:visited { line-height: inherit; }


/* Highlighted Text */
::selection {
	background: #446CBC;
	color: #fff;
	text-shadow: none;
}

/* Firefox */
::-moz-selection {
	background: #446CBC;
	color: #fff;
	text-shadow: none;
}

em, .italic { font-style: italic; }
strong { font-weight: bold; }
small { font-size: 80%; }

.font-color-primary {
	color: #446CBC;
}

.font-color-gray {
	color: #bbb;
}

.font-color-black {
	color: #111;
}




/*--------------------------------------------------------------------------
	3. Page Sections
--------------------------------------------------------------------------*/

/* Common Elements */
img {
	max-width: 100%;
}

h3 {
	font: normal 300 12px/22px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 20px; 
}

h5 { 
	font: normal 11px/21px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 3px;
}




	/*---------------------------------------------------
		3.1 Topbar

		* This is the fixed top navigation
	---------------------------------------------------*/

	/* Topbar (fixed) */
	/* Please refer to responsive_custom.css for CSS in smaller viewport */
	#section-topbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10000;
		overflow: visible;
		font: normal 16px/24px  'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	#section-topbar a {
	  color: #fff;
	}

	#topbar-inner {
		background: #111;
		line-height: 0;
		text-align: center;
	}

	/*
		Top Bar

		By default, top navigation bar uses "fixed" position
	*/
	#section-topbar ul#nav {
		display: inline-block;
		position: relative;
		margin: 0;
		padding: 0;

		border-right: 1px solid #222;

		/* For IE, the outcast */
		zoom:1;
		*display: inline;
	}

	#section-topbar ul#nav > li {
		display: block;
        float: left;
        padding: 0;
	}


	#section-topbar ul#nav a {
	  display: block;
	  font: normal 11px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
	  text-decoration: none;
	  padding: 18px 20px 18px 20px;
	  border-left: 1px solid #222;
	}

		#section-topbar ul#nav a:hover {
		  background: #222;
		  text-decoration: none;
		  border-left: 1px solid #111;
		}

		#section-topbar ul#nav .active a {
			/*background: #446CBC;*/
			background: #446CBC;
			border-left: 1px solid #111;
		}

			#section-topbar ul#nav .active a:hover {
				/*background: #446CBC;*/
				background: #446CBC;
			}


		/* jQuery UI tooltip for menu items */
		.ui-tooltip {
			color: #eee;
			background: #222;
			padding: 10px 15px;
			font: normal 300 12px/22px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-transform: uppercase;
			letter-spacing: 2px;
			position: absolute;
			z-index: 9999;
			max-width: 300px;
		}

		body .ui-tooltip {
			border: none;
		}




	/*---------------------------------------------------
		3.2 Header

		Includes full-width background iamge and intro paragraph
	---------------------------------------------------*/

	#section-intro {
	}

		/* Profile Image (Full background) */
		#section-profileImage  {
			background: #222 url('../images/profile_main.jpg') no-repeat center center;
			background-size: cover;
			height: 440px;
		}

			#section-profileImage #box-name {
				color: #333;
				font-size: 16px;
				line-height: 26px;
				margin-top: 180px;
				text-align: center;
			}

				#section-profileImage #box-name h2 {
					color: #fff;
					font: normal bold 36px/46px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
					letter-spacing: 3px;
					text-transform: uppercase;
				}


				#section-profileImage #box-name p {
					color: #fff;
					font: normal 300 14px/24px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
					margin-top: 10px;
				}

				#section-profileImage #box-name a {
					color: #fff;
				}

					#section-profileImage #box-name a:hover {
						color: #446CBC;
					}

		/* About */
		#section-about {
			color: #fff;
			/*background: #446CBC;*/
			background: #446CBC;
			padding: 40px 0;
		}

			#section-about h3 span.underline {
				padding-bottom: 3px;
				border-bottom: 1px solid #fff;
			}

			p.intro {
				color: #fff;
				font: normal 15px/29px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
			}
			
			a.link-print, a.link-pdf {
				color: #fff;
				font: normal 11px/21px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
				letter-spacing: 1px;
				text-transform: uppercase;
				display: block;
				padding: 8px 0 8px 40px;
				margin-bottom: 10px;
			}

			a.link-print {
				background: url('../images/icons/icon_print.png') no-repeat left center;
			}

			a.link-pdf {
				background: url('../images/icons/icon_pdf.png') no-repeat left center;
			}



		
	/*---------------------------------------------------
		3.3 Resume
	---------------------------------------------------*/
	
	#section-resume {
		color: #666;
		background: #fff;
		font: normal 16px/26px 'PT Serif', Georgia, serif;
		padding: 80px 0;
	}

		#section-resume .section-title {
			color: #446CBC;
			padding: 50px 0;
			display: none;
		}

		#section-resume h2 {
			color: #446CBC;
		}

		#section-resume h3 {
			color: #333;
			font: normal 300 12px/28px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
			padding-top: 16px;
			text-transform: uppercase;
		}

			#section-resume h3.no-padding {
				padding: 0;
			}


			#section-resume h3 span.underline {
				padding-bottom: 3px;
				border-bottom: 1px solid #777;
			}

		#section-resume h5 {
			color: #ccc;
		}

			#section-resume h5+p {
				margin-bottom: 15px;
			}

		#section-resume img.profile-image {

		}
		
		#section-resume .block {
			margin-bottom: 40px;
		}

			#section-resume .block.last {
				margin-bottom: 0px;
			}

		#section-resume #box-profile a.link-email,
		#section-resume #box-profile a.link-phone {
			color: #666;
			font: normal 15px/25px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		}

			#section-resume #box-profile a.link-email:hover,
			#section-resume #box-profile a.link-phone:hover {
				color: #446CBC;
			}

		#section-resume .item {
			margin-bottom: 10px;
		}
		
			#section-resume .item > div {
				padding-top: 15px;
			}

				#section-resume .item.no-border > div,
				#section-resume .item > div.no-border { 
					border-top: none;
				}

			#section-resume .item h4 {
				color: #446CBC;
				font: normal 14px/24px 'PT Serif', Georgia, serif;
			}
		
			#section-resume .item div h4 + p {
				color: #666;
				font: normal 14px/24px 'PT Serif', Georgia, serif;
				margin-top: 0;
			}

			#section-resume .item div p.desc {
				color: #aaa;
				font: normal 13px/23px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
				margin-top: 15px;
			}
			
			#section-resume .item div > p.date {
				color: #444;
				font: normal 13px/23px 'PT Serif', Georgia, serif;
			}
			
			#section-resume .item div > p.date span.label {
				display: inline-block;
				color: #aaa;
				background: #111;
				padding: 4px 8px;
				margin-top: 6px;
				font: normal 10px/20px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
				text-transform: uppercase;
				letter-spacing: 1px;
			}


		.box-skill {
			width: 33%;
			float: left;
			position: relative;
		}

			.box-skill .box-inner {
				padding: 20px 25px;
				background: #111;
				height: 200px;
				overflow: hidden;
			}

			.box-skill.even .box-inner {
				background-image: url('../images/alpha/bg_alpha15.png');
			}

			.box-skill h4 {
				color: #fff;
				font: bold 13px/23px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
				text-transform: uppercase;
				letter-spacing: 2px;
			}

				.box-skill.hoverClass h4 {
				}

				.box-skill div > p {
					color: #fff;
					font: normal 13px/23px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
					margin-top: 15px;
				}

				.box-skill.hoverClass div > p {
					display: block;
				}




	/*---------------------------------------------------
		3.4 Works
	---------------------------------------------------*/
	
	#section-works {
		color: #222;
		background: #f5f5f5;
		font: normal 16px/26px 'PT Serif', Georgia, serif;
		padding: 80px 0;
	}

		#section-works .item {
			color: #333;
			background: #fff;
			margin-bottom: 40px;
		}

			#section-works .item.last {
				margin-bottom: 0px;
			}

			#section-works a:hover .item {

			}

		#section-works .img-wrap {
			background: #000;
			line-height: 0;
			position: relative;
		}

			#section-works .item .work-info {
				margin: 30px 40px 20px 0;
			}

				#section-works .item span.category {
					color: #ccc;
					font: normal 11px/21px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
					text-transform: uppercase;
					letter-spacing: 2px;
				}

				#section-works .item h4 {
					font-size: 17px;
					line-height: 28px;
					margin: 5px 0 20px 0;
				}

					#section-works a:hover .item h4 {
						color: #333;
					}

				#section-works .item p {
					color: #aaa;
					font: normal 12px/22px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
				}

					#section-works a:hover .item p {
						color: #777;
					}



		/*---------------------------------------------------
			3.4.1 jQuery Reveal Plugin
		---------------------------------------------------*/
				
		/* CSS for jQuery Reveal Plugin Maintained for Foundation. foundation.zurb.com Free to use under the MIT license. http://www.opensource.org/licenses/mit-license.php */
		/* Reveal Modals ---------------------- */
		.reveal-modal-bg { 
			position: fixed; 
			height: 100%; 
			width: 100%; 
			background: #000; 
			background: rgba(0, 0, 0, 0.55); 
			z-index: 40; 
			display: none; 
			top: 0; 
			left: 0; 
		}

		.reveal-modal { 
			background: #fff; 
			visibility: hidden; 
			display: none; 
			top: 100px; 
			left: 50%; 
			margin-left: -300px; 
			width: 600px; 
			position: absolute; 
			z-index: 41; 
			padding: 0; 
		}

			.reveal-modal .box-modal {
				padding: 20px 25px;
			}

				.reveal-modal .box-modal h4 {
					font: normal 14px/21px 'PT Serif', Georgia, serif;
					margin-bottom: 15px;
				}

				.reveal-modal .box-modal p {
					color: #aaa;
					font: normal 12px/22px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
				}

			.reveal-modal a.link-details {
				display: block;
				color: #333;
				background: #f5f5f5;
				padding: 20px 25px;
				border-top: 1px solid #eee;
				font: normal 11px/21px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
				text-transform: uppercase;
				letter-spacing: 3px;
			}

				.reveal-modal a.link-details:hover {
					color: #fff;
					background: #446CBC;
				}

			.reveal-modal a.close-reveal-modal {
				display: block;
				padding: 20px 25px;
				color: #aaa;
				background: #111;
				font: normal 11px/21px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
				text-transform: uppercase;
				letter-spacing: 3px;
				cursor: pointer;
			}

				.reveal-modal a.close-reveal-modal:hover {
					color: #446CBC;
					background: #000;
				}

		@media print { .reveal-modal { border: solid 1px black; background: #fff; } }



			
	/*---------------------------------------------------
		3.5 Contact / References / Testimonials
	---------------------------------------------------*/
	
	#section-contact {
		color: #fff;
		padding: 0px 0;
		background: #161616;
		padding: 80px 0;
	}
	
		#section-contact h3 {
			font-weight: bold;
			color: #333;
			margin-bottom: 25px;
		}

			#section-contact h3 span.underline {
				padding-bottom: 3px;
				border-bottom: 1px solid #333;
			}

		#section-contact p.desc {
			color: #777;
			margin-bottom: 40px;
		}
		
		/* Register Form */
		#section-contact form {
			margin-bottom: 40px;
		}

		#section-contact form p,
		#section-contact label,
		#section-contact legend { 
			font: normal 13px/23px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
		}
		
		#section-contact label {
			display: inline-block;
			float: left;
			width: 155px;
			margin: 6px 0;
		}
		
		#section-contact input, 
		#section-contact textarea, 
		#section-contact select { 
			width: 280px; 
			padding: 14px 20px; 
			color: #eee; 
			background: #333;
			margin: 0 0 35px 0; 
			border: 0;
			outline: none;
		}
		
		#section-contact input:focus, 
		#section-contact textarea:focus, 
		#section-contact select:focus { 
			color: #fff;
			background-color: #446CBC;
		}
		
		#section-contact button.submit {
			font: bold 20px/30px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-transform: uppercase;
			letter-spacing: 4px;
			display: block;
			cursor: pointer;
			color:#fff;
			background:#446CBC;
			padding: 20px 28px;
			border: none;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;
		}
		
		#section-contact button.submit:hover { 
			color: #446CBC;
			background: #fff; 
		}
		
		#section-contact span.required { 
			color: #446CBC;
			font-size: 13px;  
		} /* Select the color of the * if the field is required. */


		#contact-warning,
		#contact-success {
			font: normal 12px/23px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
		}

		#contact-warning {
			display: none;
			color: #fff;
			background: #dd3333;
			padding: 20px 25px;
			margin-bottom: 30px;
		}
		
		#contact-success {
			display: none;
			color: #77aa44;
			background: #111;
			padding: 20px 25px;
			margin-bottom: 30px;
		}

		/* HTML5 Placeholder */
		::-webkit-input-placeholder {
		   color: #446CBC;
		}

		:-moz-placeholder {  
			color: #446CBC;
		}


		#box-references {}

			#box-references h3 {
				margin-bottom: 0; 
			}

			#box-references p.desc {
				font: normal 13px/24px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
			}

			#box-references .item {
				color: #666;
				margin-top: 20px;
			}

				#box-references .item h4 {
					color: #fff;
					font: normal 15px/25px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
					margin-top: 15px;
				}

				#box-references .item p {
					color: #888;
					font: normal 13px/24px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
					margin-bottom: 30px;
				}

					#box-references .item p a {
						color: #bbb;
					}

					#box-references .item p a:hover {
						color: #fff;
					}


		#box-testimonials {

		}

			#box-testimonials .item {
				margin-top: 30px;
			} 

			#box-testimonials h3 {
				margin-bottom: 0; 
			}

			#box-testimonials blockquote p.quote {
				color: #eee;
				font: italic 15px/26px 'PT Serif', Georgia, serif;
			}

			#box-testimonials blockquote h4 {
				color: #446CBC;
				font: normal 15px/25px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
				margin-top: 10px;
			}

			#box-testimonials blockquote p.position {
				color: #666;
				font: normal 11px/21px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
				text-transform: uppercase;
				letter-spacing: 2px;
			}



	
	/*---------------------------------------------------
		3.6 Footer
	---------------------------------------------------*/

	#section-footer {
		color: #777;
		background: #111;
		font: normal 13px/23px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

		#section-footer p {
			margin-top: 32px;
		}

		#section-footer a { color: #fff; }

		#section-footer a:hover { color: #446CBC; }


		#section-footer ul#social {
			float: right;
			border-left: 1px solid #111;
		}

		#section-footer ul#social li {
			display: inline-block;
			float: left;
		}

		#section-footer ul#social li a {
			display: block;
			line-height: 0;
			padding: 30px;
		}

		@media only screen and (max-width: 767px) {
			#section-footer ul#social li a {
				background: #446CBC;
			}
		}

		#section-footer ul#social li a:hover {
			background: #446CBC;
		}