/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.

Copyright 2006 – 2008 Mark Wubben, <http://novemberborn.net/>

Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

See also <http://novemberborn.net/sifr3> and <http://wiki.novemberborn.net/sifr3>.

This software is licensed and provided under the CC-GNU LGPL.
See <http://creativecommons.org/licenses/LGPL/2.1/>
*****************************************************************************/

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }
  
  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }
  
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
  /* Example:
  .sIFR-active h1 {
    font-family: Verdana;
    visibility: hidden;
  }
  */
}/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
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;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*to enable resizing for IE*/
input,textarea,select{*font-size:100%;}
/*because legend doesn't inherit in IE */
legend{color:#000;}
del,ins{text-decoration:none;}
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
/**
 * Percents could work for IE, but for backCompat purposes, we are using keywords.
 * x-small is for IE6/7 quirks mode.
 */
body {
	font:13px/1.231 arial,helvetica,clean,sans-serif;
	*font-size:small; /* for IE */
	*font:x-small; /* for IE in quirks mode */
}

/**
 * Nudge down to get to 13px equivalent for these form elements
 */ 
select,
input,
button,
textarea {
	font:99% arial,helvetica,clean,sans-serif;
}

/**
 * To help tables remember to inherit
 */
table {
	font-size:inherit;
	font:100%;
}

/**
 * Bump up IE to get to 13px equivalent for these fixed-width elements
 */
pre,
code,
kbd,
samp,
tt {
	font-family:monospace;
	*font-size:108%;
	line-height:100%;
}/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
/* base.css, part of YUI's CSS Foundation */
h1 {
	/*18px via YUI Fonts CSS foundation*/
	font-size:138.5%;  
}
h2 {
	/*16px via YUI Fonts CSS foundation*/
	font-size:123.1%; 
}
h3 {
	/*14px via YUI Fonts CSS foundation*/
	font-size:108%;  
}
h1,h2,h3 {
	/* top & bottom margin based on font size */
	margin:1em 0;
}
h1,h2,h3,h4,h5,h6,strong {
	/*bringing boldness back to headers and the strong element*/
	font-weight:bold; 
}
abbr,acronym {
	/*indicating to users that more info is available */
	border-bottom:1px dotted #000;
	cursor:help;
} 
em {
	/*bringing italics back to the em element*/
	font-style:italic;
}
del {
	text-decoration:line-through;
}
blockquote,ul,ol,dl {
	/*giving blockquotes and lists room to breath*/
	margin:1em;
}
ol,ul,dl {
	/*bringing lists on to the page with breathing room */
	margin-left:2em;
}
ol li {
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;	
}
ul li {
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}
dl dd {
	/*giving UL's LIs generated numbers*/
	margin-left:1em;
}
th,td {
	/*borders and padding to make the table readable*/
	border:1px solid #000;
	padding:.5em;
}
th {
	/*distinguishing table headers from data cells*/
	font-weight:bold;
	text-align:center;
}
caption {
	/*coordinated margin to match cell's padding*/
	margin-bottom:.5em;
	/*centered so it doesn't blend in to other content*/
	text-align:center;
}
p,fieldset,table,pre {
	/*so things don't run into each other*/
	margin-bottom:1em;
}
/* setting a consistent width, 160px; 
   control of type=file still not possible */
input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;}
html, body {
	height: 100%;
}
html {
	overflow-y: scroll !important;
}
#hd, #bd, #showcase, #ft-inner {
	width: 954px;
	margin: 0 auto 0 auto;
	padding: 0 10px 0 10px;
}

/**
 * Showcase
 */
#showcase-container {
	background-color: black;
	height: 165px;
	width: 100%;
	padding: 10px 0 10px 0;
}
#home #showcase-container {
	height: 330px;
}
#showcase {
	height: 100%;
	background: url(../images/showcase_back.jpg) no-repeat center bottom;
}
img#maykinmedia-logo {
	margin: 25px 0 0 10px;
}
#home img#maykinmedia-logo {
	margin-top: 100px;
}
img#maykinmedia-monkey {
	position: absolute;
	bottom: -47px;
	left: 10px;
	z-index: 100;
}

/**
 * Head
 */
#hd {
	height: 50px;
	position: relative;
}
#home #hd {
	height: 20%;
}
#hd ul.menu {
	position: absolute;
	bottom: 4px;
	right: 10px;
	margin: 0;
}
#hd ul.menu li {
	float: left;
	margin-left: 4px;
	list-style: none;
}
#hd ul.menu li a {
	display: block;
	width: 24px;
	height: 24px;
	background: transparent url(../images/sub_menu.png) no-repeat;

	text-indent: -9999px;
}
#hd ul.menu li.home a { background-position: 0px 0px; }
#hd ul.menu li.login a { background-position: -24px 0px; }
#hd ul.menu li.email a { background-position: -48px 0px; }

#hd ul.menu li.home a:hover { background-position: 0px -24px; }
#hd ul.menu li.login a:hover { background-position: -24px -24px; }
#hd ul.menu li.email a:hover { background-position: -48px -24px; }

/**
 * Body
 */
#bd {
	border-left: 1px solid #e3e3e3;
	border-right: 1px solid #e3e3e3;
	min-height: 100px;
}
/**
 * Menu
 */
#bd ul.menu {
	margin: 10px 0 0 0;
	height: 50px;
	display: block;
}
#bd ul.menu li {
	float: left;
	margin-right: 4px;
	list-style: none;
}
#bd ul.menu li a {
	display: block;
	width: 120px;
	height: 50px;
	background: transparent url(../images/nl/main_menu.png) no-repeat;

	text-indent: -9999px;
}
#bd ul.menu li.about a { background-position: 0px 0px; }
#bd ul.menu li.portfolio a { background-position: -120px 0px; }
#bd ul.menu li.products a { background-position: -240px 0px; }
#bd ul.menu li.jobs a { background-position: -360px 0px; }
#bd ul.menu li.contact a { background-position: -480px 0px; }
#bd ul.menu li.blog a { background-position: -600px 0px; }

#bd ul.menu li.about a:hover { background-position: 0px -50px; }
#bd ul.menu li.portfolio a:hover { background-position: -120px -50px; }
#bd ul.menu li.products a:hover { background-position: -240px -50px; }
#bd ul.menu li.jobs a:hover { background-position: -360px -50px; }
#bd ul.menu li.contact a:hover { background-position: -480px -50px; }
#bd ul.menu li.blog a:hover { background-position: -600px -50px; }

#bd ul.menu li.about a.active { background-position: 0px -50px; }
#bd ul.menu li.portfolio a.active { background-position: -120px -50px; }
#bd ul.menu li.products a.active { background-position: -240px -50px; }
#bd ul.menu li.jobs a.active { background-position: -360px -50px; }
#bd ul.menu li.contact a.active { background-position: -480px -50px; }
#bd ul.menu li.blog a.active { background-position: -600px -50px; }

#showcase {
	border-left: 1px solid #0d0d0d;
	border-right: 1px solid #0d0d0d;
	overflow: hidden;
}

/*
 * Footer
 */
#ft {
	margin-top: 10px;
	background: url(../images/footer.png) repeat-x left 1px;
	border-top: 1px solid #ccc;
	padding-top: 50px;
	height: 50px;
}
#ft form {
	float: right;
}
#ft #copyright {
	font-size: 85%;
	float: left;
}
#ft #copyright p {
	margin-bottom: 0.5em;
}
/*
 * Content
 */
#content {
	width: 100%;
	color: #0d0d0d;
	font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
	/* font-size: 0.925em;  ~ 12px */
	font-size: 1em;
}
#content p {
	line-height: 1.5em;
}
#content h1, #content h2, #content h3 { font-family: "Trebuchet MS","Lucida Sans Unicode",Arial,Verdana,sans-serif; color: #366395; }
#content h1 { font-size: 210%; }
#content h2 { font-size: 140%; }
#content h3 { font-size: 115%; color: #000000; }

#content div.item a.toggle {
	background: #FFFFFF none repeat scroll 0 0;
	border-top: 2px solid #999;
	clear: both;
	display: block;
	height: 12px;
	margin: 10px 0 0;
	outline-color: -moz-use-text-color;
	outline-style: none;
	outline-width: 0;
	width: 100%;
}
#content div.item a.toggle span {
	position: relative;
	top: -13px;
	background: #FFFFFF url(../images/updown.png ) no-repeat right top;
	display: block;
	float: right;
	height: 24px;
	margin-right: 23px;
	overflow: hidden;
	text-indent: -9999px;
	width: 24px;
	cursor: pointer;
}
#content div.minimal a.toggle span {
	background-position: left top;
}
#content div.item a.toggle:hover span {
	background-position: right bottom;
}
#content div.minimal a.toggle:hover span {
	background-position: left bottom;
}

#content div.minimal div.more {
	display: none;
}
#content div.left {
	width: 462px;
	float: left;
}
#content div.right {
	width: 462px;
	float: right;
}

/* CONTENT MENU */
ul.submenu {
	float: left;
	margin: 4px 0 8px 0;
}
ul.submenu li {
	border-right: 1px solid #666;
	margin-right: 8px;
	list-style: none;
	float: left;
}
ul.submenu li a:link, ul.submenu li a:visited {
	display: block;
	margin-right: 8px;
	font-size: 85%;
	color: #7f7f7f;
}
ul.submenu li a:hover, ul.submenu li a:active, ul.submenu li a.active {
	color: #333333;
}
ul.submenu li.last {
	border: none;
}

/* PORTFOLIO TIMELINE */
ul.timeline a:link, ul.timeline a:visited {
	padding-bottom: 5px;
	color: #666;
	text-decoration: none;
	display: block;
}
ul.timeline a:hover, ul.timeline a:active, ul.timeline a.active {
	border-bottom: 4px solid #366395;
}
ul.timeline {
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	font-size: 11px;
	color: #666;
	width: 100%;
	height: 40px;
	overflow: visible;
	line-height: normal;
	font-family: Tahoma;
	margin: 0 0 40px 0;
}
ul.timeline li span.title {
	font-size: 11px;
	font-weight: bold;
	color: #333;
	margin: 0;
	padding: 0;
	display: block;
}
ul.timeline li {
	list-style: none;
	float: left;
	margin: 5px 15px 5px 0;
	position: relative;
	height: 35px; /* IE7 fix for the bottom line */
}
ul.timeline li.year {
	padding-left: 5px;
}
ul.timeline li.first {
	margin-left: 10px;
}
ul.timeline li span.year {
	border-left: 1px solid #666;
	position: absolute;
	top: 30px;
	left: 0px;
	padding: 10px 0 0 5px;
}

/* PORTFOLIO ASSETS */


#content div.sidebox {
	width: 300px;
	float: right;
	margin: 0 20px 0 0;
}
img.project-logo {
}
#content div.project-factbox {
	width: 290px;
	float: right;
	border: 1px solid #999;
	background-color: #eee;
	padding: 5px;
	margin: 0 0 20px 20px;
}
#content div.project-factbox dt {
	color: #888;
}
#content div.project-factbox dd {
	color: #111;
	margin-bottom: 5px;
}
#content a.external {
	background: transparent url(../images/external.png) no-repeat scroll right center;
	padding-right: 16px;
}


/* General */
a:link, a:visited, a:active {
	color: #366395;
	text-decoration: none;
}
a:hover {
	color: #92509c;
	text-decoration: underline;
}

blockquote {
	background: transparent url(../images/quote.gif) no-repeat scroll left top;
	min-height: 50px;
	padding: 0 0 0 60px;
}

ul.cloud {
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	padding: 0;
	color: #666;
	float: left;
}
ul.cloud li {
	list-style: none;
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
}

#internship_button {
	position: relative;
	top: -50px;
	left: 50%;
	margin-left: 370px;
	width: 94px;
	height: 94px;
}

/* File icons */
a.file {
	padding-left: 20px;
	background: url(../images/icons/unknown.png) no-repeat top left;
}
a.file.pdf { background-image: url(../images/icons/pdf.png); }
a.file.py { background-image: url(../images/icons/py.png); }
a.file.php { background-image: url(../images/icons/php.png); }
a.file.html { background-image: url(../images/icons/html.png); }