body {
	margin: 0;
	font-family: Apex, "Arial", arial, sans-serif;
	font-size: 14px;
	color: #858585;
	background: #fff url(../images/sidebar.png) repeat-y top left;
}

/* Effects for the best browser by far: Safari ... and the second best: Firefox */

@font-face {
	font-family: Apex;
	src: url(../fonts/ApexNew-Book.otf) format('opentype');
}

::-moz-selection { 
	background: #8addd4; 
	color: #fff; 
}

::selection { 
	background: #8addd4; 
	color: #fff;
}

a::selection { 
	color: #000;
}

a:hover::selection { 
	color: #fff;
}

div a {
	-webkit-transition: color .25s ease-out;
}

/* STRUCTURE STYLES */

a {
	color: #858585;
	cursor: pointer;
	text-decoration: none;
}

a:hover {
	color: #414141;
}

a:focus {
	border: none;
	outline: none;
}

.active a, a.active {
	color: #414141;
}

img {
	border: 0;
}

hr {
	margin: 18px 24px;
	height: 4px;
	border: none;
	background-color: #f1f1f1;
}

#topbar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 6px;
	background-color: #000;
	z-index: 1;
	opacity: 0.1;
	-moz-opacity: 0.1;
}

/* DOT STYLES */

.wedding {
	background: transparent url(../images/dots.png) no-repeat right 1px;
}

.project {
	background: transparent url(../images/dots.png) no-repeat right -31px;
}
	
/* SIDEBAR STYLES */

#sidebar {
	float: left;
	height: 100%;
	width: 227px;
}

#sidebar h1 {
	text-indent: -99999px;
	width: 96px;
	height: 39px;
	margin: 28px 0 0 23px;
	padding: 0;
	background: transparent url(../images/logo.png) no-repeat top left;
}

#gallery-list {
	list-style-type: none;
	padding: 0;
	margin: 21px 24px 19px 24px;
}

#gallery-list li {
	margin: 8px 0;
}

#gallery-list li a {
	display: block;
}

#key {
	margin: 23px 24px;
	line-height: 14px;
	font-size: 10px;
	text-transform: uppercase;
}

#key div {
	padding-left: 14px;
}

#key .wedding {
	background-position: left 1px;
}

#key .project {
	background-position: left -31px;
}

/* CONTENT STYLES */

#content {
	margin-left: 227px;
}

#thumbs {
	float: left;
	list-style-type: none;
	padding: 34px 40px 40px 40px;
	margin: 0;
}

#thumbs li {
	float: left;
	width: 300px;
	height: 200px;
	overflow: hidden;
	margin: 10px 10px;
	padding: 0;
	background-color: #f2f2f2;
	cursor: pointer;
}

#thumbs li img {
	display: none;
}

form {
	clear: right;
	margin-bottom: 80px;
}

form input[type=text], form textarea {
	margin: 10px 0;
	padding: 10px;
	font-family: Apex, "Arial", arial, sans-serif;
	font-size: 14px;
	color: #757575;
	width: 350px;
	background-color: #e2e2e2;
	border: 1px solid #d2d2d2;
}

form input[type=text]:hover, form textarea:hover {
	border-left: 5px solid #d2d2d2;
}

form textarea {
	height: 150px;
}

.wedding-check {
	margin: 15px 5px 15px 0;
}

.wedding-options {
	display: none;
	margin-bottom: 15px;
}

.wedding-options input {
	margin-left: 15px;
}

form a.submit {
	margin-top: 10px;
	float: left;
	font-size: 16px;
	color: #656565;
	background-color: #e2e2e2;
	border: 1px solid #d2d2d2;
	padding: 10px 10px 8px 10px;
}

form .message {
	float: left;
	margin: 20px 0 0 30px;
	color: #858585;
}

p {
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 18px;
}

p a {
	text-decoration: underline;
}

p a:hover {
	text-decoration: none;
}
		
/* FOOTER STYLES */

#footer {
	position: fixed;
	bottom: 0;
	margin: 50px 24px 20px 24px;
	font-size: 11px;
}

#footer a {
	font-size: 14px;
	margin-right: 30px;
}

#footer .copy {
	margin-top: 25px;
	line-height: 15px;
}

#footer .copy a {
	text-decoration: underline;
	font-size: 11px;
}

/* MOZILLA HACKS */

@-moz-document url-prefix() {
	.wedding {
		background-position: right 2px;
	}
	
	.project {
		background-position: right -29px;
	}
	
	#key .wedding {
		background-position: left 2px;
	}
	
	#key .project {
		background-position: left -29px;
	}
}