/*
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: #1ba1c7;
	}

	a {
		color: #1ba1c7;
	}
	a:hover {
		text-decoration: underline;
	}

	#wrapper {
		margin: 0 auto;
		width: 890px;
		/* 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: 878px;
		float: left;
		padding-bottom: 24px;
		padding-top: 24px;
	}

	#top-bg {
		float: left;
		background: url(../images/layout_bg.png) top left;
		width: 878px;
		height: 19px;
		position: absolute;
		top: -19px;
	}

	#bg-container {
		float: left;
		background: url(../images/layout_bg.png) top;
		position: relative;
	}

	.main {
		float: left;
		width: 878px;
		padding-top: 0px;
		padding-bottom: 0px;
		position: relative;
		margin-bottom: 0px;
	}


	.main .content{
		width: 780px;
		margin: 0 auto;
		background: #fff url(../images/content_top_bg.png) no-repeat top;
		padding: 30px;
	}



	 .bottom-bg {
		float: left;
		background: url(../images/layout_bg.png) bottom right;
		width: 878px;
		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: 	45px;
		color: #656565;
		margin: 0;
		margin-bottom: 20px;
		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;
		margin-top: 5px;
		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 0px;
		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: 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 {
		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: 780px;
	}

	.grid_9 {
		margin-right: 30px;
		width: 570px;
	}

	.grid_6 {
		margin-right: 30px;
		width: 375px;
	}

	.grid_8 {
		margin-right: 30px;
		width: 510px;
	}

	.grid_4 {
		margin-right: 30px;
		width: 240px;
	}




	.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: #aaa;
		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: 490px;
		background: url(../images/textfield.png) no-repeat top right ;
		font-size: 15px;
		color: #555;
		outline: 0;

	}
	#name {
		width: 225px;
	}

	.field.custum-field {
		margin-left: 20px;
	}

	.field.custum-field2 {
		margin-left: 10px;
		background: none;
	}
	#company {
		 width: 225px;
	}
	#subject {
		width: 350px;
	}

	.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: 490px;
		height: 100px;
		padding: 10px;
		padding-left: 0;

		margin: 0;
		border: 0;
		font-size: 15px;
		color: #555;

		font-family: Helvetica,sans-serif;
		outline: 0;
	}


	label, .label-80 {
		float: left;
		width: 104px;
		font-weight: bold;
		padding: 0px 5px 5px 0px;
		font-size: 12px;
	}

	.select-box {
		padding-left: 20px;
		float: left;
	}

	.select-box select {
		float: left;
		padding-left: 0;
		margin: 0;
		height: 40px;
		line-height: 36px; /* Safari on Windows bug */
		width: 120px;
		font-size: 15px;
		color: #555;
	}
	.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;
	}

	a#submit {
		float: right;
		margin-right: 	20px;
	}
	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;
	}

	.error {
		line-height: 39px;
		left: 398px;
		font-size: 11px;

		color:#FF3300;
		font-weight:bold;
		display: none;
	}


	/* ------------------------------------------------------------------- */
	/* 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-label {
		margin-top: 2px;
	}
	.counties-searched-header {
		margin-left: -18px;
	}
	.counties-searched {
		margin-left: -18px;
	}

	.counties-searched li {
		font-size: 15px; line-height: 1; margin-bottom: 14px;
		list-style: none;
		padding-left: 0;
	}
	.progress {
		float: left;
		clear: both;
		padding: 3px 0px;
		position: relative;
		width: 240px;
		margin-bottom: 15px;
	}

	.progress h4 {
		font-size: 13px;
		margin-bottom: 10px;
	}

	.progressMeter {
		width: 239px;
		height: 25px;
		background: url(../images/meter-bg.png) no-repeat left top;
	}
	.meter1 {
		margin-left: 0;
		float: left;
	}
	.meter2 {
		margin-left: 45px;
	}
	.meter3 {
		float: right;
	}
	.progressBar {
		position: relative;
		top: 5px;
		background: url(../images/progressbar_bg_8.png) repeat-x right bottom;
		width: 239px;
		height: 8px;
		float: left;
		text-align: center;
		font-size: 10px;
		border-left: 1px #07a4cb solid;
	}

		.progressValue {
			position: relative;
			background: url(../images/progressbar_180_8.png) no-repeat right bottom;
			width: 239px;
			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;
	}