/* FONTS */
@import url(http://fonts.googleapis.com/css?family=Aldrich);

/* RESET */
*, *:before, *:after {
	margin: 0;
	border: 0;
	padding: 0;
	line-height: 1;
	
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

div, span, header, footer, section, article {
	margin: 0;
	border: 0;
	padding: 0;
}

/* GENERAL */
body {
	margin: 40px;
	background: #333;
	background: linear-gradient( top, #000, #666 );
	background: -ms-linear-gradient( top, #000, #666 );
	background: -moz-linear-gradient( top, #000, #666 );
	background: -webkit-linear-gradient( top, #000, #666 );	
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li {
	margin: 0;
	border: 0;
	padding: 0;
	color: #fff;
	
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Aldrich", sans-serif;
	font-weight: bold;
	text-transform: uppercase;
}

h2 {
	margin-bottom: 10px;
	font-size: 13px;
}

h3 {
	margin-bottom: 5px;
	font-size: 18px;
	text-transform: none;
}

p {
	margin: 0px 0px 10px 0px;
	color: #e5e5e5;
	font-family: "Trebuchet MS", sans-serif;
	font-size: 13px;
	line-height: 1.5;
}

a {
	color: #ccc;
	text-decoration: none;
	
	-moz-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	-webkit-transition: color 0.3s ease;
	transition: color 0.3s ease;
}

.no-touch a:hover {
	color: #fff;
}

/* CUSTOM */
header, .container, footer {
	width: 750px;	
}

.container {
	margin: 0px 0px 20px 0px;
	padding: 30px 20px 10px 20px;
	background: rgba( 153, 153, 153, 0.5 );
	
	-moz-border-radius: 0px 0px 20px 0px;
	-ms-border-radius: 0px 0px 20px 0px;
	-webkit-border-radius: 0px 0px 20px 0px;
	border-radius: 0px 0px 20px 0px;
	
	-moz-transition: background 0.3s ease;
	-ms-transition: background 0.3s ease;
	-webkit-transition: background 0.3s ease;
	transition: background 0.3s ease;
}

.container.selected {
	background: rgba( 255, 211, 0, 0.5 );
}

.container p a {
	text-decoration: underline;
}

/* HEADER */
header {
	margin: 0px 0px 20px 0px;
}

header h1 {
	display: inline-block;
	margin: 0px 10px 0px 10px;
	width: 142px;
	height: 24px;
	background: url( "../img/logo.gif" ) no-repeat;
}


/* NAV */
nav {
	float: right;
	margin: 5px 0px 0px 0px;
}

nav ul {
	list-style-type: none;
}

nav ul li {
	display: inline-block;
	font-family: "Aldrich", sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}

nav ul li a {
	display: inline-block;
	margin: 0px 0px 0px 5px;
	padding: 15px 17px 5px 10px;
	background: rgba( 153, 153, 153, 0.35 );
	color: #fff;
	text-decoration: none;
	
	-moz-border-radius: 0px 0px 10px 0px;
	-ms-border-radius: 0px 0px 10px 0px;
	-webkit-border-radius: 0px 0px 10px 0px;
	border-radius: 0px 0px 10px 0px;
	
	-moz-transition: background-color 0.3s ease-out;
	-ms-transition: background-color 0.3s ease-out;
	-webkit-transition: background-color 0.3s ease-out;
	transition: background-color 0.3s ease-out;
}

nav ul li a.selected, .no-touch nav ul li a:hover {
	background: rgba( 255, 211, 0, 0.5 );
	color: #fff;
}

/* GRID */
.grid {
	margin: 15px 0px 5px 0px;
	width: 720px;
	overflow: hidden;
}

.grid-item.selected {
	width: 710px;
}

/* GRID ITEM */
.grid-item {
	width: 230px;
	
}

/* GRID ITEM COLLAPSED */
.grid-item-collapsed {
	margin: 0px 0px 10px 0px;
	height: 230px;
}

.grid-item-collapsed img {
	margin: 0px;
	border: 1px solid #fff;
	width: 230px;
	height: 230px;
	opacity: 0.7;
	cursor: pointer;
	
	-moz-transition: opacity 0.3s ease-out;
	-ms-transition: opacity 0.3s ease-out;
	-webkit-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
}

.no-touch .grid-item-collapsed img:hover {	
	opacity: 1;
}

/* GRID ITEM EXPANDED */
.grid-item-expanded {
	display: none;
	position: relative;
	margin: 0px 0px 10px 0px;
	padding: 30px;
	background: rgba( 255, 255, 255, 0.2 );
}

.grid-item-expanded p {
	margin-bottom: 20px;
}

/* GRID ITEM EXTERNAL LINK */
.grid-item-ext {
	margin: 0px 5px 10px 0px;
	font-size: 10px;
	text-align: right;
	text-transform: uppercase;
}

.grid-item-ext a {
	text-decoration: none;
}

.grid-item-ext img {
	margin: 0px 0px 2px 0px;
	border: 1px solid #ccc;
	
	-moz-transition: border-color 0.3s ease;
	-ms-transition: border-color 0.3s ease;
	-webkit-transition: border-color 0.3s ease;
	transition: border-color 0.3s ease;
}

.no-touch .grid-item-ext img:hover {
	border-color: #fff;
}

/* CLOSE BUTTON */
.grid-item-close {
	position: absolute;
	top: 8px;
	right: 10px;
}

.grid-item-close a {
	text-decoration: none;
}

/* TAGS */
.tags {
	margin: 0px 0px 0px 0px;
	list-style-type: none;	
}

.tags li {
	display: inline-block;
	margin: 0px 0px 3px 0px;
	padding: 4px 10px 5px 10px;
	background: rgba( 0, 0, 0, 0.2 );
	color: #fff;
	font-weight: bold;
	font-size: 10px;
}

/* MISC */
.text-right {
	text-align: right;
}

.legal {
	font-size: 10px;
}

/* BACK */
.back {
	font-size: 11px;
	text-align: right;
}

/* HELPER CLASSES */
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}