/* Perrottet Partners CSS */
/* Coded by the lovely people at stillmovingdesign.com.au */
/* edited: 1 July 2009 */
/* ...to be for the learning, not to copy. */



/*
div {
outline: 1px solid red;
}
*/

body {
	font-size: 62.5%;
	font-style: normal;
	text-align: center;
	background-color: white;
	background: url(/images/uploads/site/body_bg.png) repeat-x;
}



#content {
	margin: 0 auto;
	width: 980px;
	text-align: left;
	}

p, li, h1, h2, h3, h4, h5 {
	font-family: Georgia, Times, serif, Verdana, Tahoma, Arial, Helvetica;
	text-align: left;
}

p {
	font-size: 140%;
	text-align: left;
	line-height: 1.8em;
	margin-bottom: 1.25em;
	color: #111;
}

h1 {
	font-size: 180%;
	color: #776A47;
	line-height: 1.5em;
	margin-bottom: .5em;
}


h2 {
	font-size: 140%;
	color: #776A47;
	line-height: 1.8em;
	margin-bottom: .2em;
	margin-top: 1em;
}

h3 {
	font-size: 160%;
	color: #6A5E3F;
	line-height: 1.8em;
	margin-bottom: .5em;
}

h4 {
	font-size: 125%;
	color: #A19975;
	line-height: 100%;
}


img.logo {
	float: left;
	margin-left: 257px;
	margin-top: 47px;
	margin-bottom: 50px;
}

p.jp_contact {
	float: left;
	display: block;
	width: 320px;
	text-align: right;
	font-size: 120%;
	color: white;
	margin-left: 174px;
	margin-top: 89px;
	letter-spacing: .2em;
}

img.jp_contact {
	margin-left: 174px;
	margin-top: 89px;
}

#navigation {
	width: 100%;
}

#navigation ul {
	list-style-type: none;
	border-bottom: 1px solid #999;
}

#navigation li {
	text-align: right;
	text-transform: lowercase;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 1.6em;
	color: #333;
	line-height: 2.2em;
	}

#navigation li a:link, #navigation li a:visited {
	color: #333;
	text-decoration: none;
	padding-right: 1.5em;
}

#navigation li a:hover {
	color: #333;
	padding-right: 1.5em;
	background: url('/images/uploads/site/nav_li_hover.png') no-repeat center right;
}

#home #nav-home a, #aboutus #nav-about a, #projects #nav-proj a, #whatweoffer #nav-offer a, #contact #nav-contact a, #contact_thanks #nav-contact a  {
	color: #333;
	padding-right: 1.5em;
	background: url('/images/uploads/site/nav_li.png') no-repeat center right;
}

ul.subnav {
	list-style-type: none;
	border-bottom: 1px solid #999;

}
ul.subnav li {
	text-align: right;
/* 	text-transform: lowercase; */
	font-family: Georgia, Times, serif, Verdana, Tahoma, Arial, Helvetica;
	font-size: 1.4em;
	color: #333;
	line-height: 2.2em;
}

.subnav li a:link, .subnav li a:visited {
	color: #A19975;
	text-decoration: none;
	padding-right: 1.5em;
}

ul.subnav li a:hover {
	color: #A19975;
	padding-right: 1.5em;
	background: url('/images/uploads/site/nav_li_hover.png') no-repeat center right;
}

#projects .snav-current a {
	padding-right: 1.5em;
	background: url('/images/uploads/site/nav_li.png') no-repeat center right;
}

.snav-current a {
	padding-right: 1.5em;
	background: url('/images/uploads/site/nav_li.png') no-repeat center right;
}


#body_container {
	clear: left;
}

#maincol_double {
	float: left;
	padding-right: 45px;
	width: 355px;
	margin-bottom: 3em;
/* 	outline: 1px solid red; */
}

#aboutus #maincol_double {
	width: 655px;
}

#whatweoffer #maincol_double {
	width: 455px;
}

#aboutus #maincol_double img {
	float: right;
	margin-left: 1.25em;
	margin-bottom: 2em;
	border: 4px solid #A19975;
}

#aboutus #maincol_double p {
	width: 455px;
}

#maincol_projects {
	float: left;
	padding-right: 45px;
	width: 455px;
	margin-bottom: 3em;
}

#maincol_double ul {
	list-style-type: square;
/* 	margin-left: 1em; */
}

#maincol_double ul li {
	font-size: 140%;
	line-height: 1.8em;
	background: url('/images/uploads/site/nav_li_hover.png') no-repeat 0 6px;
	margin-bottom: .5em;
	padding-left: 1.4em;
}

#left_column {
	clear: both;
	float: left;
	width: 183px;
	margin-right: 74px;
}

#right_column {
	float: left;
	width: 323px;
	display: inline;
}

ul.project_list {
	float: left;
	width: 145px;
	height: 85px;
	padding: 1em;
	background-color: #A19975;
	margin-left: 1em;
}

ul.project_list li {
	color: white;
	list-style-type: square;
	margin-left: 1em;
	font-size: 100%;
	line-height: 150%;
}

img.project {
	float: left;
	padding: .8em 2em 1em 0;
}

.project img {
	float: left;
	margin: .8em 2em 1em 0;
	border-bottom: 4px solid #ccc;

}

.project img:hover {
	border-bottom: 4px solid #A19975;
	}


.footer_container {
	clear: left;
	width: 100%;
	text-align: left;
	background-color: #333;
}

#footer {
	width: 980px;
	margin: 0 auto;
	padding: 1em 0 2em 0;
	height: 125px;
}

img.logo_footer {
	float: left;
	margin-left: 257px;
	margin-top: 20px;
}

.footer p {
	font-size: 12px;
	text-align: center;
	color: #333;
}

div#subscribe {
	float: left;
	margin-left: 310px;
	margin-top: 20px;
}

#subscribe label {
	font-family: Verdana, Tahoma, Arial, Helvetica;
	font-size: 100%;
	color: white;
}

#maincol_double fieldset label {
	font-family: Georgia, Times, serif, Verdana, Tahoma, Arial, Helvetica;
	font-size: 140%;
	display: block;
	padding-bottom: .5em;
}

#maincol_double fieldset input, textarea {
	display: block;
	font-size: 120%;
	font-family: Verdana, Tahoma, Arial, Helvetica;
}






.dm {
	clear: left;
	text-align: right;
	color: #999999;
	font-family: Helvetica,Arial,Verdana,sans-serif;
	font-size:100%;
	font-weight:normal;
	margin-bottom: 1em;
}

.dm a:link, .dm a:visited, .dm a:hover, .dm a:active {
	color:#999999;
	text-decoration:none;
}
.dm a:link, .dm a:visited, .dm a:hover, .dm a:active {
	color:#999999;
	text-decoration:none;
}


p.pp_description {
	color: #A19975;
}





/*********** css for scrollable ***********/

/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 310px;	
	height:240px;	
	
	/* custom decorations */
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
	/* decoration */
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	text-align:center;
	width:310px;
}

/* active item */
div.scrollable div.items div.active {
}


/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;		
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(../img/arrow/left.png) no-repeat;
	float:left;
/* 	margin:43px 10px; */
	cursor:pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../img/arrow/right.png);
	clear:right;	
}



/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
/* clear: left; */
	margin-left:110px;
	width:90px;
	height:20px;
}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(/images/uploads/site/navigator.png) 0 0 no-repeat;     
	cursor:pointer;	
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
} 	


.items h3 {
	font-size: 120%;
	color: #776A47;
}

.items p {
	font-size: 100%;
	color: #999;
	background-color: #f6f4ef;
	padding: .75em;
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(../img/arrow/left.png) no-repeat;
	float:left;
	margin:43px 10px;
	cursor:pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../img/arrow/right.png);
	clear:right;	
}