/*
	Theme Name: Echo
	Theme URI: http://www.onioneye.com
	Description: A Premium Portfolio Wordpress Theme.
	Author: OnionEye
	Author URI: http://www.onioneye.com/
	Version: 1.3.2
	
	Designed & Handcrafted by onioneye 
*/

/*  T A B L E   O F   C O N T E N T S 
    ........................................................................................................................................
	
	1. Reset Defaults
	2. Grid
	3. Base Styles 
	4. Typography
	5. Headings
    6. Links
    7. Lists
  	8. Forms
  	9. Images
  	10. Other Elements
  	11. Slider
  	12. Header
  	13. Footer
  	14. Sidebar
  	15. Home
  	16. Blog
  	17. Portfolio
  	18. Widgets
  	19. Comments
  	20. 404 Page
  	21. Internet Explorer

*/

    
    
/*  1. R E S E T   D E F A U L T S 
    ........................................................................................................................................ */
	
	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, 
	kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, 
	tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, 
	video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
	article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
	:focus { outline: none; }
	ol, ul { list-style: none inside none; }
	blockquote, q { quotes: none; }
	blockquote: before, blockquote: after, q: before, q: after { content: " "; content: none; }
	ins { background-color: #eff3f4; text-shadow: none; color: #465458; text-decoration: none; }	
	mark { background-color: #dbebef; text-shadow: none; color: #465458; font-weight: bold; }
	del { text-decoration: line-through; }
	abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }
	hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }
	table { border-collapse: collapse; border-spacing: 0; } 	/*- tables still need 'cellspacing="0"' in the markup ----------*/
	caption, th, td { text-align: left; font-weight: normal; }
	input, textarea, button { border: none; }
	input, select { vertical-align: middle; }



/*  2. G R I D
    ........................................................................................................................................ */
	
	.container_12 { margin-left: auto; margin-right: auto; width: 1020px; }
	.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { display: inline; float: left; margin-left: 10px; margin-right: 10px; }
	.alpha { margin-left: 0 } .omega { margin-right: 0 }
	.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11, .push_12, .pull_12 { position: relative; float: left; }
	
	.container_12 .grid_1 {width: 65px;}
	.container_12 .grid_2 {width: 150px;}
	.container_12 .grid_3 {width: 235px;}
	.container_12 .grid_4 {width: 320px;}
	.container_12 .grid_5 {width: 405px;}
	.container_12 .grid_6 {width: 490px;}
	.container_12 .grid_7 {width: 575px;}
	.container_12 .grid_8 {width: 660px;}
	.container_12 .grid_9 {width: 745px;}
	.container_12 .grid_10 {width: 830px;}
	.container_12 .grid_11 {width: 915px;}
	.container_12 .grid_12 {width: 1000px;}
	
	.container_12 .prefix_1 {padding-left:85px;}
	.container_12 .prefix_2 {padding-left:170px;}
	.container_12 .prefix_3 {padding-left:255px;}
	.container_12 .prefix_4 {padding-left:340px;}
	.container_12 .prefix_5 {padding-left:425px;}
	.container_12 .prefix_6 {padding-left:510px;}
	.container_12 .prefix_7 {padding-left:595px;}
	.container_12 .prefix_8 {padding-left:680px;}
	.container_12 .prefix_9 {padding-left:765px;}
	.container_12 .prefix_10 {padding-left:850px;}
	.container_12 .prefix_11 {padding-left:935px;}
	
	.container_12 .suffix_1 {padding-right:85px;}
	.container_12 .suffix_2 {padding-right:170px;}
	.container_12 .suffix_3 {padding-right:255px;}
	.container_12 .suffix_4 {padding-right:340px;}
	.container_12 .suffix_5 {padding-right:425px;}
	.container_12 .suffix_6 {padding-right:510px;}
	.container_12 .suffix_7 {padding-right:595px;}
	.container_12 .suffix_8 {padding-right:680px;}
	.container_12 .suffix_9 {padding-right:765px;}
	.container_12 .suffix_10 {padding-right:850px;}
	.container_12 .suffix_11 {padding-right:935px;}
	
	.container_12 .push_1 {left:85px;}
	.container_12 .push_2 {left:170px;}
	.container_12 .push_3 {left:255px;}
	.container_12 .push_4 {left:340px;}
	.container_12 .push_5 {left:425px;}
	.container_12 .push_6 {left:510px;}
	.container_12 .push_7 {left:595px;}
	.container_12 .push_8 {left:680px;}
	.container_12 .push_9 {left:765px;}
	.container_12 .push_10 {left:850px;}
	.container_12 .push_11 {left:935px;}
	
	.container_12 .pull_1 {left:-85px}
	.container_12 .pull_2 {left:-170px;}
	.container_12 .pull_3 {left:-255px;}
	.container_12 .pull_4 {left:-340px;}
	.container_12 .pull_5 {left:-425px;}
	.container_12 .pull_6 {left:-510px;}
	.container_12 .pull_7 {left:-595px;}
	.container_12 .pull_8 {left:-680px;}
	.container_12 .pull_9 {left:-765px;}
	.container_12 .pull_10 {left:-850px;}
	.container_12 .pull_11 {left:-935px;}
	
	/* Fluid Columns */
    .one_half{ width: 48%; }
    .one_third{ width: 30.66%; }
    .two_third{ width: 65.33%; }
    .one_fourth{ width: 22%; }
    .three_fourth{ width: 74%; }
    .one_fifth{ width: 16.8%; }
    .two_fifth{ width: 37.6%; }
    .three_fifth{ width: 58.4%; }
    .four_fifth{ width: 67.2%; }
    .one_sixth{ width: 13.33%; }
    .five_sixth{ width: 82.67%; }
    .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { position:relative; margin-right:4%; float:left; }
    .last{ margin-right: 0 !important; clear:right; }
    .clearboth {clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;}
 		
	
	
/*  3. B A S E   S T Y L E S
    ....................................................................................................................................... */
	
	html, body { height: 100%; }
	html { position: relative; overflow-y: scroll; /* always force a scrollbar in non-IE */ }
	body { margin: 0 auto; position: relative; }	
	body:before { content: " "; position: absolute; z-index: -1; height: 10px; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, .03); }
	body:after { content: " "; position: absolute; z-index: -1; height: 10px; top: 10px; left: 0; width: 100%; background: rgba(0, 0, 0, .015); }
	#wrapper { min-height: 100%; padding-bottom: 70px; }
	#wrapper #content { padding-bottom: 200px; /* Height of the footer element */ }
	#wrapper #footer { width: 100%; height: 200px; position: relative; margin-top: -200px; /* negative value of footer height */ height: 150px; clear:both; }
	
	#content { padding: 10px 0 70px; position: relative; }
	/* remove the top margins and paddings (if any) of element's first child and the descendants of that child to ensure that the sidebar and the 
	 * main content are aligned properly 
	 */	
	#main h1:first-child, #sidebar h1:first-child, #main:first-child, #sidebar h2:first-child,
	#main h3:first-child, #sidebar h3:first-child, #main h4:first-child, #sidebar h4:first-child,
	#main p:first-child, .post-content h2:first-child, .post-meta p:first-child, #sidebar p:first-child, { margin-top: 0; padding-top: 0; } 
		
	/* self-clearing floats */
	.mod:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }	
	.clear { clear: both; }	
	
	/* text highlight/selection */
	::-moz-selection{ color:#fff; text-shadow: none; }
	::selection { color:#fff; text-shadow: none; } 
	
	/*  
	 * Non-semantic helper classes 
	 */
	.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; } /* for image replacement */

	.hidden { display: none; visibility: hidden; } 	/* Hide for both screenreaders and browsers: css-discuss.incutio.com/wiki/Screenreader_Visibility */ 
	/* Hide only visually, but have it available for screenreaders: www.webaim.org/techniques/css/invisiblecontent/ */
	.visuallyhidden { position:absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); }
	.invisible { visibility: hidden; } 	/* Hide visually and from screenreaders, but maintain layout */
	
	/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix - only with a different class name to make it more semantic */
	.group:before, .group:after { content: "\0020"; display: block; height: 0; visibility: hidden; } 
	.group:after { clear: both; } /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
	.group { zoom: 1; }
	
	/* wordpress built-in image-related classes */
	img.alignright, .wp-caption.alignright { float: right; margin: 0 0 1em 1em; }
	img.alignleft, .wp-caption.alignleft { float: left; margin: 0 1em 1em 0; }
	img.aligncenter, .wp-caption.aligncenter { display: block; margin-left: auto; margin-right: auto; }
	img.aligncenter { margin-top: 20px; }
	a img.alignright { float: right; margin: 0 0 1em 1em; }
	a img.alignleft { float: left; margin: 0 1em 1em 0; }
	a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
			
	.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; font-style: italic; margin-bottom: 20px; }
	.borderradius .wp-caption { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
	.wp-caption img, .wp-caption img a { margin: 0 !important; padding: 0; border: 0 none; }
	.borderradius .wp-caption img, .borderradius .wp-caption a img { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
	.wp-caption .wp-caption-text { padding: 0 4px 5px; margin: 0; font-family: Georgia, "Times New Roman", Times, serif; }
			
	.gallery { margin: auto; float: left; width: 100%; list-style-type: none !important; }
	.gallery-image { border: 1px solid #efefef; margin-left: 0; }
	.gallery-icon a { display: block; }
	.gallery-caption { padding: 0 4px 5px; font-style: italic; margin-bottom: 0 !important; display: block; }
	.gallery-item { float: left; text-align: center; margin-left: 0; }
	.gallery-item { width: auto; float: left; margin: 10px 0 0 0; }
	.gallery-item img { margin: 0 !important; padding: 0; }
	.gallery-item a { float: left; border: none; margin: 0; padding: 0; }
	
	

/*	4. T Y P O G R A P H Y
    ........................................................................................................................................ */
		 
	html { -webkit-font-smoothing: antialiased; } /* maxvoltar.com/archive/-webkit-font-smoothing */	
	table { font-size: inherit; font: 100%; }
	p { font-size: 1em; }
	blockquote { font-size: 1.1em; font-style: italic; padding-left: 28px; background: url('images/layout/quote-mark.png') no-repeat left top; }
	input { font-size: .9em; }
	small { font-size: 85%; }
	strong, th { font-weight: bold; }
	sub { font-size: smaller; }
	sup { font-size: smaller; }
	
	/* normalize monospace sizing 
	 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
	 */
	pre, code, kbd, samp { font-family: monospace, sans-serif; }

	/* non-semantic typography helper classes */
	.caps { letter-spacing: 0.1em; font-variant: small-caps; text-transform: lowercase; }
	abbr { letter-spacing: 0.1em; font-variant: small-caps; text-transform: lowercase; } /* letter space abbrevations at 10% of the type size to enhance readability */
    .amp { font-size: 1.2em; font-family: 'GoudyBookletter1911Regular', Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", Georgia, serif; font-style: italic; font-weight: normal; }
	
	/* local fonts */
	@font-face {
	    font-family: 'GoudyBookletter1911Regular';
	    src: url('fonts/goudybookletter1911/goudybookletter1911-openamp.eot');
	    src: url('fonts/goudybookletter1911/goudybookletter1911-openamp.eot?#iefix') format('eot'),
	         url('fonts/goudybookletter1911/goudybookletter1911-openamp.woff') format('woff'),
	         url('fonts/goudybookletter1911/goudybookletter1911-openamp.ttf') format('truetype'),
	         url('fonts/goudybookletter1911/goudybookletter1911-openamp.svg#webfont0ZQvEa4G') format('svg');
	    font-weight: normal;
	    font-style: normal;
	}
	
 

/*  5. H E A D I N G S
    ....................................................................................................................................... */
	
	h1, h2, h3, h4, h5, h6 { text-transform: none;}
		
	#headline { text-transform: capitalize; text-align: center; } 	/* main headline at the top of the landing page */
	.page-name { margin-bottom: 40px; padding: 0 0 10px 0; position: relative; }
	.page-name:before { content: " "; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; }

	/* www.aestheticallyloyal.com/public/optimize-legibility/ */ 
	h1, h2, h3, h4, h5, h6 { font-weight: normal; text-rendering: optimizeLegibility;   }
	


/*  6. L I N K S
    ....................................................................................................................................... */
	
	a { text-decoration: none; }
	.csstransitions a, .csstransitions a img, input[type="submit"], button
	{ -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: color .2s ease-in-out, opacity .2s ease-in-out, border-color .3s ease-in-out; transition: all .2s ease-in-out; }
	
	a:active { position: relative; top: 1px; }
	a:hover, a:active { outline: none; } /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
	
	.footer-widgets .timesince { display: block; border: none; }
	.footer-widgets .timesince:hover, .footer-widgets .timesince:focus { border: none; }

	h1 a, h2 a, h3 a, h4 a, h5 a { font-style: normal; }
	
	#portfolio-link, #blog-link { display: block;  }
	#portfolio-link:before, #blog-link:before { content: url('images/layout/border-before.png'); position: relative; top: 0; padding-right: 10px; }
	#portfolio-link:after, #blog-link:after { content: url('images/layout/border-after.png'); position: relative; top: 0; padding-left: 10px; }
	.portfolio-pagination a:first-child, .blog-pagination a:first-child { margin-right: 10px; }
	
	

/*  7. L I S T S 
    ....................................................................................................................................... */
	
	#main ol { list-style-type: decimal; }
	#main ul { list-style-type: circle; }
	#main .portfolio-item ul { list-style: none; }
	#main ol ol, #main ul ul { margin-left: 28px; } /* indent the lists wrapped by other lists */
	
	


/*	8. F O R M S
    ........................................................................................................................................ */
	
	/* colors for form validity */
	input:valid, textarea:valid {  }
	input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
	.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } 
	
	input[type="text"], select, textarea { margin: 0; width: 90%; } /* webkit browsers add a 2px margin outside the chrome of form elements */ 
	select, input, textarea, button { font: 99% sans-serif; }
	input[type="text"], textarea { padding: 7px; }
	select { width: 205px; padding: 3px 2px 3px 0; }
	fieldset { margin: 0 0 20px 0; }
	button, input, textarea { font-family: inherit; font-size: 1em; }
	label, input[type=button], input[type=submit], button { cursor: pointer; } 	/* hand cursor on clickable input elements */
	.borderradius input[type="text"], .borderradius textarea, .borderradius #form-status, .borderradius select { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
	.boxshadow input[type="text"]:focus, .boxshadow textarea:focus { -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);  }
	input[type="submit"], button, input[type="button"] { padding: 6px 12px; font-weight: bold; text-shadow: none; }
	input[type="submit"] { display: inline; }
	
	/* align checkboxes, radios, text inputs with their label
	   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
	input[type="radio"] { vertical-align: text-bottom; }
	input[type="checkbox"] { vertical-align: bottom; }
	
	/* CSS3 submit buttons (with the help of modernizer classes - start */
	.borderradius input[type="submit"], .borderradius button { -moz-border-radius: 23px; -webkit-border-radius: 23px; border-radius: 23px; }														   
	input[type="submit"]:active, button:active { position: relative; top: 1px; }													   												   
	/* CSS3 submit buttons - end */
	
	input:not([type=submit]):not([type=file]) { padding: 7px; } /* style the text inputs only */
	
	#contact-form label, #commentform label { display: inline-block; margin-bottom: 6px; font-size: 1.15em; }	
	#contact-form label { display: block; }
	#contact-form input[type="text"], #commentform input[type="text"] { width: 400px; }
	#commentform input, textarea { display: block; }
	#commentform textarea { width: 600px; }
	#sidebar #search-form input { width: 95%; }
	#respond { margin-top: 60px; }
	#main #s { width: 400px; } /* reduce the width of the search form, when displayed in the main content */ 
	
	/* classes for success and error messages added to the #form-status element with ajax to indicate whether the message/form was sent/successfully submited or not */
    .success { color: #7b9b2f; }
    .error { color: #e44141; }
	
	#form-status { visibility: hidden; background: #eae8e8; background: rgba(0, 0, 0, 0.06); width: 400px; padding: 16px 10px; position: relative; margin-top: 35px; }
	#status-icon { display: block; position: absolute; top: -10px; left: -5px; background: url('images/layout/info-icons.png') no-repeat left top; width: 28px; height: 28px; }
	.success #status-icon { background-position: -33px 0; }
	#loading { position: relative; top: 5px; left: 22px; } /* loading gif at the end of the contact form */



/*	9. I M A G E S
    ........................................................................................................................................ */
	
	img, a img { border: 7px solid; font-style: italic; }
	.csstransitions img { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
	.borderradius img, .borderradius a img { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
	.attachment-post-thumbnail { max-width: 235px; }
	
	#slides img, .wp-smiley { border: none; }
	.borderradius #slides img { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }

	.footer-widgets img, .footer-widgets a img, .Simple_Flickr_Photos img, .Simple_Flickr_Photos a img, .popular-posts img, .popular-posts a img  { border-width: 5px; }
	.footer-widgets a:hover img, .footer-widgets img:hover, .Simple_Flickr_Photos a:hover img, .Simple_Flickr_Photos img:hover, .popular-posts a:hover img, .popular-posts img:hover  { border-width: 5px; }
	
	
	/* image preloader */
	.preloader { background: url('images/layout/loading.gif') center center no-repeat #ffffff; display: inline-block; } 
	
	.photo-link { position: relative; display: block; }
	/* fix dissapearing portfolio images in list items */
	.ie7 .photo-link { position: static; }
	.photo-link img { display: block; }
	.portfolio-gallery .magnifier { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; background: #fff url('images/layout/magnifier.png') no-repeat 50% 50%; 
									-moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
	.portfolio-gallery a:hover .magnifier { opacity: 0.75; }  
	
	/* wordpress built in image alignment */
	img.alignright { float: right; margin: 0 0 1em 1em }
	img.alignleft { float: left; margin: 0 1em 1em 0 }
	img.aligncenter { display: block; margin-left: auto; margin-right: auto }
	a img.alignright { float: right; margin: 0 0 1em 1em }
	a img.alignleft { float: left; margin: 0 1em 1em 0 }
	a img.aligncenter { display: block; margin-left: auto; margin-right: auto }
	
	
	
/*	10. O T H E R   E L E M E N T S
    ........................................................................................................................................ */
	
	td, td img { vertical-align: top; }
	td { padding: 2px 4px; } 
	/* Set sub, sup without affecting line-height: gist.github.com/413930 */
	sub, sup { font-size: 75%; line-height: 0; position: relative; }
	sup { top: -0.5em; }
	sub { bottom: -0.25em; }
	/* pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } */
	pre {
	overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera */
	width: 99%;
	word-wrap: break-word; /* IE */
	}
	pre { font-size: .9em; background: #f0f0f0; border: 1px solid #e9e9e9; line-height: 20px; background: url('images/layout/pre-code-bg.png') repeat left top; overflow: auto; overflow-y: hidden;  /* Hides vertical scroll created by IE */ }
	pre code { font-family: Consolas, "Courier New", Courier, monospace; margin: 0 0 0 40px; padding: 18px 0; display: block; }
	dt { font-size: 1.5em; font-weight: bold; }
	dd { display: list-item; list-style: square inside none; }
	
	#main table { border: 1px solid #e9e9e9; border-collapse: collapse; }
	#main tr:nth-of-type(odd) { background-color: #eff3f4; } /* zebra style table */
	#main th, #main td { border: 1px solid #e9e9e9; padding: 9px 22px; }
	#main th { font-variant: small-caps; text-transform: lowercase; }
	#main caption { font-size: 1.2em; font-weight: bold; font-family: "PT Sans Narrow", sans-serif; }
	


/*  11. S L I D E R
    ....................................................................................................................................... */
	
	#slides { position: relative; margin: 0 auto; }
	.csstransitions #slides a { -moz-transition: none; -webkit-transition: none; -o-transition: none; transition: none; }
	.borderradius .slides-container { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
	.slides-container { background: #fff; padding: 10px; border: 1px solid #e9e9e9; position: relative; }
	
	.pagination { text-align: center; margin-top: 22px; }
	.pagination li { display: inline; zoom: 1; }
	.pagination li a { display: inline-block; width: 12px; height: 12px; overflow: visible; margin-left: 9px; background: url('images/layout/pagination.png') no-repeat 0 1px; }
	.pagination li.current a { background-position: 0 -17px; }
	.pagination li a:hover { background-position: 0 -17px; }
	.next, .prev, .pagination li a { text-indent: -9999px; /* hide the link text from the user */ }	
	
	.opacity #next-prev-links { opacity: 0; }
	.next, .prev { position: absolute; z-index: 99; top: 41%; background: url('images/layout/slider-arrows.png') no-repeat; width: 43px; height: 43px; margin: -10px 15px 0; display: block; }
	.prev { background-position: 0 0; left: 15px; }
	.next { background-position: 0 -51px; right: 15px; }
	#slides .next:active, #slides .prev:active { position: absolute; top: 41.08%; }
	
	.slide { position: relative; width: 978px; overflow: hidden; }
	.no-thumb { padding: 10px 85px; }
	.caption { position: absolute; bottom: 5px; left: 0; width: 100%; height: 50px; padding: 0 15px; background: rgba(0, 0, 0, .2); border-top: 1px solid #000; border-top-color: rgba(0, 0, 0, .12); text-shadow: none; }
	.caption h3 { margin: 0; line-height: 1; color: #fff; margin: 14px 0; color: rgba(255, 255, 255, 0.8); font-size: 22px; font-weight: normal; }
	.slide p:last-child { margin-bottom: 5px; } /* adjust the bottom margin of the last paragraph in the slider when auto height is turned on */
	.slide img { margin-bottom: 0; }
	
	
	
/*	12. H E A D E R
    ........................................................................................................................................ */	
		
	#header { padding: 30px 0 30px; }
  	#logo { display: table-cell; vertical-align: middle; }
  	#header-content-wrap { display: table; width: 1000px; margin: 0 auto; }
	#logo a { font-style: normal; display: block; }
	.opacity #logo a:hover { opacity: 0.7; }
	#logo a img { border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
	
	#main-nav { margin: 0; font-size: 1em; text-shadow: none; display: table-cell; vertical-align: middle; }
	#main-nav > ul { margin: 0; float: right; }
	#main-nav li { float: left; margin-left: 14px; position: relative; display: block; }
	#main-nav a { display: block; padding: 5px 11px; text-transform: capitalize; border: 1px solid transparent; }
	#main-nav .current_page_item a { }

	.borderradius #main-nav a { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
	/* Set transitions for menu links, except for opera, because versions 11.01 and below have a bug with transitioning 
     * the background property, if it hasn't been set before 
     */
	.csstransitions #main-nav a { -moz-transition: all .1s ease-in-out; -webkit-transition: all .1s ease-in-out; -o-transition: none; transition: all .1s ease-in-out; }
	
	/* DROPDOWN */
	#main-nav .sub-menu { position: absolute; margin: 0; z-index: 9999; left: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ }
	.opacity #main-nav .sub-menu { opacity: 0; /* Set initial state to transparent */ } 
	#main-nav .sub-menu li { border-top: 1px solid transparent; margin-left: 0; float: none; /* Introducing a padding between the li and the a give the illusion spaced items */ }
	#main-nav .sub-menu a { font-size: 1em; white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */ }
	.csstransitions #main-nav li ul { -moz-transition: opacity .1s ease-in-out; -webkit-transition: opacity .1s ease-in-out; -o-transition: opacity .1s ease-in-out; transition: opacity .1s ease-in-out; }
	#main-nav li:hover ul { /* Display the dropdown on hover */ left: 0; /* Bring back on-screen when needed */ }
	.opacity #main-nav li:hover ul { opacity: 1; /* Fade to opaque */ }
	.csstransitions #main-nav li:hover ul a { -moz-transition: -moz-transform 0.075s linear; -webkit-transition: -webkit-transform 0.075s linear; -o-transition: -o-transform 0.075s linear; transition: transform 0.075s linear; }
	#main-nav li:hover ul li a:hover { /* Set styles for dropdown when items are hovered */ background: #505659; background: rgba(80, 80, 80, .7); border: 1px solid transparent; color: #fff; }
	.csstransforms #main-nav li:hover ul li a:hover { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); }
	
	

/*	13. F O O T E R
    ........................................................................................................................................ */
	
	#footer { border-top: 1px solid; padding: 50px 0 0 0; position: relative; }
	#footer.no-widgets { padding: 0; border-top: none; }
	#footer:after { content: " "; position: absolute; top: 2px; left: 0; width: 100%; height: 1px; text-shadow: none; } /* footer inner border */
	#footer.no-widgets:after { display: none; }
	.footer-widgets { padding-bottom: 40px; }
	.footer-widgets h4 { font: normal .9em 'PT Serif', Georgia, Times, serif; text-transform: uppercase; letter-spacing: .1em; }
	.footer-widgets li { margin: 0 0 15px 0; }
	#copyright { border-top: 1px solid; padding: 40px 0; position: relative; } /* bottom footer inner border */
	#copyright:before { content: " "; position: absolute; left: 0; top: 2px; width: 100%; height: 1px; }
	#social-networking { list-style: none; }
	#copyright p, #copyright ul { margin-bottom: 0; }
	#social-networking li { float: right; margin-left: 6px; }
	#social-networking a img { border: none; display: block; }
	.opacity #social-networking a img { opacity: .3; }
	.opacity #social-networking a:hover img { opacity: .7; }
	.borderradius #social-networking a img { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }	



/*	14. S I D E B A R
    ........................................................................................................................................ */
	
	/* classes for the position of the sidebar depending on the class appended to the body element */
	.layout-2cl .sidebar { float: left; }
	.layout-2cl #main { float: right; }
	.layout-2cr #main { float: left; }
    .layout-2cr .sidebar { float: right; }
    
    .portfolio-layout-2cl #sidebar-portfolio { float: left; } 
    .portfolio-layout-2cr #sidebar-portfolio { float: right; }
    .portfolio-layout-2cl .portfolio-gallery#main { float: right; }
    .portfolio-layout-2cr .portfolio-gallery#main { float: left; }

    .sidebar ul li { margin: 0 0 15px 0; }



/*	15. H O M E 
    ........................................................................................................................................ */	
	
	.latest-articles, .latest-projects, #headline-section { margin: 10px 0 10px 0; }
	.headline-section-text { margin: 0 0 10px 0px; padding: 30px 100px 10px 100px; border-bottom: 1px solid #e9e9e9; text-align: justify; font-size: 1.1em;}

        .content-bottom-section { margin: 0 0 10px 0px; padding: 30px 100px 10px 100px; text-align: justify; font-size: 1.1em;  }


	#slides { margin-bottom: 30px; }
	.section-title { text-align: center;  }
	.pub-date { font-size: 0.85em; color: rgba(0, 0, 0, 0.3); }
	.latest-articles { border-bottom: none; }
	.content-top { border-bottom: 1px solid; margin-bottom: 30px; }
	.content-top p { margin-bottom: 30px; }

	.latest-project img, .latest-project h3, .latest-article h3 { margin-bottom: 15px; }
	.latest-article .read-more { margin-top: 15px; margin-bottom: 30px; }
	.date-published { margin-bottom: 15px; }
	.latest-project .view-project { margin-bottom: 60px; }
	.ie7 #blog-link { margin-bottom: 0; }
	
	

/*	16. B L O G
    ........................................................................................................................................ */	
	
	.post { margin: 0; padding: 0; }
	.post time { text-transform: lowercase; font-variant: small-caps; font-size: 0.9em; }
	.post-meta li { margin: 0 0 3px 0; font-style: italic; }
	.post-meta.column-width li { max-width: 215px; } /* reduce the width of the post meta box if the sidebar is disabled */	
	#main .post-meta { list-style: none; margin: 0; }
	.post-content > p:first-line { text-transform: lowercase; font-variant: small-caps; letter-spacing: .1em; font-size: 1.056em; }
	.post-content .read-more { margin-top: 10px; }
	.post-title + p .read-more { display: block; margin-top: 10px; } /* style the read more link in the search results */
	.post-title { position: relative; line-height: 1; }
	.post-thumb { margin: 0 0 3px 0; }
	#main .post-thumb a img { display: block; margin-bottom: 0; }
	.post-meta .author { margin-bottom: 22px; }
	.post-border-full, .post-border { height: 1px; }
	.post-border-full { width: 100%; }
	.post-border { width: 730px; }
	.share-this { margin-top: 40px; position: relative; }
	.share-this:before { content: " "; position: absolute; top: 2px; left: 0; width: 100%; height: 1px; text-shadow: none; }

	
	/* position the elements on the page properly, depending on the position of the sidebar */
	.post-content-position { position: relative; left: 70px; }
	.layout-2cl .post, .layout-2cl .post-border, .layout-2cl .blog-pagination { position: relative; left: -70px; }
	


/*	17. P O R T F O L I O
    ........................................................................................................................................ */	
	
	#single-item { text-align: right; }
	#single-item.no-description { text-align: left; }

	.portfolio-pagination, .blog-pagination { margin-top: 22px; }
	.portfolio-pagination a, .blog-pagination a { font-size: 1.1em; border-bottom: 1px dotted; }
	.portfolio-pagination a:hover, .blog-pagination a:hover { border-bottom: 1px solid; }
	.one-col-item img { text-align: left; }

	/* remove the borders on images in single portfolio item view and lightbox view  */
	#single-item img, .pp_pic_holder img { border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
	#single-item img { margin-top: 4px; }
	#single-item img:hover { border: none; }
	.pp_pic_holder { text-shadow: none; }
	
	#main .portfolio-item { margin-bottom: 22px; }
	#main .portfolio-item li { margin-bottom: 10px; line-height: 1; }
	.portfolio-item h2, .portfolio-item p { margin: 0;  }
	
	/* adjust title font size on 4 columns, with sidebar custom page template */
	#main .portfolio-item h2 { font-size: 24px; }
	
	
	
/*	18. W I D G E T S
    ........................................................................................................................................ */	
	
	/* flickr widget */
	#flickr a { border-bottom: none; zoom: 1; }
	#flickr a:hover { background: none; }
	#flickr div { display: inline; zoom: 1; }
	#flickr img { width: 42px; height: 42px; margin: 0 6px 7px 0; zoom: 1; }
	
	/* twitter widget */
	.tweets { font-style: italic; }
	.read-more, .timesince { display: block; }
	.tweets li { 
		padding: 0 0 0 25px; 
		background: url('images/layout/twitter-feed-icon.png') no-repeat 0 6px; 
		/* wrap long URLs, strings of text, and other content */
		white-space: pre; /* CSS 2.0 */
		white-space: pre-wrap;      /* CSS 2.1 */
		white-space: pre-line;      /* CSS 3.0 */
		white-space: -pre-wrap;     /* Opera 4-6 */
		white-space: -o-pre-wrap;   /* Opera 7 */
		white-space: -moz-pre-wrap; /* Mozilla */
		white-space: -hp-pre-wrap;  /* HP Printers */
		word-wrap: break-word;      /* IE 5+ */ 
	}
	
	/* popular posts widget */
	.widget.popular-posts ul { clear: both; zoom: 1; }
	.widget.popular-posts ul:before, .widget.popular-posts ul:after { content: "\0020"; display: block; height: 0; visibility: hidden; } 
	.widget.popular-posts ul:after { clear: both; }
	.popular-posts ul li { position: relative; clear: both; }
	/* title styles */
	.wpp-post-title { }
	/* thumbnail styles */
	.wpp-thumbnail { float: left; margin-right: 7px; margin-bottom: 7px; }
	.wppnothumb, .wppgen { }
	/* excerpt styles */
	.wpp-excerpt {}
	/* Stats tag styles */
	.post-stats { font-size: 0.9em; display: block; }
	.wpp-comments {}
	.wpp-views {}
	.wpp-author { font-style: italic; }
	.wpp-date {}
	/* WP-PostRatings styles */
	.wpp-rating {}

	/* calendar widget */
	#wp-calendar thead { border-bottom: 1px solid; }
	#wp-calendar th, #wp-calendar tbody td { text-align: center; padding: 3px 6px; }
	#wp-calendar tfoot td { padding-top: 3px; }
	#wp-calendar caption { font-size: 1.3em; font-weight: bold; text-align: center; margin-bottom: 15px; }

	/* categories widget */
	.widget .children { /* indented lists */ padding-left: 1em; }



/*	19. C O M M E N T S
    ........................................................................................................................................ */	
	
	#main .comment-list { list-style: none; }
	#main .comment-list li { border-width: 1px 0 0 0; border-style: solid; }
	#number-of-comments { margin-top: 40px; }
	.comment { margin: 0 0 30px 0; }
	.comment-author { position: relative; }
	.avatar { float: left; margin: 0 10px 0 0; }
	.author-link, .author-meta { line-height: 1; } 
	.author-link { margin-bottom: 10px; }
	.author-meta { margin: 2px }
	#main .children { /* indented comments */ padding-left: 4em; list-style: none; }
	


/*  20. 4 0 4   P A G E  
    .......................................................................................................................................... */
		
	#not-found { text-align: center; }
	#not-found-heading { font-size: 150px; font-weight: bold; }
	#not-found-img { border: none; }
	#not-found-form input { width: 500px; }



/*  21. I N T E R N E T   E X P L O R E R 
    .......................................................................................................................................... */
		 
	.ie button { width: auto; overflow: visible; } /* make buttons play nicely in ie */
	.ie textarea { overflow: auto; } /* remove textarea scrollbars */
	.ie .post-time { font-size: 0.95em; }
	.ie #slider-bg { background: #fff; } /* ensure that the background color of the slider is shown in IE */
	
	/* IE 8 */
	.ie8 #wrapper { display: table; height: 100%; text-align: center; margin: 0 auto; text-align: left; }
	
	/* IE 8 and IE 7 */
	.ie8 #main .comment-list, .ie7 #main .comment-list { list-style: none; }
	.ie8 .caption, .ie7 .caption  {
		background: #050504; /* black */
		-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='050504') progid:DXImageTransform.Microsoft.Alpha(opacity=25)";
		filter: progid:DXImageTransform.Microsoft.Chroma(color='050504') progid:DXImageTransform.Microsoft.Alpha(opacity=25);
	}
	.ie8 #next-prev-links, .ie7 #next-prev-links { visibility: hidden; }

	/* IE 7 */
	.ie7 legend { margin-left: -7px; }
	.ie7 input[type="checkbox"] { vertical-align: baseline; }
	.ie7 .magnifier { display: none; }
	.ie7 .comment-authors { margin-bottom: 21px; }
	.ie7 .pagination li a { text-indent: 0; }
	.ie7 .caption { bottom: 4px; }
	.ie7 #main .children { /* indented comments */ list-style-position: outside; width: auto; /* stop the threaded comments from overflowing outside the box */ }
	.ie7 .comment { margin: 0; }
	.ie7 #main .children { margin: 0; }
	
	/* fix the IE 7 padding bug */
	.ie7 #footer .footer-widgets ul > li, .ie7 .sidebar ul, .ie7 .post-meta, .ie7 .comment-list, .ie7 .portfolio-gallery, .ie7 .portfolio-gallery ul { list-style-position: outside; } 
	.ie7 .portfolio-item li { zoom: 1; }
	
	/* IE 7 doesn't support "table" value for the display property, so fix it by floating the menu and the logo. 
	 * Also, implement other styles for the menu, to make it act nice in IE 7.
	 */
	.ie7 #main-nav { position: relative; z-index: 99; }
	.ie7 #main-nav .sub-menu li { padding-top: 0; cursor: pointer; }
	.ie7 #main-nav a { display: block; cursor: pointer; }
	.ie7 #main-nav .sub-menu a { padding: 5px 11px 5px 0; }
	.ie7 #main-nav .sub-menu a:active { position: static; }
	.ie7 #main-nav .sub-menu:hover { left: 0; }
	.ie7 #logo { margin: -7px 0 0 0; float: left; }
		
	/* fix the awkward behaviour of next and previous links inside the slider */
	.ie7 #slides a:active { position: absolute; top: 41%; }
	.ie7 #slides .pagination a:active { position: static; }
		
	/* trigger the element's hasLayout to disable content movement on hover, click etc. */
	.ie7 #main-nav, .ie7 .sub-menu { zoom: 1; }
	.ie7 .comment, .ie7 .children, .ie7 #header, .ie7 #footer, .ie7 #copyright { width: 100%; }