/*
Theme Name: Andante
Theme URI: http://giordanopiazza.com/themes/andante_wp
Description: Andante is an elegant and responsive WordPress theme
Author: Giordano Piazza
Author URI: http://giordanopiazza.com
Version: 1.0
Tags: white, black, four-columns, three-columns, two-columns
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Table of Contents:

   #1 Basic Styles
   #2 Typography
   #3 Header
   #4 Common Elements
   #5 Pages
   #6 Footer
   #7 Media Queries

*/


/* =============================================================================
   #1 Basic Styles
   ========================================================================== */

	/* The scrollbar is always visible to avoid the "jump" between pages */
	html {
	  overflow-y: scroll;
	}
	body {
	  color: #eee;
	  /*background: url('img/content/background.png') #1c1c1c repeat top center;*/
	  background-image: url('img/content/background.png');
	  background-color: #1c1c1c;
	  background-repeat: repeat;
	  background-position: top center;
	  font-family: sans-serif;
	  font-size: 13px;
	  line-height: 20px;
	  margin: 0;
	  padding: 0;
	  display: table;
	  width: 100%;
	}
	/* Change the selection color */
	::-moz-selection {
	  background: #444;
	  color: #fff;
	  text-shadow: none;
	}
	::selection {
	  background: #444;
	  color: #fff;
	  text-shadow: none;
	}



/* =============================================================================
   #2 Typography
   ========================================================================== */
	/* Set the 'Armata' font for headers */
	h1,
	h2,
	h3,
	h4 {
	  font-family: 'Armata', Helvetica, Arial, sans-serif;
	  font-weight: normal;
	  font-style: normal;
	  font-variant: normal;
	  margin: 0;
	  padding: 0;
	  text-shadow: 0 1px 0 #000;
	}
	/* Headers size and margins */
	h1 {
	  font-size: 23px;
	  line-height: 30px;
	  margin-top: 10px;
	  margin-bottom: 20px;
	}
	#content > h1, #content > h2, #content > h3 { margin-left:8px; margin-right:8px; }
	h2 {
	  font-size: 20px;
	  margin-bottom: 20px;
	}
	h3 {
	  font-size: 17px;
	}
	h4 {
	  font-size: 12px;
	}
	h3,
	h4,
	h3.span12,
	h4.span12 {
	  margin-bottom: 15px;
	}
	/* Use <small> inside h1 to make a small text */
	h1 small {
	  font-size: 12px;
	  line-height: 12px;
	}
	h3 small {
	  font-size: 10px;
	  line-height: 10px;
	}
	/* Links */
	a,
	a:link,
	a:active,
	a:visited {
	  color: #8ed8d2;
	  text-decoration: none;
	  -webkit-transition: color 0.3s;
	  -moz-transition: color 0.3s;
	  -ms-transition: color 0.3s;
	  -o-transition: color 0.3s;
	  transition: color 0.3s;
	}
	a:hover {
	  color: #307b77;
	}
	/* Reset paragraphs and add a text-shadow */
	p {
	  margin: 0 0 20px 0;
	  padding: 0;
	  text-shadow: 0 1px 0 #000;
	}
	/* Reset lists */
	ul {
	  margin: 0 0 20px 0;
	  padding: 0;
	  list-style: none;
	}
	/* Add some margin when a paragraph is followed by another paragraph */
	p + p {
	  margin-top: 10px;
	}
	/* Styling quotes */
	blockquote {
	  margin: 20px 0 0 20px;
	  padding: 0 40px 0 30px;
	  font: 20px serif;
	  font-style: italic;
	  font-weight: normal;
	  color: #ccc;
	  background: url('img/icons/topquote.png') no-repeat 0 0;
	}
	cite {
	  display: block;
	  font-size: 12px;
	  margin-top: 5px;
	  color: #888;
	}



/* =============================================================================
   #3 Header
   ========================================================================== */
	
	/* Add some margins to the main header */
	#main-header {
	  margin-top: 15px;
	  margin-bottom: 20px;
	}
	/* ----------------------------------------------------- */
	/* Logo & Headline */
	#logo {
	  float: left;
	  padding-top: 5px;
	  line-height: 56px;
	}
	#logo,
	#logo a {
	  font-size: 28px;
	  line-height: 34px;
	  /*color: #000;*/
	  font-weight: bold;
	  display: block;
	}
	#logo a:hover {
	  text-decoration: none;
	}
	#tagline {
	  /*color: #c8c8c8;*/
	  display: inline-block;
	  font-size: 12px;
	  font-weight: normal;
	  font-style: italic;
	  line-height: 20px;
	  text-shadow: 0 1px 0 #000;
	  margin-left: 0;
	}
	/* Text logo */
	#logo h1 { font-size:37px; color: #ffffff; font-weight:normal; letter-spacing:-2px; display:inline; vertical-align:middle; }

	/* Alternative logo technique using HTML text instead of images */
	/*
		<hgroup id="logo">
		    <h1>Andante /</h1>
		    <h2>Elegant Responsive HTML5 Template</h2>
		</hgroup>
		*/
	/*
		#logo { float:left; display:inline; vertical-align:middle; border:0; }
		#logo h1 { font-size:37px; letter-spacing:-2px; display:inline; vertical-align:middle;}
		#logo h2 { font-size:12px; float:left; display:inline; vertical-align:middle; }
		*/
	/* ----------------------------------------------------- */
	
	/* Main Navigation container */
	#main-nav {
	  float: right;
	  position: relative;
	}
	
	/* Navigation toggle button */
	#nav-toggle {
	  float: right;
	  display: none;
	  visibility: hidden;
	}
	
	/* Dropdown base styles */
	ul.dropdown,
	ul.dropdown li,
	ul.dropdown ul {
	  list-style: none;
	  margin: 0;
	  padding: 0;
	}
	ul.dropdown {
	  position: relative;
	  /*z-index:597;*/
	  float: left;
	}
	ul.dropdown li {
	  float: left;
	  zoom: 1;
	}
	ul.dropdown li.hover,
	ul.dropdown li:hover {
	  position: relative;
	  /*z-index:599;*/
	  z-index: 600;
	}
	ul.dropdown ul {
	  display: none;
	  visibility: hidden;
	  position: absolute;
	  top: 100%;
	  left: 0;
	  /*z-index:598;*/
	  width: 100%;
	}
	ul.dropdown ul li {
	  float: none;
	}
	ul.dropdown ul ul {
	  top: 0;
	  left: 100%;
	  /*z-index:600;*/
	}
	/* Trigger the sub-menu */
	ul.dropdown li:hover > ul {
	  display: block;
	  visibility: visible;
	}
	/* The last submenu is right aligned */
	ul.dropdown > li:last-of-type ul {
	  left: auto;
	  right: 0;
	}
	ul.dropdown li a {
	  position: relative;
	  z-index: 650;
	}
	/* Dropdown customization */
	ul.dropdown {
	  margin-top: 6px;
	  z-index: 599;
	}
	/* Links status */
	ul.dropdown a:link,
	ul.dropdown a:visited {
	  padding: 9px 14px 7px 13px;
	  text-shadow: 0 1px 0 #000;
	  color: #c8c8c8;
	  text-decoration: none;
	  display: block;
	  outline: 0;
	}
	ul.dropdown a:hover {
	  color: #fff;
	}
	ul.dropdown a:active {
	  background: #212121;
	}
	ul.dropdown li {
	  -webkit-transition: background 0.3s;
	  -moz-transition: background 0.3s;
	  -ms-transition: background 0.3s;
	  -o-transition: background 0.3s;
	  transition: background 0.3s;
	}
	ul.dropdown li:hover {
	  background: #333;
	}
	/* Current page */
	ul.dropdown li.current-menu-item > a,
	ul.dropdown li.current-menu-parent > a {
	  color: #333;
	  background: #ccc;
	  text-shadow: 0 1px 0 #efefef;
	  font-weight: bold;
	}
	/* Level 1 */
	ul.dropdown > li {
	  text-transform: uppercase;
	}
	/* Level 2 */
	ul.dropdown ul {
	  width: 150px;
	}
	ul.dropdown ul li {
	  text-transform: none;
	  background: #000;
	}
	ul.dropdown li ul {
	  text-transform: none;
	  background: #000;
	}



/* =============================================================================
   #4 Common Elements
   ========================================================================== */
	
	/* Content Slider */
	/* ----------------------------------------------------- */
	.content-slider {
	  overflow: hidden;
	  zoom: 1;
	  position: relative;
	  margin-bottom: 0;
	  z-index: 1;
	}
.clone {display:none !important;}
	.content-slider img.alignleft {
		background:none;
		padding:0;
		margin:0;
		border:0;
	}

	/* Content Slider Controls */
	.flex-direction-nav a:focus {
	  outline: 0;
	}
	.flex-control-nav {
	  display: block;
	  clear: both;
	  padding: 15px 0 0 0;
	}
	.lt-ie8 .flex-direction-nav {
	  margin-top: -52px;
	}

	/* Alternative controls, displayed inside the image area 
		   Usage: <div class="content-slider compact-nav"> */
	.compact-nav .flex-direction-nav li a {
	  width: 35px;
	  height: 35px;
	  position: absolute;
	  bottom: 11px;
	  top: auto;
	}
	.compact-nav .flex-direction-nav li .next {
	  left: auto;
	  right: 1px;
	  bottom: 1px;
	  background-position: -62px -9px;
	}
	.compact-nav .flex-direction-nav li .prev {
	  left: auto;
	  right: 37px;
	  bottom: 1px;
	  background-position: -6px -9px;
	}
	.compact-nav .flex-control-nav {
		clear:none;
		width: auto;
		position: absolute;
		right: 85px;
		bottom: 5px;
	}


	#details .compact-nav .flex-direction-nav {
		clear:none;
		position: relative;
		bottom:10px;
	}
	#details .compact-nav .flex-control-nav {
		bottom:16px;
	}

	#details img {
		width:100%;
	}

	.object {
		color:#fff;
	}

    @media (max-width:1199px){
    .chrome img, .safari img {margin-left:-122px;}
    }
    @media (max-width:979px){
    .chrome img, .safari img {margin-left:-280px;}
    }
    @media (max-width:767px){
    .chrome img, .safari img {margin-left:-302px;}
    }
    @media (max-width:479px){
    .chrome .clone, .safari clone {margin-left:-280px;}
    .chrome img, .safari img {margin-left:-185px;}
    }


	/* Big caption for the Content Slider */
	.big-caption-bottom {
	  color: #fff;
	  font-size: 48px;
	  line-height: 48px;
	  text-align: center;
	  position: absolute;
	  left: 0;
	  bottom: -20px;
	  padding: 48px 0;
	  width: 100%;
	  background-color: rgba(0, 0, 0, 0.5);
	  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000,GradientType=0 )";
	  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)";
	}
	.big-caption {
	  color: #fff;
	  font-size: 48px;
	  line-height: 52px;
	  text-align: center;
	  position: absolute;
	  top: 50%;
	  left: 0;
	  margin: -79px 0 0 0;
	  padding: 52px 0;
	  width: 100%;
	  background-color: rgba(0, 0, 0, 0.5);
	  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000,GradientType=0 )";
	  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)";
	}
	/* Medium caption for the Content Slider */
	.medium-caption {
	  font-size: 14px;
	  padding: 20px 20px 15px 20px;
	  width: 100%;
	  position: absolute;
	  left: 0;
	  bottom: -20px;
	  background-color: rgba(0, 0, 0, 0.5);
	  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000,GradientType=0 )";
	  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)";
	}
	/* Small caption for the Content Slider */
	.small-caption {
	  font-size: 12px;
	  padding: 8px 12px 7px 12px;
	  position: absolute;
	  bottom: 0;
	  left: 20px;
	  background-color: rgba(0, 0, 0, 0.5);
	  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000,GradientType=0 )";
	  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)";
	}


	/* Lightbox / prettyPhoto customization */
	/* ----------------------------------------------------- */
	div.ppt {
	  margin: 0 0 10px 19px;
	  font-family: 'Armata', Helvetica, Arial, sans-serif;
	}
	div.pp_andante .pp_details {
	  position: relative;
	}
	div.pp_andante .pp_next:hover {
	  background: url(img/ui/arrow_right.png) center right no-repeat;
	  cursor: pointer;
	}
	div.pp_andante .pp_previous:hover {
	  background: url(img/ui/arrow_left.png) center left no-repeat;
	  cursor: pointer;
	}
	div.pp_andante .pp_close {
	  width: 50px;
	  height: 50px;
	  background: url(img/ui/close.png) 0 0 no-repeat;
	  cursor: pointer;
	  top: auto;
	  position: absolute;
	  bottom: 0;
	}
	div.pp_andante .pp_arrow_previous,
	div.pp_andante .pp_arrow_next {
	  display: none;
	}
	div.pp_andante .pp_details {
	  margin: 0;
	  padding: 0;
	  background: transparent;
	}
	div.pp_andante .pp_social {
	  margin-top: 15px;
	}
	div.pp_andante .pp_top {
	  height: 0;
	}
	div.pp_andante .currentTextHolder {
	  padding: 11px 11px 12px 11px;
	}


	/* Media Object - A flexible image & description block */
	/* ----------------------------------------------------------- */

	/* Base */
	.media,
	.caption {
	  overflow: hidden;
	  _overflow: visible;
	  zoom: 1;
	}
	.media .object {
	  float: left;
	}
	.media .object img {
	  display: block;
	  vertical-align: text-top;
	}
	/* Customization */
	.media {
	  margin-bottom: 20px;
	}
	.media h3,
	.media h4 {
	  margin: 0;
	}
	.media .caption {
	  padding: 15px;
	}
	.media p {
	  margin-bottom: 0;
	}
	/* Meta extension for the blog pages */
	.meta {
	  font-size: 11px;
	  font-style: italic;
	  color: #aaa;
	  list-style: none;
	  padding: 0;
	  margin: 3px 0 0 0;
	}
	.meta li {
	  display: inline;
	  margin-right: 10px;
	}
	/* Force the object and caption below each other */
	.media.vertical .object {
	  display: block;
	  float: none;
	  text-align: center;
	}
	/* Specific styles for the media object */
	#content .media {
	  background-color: rgba(0, 0, 0, 0.25);
	  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#40000000, endColorstr=#40000000,GradientType=0 )";
	  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#40000000, endColorstr=#40000000)";
	  -webkit-transition: background 0.3s;
	  -moz-transition: background 0.3s;
	  -ms-transition: background 0.3s;
	  -o-transition: background 0.3s;
	  transition: background 0.3s;
	}
	#content .media:hover {
	  background: #000;
	}
	/* 3 Columns helper for the Media Object */
	.three-columns .media .object/*,
	.three-columns .media .object img*/ {
	  width: 100%;
	}
	.video.object {
	  width: 100%;
	  margin-bottom: -5px;
	}


	/* Buttons */
	/* ----------------------------------------------------- */
	.button,
	a.button,
	button,
	input[type="submit"] {
	  border: 0;
	  background-color: #333;
	  color: #fff;
	  font: 13px/13px sans-serif;
	  display: inline-block;
	  padding: 11px;
	  text-align: center;
	  text-decoration: none;
	  text-transform: uppercase;
	  text-shadow: 0 1px 0 #000;
	  -webkit-transition: background-color 0.3s;
	  -moz-transition: background-color 0.3s;
	  -ms-transition: background-color 0.3s;
	  -o-transition: background-color 0.3s;
	  transition: background-color 0.3s;
	}
	.button:hover,
	a.button:hover,
	button:hover,
	input[type="submit"]:hover {
	  background-color: #ff5500;
	}
	.button a { color: #fff; }
	.button.big {
	  font-size: 13px;
	  line-height: 13px;
	  padding: 14px;
	}
	.button.small {
	  font-size: 10px;
	  line-height: 11px;
	  padding: 10px 10px 8px 10px;
	}
	.button.mini {
	  font-size: 8px;
	  line-height: 9px;
	  letter-spacing: 1px;
	  line-height: 9px;
	  padding: 6px 6px 5px 6px;
	}
	.button.full {
	  width: 100%;
	  display: block;
	  padding: 15px 0;
	  margin-top: 20px;
	}
	.button.micro {
	  font-size: 8px;
	  line-height: 9px;
	  letter-spacing: 1px;
	  line-height: 9px;
	  padding: 3px 3px 2px 3px;
	}
	/* Colour variations */
	.button.orange,
	a.button.orange,
	button.orange {
	  background-color: #ff5500;
	  -webkit-transition: background-color 0.3s;
	  -moz-transition: background-color 0.3s;
	  -ms-transition: background-color 0.3s;
	  -o-transition: background-color 0.3s;
	  transition: background-color 0.3s;
	}
	.button.orange:hover,
	a.button.orange:hover,
	button.orange:hover {
	  color: #333;
	  text-shadow: 0 1px 0 #fff;
	  background-color: #fff;
	}
	/* Some fine-tuning... */
	h3 + p .button {
	  margin-top: 10px;
	}
	/* Header text with inline rule */
	/* ----------------------------------------------------- */
	.striped-heading {
	  position: relative;
	  margin-bottom: 0;
	}
	.striped-heading h1 {
	  float: left;
	  margin-right: 10px;
	}
	.striped-heading .decoration {
	  padding: 20px;
	  background: url("img/content/rule.gif") repeat-x scroll 0 24px transparent;
	  overflow: hidden;
	  height: 100%;
	}
	/* Horizontal Rules */
	/* ----------------------------------------------------- */
	hr.pattern,
	.hr_pattern {
	  height: 5px;
	  background: url(img/content/rule.gif) repeat-x top left;
	  margin-top: 0;
	  margin-bottom: 20px;
	  border: 0;
	  clear: both;
	}
	hr.small,
	.hr_small {
	  width: 30px;
	  height: 1px;
	  border-bottom: 1px #bbb solid;
	  margin: 10px 0 10px 0;
	  padding: 0;
	  display: block;
	  clear: both;
	}
	.lt-ie8 hr {
	  margin: 2px 0;
	}
	#content [class*="span"] hr.pattern, #content [class*="span"] .hr_pattern { 
		margin-left:0;
		margin-right:0;
	}
	#content .nested > hr.pattern, #content .nested > .hr_pattern { 
		margin-left:8px;
		margin-right:8px;
	}

	/* Fix a bug for IE... */
	[class*="span"] hr.pattern {
	  margin-top: 20px;
	}
	

	/* Side navigation */
	/* ----------------------------------------------------- */
	aside ul {
	  padding-left: 0;
	  border-top: #444 dotted 1px;
	  border-bottom: #444 dotted 1px;
	}
	aside li {
	  list-style-type: none;
	  margin: 3px 0;
	  background-color: rgba(0, 0, 0, 0.09999999999999998);
	  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1A000000, endColorstr=#1A000000,GradientType=0 )";
	  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1A000000, endColorstr=#1A000000)";
	}
	aside li:hover {
	  background-color: rgba(0, 0, 0, 0.19999999999999996);
	  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000,GradientType=0 )";
	  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000)";
	}
	aside li a {
	  display: block;
	  outline: 0;
	  padding: 5px 10px;
	}
	aside li a:hover {
	  text-decoration: none;
	}


	/* Projects Next/Previous Buttons */
	/* ----------------------------------------------------- */
	.projects-nav {
	  margin-top: 10px;
	  /*float:right;*/
	}
	.projects-nav li {
	  display: inline;
	}


	/* Accordion */
	/* ----------------------------------------------------- */
	.accordion {
	  position: relative;
	  background: #161616;
	  border-top: #444 dotted 1px;
	  border-bottom: #444 dotted 1px;
	  margin-bottom: 20px;
	}
	.accordion-trigger {
	  cursor: pointer;
	  display: block;
	}
	.accordion-trigger:hover {
	  background: #222;
	}
	.accordion-trigger a {
	  background: url(img/ui/btn_accordion.png) no-repeat 16px 26px;
	  display: block;
	  outline: 0;
	  padding: 25px 20px 25px 50px;
	}
	.accordion-trigger a:hover {
	  text-decoration: none;
	}
	.accordion-trigger.active a {
	  cursor: default;
	  background-position: 16px -99px;
	}
	.accordion-trigger.active:hover {
	  background: transparent;
	}
	.accordion-content {
	  padding: 0 25px 0 50px;
	  margin: -15px 0 20px 0;
	}
	.accordion-content + .accordion-trigger {
	  border-top: #444 dotted 1px;
	}


	/* Tabs */
	/* ----------------------------------------------------- */
	ul.tabs {
	  margin: 0;
	  padding: 0;
	  list-style: none;
	  border-bottom: #444 dotted 1px;
	}
	ul.tabs li {
	  float: left;
	}
	ul.tabs li a {
	  display: block;
	  padding: 10px 15px 8px 15px;
	  text-decoration: none;
	  outline: 0;
	}
	ul.tabs li a:hover {
	  background: #222;
	  color: #fff;
	}
	ul.tabs .active {
	  background: #161616;
	  border-top: #444 dotted 1px;
	  margin-top: -1px;
	}
	.tabs-content {
	  float: none;
	  display: block;
	  clear: both;
	  margin-bottom: 20px;
	  padding: 10px 15px;
	  background: #161616;
	  border-bottom: #444 dotted 1px;
	}


	/* Active status for the Tabs */
	/* ----------------------------------------------------- */
	.active,
	.active a,
	a.active {
	  color: #f25835;
	}


	/* Message boxes */
	/* ----------------------------------------------------- */
	.info,
	.success,
	.warning,
	.error,
	.validation {
	  margin: 0 0 10px 0;
	  padding: 15px 10px 15px 50px;
	  background-repeat: no-repeat;
	  background-position: 12px center;
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;
	}
	.info ul,
	.success ul,
	.warning ul,
	.error ul,
	.validation ul {
	  margin: 0;
	}
	.info {
	  color: #00529b;
	  background-color: #bde5f8;
	  background-image: url('img/icons/info.png');
	}
	.success {
	  color: #4f8a10;
	  background-color: #dff2bf;
	  background-image: url('img/icons/success.png');
	}
	.warning {
	  color: #9f6000;
	  background-color: #feefb3;
	  background-image: url('img/icons/warning.png');
	}
	.error {
	  color: #d8000c;
	  background-color: #ffbaba;
	  background-image: url('img/icons/error.png');
	}


	/* Icons 
		   Usage: <i class="icon-date"></i> */
	/* ---------------------------------------------------- */
	[class^="icon-"],
	[class*=" icon-"] {
	  display: inline-block;
	  vertical-align: middle;
	  line-height: 30px;
	  width: 30px;
	  height: 30px;
	  background-repeat: no-repeat;
	  background-position: 5px 6px;
	}
	.icon-add { background-image: url(img/icons/lists/dark/add.png); }
	.icon-arrow1e { background-image: url(img/icons/lists/dark/arrow1_e.png); }
	.icon-arrow1se { background-image: url(img/icons/lists/dark/arrow1_se.png); }
	.icon-arrow2e { background-image: url(img/icons/lists/dark/arrow2_e.png); }
	.icon-arrow3e { background-image: url(img/icons/lists/dark/arrow3_e.png); }
	.icon-check { background-image: url(img/icons/lists/dark/check.png); }
	.icon-close { background-image: url(img/icons/lists/dark/close.png); }
	.icon-forward { background-image: url(img/icons/lists/dark/forward.png); }
	.icon-stop { background-image: url(img/icons/lists/dark/stop.png); }
	.icon-subtract { background-image: url(img/icons/lists/dark/subtract.png); }

	.icon-add-light { background-image: url(img/icons/lists/light/add.png); }
	.icon-arrow1e-light { background-image: url(img/icons/lists/light/arrow1_e.png); }
	.icon-arrow1se-light { background-image: url(img/icons/lists/light/arrow1_se.png); }
	.icon-arrow2e-light { background-image: url(img/icons/lists/light/arrow_2e.png); }
	.icon-arrow3e-light { background-image: url(img/icons/lists/light/arrow_3e.png); }
	.icon-check-light { background-image: url(img/icons/lists/light/check.png); }
	.icon-close-light { background-image: url(img/icons/lists/light/close.png); }
	.icon-forward-light { background-image: url(img/icons/lists/light/forward.png); }
	.icon-stop-light { background-image: url(img/icons/lists/light/stop.png); }
	.icon-subtract-light { background-image: url(img/icons/lists/light/subtract.png); }

	.icon-date { background-image: url(img/icons/date.png); background-position: 0; margin: -5px 0 0 -5px; }
	.icon-comments { background-image: url(img/icons/comments.png); background-position: 0; margin: -5px 0 0 -5px; }
	.icon-preload { background-image: url(img/icons/preload.gif); width: 16px; height: 16px; background-position: 0; }
	.icon-arrow-left { background-image: url(img/icons/arrow_left.gif); width: 17px; height: 9px; background-position: 0; }
	.icon-arrow-right { background-image: url(img/icons/arrow_right.gif); width: 17px; height: 9px; background-position: 0;	}
	.icon-overview { background-image: url(img/icons/overview.png); width: 18px; height: 9px; background-position: 0; }

	/* Hover icons */
	.icon-zoom {
	  background-image: url(img/icons/zoom.png);
	  width: 50px;
	  height: 50px;
	  background-position: 0;
	}
	.icon-play {
	  background-image: url(img/icons/play.png);
	  width: 50px;
	  height: 50px;
	  background-position: 0;
	}


	/* Forms */
	/* ----------------------------------------------------- */
	form {
	  margin-bottom: 20px;
	}
	fieldset {
	  margin-bottom: 20px;
	}
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
	  background: #ccc;
	  -webkit-transition: background 0.3s;
	  -moz-transition: background 0.3s;
	  -ms-transition: background 0.3s;
	  -o-transition: background 0.3s;
	  transition: background 0.3s;
	  border: 0;
	  border-width: 0;
	  outline: none;
	  display: block;
	  margin: 0 0 20px 0;
	  padding: 14px;
	  width: 100%;
	  max-width: 100%;
	  box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -ms-box-sizing: border-box;
	}
	select {
	  padding: 0;
	}
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {
	  background: #fff;
	}
	textarea {
	  min-height: 60px;
	}
	label,
	select {
	  width: 220px;
	}
	input[type="checkbox"] {
	  display: inline;
	}
	input[type="text"] {
	  margin-top: 1px;
	}


	/* Images floats in paragraphs */
	/* ----------------------------------------------------- */
	.floatleft,
	.alignleft {
	  float: left;
	  margin: 5px 20px 10px 0;
	}
	.floatright,
	.alignright {
	  float: right;
	  margin: 5px 0 10px 20px;
	}
	.aligncenter {
	  display:block;
	  margin: 5px auto 10px auto;
	}
	/* Some styling to the image floats */
	img.floatleft,
	img.alignleft,
	img.floatright,
	img.alignright {
	  background: #333;
	  padding: 5px;
	  border: 1px solid #666;
	}



/* =============================================================================
   #5 Pages
   ========================================================================== */

	/* Home */
	/* ----------------------------------------------------- */
	/* Features - Icon and Description */
	#features {
	  margin-top: 10px;
	}
	#features .span3 {
	  margin-top: 10px;
	}
	#features img {
	  display: inline-block;
	  vertical-align: middle;
	  margin: 0 7px -10px 0;
	}
	#features h2 {
	  display: inline-block;
	}


	/* About page */
	/* ----------------------------------------------------- */
	/* Page Heading */
	.intro-heading {
	  font-size: 32px;
	  line-height: 40px;
	}


	/* Portfolio pages */
	/* ----------------------------------------------------- */

	/* Filter Navigation for section content (all, print, video etc...) */
	.filter {
	  margin-bottom: 20px;
	  padding: 0;
	  text-shadow: 0 1px 0 #000;
	}
	.filter a,
	.filter a:link,
	.filter a:visited {
	  color: #787878;
	}
	.filter a:hover {
	  text-decoration: none;
	  border-bottom: 1px dotted #787878;
	}
	.filter .divider {
	  color: #787878;
	  margin: 0 5px;
	}
	.filter .active a {
	  color: #fff;
	  border-bottom: 1px dotted #787878;
	  outline: 0;
	}
	.filter li {
	  display: inline;
	}

	/* Details page */
	#details img {
	  padding-bottom: 10px;
	}

	#portfolio-content p,
	#content .hr_pattern {
		margin-left:8px;
		margin-right:8px;
	}


	/* Contact page */
	/* ----------------------------------------------------- */
	#info {
	  margin-top: 10px;
	}

	/* Blog pages */
	/* ----------------------------------------------------- */

	/* Post page */

	.comments .media,
	.comments .media:hover {
	  background: none;
	}
	.comments .caption {
	  padding-top: 0;
	}
	.comments ul {
	  margin: 10px 0 0 65px;
	}
	.comments ul li {
	  margin-bottom: 0;
	}
	.comments .meta {
	  margin: 0;
	}

	.link-pages {
     clear:both;
	}	

	
	/* WP Specific */
	/* ----------------------------------------------------- */

	.sticky {}
	.bypostauthor {}
	.wp-caption {}

	.gallery .gallery-caption {
	   color: #888;
	   font-size: 12px;
	   margin: 0 0 12px;
	}
	
	.wp-caption {
	    background: #fff;
	    border: 1px solid #f0f0f0;
	    max-width: 96%; /* Image does not overflow the content area */
	    padding: 5px 3px 10px;
	    text-align: center;
	}

	.wp-caption.alignnone {
	    margin: 5px 20px 20px 0;
	}

	.wp-caption.alignleft {
	    margin: 5px 20px 20px 0;
	}

	.wp-caption.alignright {
	    margin: 5px 0 20px 20px;
	}

	.wp-caption img {
	    border: 0 none;
	    height: auto;
	    margin:0;
	    padding:0;
	    width: auto;
	}

	.wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
	}


/* =============================================================================
   #6 Footer
   ========================================================================== */

	#main-footer {
	  width: 100%;
	  background: #000;
	  color: #f6f6f6;
	  margin-top: 20px;
	  padding-top: 20px;
	  border-top: #4F484A solid 1px;
	}
	#main-footer h3 {
	  font-size: 18px;
	  color: #f6f6f6;
	  text-shadow: none;
	}
	#main-footer h4 {
	  font-size: 12px;
	  font-weight: bold;
	  text-shadow: none;
	}
	#main-footer p {
	  text-shadow: none;
	}
	#main-footer p span {
	  color: #a7a7a7;
	  font-size: 11px;
	  font-style: italic;
	}
	#main-footer .hr_small {
	  margin: 6px 0 10px 0;
	}
	#main-footer .media {
	  margin-bottom: 10px;
	}
	#main-footer .media .object {
	  margin-right: 10px;
	}
	#main-footer .media .caption {
	  padding: 0;
	}
	.flickr-feed img {
	  margin: 0 3% 3% 0;
	  width: 30%;
	}



/* =============================================================================
   #7 Media Queries - Screen Resolutions
   ========================================================================== */

	/* Here you can find the Media Queries used to adapt the elements at different resolutions. */


	/* Wrapper for smaller resolutions (from smartphones up to landscape tablets) */
	@media (min-width: 1px) and (max-width: 979px) {
	 
	  /* Push the headline below the logo */
	  #tagline {
	    display: block;
	    clear: both;
	    margin: 0;
	  }

	  /* Hide the main navigation and show the menu button */
	  #main-nav {
	    float: none;
	    display: none;
	    clear: both;
	    top:0 !important;
	  }
	  #nav-toggle {
	    display: block;
	    visibility: visible;
	    margin-top: 10px;
	  }

	  /* Make the menu items flow below each other */
	  ul.dropdown {
	    width: 100%;
	    position: static;
	  }
	  ul.dropdown li {
	    background: #222;
	    float: none;
	    display: block;
	    clear: both;
	    margin-bottom: 2px;
	  }
	  ul.dropdown li a {
	    padding: 14px 14px;
	  }
	  ul.dropdown ul {
	    width: 100%;
	    position: static;
	  }
	  ul.dropdown ul li {
	    width: 100%;
	    margin: 0;
	  }
	  .small-caption {
	    margin: 0;
	    bottom: 5px;
	    left: 5px;
	  }
	  .big-caption {
	    font-size: 12px;
	    line-height: 20px;
	    background: rgba(0, 0, 0, 0.6);
	    margin: 0;
	    padding: 8px 12px 7px 12px;
	    position: absolute;
	    top: auto;
	    bottom: 5px;
	    left: 5px;
	    width: auto;
	  }

	  /* On mobile/tablets, hide the arrows from the Content-Slider */
	  .flex-direction-nav {
	    position: absolute;
	    left: -9999px;
	  }

	  /* Move the compact-nav outside the image area */
	  .compact-nav .flex-control-nav {
	    right: 15px;
	  }
	}



	/* ----------------------------------------------------- */
	/* Stage 1 - Portrait smartphones */
	@media (max-width: 479px) {
	  #content .media .object {
	    width: 100%;
	  }

	  #content .media .object img {
	  	width: 100%;
		height: auto;
	  }

	  #portfolio-content p,
	  #content .hr_pattern,
	  #content > h1,
	  #content > h2,
	  #content > h3,
	  #content > h4,
	  #content > h5,
	  #content > h6,
	  .intro-heading {
	 	margin-left:0;
		margin-right:0;
	  }
	}



	/* ----------------------------------------------------- */
	/* Stage 2 - Landscape smartphones, portrait tablets */
	@media (min-width: 480px) and (max-width: 767px) {

	  /* Make all the grid elements 100% width */
	  #content [class*="span"] {
	    width: 444px;
	  }

	  /* Reduce the size of the media object */
	  #content .media .object {
	    overflow-x: hidden;
	    width: 35%;
	  }
	  #content .media .object img {
	  	margin-left:-20%;
	  }
	  /*#content .media .object,
	  #content .media .object img {
	    width: 100%;
	  }*/

	  /* Reduce the size of the media object */
	  /*#content .media .object {
	    overflow-x: hidden;
	    width: 35%;
	  }*/

	  /* Make each feature in a row */
	  #features .span3 {
	    width: 100%;
	  }

	  /* Make each footer element in a row */
	  #main-footer .span3 {
	    width: 100%;
	    clear: both;
	    margin-bottom: 40px;
	  }
	  #main-footer .media .caption {
	    padding: 0;
	  }

	  /* Add some margin to the Flickr thumbnails in the footer */
	  #flickr-feed img {
	    width: auto;
	  }
	}



	/* ----------------------------------------------------- */
	/* Stage 3 - Landscape tablets */
	@media (min-width: 768px) and (max-width: 979px) {

	  /* Push the feature text below the image */
	  #features img {
	    display: block;
	  }
	  #features h2 {
	    margin: 10px 0;
	  }

	  /* One columns helper for the Media Object: reduces the images size */
	  .one-column .media .object {
	    width: 18%;
	    overflow: hidden;
	  }

	  /* Makes the portfolio details content to fill the whole area */
	  #portfolio-details #content [class*="span"] {
	    width: 704px;
	  }

	  /* Pushes the descriptions below the images in the footer */
	  #main-footer .media .object {
	    display: block;
	    float: none;
	    margin-bottom: 10px;
	  }
	}



	/* ----------------------------------------------------- */
	/* Stage 4 - Standard screens */
	@media (min-width: 980px) and (max-width: 1200px) {

	  /* Push the headline below the logo */
	  #tagline {
	    display: block;
	    clear: both;
	    margin: 0;
	  }

	  /* Makes the portfolio details content to fill the whole area */
	  .one-column .media .object {
	    width: 35%;
	    overflow: hidden;
	  }

	  .one-column .media .object img {
	    margin-left: -10%;
	  }

	  /* Two columns helper for the Media Object: reduce the images size */
	  .two-columns .media .object {
	    width: 50%;
	    overflow: hidden;
	  }

	  .two-columns .media .object img {
	    margin-left: -30%;
	  }
	}



	/* ----------------------------------------------------- */
	/* Stage 5 - Large screens */
	@media (min-width: 1201px) {
	  .flex-direction-nav li a {
	    margin-top: 9px;
	  }
	}


	
	/* With this trick the logo is ultra sharp on retina displays */
/*	@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
	  #logo a img {
	    visibility: hidden;
	  }
	  #logo a {
	    background: url(img/content/logo2x.png) no-repeat;
	    background-size: 177px 34px;
	    padding: 3px 0;
	  }
	}*/