@charset "UTF-8";
/*------------------------------------*\
	INUIT.CSS
\*------------------------------------*/
/*
Author:             Harry Roberts
Twitter:            @inuitcss
Author URL:         csswizardry.com
Project URL:        inuitcss.com
Version:            3.0.a
Date:               30 June 2011

Copyright 2011 Harry Roberts

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

*/





/*------------------------------------*\
	RESET
\*------------------------------------*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
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;
}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{
	display: block;
}

table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{ 
	border:0;
}
address,caption,cite,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}





/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{
	overflow-y:scroll; /* Force scrollbars 100% of the time */
	font-size:100%; /* Use 16px as per http://www.informationarchitects.jp/en/100e2r/ and http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ */
	font-family:"Trebuchet MS", "Helvetica Neue", Arial, sans-serif; /* Swap these two lines around to switch between serif and sans */
	line-height:1.5;
	background: #dcddd5;
	color:#555555;
}
body{
	min-height:100%;
}





/*------------------------------------*\
	GRIDS
\*------------------------------------*/
/*
Build a custom grid-system igloo at inuitcss.com
*/





/*------------------------------------*\
	CLEARFIX
\*------------------------------------*/
/*
Fix clearing issues as per: http://nicolasgallagher.com/micro-clearfix-hack/
*/
.cf:before,
.grids:before,
.cf:after,
.grids:after{
	content:"";
	display:table;
}
.cf:after,
.grids:after{
	clear:both;
}





/*------------------------------------*\
	LOGO
\*------------------------------------*/
/*
Your logo is an image, not a h1: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
*/
#logo{
	background:url(/images/logo_bg.png);
}
#logo:hover{
	/* Hover states */
	background-position:0 -00px;
}
#logo img{
	position:absolute;
	left:-99999px;
}





/*------------------------------------*\
	NAV
\*------------------------------------*/
.nav{
	list-style:none;
	margin:0 0 1.5em 0; /* resp */
}
.nav li{
	display:inline;
}
.nav a{
	display:inline-block;
}





/*------------------------------------*\
	TYPE
\*------------------------------------*/
/*--- HEADINGS ---*/

h1{
	font-size:1.3em;			
	margin-bottom:0.5em;	
	line-height:1.2;		
}
h2{
	font-size:1.05em;	
	margin-bottom:0.5em;		
	line-height:1;			
}
h3{
	font-size:1.0em;		
	margin-top: 1.0em;
	margin-bottom:0em;	
	line-height:1.2;		
}
h4{
	font-size:1.0em;		
	margin-top: 1.0em;
	margin-bottom:0em;	
	line-height:1.333;		
}
h5{
	font-weight:bold;
}
h5,
h6{
	font-size:1em;			/* 16px */
	margin-bottom:1.5em;	/* 24px */
	line-height:1.5;		/* 24px */
}

/*--- PARAGRAPHS ---*/
p,
address{
	margin-bottom:1.0em;
}
/*
Mo’ robust paragraph indenting: http://csswizardry.com/2010/12/mo-robust-paragraph-indenting/
Uncomment to activate
p+p{
	text-indent:2em;
	margin-top:-1.5em;
}
*/

/*--- FIGURES ---*/
figure{
	margin-bottom:1.5em;
}
figure img{
	display:block;
	margin-bottom:0;
}
figcaption{
	font-size:0.75em;
}

/*--- LINKS ---*/
/*
Say no to negative hovers: http://csswizardry.com/2011/05/on-negative-hovers/
A negative hover is one whose appearance is subtracted from on hover rather than added to.
*/
a{
	text-decoration:none;
	color: #741d66;
}
a:visited{
	opacity:0.8; /* A bit basic, but it’s a bare minumum... */
}
a:hover{
	text-decoration:underline;
	color: #9b1962;
}
a:active,
a:focus{
	/* Give clicked links a depressed effect. */
	position:relative;
	top:1px;
}

/*--- LISTS ---*/
ul,
ol{
	margin:0 0 1.5em 60px;
}
ul ul,
ol ol,
ul ol,
ol ul{
	/* Let’s take care of lists in lists */
	margin:0 0 0 60px;
}

/*
A numbered list is NOT the same as an ordered one.
Use this class when you want a list to be numbered but it has no order.
See http://jsfiddle.net/csswizardry/sdrth/
*/
ul.numbered{
	list-style:decimal outside;
}
dl{
	margin-bottom:1.5em;
}
dt{
	font-weight:bold;
}
dt:after{
	content:":";
}
dt::after{
	content:":";
}
dd{
	margin-left:60px;
}

/*--- QUOTES ---*/
blockquote{
	text-indent:-0.4em; /* Hang that punctuation */
}
blockquote b,
blockquote .source{
	/* Mark the source up with either a <b> or another element of your choice with a class of source. */
	display:block;
	text-indent:0;
}

/*--- GENERAL ---*/
q,
i,
em,
cite{
	font-style:italic;
	font-weight:inherit;
}
b,
strong{
	font-weight:bold;
	font-style:inherit;
}
mark{
	background:#ffc;
}
s,
del{
	text-decoration:line-through;
}
small{
	font-size:0.75em;
	line-height:1;
}

/*--- CODE ---*/
pre,
code{
	font-family:monospace;
	font-size:1em;
}
pre{
	overflow:auto;
	margin-bottom:1.5em;
	line-height:24px; /* Having to define explicit pixel values :( */
}
code{
	line-height:1;
}





/*------------------------------------*\
	IMAGES
\*------------------------------------*/
img{
	max-width:100%;
	/* Give it some text styles to offset alt text */
	font-style:italic;
	color:#c00;
}
img.left	{ margin:0 20px 0 0; }
img.right	{ margin:0 0 0 20px; }

/*--- FLASH/VIDEO ---*/
object,
embed,
video{
	max-width:100%;
	height:auto;
}





/*------------------------------------*\
	FORMS
\*------------------------------------*/
/*
Unfortunately, and somewhat obviously, forms don’t fit the baseline all too well. Perhaps in a later version...
*/
fieldset{
	padding:10px;
	border:1px solid #ccc;
	margin-bottom:1.5em;
}
label{
	display:block;
	cursor:pointer;
}
input,
textarea{
	font-family:inherit;
	font-size:1em;
	line-height:1.5;
}

/*
Nice UI touch for placeholders. To get placeholders working cross-browser see @dan_bentley’s jQuery plugin: https://github.com/danbentley/placeholder
*/
[placeholder]{
	cursor:pointer;
}
[placeholder]:active,
[placeholder]:focus{
	cursor:text;
}
.check-list{
	width:100%;
	overflow:hidden;
	list-style:none;
	margin:0 0 1.5em 0;
}
.check-list li{
	width:25%;
	float:left;
}
.check-label{
	display:inline;
}
.check-label:after{
	content:normal;
}
.check-label::after{
	content:normal;
}
.button{
	cursor:pointer;
}
fieldset > :last-child{
	/* Remove the margin from the last element in the fieldset--this makes our padding more consistent. */
	margin:0;
}





/*------------------------------------*\
	TABLES
\*------------------------------------*/
/*
Unfortunately, and somewhat obviously, tables don’t fit the baseline all too well. Perhaps in a later version...
*/
table{
	margin-bottom:1.5em;
	width:100%;
	max-width:100%;
}
thead tr:last-of-type th{
	/* Thicker border on the table-headers of the last row in the table head */
	border-bottom-width:2px;
}
tbody th{
	/* Thicker right border on table-headers in the table body */
	border-right-width:2px;
}
th:empty{
	/* Hide the borders on any empty table-headers */
	border:none;
}
th {
	vertical-align:top;
	padding:0.30em;
	border:1px solid #ccc;
}

td{
	vertical-align:top;
	padding:0.15em;
	border:1px solid #ccc;
}
th{
	font-weight:bold;
	text-align:center
}
table [colspan]{
	/* This looks lovely, trust me... */
	text-align:center;
}
table [rowspan]{
	/* ...as does this. */
	vertical-align:middle;
}
/*
Assuming IE has an 'implied' colspan of one on cells without an explicit colspan attribute, fix/undo it.
See http://jsfiddle.net/csswizardry/UJJay/
*/
[colspan="1"]{
    text-align:left;
}
[rowspan="1"]{
    vertical-align:top;
}

tfoot{
	text-align:center;
}
tfoot td{
	border-top-width:2px;
}





/*------------------------------------*\
	MESSAGES
\*------------------------------------*/
/*
Unfortunately feedback messages don’t fit the baseline all too well. Perhaps in a later version...
*/
.message{
	font-weight:normal;
	display:block;
	padding:10px 10px 10px 36px;
	border:1px solid #ccc;
	margin:0 0 1.5em 0;
	
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	-moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
	-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
	box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
}
/* With multiple errors it’s nice to group them. */
ul.message{
	list-style:decimal outside; /* It’s also handy to number them. However, they might not necessarily be in a particular order, so we spoof it by putting numbers on an unordered list */
	padding:10px 10px 10px 56px;
}
/*
.error{
	border-color:#fb5766;
	background:url(../img/css/icons/error.png) 10px center no-repeat #fab;
}
.success{
	border-color:#83ba77;
	background:url(../img/css/icons/success.png) 10px center no-repeat #d1feba;
}
.info{
	border-color:#85a5be;
	background:url(../img/css/icons/info.png) 10px center no-repeat #c4dbec;
}
.warning{
	border-color:#d8d566;
	background:url(../img/css/icons/warning.png) 10px center no-repeat #fef8c4;
}
*/





/*------------------------------------*\
	MISC
\*------------------------------------*/
hr{
	margin:0 0 1.5em 0;
}
.accessibility{
	/* Hide content off-screen without hiding from screen-readers. N.B. This is not suited to RTL languages */
	position:absolute;
	left:-99999px;
}
.more-link:after{
	/* Too many people use &raquo; in their markup to signify progression/movement, that ain’t cool. Let’s insert that using content:""; */
	content:" »";
}
.more-link::after{
	content:" »";
}





/*------------------------------------*\
	CLASSES
\*------------------------------------*/
/*
Some not-too-pretty and insemantic classes to do odd jobs.
*/
.left	{ float:left!important; }
.right	{ float:right!important; }
.clear	{ clear:both; float:none; }

.text-left		{ text-align:left; }
.text-right		{ text-align:right; }
.text-center,
.text-centre	{ text-align:center; }





/*------------------------------------*\
	DIAGNOSTICS
\*------------------------------------*/
/*
APPLY A CLASS OF .debug TO THE HTML ELEMENT ONLY WHEN YOUR SITE IS ON DEV

Turn the grids back on. Idea given by @VictorPimentel
*/

.debug		{ background:url(../img/css/baseline.gif) 0 18px #fff!important; }

/*
Red border == something is wrong
Yellow border == something may be wrong, you should double check.
Green border == perfect, nice one!
*/

/* Styles */
.debug [style]{
	/* Inline styles aren’t great, can this be avoided? */
	outline:5px solid yellow;
}

/* Images */
.debug img{
	/* Images without alt attributes are bad! */
	outline:5px solid red;
}
.debug img[alt]{
	/* Images with alt attributes are good! */
	outline-color:green;
}
.debug img[alt=]{
	/* Images with empty alt attributes are okay in the right circumstances. */
	outline-color:yellow;
}

/* Links */
.debug a{
	/* Links without titles are yellow, does your link need one? */
	outline:5px solid yellow;
}
.debug a[title]{
	/* Links with titles are green, title attributes can be very useful! */
	outline-color:green;
}
.debug a[href="#"]{
	/* Were you meant to leave that hash in there? */
	outline-color:yellow;
}
.debug a[target]/*,
.debug a[onclick],
.debug a[href*=javascript]*/{
	/* What were you thinking?! */
	outline-color:red;
}

/* Classes/IDs */
.debug [class=], .debug [id=]{
	/* Is this element meant to have an empty class/ID? */
	outline:5px solid yellow;
}





/*------------------------------------*\
	RESPONSIVE CHANGES
\*------------------------------------*/
/*
CSS for mobile portrait
*/

@media only screen and (max-width : 639px) {

	#logo{
		width:60%;
		max-width:200px;
		background:url(/images/logo_resp.png);
		background-size:contain;
	}




	/* ------NAV------ */
	.nav{
		list-style:none;
		margin:0 0 5px 0;]
	}
	
	
	.resp_more{
		display:none;
	}
	
	#resp_menu{
		float:right;
		padding: 5px 5px 0 0;
	}
	
	.resp_more {
		display:block;
	}
	#enjoy-learning{
		text-align:center;
	}
}


/*
CSS for mobile portrait and tablet landscape
*/

@media only screen and (min-width: 640px) and (max-width: 1000px){

	#logo{
		width:100%;
		max-width:250px;
		background:url(/images/logo_resp.png);
		background-size:contain;
	}

	/* ------NAV------ */
	.nav{
		list-style:none;
		margin:0 0 5px 0;]
	}
	
	
	.resp_more{
		display:none;
	}
	
	#resp_menu{
		float:right;
		padding: 5px 5px 0 0;
	}
	
	.resp_more {
		display:block;
	}
	#enjoy-learning{
		text-align:center;
	}
}

@media only screen and (min-width: 1001px){
	#logo,
	#logo img{
		display:block;
		width:195px; /* Width of your logo in pixels (ideally a round grid-number) */
		height:121px; /* Height of your logo in pixels */
		margin: 25px 0 0 0;
		background:url(/images/logo_bg.png);
		background-size:contain;
	}

}/* Based on the fact that we need to use an <img /> in our markup, let’s hide the actual image and use a background on the <a>--this gives us semantically sound markup and the ability to use sprites for hover effects! */


/*--- END NARROW ---*/





/*------------------------------------*\
	PRINT
\*------------------------------------*/
/*
Good ol’ fashioned paper...
*/





@media print{
/*------------------------------------*\
	MAIN
\*------------------------------------*/

}
/*--- END PRINT ---*/