/*  
Theme: My Resume
Author: Arthur Gapusan (Jimmyme)
Email: gapusan@gmail.com
*/

/* ------------------------------------------------------------------- */
/* -------------------------- CSS STRUCTURE -------------------------- */
/* ------------------------------------------------------------------- */
/*

1. Site Structure
	1.1 Layout, MainContent/Sidebar
	1.2 Footer
2. Site Components	 
	2.1 Front Page
3. Site Functions Style
	3.1 Headers
	3.2 Textblocks / QuoteBlock
	3.3 Grid
	3.4 Dividers
	3.5 Main Photo
	3.6 Resume Details
	3.7 List
	3.8 Contact Form
	3.9 Button
	3.10 Slider Styles
	3.11 Progress Bar
	3.12 Vtip
	3.13 Misc Styles
	
	
*/
/* ------------------------------------------------------------------- */


/* =================================================================== */
/* 1. Site Structure */
/* =================================================================== */

	/* ------------------------------------------------------------------- */
	/* 1.1 Layout, MainContent/Sidebar */
	/* ------------------------------------------------------------------- */  		

	body {
		/*
			Background. You can use an image as background also.
		*/
	//	background: #c7c7c7;
		
		//margin: 12px;
	}
	
	.theme-color, span.theme-color  {
		color: #96a760;
	}
	
	a {
		color: #96a760;
	}	
	a:hover {
		text-decoration: underline;
	}
	
	#wrapper {
		margin: 0 auto; 
		width: 988px;
		/* You may use the width below if you don't want a sidebar on your resume. You should also remove the sidebar div in the index.html */
		/*
		width: 710px;
		*/
	}
	
	#container {
		margin-top: 0px;
		/*
			If you're using a darker background, use container_bg.png instead of container_bg_light.png
			background: url(../images/container_bg.png);
		*/
		background: url(../images/container_bg_light.png);
		padding: 6px;
		width: 976px;
		float: left;
		padding-bottom: 24px;
		padding-top: 24px;
	}
	
	#top-bg {
		float: left;
		background: url(../images/layout_bg.png) top left;
		width: 976px;
		height: 19px;
		position: absolute;
		top: -19px;
	}
	
	#bg-container {
		float: left;
		background: url(../images/layout_bg.png) top;
		position: relative;
	}
	
	.main, .sidebar {
		float: left;
		width: 698px;
		padding-top: 0px;
		padding-bottom: 0px;
		position: relative;
		margin-bottom: 0px;
	}
	
	.sidebar {
		width: 278px;
	}
	
	.main .content, .sidebar .content {
		width: 600px;
		margin: 0 auto;
		background: #fff url(../images/content_top_bg.png) no-repeat top;
		padding: 30px;
	}
	
	.sidebar .content  {
		width: 180px;
		padding: 30px;
		background: url(../images/sidebar_content_top_bg.png) no-repeat top;
	}
	
	 .bottom-bg {
		float: left;
		background: url(../images/layout_bg.png) bottom right;
		width: 976px;
		height: 19px;
		position: absolute;
		bottom: -19px;
	}
	
	.item {
		margin-bottom: 30px;
		margin-top: 0px;
		float: left;
	}
	
	
	/* ------------------------------------------------------------------- */
	/* 1.2 Footer */
	/* ------------------------------------------------------------------- */  		
	
	
	#footer {
		background: url(../images/h2_border.png) repeat-x top;
		padding-top: 35px;
		color: #888;
		margin-top: 15px;
		float: left;
	}
	
		#footer-text {
			height: 32px;
			line-height: 32px;
		}
		
		#footer-social {
			text-align: right;
			height: 32px;
			overflow: hidden;
		}	

	
/* =================================================================== */
/* 2. Site Components */
/* =================================================================== */
	
	
	/* ------------------------------------------------------------------- */
	/* 2.1 Front Page */
	/* ------------------------------------------------------------------- */  		
	
	
	#front-info {
		margin: 0;
		float: left;
		padding: 0;
		width: 100%;
		height: 173px;
		margin-top: 54px;
	}
	
	#front-info h1 {
		margin: 0;
		padding: 0;
	}
	
	h1 {
		font-size: 65px;
		color: #656565;
		margin: 0;
		text-align: center;
	}
	
/* =================================================================== */
/* 3. Site Structure */
/* =================================================================== */
	
	/* ------------------------------------------------------------------- */
	/* 3.1 Headers
	/* ------------------------------------------------------------------- */  		


	h2.h-border {
		font-size: 38px;
	}
	
	.h-border {
		background: url(../images/h2_border.png) repeat-x bottom;
		padding-bottom: 10px;
		margin: 0;
		margin-bottom: 30px;
		margin-top: 15px;
		padding-bottom: 15px;
	}
	
	h3.h-border {
		font-size: 30px;
		padding-bottom: 17px;
	}
	
	
	h2.jobtitle {
		font-size: 18px;
		color: #bbb;
		margin: 0;
		text-align: center;
		background: none;
	}
	
	
	/* ------------------------------------------------------------------- */
	/* 3.2 Textblocks / QuoteBlock
	/* ------------------------------------------------------------------- */  		

	
	.textblock, .textblock-small {
		font-family:Georgia, "Times New Roman", Times, sans-serif;
		letter-spacing: 0px;
		padding:0px 0px 0px 70px;
		background: #fff url(../images/quote_medium.png) no-repeat 0px 5px;
		color: #777;
		margin-bottom: 15px;
		padding-bottom: 10px;
		height: 80px; /* Height is specified so that the 2 lines below would work. */
		vertical-align: middle;
		display: table-cell;
		margin-top: 15px;
		font-size: 22px;
		font-style: italic;
		line-height: 32px;
	}
	
	.textblock-small {
		background: url(../images/quote.png) no-repeat 0px 2px;
		padding-left: 40px;
		font-size: 16px;
		padding-top: 0;
		height: 60px;
		padding-bottom: 30px;
	}
	
	#testimonials .textblock{
		padding-left: 10px;
		padding-top: 10px;
		font-size: 16px;
		margin-top: 0;
	}
	
	.testimonials .textblock{
		padding-left: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		font-size: 14px;
		margin-top: 0;
		background: url(../images/quote.png) no-repeat 0px 2px;
		text-indent: 35px;
		font-style: italic;
	}
	
	.testimonials .textblock p {
		margin-bottom: 0;
	}
	
	.testimonials .author, #testimonials .author {
		float: right;
		font-size: 14px;
	}
	
	form .textblock {
		margin-bottom: 30px;
	}

	
	/* ------------------------------------------------------------------- */
	/* 3.3 Grid */
	/* ------------------------------------------------------------------- */  
	
	.grid_12, .grid_9, .grid_6, .grid_8, .grid_4, .grid_3 {
		float: left;
	}
	
	.grid_12 {
		width: 600px;
	}	
		
	.grid_9 {
		margin-right: 30px;	
		width: 435px;
	}	
	
	.grid_6 {
		margin-right: 30px;	
		width: 285px;
	}
	
	.grid_8 {
		margin-right: 30px;	
		width: 390px;
	}
	
	.grid_4 {
		margin-right: 30px;	
		width: 180px;
	}
	
	.grid_3 {
		margin-right: 20px;	
		width: 135px;
	}
	
	
	.last {
		margin-right: 0;
	}
	
	/* ------------------------------------------------------------------- */
	/* 3.4 Dividers */
	/* ------------------------------------------------------------------- */  
	
	.divider-5, .divider-10, .divider-15, .divider-20, .divider-30, .divider-45, .divider-60 {
		float: left;
		height: 45px;
		overflow: hidden;
		margin-top: 0;
		width: 100%;
		
	}
	
	.divider-45 { height: 45px; }
	.divider-30 { height: 30px; }
	.divider-20 { height: 20px; }
	.divider-15 { height: 15px; }
	.divider-10 { height: 10px; }
	.divider-5 { height: 5px; }
	
	
	/* ------------------------------------------------------------------- */
	/* 3.5 Main Photo
	/* ------------------------------------------------------------------- */  		

	
	.main-photo {
		padding: 7px;
		border: 1px #d4d4d4 solid;
		background: #fff;
		margin-bottom: 21px;
	}
	
	/* ------------------------------------------------------------------- */
	/* 3.6 Resume Details
	/* ------------------------------------------------------------------- */  		

	
	.title, .description1, .description2 {
		font-family: Tahoma, Geneva, sans-serif;
		margin: 10px 0;
	}
	
	.title {
		margin-top: 0px;
		font-size: 15px;
		color: #505050;
	}
	
	.description1, .description2 {
		font-size: 12px;
		color: #777;
	}
	
	.description2 {
		color: #c0c0c0;
		font-style: italic;
	}
	
	
	/* ------------------------------------------------------------------- */
	/* 3.7 List */
	/* ------------------------------------------------------------------- */  	
			

	ul {
		list-style: square;
		margin-left: 30px;
	}	
			
	ol li {
		padding-bottom: 5px;
		padding-left:5px;
	}
	
		ul.checklist, ul.list, ul.no-bullet, ul.arrow {
				list-style: none;
				margin: 0;
				margin-bottom: 15px;		
			}
			
			ol.checklist {
				margin-left: 30px;
			}
						
				ul.checklist li, ul.list li, ul.arrow li, ul.no-bullet li {
					background: url(../images/bullet.png) no-repeat left 10px;
					border-bottom: 1px #aaa dotted;
					padding: 4px 0 5px 20px;
				}
				
				ul.list li {
					background: url(../images/list_bg.png) no-repeat left 10px;
				}
				
				ul.arrow li {
					background: url(../images/footermenu_arrow.png) no-repeat left 12px;
					padding-left: 15px;
				}
				
				ul.no-bullet li {
					background: none;
					padding-left: 0;
				}
				
				ul.align-right li {
					text-align: right;
				}
				
		ul.list li.phone {
			background: url(../images/phone.png) no-repeat left 7px;
			padding-left: 35px;
			padding-bottom: 8px;
			padding-top: 6px;
		}	
		
		ul.list li.email {
			background: url(../images/email.png) no-repeat left 7px;
			padding-left: 35px;
			padding-bottom: 8px;
			padding-top: 6px;
		}	
		
		ul.list li.address {
			background: url(../images/address.png) no-repeat left 5px;
			padding-left: 35px;
			padding-bottom: 8px;
			padding-top: 6px;
		}		
	
	
	ul.no-style {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
		ul.no-style li {
			border: 0;
			margin: 0;
			padding: 0;
		}
	
	/* ------------------------------------------------------------------- */
	/* 3.8 Contact Form */
	/* ------------------------------------------------------------------- */  
		
	#contact-form {
		z-index: 1;
		background: transparent url(../images/thumb_shadow_212.png) repeat top;
	
	}
	
	form {
		margin: 0;
		padding: 0;
	}
			
	.rowElem {
		margin-bottom: 15px;
		position: relative;
		float: left;
		clear: both;
	}
	
	.field {
		background: url(../images/textfield.png) no-repeat bottom left;
		padding-left: 10px;
		float: left;
		/* ie8 fix */
		/*
		padding-right: 1px;
		*/
	}
	
	.field input {
		float: left;
		padding: 0 10px;
		padding-left: 0;
		margin: 0;
		border: 0;
		height: 40px;
		line-height: 40px;
		width: 370px;
		background: url(../images/textfield.png) no-repeat top right;
		font-size: 15px;
		color: #555;
		outline: 0;
		
	}
	
	.textarea {
		background:  url(../images/textarea.png) no-repeat bottom left;
		padding-left: 10px;
		float: left;
	}
	
	textarea#message_input {
		float: left;
		background: url(../images/textarea.png) no-repeat top right;
		border: 0;
		
		width: 369px;
		height: 100px;
		padding: 10px;
		padding-left: 0;
		
		margin: 0;
		border: 0;
		font-size: 15px;
		color: #555;
		
		font-family:  Arial,Helvetica,sans-serif;
		outline: 0;
	}
		
		
	label, .label-80 {
		float: left;
		width: 104px;
		font-weight: bold;
		padding: 0px 5px 5px 0px;
		font-size: 12px;
	}
	

	.contact-select {
		width: 250px;
	}
		
	#message_input {
		width: 271px;
		height: 81px;
	}

	#feedback {
		margin-bottom: 15px;
	}

	#feedback p {
		margin-bottom: 5px;
	}

	p.error {
		display:none; 
		padding:5px 10px; 
		color:#FF3300; 
		font-weight:bold;
		border: 1px #f0c020 solid;
		background-color:#ffffdd;
	}

	p#submit {
		text-align:right;
	}

	p#success {
		display:none; 
		font-size:16px; 
		text-align:left; 
		margin-bottom:20px; 
		color:#00CC00; 
		font-style:italic;
	}

	#note {
		padding: 10px;
		font-size: 12px;
		display: none;
		background-color:#fff;
		text-align: center;
		margin-bottom: 10px;
		color: #555;
		font-family: Georgia,"Times New Roman",Times,serif;
		font-size: 17px;
		font-style: italic;
		padding-bottom: 15px;
	}

	.notification_ok {
		color: #606060;	
	}
		
	button {
		border: none;
		padding: 0;
		margin: 0;
	}

	.error1, .error2, .error3, .error4 {
		float: left;
		width: 110px;
		height: 38px;
		line-height: 39px;
		position: absolute;
		top: 0px;
		left: 278px;
		text-align: center;
		font-size: 11px;
		
		color:#FF3300; 
		font-weight:bold;
		border: 1px #f0c020 solid;
		background-color:#ffffdd;
		display: none;
	}
	
	.error3 {
		top: 126px;
		left: 278px;
	}
	
	/* ------------------------------------------------------------------- */
	/* 3.9 Button */
	/* ------------------------------------------------------------------- */  
		
	
	/* CSS sliding doors button */

	a.button-large {
		background: url('../images/button.png') no-repeat scroll top left; 
		float: left;
		height: 28px;
		margin-right: 25px;
		margin-left: 0px;
	}

	a.button-large span  {
		background: url('../images/button.png') no-repeat scroll right -28px; 
		float: left;
		height: 26px;
		position: relative;
		left: 20px;
		padding-right: 20px;
		padding-top: 2px;
		font-family:  Arial,Helvetica,sans-serif;
		font-size: 17px;
		
		cursor: pointer;
		font-style: normal;
	}

	a.button-large {
		height: 45px;
		background: url('../images/button_header_large.png') no-repeat scroll top left;
	}

	a.button-large span {
		height: 35px;
		background: url('../images/button_header_large.png') no-repeat scroll right -45px; 
		color: #505050;
		padding-right: 20px;
		font-size: 15px;
		padding-top: 10px;
		font-size: 17px;
	}

	a.button-large:hover  {
		background-position: left -92px;
	}

	a.button-large:hover span {
		background-position: right -137px;
	}
	
	/* ------------------------------------------------------------------- */
	/* 3.10 Slider Style */
	/* ------------------------------------------------------------------- */  
			
	ul.slider {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	ul.slider li {
		float: left;
		width: 100%;
		border-bottom: 1px #d1d1d1 dotted;
		padding-bottom: 5px;
		margin-bottom: 10px;
	}
	
	
	.bx-prev, .bx-next {
		background: url(../images/slider_btn.png) no-repeat left 0px;
		width: 12px;
		height: 16px;
		right: 20px;
		top: -68px;
		position: absolute;
		text-indent: -999999px;
	}
	.bx-prev:hover {
		background: url(../images/slider_btn.png) no-repeat left -16px;
	}
			
	.bx-next {
		background: url(../images/slider_btn.png) no-repeat right 0px;
		right: 0px;
	}
	
	.bx-next:hover {
		background: url(../images/slider_btn.png) no-repeat right -16px;
	}

	/* ------------------------------------------------------------------- */
	/* 3.11 Progress Bar */
	/* ------------------------------------------------------------------- */  
			
	.progress {
		float: left;
		clear: both;
		padding: 3px 0px;
		position: relative;
		width: 180px;
		margin-bottom: 15px;
	}
	
	.progress h4 {
		font-size: 13px;
		margin-bottom: 10px;
	}
	
	.progressBar {
		position: relative;
		top: 5px;
		background: url(../images/progressbar_bg_8.png) repeat-x right bottom;
		width: 179px;
		height: 8px;
		float: left;
		text-align: center;
		font-size: 10px;
		border-left: 1px #8a9959 solid;
	}
		
		.progressValue {
			position: relative;
			background: url(../images/progressbar_180_8.png) no-repeat right bottom;
			width: 180px;
			height: 8px;
			left: 0px;
			top: 0px;
		}
		
		.progressValue span {
			position: relative;
			top: -5px;
			text-align: center;
			font-weight: bold;
			font-size: 9px;
			color: #fff;
			/* Disable text on progress bar. */
			display: none;
		}
	
		.progress .text {
			position: absolute;
			top: 4px;
			margin-left: 55px;
		}
	/* ------------------------------------------------------------------- */
	/* 3.12 Vtip. */
	/* ------------------------------------------------------------------- */  
								
	p#vtip { 
		display: none; 
		position: absolute; 
		padding: 5px 15px; 
		left: 15px; 
		top: -120px;
		font-size: 11px;
		font-weight: bold;
		background-color: white; 
		border: 1px solid #b5b5b5; 
		z-index: 9999;
	}
	
	
	/* ------------------------------------------------------------------- */
	/* 3.13 Misc Style */
	/* ------------------------------------------------------------------- */  
	
	
	.ribbon {
		background: url(../images/ribbon.png) no-repeat top right;
		position: absolute;
		width: 151px;
		height: 151px;
		top: -17px;
		left: 1px;
	}
	
	.left {
		float: left;
	}
	
	.right {
		float: right;
	}
	
	.grayscale span {
		width: 32px;
		height: 32px;
		overflow: hidden;
		display: block;
		float: right;
		margin-left: 5px;
	}
	
	.clear {
		clear: both;
		overflow: hidden;
	}