/*YAHOO! RESET*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,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,em,strong,dfn,th,var { 
	font-style:normal; 
	font-weight:normal; 
} 
ol,ul { 
	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; 
}
/*---------- END RESET ----------*/





/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{
	font-size:100%;
	height:101%;
}
body{
	font-size:62.5%;
	font-family:Arial, Verdana, sans-serif;
	background:#fff;
	color:#333;
}
#wrapper{
	width:940px;
	margin:0 auto;
	padding:10px;
}
@font-face{
	font-family: "GraublauWeb";
	src: url(../fonts/GraublauWeb.eot);
	src: local('GraublauWeb'), local('GraublauWeb'),
	url(../fonts/GraublauWeb.otf) format('opentype');
}
@font-face{
	font-family: "GraublauWebBold";
	src: url(../fonts/GraublauWebBold.eot);
	src: local('GraublauWebBold'), local('GraublauWebBold'),
	url(../fonts/GraublauWebBold.otf) format('opentype');
}





/*------------------------------------*\
	TYPE
\*------------------------------------*/
/*--- HEADINGS ---*/
h1,h2,h3,h4,h5,h6{
	font-family:"GraublauWeb",Helvetica, Arial, Verdana, sans-serif;
	line-height:1.4em;
	margin-bottom:18px;
	font-weight:bold;
	
	text-shadow:1px 1px 1px #999;
}
h1	{ font-size:2.4em; }
h2	{ font-size:2.0em; }
h3	{ font-size:1.8em; }
h4	{ font-size:1.6em; }
.caption{
	margin-bottom:5px;
	font-style:italic;
	line-height:1em;
	clear:both;
}
/*--- PARAGRAPHS ---*/
p{
	font-size:1.2em;
	line-height:1.5em;
	margin-bottom:18px;
}
p#intro{
	font-size:1.6em;
	line-height:1.5em;
	margin-bottom:1.5em;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	
	-moz-column-count:3;
	-moz-column-gap:20px;
	-webkit-column-count:3;
	-webkit-column-gap:20px;
	column-count:3;
	column-gap:20px;
}
/*--- LINKS ---*/
a{
	color:#00f;
}
/*--- MISC ---*/
code{
	font-family:"Courier New", "Lucida Console", Courier, monospace;
	font-size:1.3em;
}
pre{
	font-family:"Lucida Console", "Courier New", Courier, monospace;
	padding:10px;
	background:#ffc;
	border:1px solid #ff8;
	margin-bottom:18px;
	clear:both;
}
pre strong{
	font-weight:bold;
	color:#000;
}
.comment{
	color:#080;
}





/*------------------------------------*\
	TABLES
\*------------------------------------*/
table{
	font-size:1.2em;
	width:100%;
	margin-bottom:20px;
}
th{
	font-weight:bold;
}
td,th{
	border:1px solid #ccc;
	padding:5px;
}
thead tr{
	border-bottom:2px solid #ccc;
}
tbody tr:nth-of-type(odd){
	background:#ffc;
}
/*--- EMPLOYEES ---*/
#employees .col{
	width:25%;
}
#employees tbody tr:hover{
	font-weight:bold;
	background:#ff8;
	
	-moz-transform:scale(1.02);
	-webkit-transform:scale(1.02);
	-moz-box-shadow:0 0 5px #666;
	-webkit-box-shadow:0 0 5px #666;
}
/*--- MATRIX ---*/
#employees .col{
	width:20%;
}
#matrix tbody td:hover{
	font-weight:bold;
	background:#ff8;
	
	-moz-transform:scale(1.02);
	-webkit-transform:scale(1.02);
	-moz-box-shadow:0 0 5px #666;
	-webkit-box-shadow:0 0 5px #666;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}





/*------------------------------------*\
	NAV
\*------------------------------------*/
#nav{
	font-family:"GraublauWeb",Helvetica, Arial, Verdana, sans-serif;
	width:220px;
	float:left;
	margin-bottom:18px;
}
#nav li a{
	color:#fff;
	font-size:1.6em;
	font-weight:bold;
	padding:10px;
	display:block;
	text-decoration:none;
	background:#34ad4a;
	
	text-shadow:1px 1px 1px #1c5e28;
	background:-webkit-gradient(linear, left top, left bottom, from(#47b649), to(#34ad4a));
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform (defined below) */
}
#nav li:first-of-type a{
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;
	-webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
#nav li:last-of-type a{
	-moz-border-radius-bottomleft:10px;
	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
#nav li a:hover{
	background:#0079ac;

	text-shadow:1px 1px 1px #0d4f6b;
	background:-webkit-gradient(linear, left top, left bottom, from(#0ba7be), to(#0079ac));
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
	-moz-box-shadow:0 0 5px #666;
	-webkit-box-shadow:0 0 5px #666;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}





/*------------------------------------*\
	POLAROID
\*------------------------------------*/
.polaroid{
	clear:both;
	padding:10px 10px 50px 10px;
	background:#fff;
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers, but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:18px;
	
	-moz-box-shadow:1px 2px 5px #666666;
	-webkit-box-shadow:1px 2px 5px #666666;
}
.small-polaroid{
	clear:none;
	padding:10px 10px 25px 10px;
	
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform (defined below) */
}
.small-polaroid:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	
	-moz-transform:rotate(4deg) scale(1.2);
	-webkit-transform:rotate(4deg) scale(1.2);
}





/*------------------------------------*\
	MISC
\*------------------------------------*/
hr		{ display:none; }
.hr		{ height:1px; border-top:1px solid #ccc; margin-bottom:18px; }

.clear	{ clear:both; }





/*------------------------------------*\
	IPHONE
\*------------------------------------*/
@media screen and (max-device-width: 480px){
	#wrapper	{ width:90%; }
	pre			{ overflow:hidden; }
	pre .comment	{ white-space:normal; }
}