/* =========================================================================================================================

  Ritmo! CSS
  v0.9.3 / 16 aug 2011
  http://code.mjsarfatti.com/ritmo

  License CC BY-SA 3.0
  Copyright 2010-2011, Manuele J Sarfatti

========================================================================================================================= */

/* -------------------------------------------------------------------------------------------------------------------------
  RESET

------------------------------------------------------------------------------------------------------------------------- */


/* Force scrollbar in non-IE */
html {
	overflow-y:		scroll;
}

/* Remove default padding and/or margin for given elements */
address, body, figure, h1, h2, h3, h4, h5, h6, p, blockquote, dl, ul, ol, menu, fieldset, input, select, textarea,
button, td, th {
	margin:			0;
	padding:		0;
}

/* Html5 compatibility */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:		block;
}

/* Avoid browser default inconsistent heading font-sizes */
h1, h2, h3, h4, h5, h6 {
	font-size:		100%;
}

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

/* Quotes for all (except IE < 7 of course) */
q {
	quotes:			'“' '”' '‘' '’';
}

/* Style q in IE7, that doesn't put quotes around the tag */
.ie7 q {
	font-style:		italic;
}

/* Prevent a gap from showing below images in some browsers. Also who thought blue linked image borders were a good idea? */
img {
	vertical-align: 	bottom;
	border:			none;
}

/* De-italicize */
dfn {
	font-style:		inherit;
}

table {
	border-collapse:	collapse;
	border-spacing:		0;
}

input, select {
	/*vertical-align:		middle; ? */
}


/* -------------------------------------------------------------------------------------------------------------------------
  THE GRID

------------------------------------------------------------------------------------------------------------------------- */

body {
	font-size:		20px;
	line-height:		20px;
}


/* -------------------------------------------------------------------------------------------------------------------------
  TYPOGRAPHY

------------------------------------------------------------------------------------------------------------------------- */

/* #444 looks better than black (twitter.com/H_FJ/statuses/11800719859) */
body, select, input, textarea {
	color:			#444;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, form, address, pre, table {
	font-size:		14px;
	margin-bottom:		20px; /* = body line-height !!! */
}

/* Mo’ robust paragraph indenting: http://csswizardry.com/2010/12/mo-robust-paragraph-indenting */
p+p {
	text-indent:		1.5em;
	margin-top:		-20px;
}

pre, code, kbd, samp, figcaption {
	font-size:		13px;
}

body {
/* Serif */
	font-family:		Constantia, Georgia, "Century Schoolbook L", serif;
}

/* http://georgebutler.com/blog/typography/10-definitive-web-font-stacks-for-designers/ */
h1, h2 {
/* Headline Serif */
	font-family:		GoudyBookletter1911, Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L",
				"Nimbus Roman No9 L", serif;
}

/* Fallback to sans-serif for size consistency! */
pre, code, kbd, samp {
/* Typewriter */
	font-family:		"Courier New", Freemono, "Nimbus Mono L", Courier, monospace, sans-serif;
}

a, a:visited {
	color:			#154D99;
	text-decoration:	none;
}

a:hover {
	text-decoration:	underline;
}

a:active, a:focus {
	position:		relative;
	top:			1px;
}

abbr[title] {
	border-bottom:		1px dotted;
	cursor:			help;
}

blockquote {
	font-style:		italic;
	padding:		0 1em;
}

blockquote p:last-child {
	margin-bottom:		0;
}

blockquote em, blockquote i, blockquote cite {
	font-style:		normal;
}

ins {
	background:		#ddf9cc;
	text-decoration:	none;
}

mark {
	background-color:	#ff9; /* Default #ff5 is a bit too striking in my opinion */
}

small {
	font-size:		90%;
	line-height:		1; /* Don't let it change the line-height! */
}

sub, sup {
	font-size:		90%;
	line-height:		0; /* Don't let them change the line-height! */
}

code, kbd, samp {
	background:		#f5f5f5;
	color:			#222;
	line-height:		1;
}

pre {
	background:		#fdfdfb;
	color:			#222;
	padding:		10px; /* = (line-height / 2) */
	white-space:		pre;
	white-space:		pre-wrap;
	word-wrap:		break-word; /* IE */
}

ul, ol {
	left:			-36px;
	padding-left:		36px;
	position:		relative;
}

ul.inside, ol.inside { /* Bullets hanged by default. Do you prefer bullets inside? */
	left:			-16px;
}

.ie7 ul.inside, .ie7 ol.inside, .ie8 ul.inside, .ie8 ol.inside { /* Bullets hanged by default. Do you prefer bullets inside? */
	left:			-8px;
}

li ul, li ol {
	margin-left:		40px; /* = (line-height * 2) */
	margin-bottom:		0;
}

dt {
	font-weight:		bold;
}

dt:after, dt::after {
	content:		":";
}

th, td {
	border:			1px solid #888;
	padding:		4px 6px;
}


/* -------------------------------------------------------------------------------------------------------------------------
  COMMONS

  These are styling rules commonly found in websites
------------------------------------------------------------------------------------------------------------------------- */

/* Your logo is an image, not a h1: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/ */
#logo, #logo img {
	display:		block;
	width:			auto; /* Width of your logo in pixels (ideally a round grid-number) */
	height:			auto; /* Height of your logo in pixels */
}

/* Let’s hide the actual image and use a background on the <a> to have the ability to use sprites for hover effects!
   Remember to assign class 'accessibility' to the <img> */
#logo {
	background:		url(path/to/logo);
}

#logo:hover {
	background-position:	0 -00px;
}

nav ul {
	list-style:		none;
	margin:			0;
	padding:		0;
	position:		static;
}

nav li {
	display:		inline;
}

nav li a {
	display:		inline-block;
}

footer {
	color:			#888;
	text-align:		center;
}

footer > :last-child {
	margin-bottom:		0;
}


/* -------------------------------------------------------------------------------------------------------------------------
  FORMS

  Here we set basic styling for form elements. Due to their specificity, they do not keep the vertical spacing.
  Heavily inspired by Formalize (http://sonspring.com/journal/formalize-css)
------------------------------------------------------------------------------------------------------------------------- */

form ul {
	list-style:		none;
	margin:			0;
	padding:		0;
	position:		static;
}

form li {
	margin-bottom:		20px; /* = line-height */
}

form li:last-child {
	margin-bottom:		0;
}

/* Hand cursor on clickable input elements */
input[type=button], input[type=reset], input[type=submit], input[type=checkbox], input[type=radio], button, .button {
	cursor:			pointer;
}

/* Following rules align form inputs with their label (inspired by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css) */
.ie7 input[type=checkbox] {
	vertical-align:		baseline;
}

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

button, input, textarea, select {
	font-family:		Geneva, Candara, Verdana, Tahoma, sans-serif;
	font-size:		13px;
}

fieldset {
	border:			1px solid #ccc;
	padding:		8px 9px; /* = (line-height / 2) */
}

legend {
	font-weight:		bold;
	padding:		0 5px;
}

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

textarea, select, input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month],
input[type=number], input[type=password], input[type=range], input[type=search], input[type=tel], input[type=text],
input[type=time], input[type=url], input[type=week] {
	border:			1px solid;
	border-color:		#999 #aaa #ccc;
	padding:		2px;
	outline:		0;
}

/* Make it look kind of like in webkit */
input[type="search"] {
	-moz-border-radius:	10px;
	border-radius:		10px;
	padding:		1px 4px;
}

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

select {
	height:			19px;
	padding:		0;
}

select[multiple] {
	padding:		0 6px;
}

textarea, select[multiple] {
	height:			auto;
}

::-moz-focus-inner {
	border:			0;
}

input:focus, textarea:focus, select:focus, input[type]:focus, textarea[name]:focus {
	-moz-box-shadow:	#07f 0 0 5px;
	-webkit-box-shadow:	#07f 0 0 5px;
	box-shadow:		#07f 0 0 5px;
	z-index:		1; /* for Opera */
}

.ie8 input:focus, .ie8 textarea:focus, .ie8 select:focus, .ie7 input:focus, .ie7 textarea:focus, .ie7 select:focus {
	outline:		1px dotted;
}

input[type="checkbox"], input[type="radio"] {
	margin-right:		5px;
}

optgroup {
	font-style:		normal;
}

/* Following rules make an anchor tag with class .button look like a button */
a.button, a.button:visited, button {
	background:		#e5e5e5 url(images/button.png) left top repeat-x;
	border:			1px solid #aaa;
	border-color:		#bbb #b0b0b0 #a0a0a0 #b0b0b0;
	color:			#333;
	cursor:			pointer;
	display:		inline-block;
	font-family:		"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
	font-size:		12px;
	font-weight:		normal;
	line-height:		14px;
	margin-right:		8px;
	opacity:		1;
	filter:			alpha(opacity=100); /* IE7/8 */
	outline:		0;
	padding:		3px 12px 4px;
	text-decoration:	none;
}

button {
	height:			23px;
}

.ie7 button {
	filter:			chroma(color=#000000);
	height:			26px;
	padding-bottom:		3px;
}

.ie7 a.button {
	line-height:		15px;
}

.ie8 a.button, .ie8 button {
	padding-bottom:		6px;
}

a.button:hover, button:hover {
	background:		#eee;
	border:			1px solid #bbb;
	color:			#333;
	text-decoration:	none;
}

a.button:focus, button:focus {
	-moz-box-shadow:	#07f 0 0 5px;
	-webkit-box-shadow:	#07f 0 0 5px;
	box-shadow:		#07f 0 0 5px;
	z-index:		1; /* for Opera */
}

.ie8 a.button:focus, .ie8 button:focus, .ie7 a.button:focus, .ie7 button:focus {
	outline:		1px dotted;
}

a.positive:link, a.positive:visited, button.positive {
	color:			#529214;
}

a.positive:hover, button.positive:hover {
	background:		#e6efc2;
	border:			1px solid #9c6;
	color:			#529214;
}

a.negative:link, a.negative:visited, button.negative {
	color:			#d12f19;
}

a.negative:hover, button.negative:hover {
	background:		#fbe3e4;
	border:			1px solid #e98;
	color:			#d12f19;
}


/* -------------------------------------------------------------------------------------------------------------------------
  HELPERS

  This is a collection of classes of common use, or that could be useful, or that make things a little prettier. Totally not
  necessary, but nice to have around!
------------------------------------------------------------------------------------------------------------------------- */

.left {
	float:			left;
	margin:			0 1em 1em 0;
}

.right {
	float:			right;
	margin:			0 0 1em 1em;
}

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


/* Hide for browsers only */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* Styles the source at the bottom of a block quote element */
blockquote p.source {
	font-style:		normal;
}

blockquote p.source:before, blockquote p.source::before {
	content:		"—\0020";
}

/* Styles an introductory paragraph, similar to newspapers */
#content > p:first-child:first-line, article h1 + p:first-line, article h2 + p:first-line {
	font-variant:		small-caps;
	font-weight:		bold;
}

/* Styles a drop cap on each paragraph with this class.
   To be verified with specific font settings!!! */
#content > p:first-child:first-letter, article h1 + p:first-letter, article h2 + p:first-letter {
	font-size:		42px;
	line-height:		27px;
	letter-spacing:		5px;
	margin-bottom:		-9px;
	float:			left;
	padding-top:		6px;
	color:			#222;
	font-weight:		normal;
}

.ie7 #content > p:first-child:first-letter, .ie7 article h1 + p:first-letter, .ie7 article h1 + p:first-letter {
	font-size:		45px;
	line-height:		38px;
	margin-right:		2px;
}

div.message {
	border:			1px solid #ccc;
	margin-bottom:		20px; /* = line-height */
	padding:		9px 10px 9px 40px; /* = (line-height / 2) */
}

div.message p:last-child {
	margin-bottom:		0;
}

div.notice {
	background:		url(images/icons/notice.png) 10px center no-repeat #fef8c4;
	border-color:		#d8d566;
}

div.error {
	background:		url(images/icons/error.png) 10px center no-repeat #fab;
	border-color:		#fb5766;
}

div.success {
	background:		url(images/icons/success.png) 10px center no-repeat #d1feba;
	border-color:		#83ba77;
}

input.notice, textarea.notice {
	-moz-box-shadow:	#fa0 0 0 6px;
	-webkit-box-shadow:	#fa0 0 0 6px;
	box-shadow:		#fa0 0 0 6px;
	outline:		none;
}

.ie7 input.notice, .ie7 textarea.notice {
	background:		#FFF6BF;
}

input.error, textarea.error {
	-moz-box-shadow:	#e44 0 0 6px;
	-webkit-box-shadow:	#e44 0 0 6px;
	box-shadow:		#e44 0 0 6px;
}

.ie7 input.error, .ie7 textarea.error {
	background:		#FBE3E4;
}


/* -------------------------------------------------------------------------------------------------------------------------
  OPTIMIZATIONS

  Rules that improve small things, very browser-specific.
------------------------------------------------------------------------------------------------------------------------- */

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

/* maxvoltar.com/archive/-webkit-font-smoothing
   Might want to enable this for sans-serif and/or headings */
h1, h2 {
	-webkit-font-smoothing:	antialiased;
}

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

/* iOS tap highlight
a:link {
	-webkit-tap-highlight-color: #FF5E99;
} */

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