/*
HTML5 ✰ Boilerplate
*/

/*
Main CSS file of Clocker theme
Author: Ithi
Date: 20.06.2011
*/

/** List for easy navigate 

1. @Font-face
2. CSS Reset by Eric Meyer & Richard Clark
3. Font normalization
4. Minimal base 
5. Base 
6. Main navigation
7. Slider 
8. Portfolio 
9. Blog 
10. Sidebar 
11. Archives
12. About me
13. Contact page
14. Footer

**/


/*
1. @Font-face
*/
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/font?kit=s-BiyweUPV0v-yRb-cjciMDdSZkkecOE1hvV7ZHvhyU') format('truetype');
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: bold;
  src: local('Droid Sans Bold'), local('DroidSans-Bold'), url('http://themes.googleusercontent.com/font?kit=EFpQQyG9GqCrobXxL-KRMcBaWKZ57bY3RXgXH6dOjZ0') format('truetype');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: bold;
  src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url('http://themes.googleusercontent.com/font?kit=QQt14e8dY39u-eYBZmppwTdGNerWpg2Hn6A-BxWgZ_I') format('truetype');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Serif'), local('DroidSerif'), url('http://themes.googleusercontent.com/font?kit=0AKsP294HTD-nvJgucYTaCwlidHJgAgmTjOEEzwu1L8') format('truetype');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: italic;
  font-weight: normal;
  src: local('Droid Serif Italic'), local('DroidSerif-Italic'), url('http://themes.googleusercontent.com/font?kit=cj2hUnSRBhwmSPr9kS5892cbqnd1g9zt-QKibAzZSRA') format('truetype');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: italic;
  font-weight: bold;
  src: local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'), url('http://themes.googleusercontent.com/font?kit=c92rD_x0V1LslSFt3-QEpsff8iMd5lHP9j3QUuXTy8g') format('truetype');
}


/*
2. CSS Reset by Eric Meyer & Richard Clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
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;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }


/*
3. Font normalization
*/

body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }

/* 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; }


/*
4. Minimal base styles.
*/
/* Always force a scrollbar in non-IE */
html { overflow-y: scroll; }

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }

/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }

small { font-size: 85%; }
strong, th { font-weight: bold; }

td { vertical-align: top; }

/* 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 {
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; white-space: pre-wrap; word-wrap: break-word;
  padding: 15px;
}

textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

.ie6 legend, .ie7 legend { margin-left: -7px; } 

/* 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; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }

/* 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; }


/* These selection declarations have to be separate
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink! */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }

/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #FF5E99; }

/* Make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }

/* Bicubic resizing for non-native sized IMG:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }


/*
5. Base styles
*/

body{background-image: url("../img/bg.jpg"); color: #999;  font-family: 'Droid Sans', 'Helventica', Arial, sans-serif;}
.float-left{float: left;}
.float-right{float: right;}

/*Smooth Transformations*/
.pagination li a, .prev, .next, .link-img, .project {
		/* Firefox */
		-moz-transition-property: opacity;
		-moz-transition-duration: .3s;
		/* WebKit */
		-webkit-transition-property: opacity;
		-webkit-transition-duration: .3s;
		/* Opera */
		-o-transition-property: opacity;
		-o-transition-duration: .3s;
		/* Standard */
		transition-property: opacity;
		transition-duration: .3s;
}
a, a *{
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
}

/*Text formating*/
a, a:active, a:visited {text-decoration: none; color: #666;}
a:hover { color: #ff7378; }

p{font-size: 13px; line-height: 22px;}
.important{color: #1fb4dd;} /*Set color for importand parts of site*/
.more-important {color: #1fb4dd; font-size: large;} /*Set color and make text bigger*/
.less-important {color: #ccc; font-size: smaller; font-style: italic;}
.column{margin-bottom: 20px;}
.phrase{text-align: center;}

h1{
	font-family: 'Droid Serif', serif;
	font-size: 22px;
	line-height: 22px;
	font-weight: normal;
	color: #555;
	margin-bottom: 10px;
}
h2{
	font-family: 'Droid Serif', serif;
	font-size: 20px;
	line-height: 28px;
	font-weight: normal;
	color: #555;
}

h3{
	font-family: 'Droid Serif', serif;
	font-size: 18px;
	line-height: 1.7em;
	font-weight: normal;
	color: #555;
	padding: 0 0 10px 0;	
}
a h3:hover{color: #ff7378;}
h4{
	font-size: 16px;
	line-height: 24px;
	font-weight: normal;
	color: #555;
	padding: 0 0 10px 0;
}
aside h4{
	font-family: 'Droid Serif', serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: normal;
	color: #555;
	padding: 0 0 10px 0;
	}
h5{
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 1px;
	color: #555;
	font-weight: bold;
	text-transform: uppercase;
	padding-bottom: 10px;	
	}
h6{font-weight: bold; color: #555; line-height: 1.7em;}
/*Images styling*/
.link-img{cursor: pointer; opacity: 0.8;}
.link-img:hover{opacity: 1.2;}

.image-description{font-size: 10px; font-style: italic; padding-bottom: 10px;}
.image-description a{color: #1fb4dd;}
.image-description a:hover{color: #ff7378;}

.image-to-right {position: relative; float: right; padding: 10px 0 10px 10px;}
.image-to-left {position: relative; float: left; padding: 10px 10px 10px 0;}

/*Separators*/
.hr-940px{margin: 30px 0; border-top: solid 1px #efefef; width: 940px;}
.hr-460px{border-bottom: solid 3px #1fb4dd; width: 460px;}

.hr-700px{margin: 30px 0; border-top: solid 1px #efefef; width: 700px;}
.hr-350px{border-bottom: solid 3px #1fb4dd; width: 350px;}

.hr-700px-double{margin: 30px 0; border-bottom: solid 1px #efefef; border-top: solid 1px #efefef; width: 700px; height: 3px; }
	

/*
6. Main navigation
*/
#top-bar{width: 100%;height: 10px; background-image: url(../img/top-bar-bg.png);}
.logo{margin: 30px 0 45px 0;}
.header{}
	nav{}
		#nav{text-align: center ;}
			#nav li{display: inline;}
				#nav li a {
					color: #bfbfbf;
					font-size: 15px;
					line-height: 14px;
					font-weight: normal;
					text-transform: uppercase;
					text-decoration: none;
					cursor: pointer;
				}
				#nav li a:hover, #nav li .active-page{
				color: #787878;
				}
				
				.nav-separator{
				padding: 0 29px; /*This spread menu anchors at 960 width*/
				color: #bfbfbf;
				font-size: 14px;
				font-weight: bold;
				}
				
/*Dropdown menu styles*/
#nav ul {
	padding: 10px 15px 10px 15px;
	margin: 10px 0 0 0;
	background: #fefefe;
	border: 1px solid #eee;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	   		border-radius: 4px;
	-webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.1);
	   -moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.1);
    		box-shadow:0 0 4px rgba(0, 0, 0, 0.1);
}
#nav ul li {border-bottom: 1px solid #eee; }
#nav ul li:last-child{border: none;}
#nav ul li a{padding: 5px 5px; text-transform: none; line-height: 20px;}

/*Position of dropdown*/	
#nav, #nav * {list-style: none;}
#nav {line-height:	1.0;}
#nav ul {
	position:		absolute;
	text-align: 	left;
	top:			-999em;
	width:			8em; /* left offset of submenus need to match (see below) */
}
#nav ul li {width: 100%;}
#nav li:hover {visibility:inherit;} /* fixes IE7 'sticky bug' */
#nav li {
	float:			left;
	position:		relative;
}
#nav a {
	display:		block;
	position:		relative;
}
#nav li:hover ul,
#nav li.sfHover ul {
	left:			0;
	top:			1.5em; /* match top ul list item height */
	z-index:		99;
}
ul#nav li:hover li ul, ul#nav li.sfHover li ul {top: -999em;}
ul#nav li li:hover ul, ul#nav li li.sfHover ul {left:10em; top: 0;}
ul#nav li li:hover li ul, ul#nav li li.sfHover li ul {top:	-999em;}
ul#nav li li li:hover ul, ul#nav li li li.sfHover ul { left: 10em; top: 0;}

	
/*
7. Slider styling
*/
/* The Nivo Slider styles */
.nivoSlider {position:relative; width: 940px; height: 350px; overflow: hidden;
			 background: url(../img/preloader.gif) no-repeat 50% 50%;}
.nivoSlider img {position:absolute; top:0px; left:0px; display: none;}

/* Nivo Slider small*/

.nivoSlider-small {position:relative; width: 460px; height: 350px; overflow: hidden;
			 	   background: url(../img/preloader.gif) no-repeat 50% 50%;}
.nivoSlider-small img {position:absolute; top:0px; left:0px; display: none;}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink, .nivoSlider-small a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {display:block; position:absolute; z-index:5; height:100%;}
.nivo-box {display:block; position:absolute; z-index:5; }
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:10px;
	bottom:30px;
	background:#222;
	color:#eee;
	opacity:0.8; /* Overridden by captionOpacity setting */
	max-width:50%;
	z-index:8;
}
.nivo-caption p {padding:10px; margin:0;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
/* Direction nav styles (e.g. Next & Prev) */

.nivo-prevNav, .nivo-nextNav, .nivo-controlNav a, .nivo-controlNav a.active {background: url(../img/slider-controls-sprite.png) no-repeat;}

.nivo-directionNav a {position:absolute; top:45%; z-index:9; cursor:pointer;}
.nivo-prevNav {left: 10px; background-position: -73px 0; width: 40px; height: 40px;}
.nivo-prevNav:hover {left: 10px; background-position: -73px -40px; width: 40px; height: 40px;}
.nivo-nextNav {right: 10px;background-position: -163px 0; width: 40px; height: 40px;}
.nivo-nextNav:hover {right: 10px;background-position: -163px -40px; width: 40px; height: 40px;}

/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {position: absolute; left: 10px; bottom: 10px;}
.nivo-controlNav a {
	background-position: -13px 0;
	width:10px;
	height:10px;
	display:block;
	text-indent:-9999px;
	margin-right:5px;
	float:left;
	position:relative;
	z-index:99;
	cursor:pointer;}
.nivo-controlNav a.active {background-position: 0 0;}



/*
8. Portfolio styles
*/
.filters-wrapp{padding: 40px 0 0 0; margin-bottom: -20px;}
.filter {list-style: none; display: inline;}
.filter li{cursor: default;}
.filter li a{float: left; padding-right: 28px; font-size: 12px; color:  #999; font-family: 'Droid Serif', serif; cursor: pointer;}
.filter li a:hover{color: #ff7378;}
.filter li .active{color: #1fb4dd;}

.portfolio-grid .project{}
.portfolio-grid .project:hover{opacity: .4;}

/*Portfolio with sidebar styling*/
.grid-side .portfolio-grid{overflow:hidden;}
.grid-side .portfolio-grid div {float: left;}
.grid-side .portfolio-grid div {margin-bottom: 20px;}
.grid-side .portfolio-grid div:nth-child(3n+1){padding-right: 20px;}
.grid-side .portfolio-grid div:nth-child(3n+2){padding-right: 20px;}

/*Portfolio full width*/
.grid-full .portfolio-grid{overflow:hidden;}
.grid-full .portfolio-grid div {float: left;}
.grid-full .portfolio-grid div {margin-bottom: 20px;}
.grid-full .portfolio-grid div:nth-child(4n+1){padding-right: 20px;}
.grid-full .portfolio-grid div:nth-child(4n+2){padding-right: 20px;}
.grid-full .portfolio-grid div:nth-child(4n+3){padding-right: 20px;}


/*
9. Blog styles
*/
#posts-container{}

.single-post{}

.post-description{font-size: 11px; margin: -10px 0 10px 0;}
.post-description	.author{text-transform: uppercase; cursor: pointer;}
.post-description	.date{text-transform: uppercase;cursor: pointer;}
.post-description	.category{text-transform: uppercase; cursor: pointer;}
.post-description	.comments{text-transform: uppercase; cursor: pointer;}

.post-description .author:hover, .post-description .date:hover, .post-description .category:hover, .post-description .comments:hover {color: #ff7378; }	

.read-more  {text-align: right;}
.read-more a {color: #1fb4dd;  cursor: pointer;}
.read-more a:hover {color: #ff7378;}

.old-entries{margin-bottom: 30px;}
.old-entries a {color: #1fb4dd; cursor: pointer; }
.old-entries a:hover {color: #ff7378;}
.new-entries{margin-bottom: 30px; float: right;}
.new-entries a {color: #1fb4dd; cursor: pointer; }
.new-entries a:hover {color: #ff7378;}

/*Comments*/
.comments{}
.comment{margin-top: 10px; width: 700px; overflow: hidden;}
.comment-photo{float: left; border: 2px solid white; display: block; margin: 0;
	-webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);}
.comment-text{float: left; width: 645px; margin-left: 20px; }
.comment-controls{}
.comment-controls p{font-size: 12px; line-height: 18px; }
	.comment-author{color: #444;}
	.comment-date{color: #444;}
	.comment-write-reply a{color: #1fb4dd; cursor: pointer;}
	.comment-write-reply a:hover{color: #ff7378;}
.comment-content{margin-top: 15px;}

/*Reply for a comment*/
.comment-reply{width: 645px; margin-left: 55px; overflow: hidden;}
	.comment-reply .comment-text{width: 590px;}
	
.comment-separator{width: 700px; margin: 20px 0; border-bottom: 1px solid #efefef; overflow: hidden;}	
.comment-reply-separator{ width: 628px; height: 20px; margin: 20px 0 20px 72px; border-left: 1px solid #efefef; overflow: hidden;}

/*Comment form*/
form.leave-a-comment {}
input.nick, input.e-mail, input.website, textarea.write-comment{
	width: 340px;
	height: 30px; 
	background: #ededed; 
	border: none; 
	outline: none; 
	margin:10px 0; 
	color: #888; 
	font-size: 12px; 
	line-height: 30px; 
	padding-left: 10px;
}
textarea.write-comment{width: 690px; height: 120px; min-width: 690px; max-width: 690px; line-height: 18px; padding-top: 8px;}
label{height: 30px; line-height: 30px; margin-left: 10px; cursor: default;}
input.nick:focus, input.e-mail:focus, input.website:focus, textarea.write-comment:focus{color: #f1f1f1;	background: #444;}

.comment-btn{
	color: #fff;
	font-size: 12px;
	float: right;
	background: url(../img/black-btn-sprite.png);
	background-repeat: no-repeat;
	width: 88px;
	height: 37px;
	border: none;
	margin-right: -5px;
	overflow: hidden;
	}	
	.comment-btn:hover{background: url(../img/black-btn-sprite.png) -90px;}
	.comment-btn:active{background: url(../img/black-btn-sprite.png) 88px;}


/*
10. Sidebar
*/
aside p{margin-bottom: 30px;}/*Separate between sidebar widgets is 30px*/
aside a{}

/*Search */
.search{width: 210px; height: 30px; background: #ededed; border: none; outline: none; margin-bottom: 30px;
		color: #888; font-size: 12px; line-height: 30px; padding-left: 10px;}
.search:focus{color: #f1f1f1; background: #444;}


/*Categories*/
.aside-categories{list-style: none; margin: 0px 0px 20px 0px; padding: 0;}
.aside-categories li{padding-bottom: 10px;}
.aside-categories li a {color: #1fb4dd; cursor: pointer; }
.aside-categories li a:hover {color: #ff7378;}

/*Credits*/
.credits{list-style: none; margin: 0px 0px 20px 0px; padding: 0; }
.credits li{color: #1fb4dd; padding-bottom: 10px;}
.credits li a {color: #1fb4dd;  cursor: pointer;}
.credits li a:hover {color: #ff7378;}

/*Ads*/
.ads{margin-bottom: 30px;}

/*
11. Archives
*/
.archives-wrapper{}

.archives{ margin: 20px 0 0 0;}
.archives-list li {color: #222; line-height: 25px;}
.archives-list li a {color: #1fb4dd;}
.archives-list li a:hover {color: #ff7378;}

/*
12. About me
*/
.about-me-photo{float: left; border: 2px solid white; display: block; margin: 3px 15px 3px 0;
	-webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);}

path{cursor: pointer;}
.get {display:none; float: left;}
#diagram {margin: 0; float:left; width:460px; height:375px;}

/*
13. Contact
*/
#contactform #form_name, #contactform #form_email, #contactform #form_subject, #contactform textarea{
	width: 220px;
	height: 30px; 
	background: #ededed; 
	border: none; 
	outline: none; 
	margin:10px 0; 
	color: #888; 
	font-size: 12px; 
	line-height: 30px; 
	padding-left: 10px;
}
#contactform #form_name:focus, #contactform #form_email:focus, #contactform #form_subject:focus, #contactform textarea:focus {color: #f1f1f1; background: #444;}
#contactform textarea {width: 688px; min-width: 448px; max-width: 688px; height: 120px; line-height: 18px; padding-top: 8px;}
#contactform label{height: 30px; line-height: 30px; margin-left: 10px; cursor: default;}

.contact-btn{
	color: #fff;
	font-size: 12px;
	float: right;
	background: url(../img/black-btn-sprite.png);
	background-repeat: no-repeat;
	width: 88px;
	height: 37px;
	border: none;
	margin-right: -4px;
	overflow: hidden;
	}	
	.contact-btn:hover{background: url(../img/black-btn-sprite.png) -90px;}
	.contact-btn:active{background: url(../img/black-btn-sprite.png) 88px;}

ul.head-office{list-style: none; margin: 0;}
ul.head-office li{margin-bottom: 10px;}



/*
14. Footer styling
*/

#copyrights-footer{
	color: #999999;
	font-size: 10px;
	line-height: 50px;
	}







/**
 * Non-semantic helper classes: please define your styles before this section.
 */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }
.hide {display: none;}

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }



/**
 * Media queries for responsive design.
 *
 * These follow after primary styles so they will successfully override.
 */

@media all and (orientation:portrait) {
  /* Style adjustments for portrait mode goes here */

}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */

}

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {


  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}


/**
 * Print styles.
 *
 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
 */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}