/* -------------------------------------------------------------- 
   
   typography.css
   * Sets up some sensible default typography.

		Version: 1.0.1 / Updated May 14, 2011

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

/* Default font settings.
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html { font-size:100.01%; }
body {
  font-size: 83%;
  color: #222;
  background: #fff;
  font-family: Helvetica, Arial, sans-serif;
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #000; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }	/* ONLY used for Mutineer logo */
h2 { font-size: 2em; margin-bottom: 0.75em; }									/* ONLY used for diagonal lines */
h3 { font-family: 'Helvetica Neue Light'; font-size: 1.7em; line-height: 1.2; margin-bottom: 1em; text-align: center; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1.1em; margin-bottom: .5em!important; }
h6 { font-size: .8em; font-weight: bold; text-transform: uppercase; display: inline; color: #191919; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }


/* H1 - Mutineer logo
------------------------------- */
#header h1 {
	background: url('../img/mutineerlogo.png') no-repeat;
	float: left;
	height: 37px;
	width: 170px;
	margin-top: 46px;
	margin-bottom: 0;
	padding-right: 20px;
}
#header h1 a {
	display: block;
	height: 37px;
	width: 170px!important;
}
#header h1 span { visibility: hidden; }


/* H2 - Diagonal lines
------------------------------- */
html, body { 
	overflow-x: hidden; 
}
#h2-container { 
	margin: -159px auto 0 auto; 
	width: 0; 
}
#h2-container h2 { 
	background: transparent; 
	padding: 5px 0; 
	position: relative; 
}
h2:before, h2:after {
	content: "";
	position: absolute;
	bottom: 0;
	top: 0;
	height:28px;
	width: 9999px;
}
h2:before { right: 100%; margin-right:500px; }
h2:after 	{ left: 100%; margin-left:447px; margin-top:-30px; }
h2:nth-of-type(1), h2:nth-of-type(1):before, h2:nth-of-type(1):after { background-image: url(../img/diagonal.png); }
h2:nth-of-type(2), h2:nth-of-type(2):before, h2:nth-of-type(2):after { background-image: url(../img/diagonal.png); }
h2.left-only:after 	{ display: none; }
h2.right-only:before	{ width: 0; }


/* Blog typography
------------------------------- */

h3.blogtitle a {
	color: #000!important;
	text-decoration:none!important; 
}

#featuredposts {
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
	border: 1px solid #ddd;
	height: 330px;
	margin: 0;
	padding: 3px 10px;
}

#featuredposts h6	{
	background-color: #191919;
	color: #fff;
	float: right;
	padding: 2px 5px 1px 5px;
}

.category-flag { 
	display: block;
	margin-left: -31px;
	margin-bottom: 1.5em; }
.cat-flag, .cat-flag-l, .cat-flag-r { 
	display: block;
	float: left; }
.cat-flag-l {
	height: 34px;
	width: 12px; }
.cat-flag-r {
	height: 25px;
	width: 12px; }
.cat-flag {
	background-image: url(../img/cat-flag.png);
	background-repeat: repeat-x;
	font: bold 1em Arial, sans-serif !important;
	line-height: 25px;	
	height: 25px;
	padding: 4px 12px 4px 10px;
	text-transform: uppercase; }
.cat-flag, .cat-flag-r {
	vertical-align: top; }
.cat-flag sup { 
	color: #fff;
}

.more-link {
	font-family: 'Arial Black', sans-serif;
	display: block;
}


/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }

/*
  These can be used to pull an image at the start of a paragraph, so
  that the text flows around it (usage: <p><img class="left">Text</p>)
 */
.left       { float: left !important; }
p .left     { margin: .5em 1.5em .5em 0; padding: 0; }
.right      { float: right !important; }
p .right    { margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a:link,
a:visited     { color: #00adef; text-decoration: none; }
a:hover,
a:active      { color: #0082b3; }

a.alt:link,
a.alt:visited { color: #191919; }
a.alt:hover,
a.alt:active  { color: #00adef; text-decoration: none; }

a.alt_quiet:link,
a.alt_quiet:visited { color: #888; }
a.alt_quiet:hover,
a.alt_quiet:active  { color: #444; text-decoration: none; }

a.anchor 		{ color: #191919!important; text-decoration: none; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong,dfn, 
.bold				{ font-weight: bold; }
em,dfn,     
.italic			{ font-style: italic; }
sub    			{ line-height: 0; }

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre         { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }


/* Lists
-------------------------------------------------------------- */

li ul,
li ol  { margin: 0; }
ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }

ul     { list-style-type: disc; }
ol     { list-style-type: decimal; }

dl     { margin: 0 0 1.5em 0; }
dl dt  { font-weight: bold; }
dd     { margin-left: 1.5em;}

/* Navigation */
#nav-container {
	float:left;
	height:28px; 
	width:733px;
	margin-top:54px;
	position:relative;
}
ul#nav {
	width:733px;
	list-style:none;
	height:53px;
	margin: -24px 0 0 0;
	padding-left:0;
}
ul#nav li { display:inline; }
ul#nav li a {
	height:53px;
	float:left;
	text-indent:-9999px;
}
/* Home */
ul#nav li#nav-1 a 			{ width:72px; background:url('../img/nav.png') no-repeat 0 0; }
ul#nav li#nav-1 a:hover { background-position:0 -53px; }
/* Magazine */
ul#nav li#nav-2 a 			{ width:99px; background:url('../img/nav.png') no-repeat -72px 0; }
ul#nav li#nav-2 a:hover { background-position:-72px -53px; }
/* Subscribe */
ul#nav li#nav-3 a 			{ width:99px; background:url('../img/nav.png') no-repeat -171px 0; }
ul#nav li#nav-3 a:hover { background-position:-171px -53px; }
/* About */
ul#nav li#nav-4 a 			{ width:72px; background:url('../img/nav.png') no-repeat -270px 0; }
ul#nav li#nav-4 a:hover { background-position:-270px -53px; }
/* Contact */
ul#nav li#nav-5 a				{ width:88px; background:url('../img/nav.png') no-repeat -342px 0; }
ul#nav li#nav-5 a:hover { background-position:-342px -53px; }
/* Competitions */
ul#nav li#nav-6 a 			{ width:126px; background:url('../img/nav.png') no-repeat -430px 0; }
ul#nav li#nav-6 a:hover { background-position:-430px -53px; }
/* Mutineer Projects */
ul#nav li#nav-7 a 			{ width:177px; background:url('../img/nav.png') no-repeat -556px 0; }
ul#nav li#nav-7 a:hover { background-position:-556px -53px; }
/* Mutineer Projects Dropdown */
ul#nav li#nav-7 div.subnav {
  display: none;
	position: absolute;
  left: 556px;
  top: 29px;
}
ul#nav li#nav-7:hover div.subnav {
	display:block; 
	background-color:rgba(0,0,0,0.8); 
}
ul#nav ul.children {
	list-style:none;
	margin: 0;
	padding-left: 0;
}
ul#nav ul.children li { display: block!important; }
ul#nav ul.children li a.child:hover { color: yellow; }
ul#nav ul.children li a.child {
	border-top: 1px solid #888;
	background: none!important;
	color: #fff;
	display:block!important;
	float: left!important;
	font-size: .9em;
	font-weight: 700;
	text-decoration: none;
	text-indent: 0px!important;
	padding: 8px 10px 4px 0px;
	margin: 4px 15px!important;
	height: 15px!important;
	width: 138px!important;
}
ul#nav ul.children li a.top 		{ border-top: none!important }
ul#nav ul.children li a.bottom	{ padding-bottom: 10px!important }


#blognav-container { position: relative; }
ul#blognav {
	list-style: none;
	margin: 0;
	padding-left: 0;
	height: 57px;
	width: 950px;
}
ul#blognav li { display: inline; }
ul#blognav li a {
	float: left;
	height: 57px;
	text-indent: -9999px;
}
ul#blognav li#blognav-1 a 				{ width:91px; background:url('../img/blognav.png') no-repeat 0 0; }
ul#blognav li#blognav-1 a:hover 	{ background-position:0 -57px; }
ul#blognav li#blognav-1 a.current { background-position:0 -114px; }
ul#blognav li#blognav-2 a 				{ width:76px; background:url('../img/blognav.png') no-repeat -91px 0; }
ul#blognav li#blognav-2 a:hover 	{ background-position:-91px -57px; }
ul#blognav li#blognav-2 a.current { background-position:-91px -114px;}
ul#blognav li#blognav-3 a 				{ width:72px; background:url('../img/blognav.png') no-repeat -167px 0;}
ul#blognav li#blognav-3 a:hover 	{ background-position:-167px -57px;}
ul#blognav li#blognav-3 a.current { background-position:-167px -114px;}
ul#blognav li#blognav-4 a 				{ width:84px; background:url('../img/blognav.png') no-repeat -239px 0;}
ul#blognav li#blognav-4 a:hover 	{ background-position:-239px -57px;}
ul#blognav li#blognav-4 a.current { background-position:-239px -114px;}
ul#blognav li#blognav-5 a 				{ width:163px; background:url('../img/blognav.png') no-repeat -323px 0;}
ul#blognav li#blognav-5 a:hover 	{ background-position:-323px -57px;}
ul#blognav li#blognav-5 a.current { background-position:-323px -114px;}
ul#blognav li#blognav-6 a 				{ width:213px; background:url('../img/blognav.png') no-repeat -486px 0;}
ul#blognav li#blognav-6 a:hover 	{ background-position:-486px -57px;}
ul#blognav li#blognav-6 a.current { background-position:-486px -114px;}

ul#blognav li#blognav-6 div.blogsubnav {
	display: none;
  position: absolute;
  left: 486px;
  top: 57px;
}
ul#blognav li#blognav-6:hover div.blogsubnav {
	display:block;
	background-color:#ddd;
	box-shadow: 0 2px 4px #999;
}
ul#blognav ul.children {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
ul#blognav ul.children li { display: block!important; }
ul#blognav ul.children li a.child:hover { background:#ec008c none!important; color:#fff; }
ul#blognav ul.children li a.child {
	background:#fff none!important;
	color:#333;
	font-weight:700;
	text-decoration:none;
	text-indent:0px!important;
	display:block!important;
	float:left!important;
	margin:2px 4px!important;
	padding: 8px 10px 4px 10px;
	height:20px!important;
	width:195px!important;
}

ul#blognav li#blognav-7 a 				{ width:157px; background:url('../img/blognav.png') no-repeat -699px 0; }
ul#blognav li#blognav-7 a:hover 	{ background-position:-699px -57px; }
ul#blognav li#blognav-7 a.current { background-position:-699px -114px; }

ul#blognav li#blognav-8 a 				{ width:94px; background:url('../img/blognav.png') no-repeat -856px 0; }
ul#blognav li#blognav-8 a:hover 	{ background-position:-856px -57px; }
ul#blognav li#blognav-8 a.current { background-position:-856px -114px; }


/* Tables
-------------------------------------------------------------- */

/*
  Because of the need for padding on TH and TD, the vertical rhythm
  on table cells has to be 27px, instead of the standard 18px or 36px
  of other elements.
 */
table         { margin-bottom: 1.4em; width:100%; }
th            { font-weight: bold; }
thead th      { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
/*
  You can zebra-stripe your tables in outdated browsers by adding
  the class "even" to every other table row.
 */
tbody tr:nth-child(even) td,
tbody tr.even td  {
  background: #e5ecf9;
}
tfoot       { font-style: italic; }
caption     { background: #eee; }


/* Misc classes
-------------------------------------------------------------- */

.small     	{ font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large     	{ font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide      	{ display: none; }

.uppercase	{ text-transform: uppercase; }
.underline	{ text-decoration: underline; }
.strike			{ text-decoration: line-through; }

.cyan				{ color: #00adef; }
.magenta		{ color: #ec008c; }
.yellow			{ color: #f6ff00; }

.quiet     	{ color: #666; }
.quieter    { color: #888; }
.loud      	{ color: #000; }
.highlight	{ background:#ff0; }
.added     	{ background:#060; color: #fff; }
.removed   	{ background:#900; color: #fff; }

.first     	{ margin-left:0; padding-left:0; }
.last      	{ margin-right:0; padding-right:0; }
.top       	{ margin-top:0!important; padding-top:0!important; }
.bottom    	{ margin-bottom:0; padding-bottom:0; }
.center			{ text-align: center; }
.middle			{ vertical-align: middle; }
img.bottom	{ vertical-align: bottom; }

.years {
  color: #666;
  float: right;
  font-size: .8em; 
  margin: -40px 5px 0 0;
}
.years img { padding:0 5px; vertical-align:middle; }

/* Image/Link Rotator Plugin
-------------------------------------------------------------- */

div.rotator 						{ height: 250px; position: relative; margin-bottom: 1.5em; }
div.rotator ul 					{ list-style: none; margin: 0; padding: 0; }
div.rotator ul li 			{ float:left; position:absolute; }
div.rotator ul li.show	{ z-index: 500; }


/* Custom Fonts
-------------------------------------------------------------- */
 
@font-face {
font-family: 'Bevan';
src: url('Bevan.ttf'),
		 url('Bevan.eot'); /* IE9+ */
}

@font-face {
font-family: 'Helvetica Neue Light';
src: url('HelveticaNeue-Light.ttf'),
		 url('HelveticaNeue-Light.eot'); /* IE9+ */
}

/* Water Relief CSS
-------------------------------------------------------------- */
#water .articlebody			{ color: #444; font-family: Georgia, Times, "Times New Roman", serif; font-size: 1.1em }
#water .articlecaption 	{ color: #00adef; font-family: Georgia, Times, "Times New Roman", serif; font-size: .9em; font-style: italic; padding-top:10px; text-align: center; }
#water div.site					{ border: 1px solid #ddd; margin: 5em auto; padding: 20px; }
#water div.sitetag			{ margin-top: -52px!important; margin-left: -21px!important; }
#water img.sitetag		  { margin: 0 2em 1em 0; }		
#water div.sitelink			{ float: right; margin-top: -14px; margin-right: -12px; }	
#water div.sitelinkbox	{ float: left; display: inline; background-color: #f8f8f8; border:1px solid #eee; border-left:2px solid #00adef; border-right-color:#fff; padding: 0 5px 1px 5px; }
#water a.sitelink:focus,
#water a.sitelink:hover	{ color: #00adef; text-decoration: underline; }
#water a.sitelink 			{ color: #00adef; font-size: .9em; font-family: Georgia, Times, "Times New Roman", serif; text-decoration: none; }		
#water .sitelinkarrow		{ color: #00adef; font-family: Georgia, Times, "Times New Roman", serif; font-size: 1.2em; line-height:1.4em; }
#water img.sitelink	  	{ margin-top: -1px }
#water .img-l 					{ margin-right: 2em; }
#water .img-r 					{ margin-left: 2em; }

/* Old CSS - Needs to be phased out
-------------------------------------------------------------- */
.align-center	{ display: block; margin: 0 auto; text-align: center; }
.align-left		{ float: left; text-align: left; }
.align-right	{ float: right; text-align: right; }
.align-top 		{ vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }