/*
Theme Name: Longton Theme
Theme URI: http://longtondesign.com.au/
Description: A search engine optimized website framework for WordPress.
Author: Chris Ambrose
Author URI: http://retroslider.com/
Version: 1.0
Tags: longton, michael
.
Like WordPress, this work is released under GNU General Public License, version 2 (GPL).
 
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
 
.
*/
/* ---------- @ CSS Reset-----------*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, img, ins, kbd, q, s, samp, small, strike, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
body, select, input, textarea {font: 100% Arial, sans-serif;}
/* ---------- @ Float Clearing -----------*/
.clearfloat:after {display:block;visibility:hidden;clear:both;height:0;content:".";}
.clearfloat {display:inline-block} .clearfloat {display:block}	

.cleara { clear: both; }

html {  }
body {
    -webkit-text-size-adjust: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	width: 100%;	
	background: #FFFFFF repeat-x 0 0; 
	color:#000;
	font-family: Apercu Regular, Lucida Console, monospace;
	font-size: 13px;
	font-weight: normal;
}

a img {
	
}

a {
	text-decoration: none;
	color: #999999;
}

a:hover {
	text-decoration: underline;
}

.slideshow {
	width: 100% !important;
	position: relative;
}

.header {
	white-space: nowrap;
	max-height: 68px;
	padding-top: 38px;
	padding-bottom: 16px;
	padding-left: 22px;
	padding-right: 40px;
	z-index: 10001;
	position: relative;
	background-color: #ffffff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

p {
	padding-bottom: 4px;
	line-height: 20px;
}

.logo {
	display: block;
	float: left;
	margin-top: -14px;
	margin-bottom: -45px;
}

.logo img {
	z-index: 9999;
	position: relative;
}

.menu {
	display: inline-block;
	margin-left: 212px;
	width: 600px;
}

.menu li {
	display: inline-block;
	width: 137px;
}

.footer-wrapper {
	position: fixed;
	bottom: 0%;
	background-color: #FFFFFF;
	width: 100%;
	z-index: 100;
}

.project-footer-wrapper {
	position: fixed;
	bottom: 0%;
	width: 100%;
	z-index: 100;
}

.tag-footer {
	height: 38px;
	padding-top: 20px;
	padding-left: 40px;
	color: #000000;	
	width: 820px;
}

.tag-footer a {
	color: #999999;
}

.tag-footer a.selected {
	color: #000000;
}

.footer {
	height: 76px;
	padding-top: 16px;
	padding-left: 40px;
	color: #999999;
	width: 860px;
}

.footer-column {
	float: left;
	width: 255px;
	vertical-align: top;
	padding-right: 24px;
}

.footer-column-newsletter {
	float: left;
	width: 202px;
	vertical-align: top;
	padding-right: 24px;
}

.newsletter {
	width: 100px;
	border: 0;
	border-bottom: 1px solid #999999;
}

input.newsletter:focus {
    outline-width: 0;
	border: 0;
	border-bottom: 1px solid #999999;
}

.footer-column-social {
	float: left;
	width: 60px;
	vertical-align: top;
}

.footer-column p {
	clear: both;
	float: left;
	line-height: 11px;
}

.footer-facebook, .footer-twitter {
	float: right;
	padding-right: 5px;
}

a.nolink {
	color: #000000;
}

a.nolink:hover {
	color: #000000;
}

h1 {
	font-size: 25px;
	line-height: 30px;
	font-weight: normal;
	text-wrap: normal;
}

h2 {
	font-size: 13px;
	font-weight: normal;
	text-decoration: underline;
	padding-bottom: 4px;
}

/* FOR PAGE */
.page-body-wrapper {
	background-color: #f4f4f5;
	height: 100%;
	width: 100%;
	margin-top: 81px;
}

.page-body-container {
	padding-left: 318px;
	max-width: 560px;
	padding-right: 8px;
	padding-bottom: 108px;
}

.page-section {
	border-bottom: 1px solid #000000;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 8px;
	clear: both;
	width: 552px;
	
}

.page-col-left {
	clear: both;
	display: inline-block;
	width: 180px;
	padding-bottom: 8px;
}

.page-col-right {
	display: inline-block;	
	padding-bottom: 8px;
}


.page-section-left {
	clear: both;
	float: left;
	width: 280px;
	padding-bottom: 4px;
}

.page-section-right {	
	padding-bottom: 4px;
}

/* PROJECT PAGE */

.projects-container, .blog-container {
	padding-left: 40px;
	clear: both;
	margin-top: 81px;
	margin-bottom: 58px;
}

.item {
	float: left;
	padding-bottom: 20px;
	position: relative;
}

.item a:hover {
	text-decoration: none;
}

.project-slide-small {
	width: 260px;
	height: 170px;
}

.project-slide-large {
	width: 540px;
	height: 360px;
}

.project-slide-tall {
	width: 260px;
	height: 360px;
}

.project-slide-small .project-hover {
	width: 260px;
	height: 170px;
}

.project-slide-large .project-hover {
	width: 540px;
	height: 360px;
}

.project-slide-tall .project-hover {
	width: 260px;
	height: 360px;
}

.project-hover {
	position: absolute;
	top: 0;
	left: 0;
	background: url(/theme/bg.png);
	opacity: 0;
	text-align: center;
	display: table;
}

.project-hover h2 {
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	padding-bottom: 4px;
	color: #FFFFFF;
}

.project-hover p {
	color: #CCCCCC;
}

/* PROJECT PAGE */

.project-pic-container {
	position: relative;
	z-index: 10;
}

.project-popup {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 10000;
}

.project-popup-top {
	padding-left: 30px;
	padding-bottom: 29px;
	height: 20px;
	cursor: pointer;
}

.project-popup-top h1 {
	float: left;
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	padding-bottom: 4px;
	padding-top: 5px;
	padding-left: 9px;
	padding-right: 8px;
	line-height: normal;
}

.project-popup-top .project_title {
	background-color: #FFFFFF;
	float: left;
	margin-bottom: 1px;
}

.project-popup-top .show_hide {
	margin-left: 1px;
	float: left;
	font-size: 13px;
	font-weight: normal;
	padding-bottom: 4px;
	padding-top: 5px;
	padding-left: 8px;
	padding-right: 8px;
	color: #999999;
	background-color: #FFFFFF;
	text-decoration: underline;
	
	margin-bottom: 1px;
}

.project-popup-top .show_hide a:hover {
	color: #000000;
}

.project-popup-top .show_hide a:active {
	color: #999999;
}

.project-popup-bottom {
	clear: both;
	display: none;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 20px;
	background-color: #FFFFFF;
}

.arrows {
	margin-left: 9px;
}

.project-popup-middle-lower .types {
	color: #000000;
	float: left;
	width: 260px;
	margin-right: 20px;
}

.types_span {
	padding-right: 20px;
}

.tags_span {
	color: #999999;
}

.project-popup-middle-lower .social {
	float: left;
	width: 130px;
}

.project-popup-middle-lower .social-left {
	float: left;
}

.project-popup-middle-lower .social-right {
	float: left;
	padding-left: 16px;
	margin-top: -4px;
}

.project-popup-middle {
	padding-left: 9px;
	float: left;
	max-width: 820px;
	padding-bottom: 30px;
}

.project-popup-middle-upper {
	border-bottom: 1px solid #000000;
	padding-bottom: 24px;
}

.project-popup-middle-lower {
	padding-top: 24px;
}

.project-popup-right {
	float: right;
	width: 160px;
	padding-bottom: 24px;
}

.underline {
	text-decoration: underline;
}

.project-popup-right p {
	text-align: right;
	color: #999999;
}


.social .footer-facebook, .social .footer-twitter {
	float: none;
	padding-right: 4px;
}

.left-nav {
	display: block;
	position: fixed;
	top: 69px;
	left: 0;
	width: 50%;
	height: 100%;
	z-index: 9998;
	background-image:url('/images/left-slide.gif');
	background-repeat:no-repeat;
	background-position:left center;
	opacity: 0;
	cursor: pointer;
}

.right-nav {
	display: block;
	position: fixed;
	top: 69px;
	right: 0;
	width: 50%;
	height: 100%;
	z-index: 9999;
	background-image:url('/images/right-slide.gif');
	background-repeat:no-repeat;
	background-position:right center;
	opacity: 0;
	cursor: pointer;
}

.right-nav:hover, .left-nav:hover {
	opacity: 1;
}

.home-pic-container {
	width: 100% !important;
}

.projects_tags:hover {
	text-decoration: underline;
}

.blog-slide {
	float: left;
	width: 428px;
	padding-bottom: 20px;
	position: relative;
}

.blog-slide a:hover {
	text-decoration: none;
}

.blog-slide .blog-hover {
	width: 398px;
	height: 100%;
}

.blog-hover {
	position: absolute;
	top: 0;
	left: 0;
	background: url(/theme/bg.png);
	opacity: 0;
	text-align: center;
	display: table;
}

.blog-slide a:hover {
	text-decoration: none;
}

.blog-hover-inner, .project-hover-inner {
	display: table-cell;
	vertical-align: middle;
}

.blog-hover-inner h2 {
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	padding-bottom: 4px;
	color: #FFFFFF;
}

.blog-hover-inner p {
	color: #CCCCCC;
}

.blog-right {
	float:left;
	padding-top: 40px;
}

.blog-right-upper {
}

.blog-right-upper h1 {
	font-size: 20px;
	line-height: 50px;
}

.blog-right-lower {
	border-top: 1px solid #000000;
	padding-top: 30px;
	padding-bottom: 35px;
}

.blog-left {
	float:left;
	margin-right: 40px;
	max-width: 616px;
	padding-bottom: 35px;
}

.blog-back {
	margin-top: 30px;
}

.blog-back a {
	text-decoration: underline;
}

.current-proj, .prev-proj, .next-proj {
	width: 100%;
}

.selected {
	color: #000000;
	text-decoration: underline;
}

.page-dark {
	background-color: #f4f4f5;
}

#noscrolldiv {
	overflow: hidden;
	height: 100%;
	margin-top: 81px;
}