/* -------------------------------------------------------

	Type:			Screen
	Author:			
	Created:		5th July 2010
		
	1.				General
	2.				Layout
	3.				Typography
	4.				Content
	5.				Header
	6.				Navigation
	7.				Featured Work
	8.				Social Links
	9.				Footer
	10. 			        Misc
	
------------------------------------------------------- */

/* ------ 1.	General ------ */

html,body {
	background: url(../images/bg.jpg) top repeat-y #B67123;	
        
}
body {
	text-align:center;
	width:100%;
	
}
a {
	color:#b21515;
	text-decoration:none;	
}
a:hover {
	text-decoration:underline;
}
a:focus {
	text-decoration:underline;
}

/* ------ 2. 	Layout ------ */

#wrap {
	margin:0 auto;
	text-align:left;
	width:951px;	
}
#header {
	height:67px;
	padding-top:35px;
	margin-left:204px;
        font-style:bold;
}
#content {
	display:inline;
	float:right;
	margin-right:24px;
	padding-top:10px;
	width:720px;
        position:relative;
}
#content.wide {
	margin-top:10px;
	width:926px;
}
#content.portfolio {
	display:inline;
	margin-right:0;
	margin-top:10px;
	width:926px;
}
#footer {
	background:url(../img/footer-divide.png) left top repeat-x;
	clear:both;
	display:inline;
	float:right;
	margin-bottom:28px;
	margin-right:24px;
	width:720px;
}
#mascot {
           /*background:url(images/pencil.jpg) left;*/
           float:left;
           margin-left:-2px;
           margin-top:-60px;
           position:absolute;
}

/* ------ 3. 	Typography ------ */

@font-face {
        font-family:'GraublauWebRegular';
	src:url('../fonts/graublauweb.eot');
	src:local('GraublauWebRegular'),url('../fonts/graublauweb.woff') format('woff'),url('../fonts/graublauweb.ttf') format('truetype'),url('../fonts/graublauweb.svg#graubla') format('svg'),url('../fonts/graublauweb.otf') format('opentype');
	font-weight:normal;
	font-style:normal;

@font-face {
    font-family: "My Custom Font";
    src: url(../font/GraublauWeb.otf) format("truetype");
}
h3.customfont { 
    font-family: "My Custom Font", GraublauWeb ;
}

label.customfont {
  font-family: "My Custom Font", Tandelle ;
}

}
body {
	color:#373737;
	font:0.875em/1.428 Georgia,Times,'Times New Roman',serif;
}
h1,h2,h3,h4,h5,h6 {
	color:#695b4b;	
}

/* ------ 4. 	Content ------ */

h2.initial-letters {
	float:left;
	font-size:3.1425em;	
	font-weight:400;
	padding:7px 0 0 40px;
	text-shadow:0 0 0.1em #aaa;
}
#photo {
	background:url(../img/photo.png) 0 0 no-repeat;
	float:left;
	height:295px;
	width:209px;
}
#email-stamp {
	background:url(../img/email-stamp.png) 0 0 no-repeat;
	float:left;
	height:135px;
	margin:52px 0 0 8px;
	width:204px;
}
#portfolio-thumbs {
	background:url(../img/portfolio-thumbnails.png) 0 0 no-repeat;
	float:left;
	height:314px;
	margin:18px 0 0 45px;
	width:156px;
        
        
}
#content #content-column-home {
	float:right;
	width:592px;
       	
}
#content #content-column {
	float:right;
	width:682px;
        margin-top:-20px;	
}
#content #content-column.portfolio-col {
	float:right;
	width:708px;	
}
#content #content-column h2 {
	font-size:3.1425em;	
	font-weight:400;
	padding:12px 0 0 0;
	text-shadow:0 0 0.1em #aaa;
}
#content #content-column p {
	padding-bottom:1em;
}
#content p.intro-para {
	color:#373737;
	font:1.286em/1.55 GraublauWebRegular,Arial,Verdana,sans-serif;
	padding:15px 0 22px 0;
}
#content #content-column h3,#content .portfolio-details h3 {
	color:#373737;
	font:1.286em/1.55 GraublauWebRegular,Arial,Verdana,sans-serif;
	padding:18px 0 18px 0;
}
#content .portfolio-details h3 span {
	color:#695b4b;
	font-family:Georgia, "Times New Roman", Times, serif;
	padding:18px 0 18px 0;
}
#content p.size15 {
	clear:both;
	font-size:1.072em;
}
#content h3.floated-left {
	float:left;
}
#content p.size15-floated {
	float:right;
	font-size:1.072em;
	padding:21px 24px 18px 0;
}
#content span.lighter-brown {
	color:#695b4b;
}
#content ul.skills-list {
	float:left;	
	padding:18px 46px 16px 30px;
}
#content ul.skills-list li {
	background:url(../img/list-bullet.png) 0 7px no-repeat;
	padding:0 0 4px 14px;
}
#content img.portfolio-large {
	border:10px solid #fff;
	box-shadow:0 0 13px #d1d1d1;
  	-moz-box-shadow:0 0 13px #d1d1d1;
  	-webkit-box-shadow:0 0 13px #d1d1d1;
	float:right;
}
#content .portfolio-details {
	float:right;
	padding-right:25px;
	text-align:left;
	width:730px;
       
}
#content .portfolio-details1 {
	float:right;
	padding-right:25px;
	text-align:left;
	width:730px;
        
}
         .portfolio-large1 {
	border:10px solid #9E8662;
	box-shadow:0 0 13px #d1d1d1;
  	-moz-box-shadow:0 0 13px #d1d1d1;
  	-webkit-box-shadow:0 0 13px #d1d1d1;
	float:right;
}
.portfolio-details .portfolio-details-info {
	clear:both;
	margin-left:50px;
	padding-top:20px;
	width:656px;
        	
}
.portfolio-details .portfolio-details-info a.floated-button {
	float:right;
	margin:18px 0 0 0;	
}
/* to change side thumbnails positions */
#content #portfolio-thumbs {
	background:url(../img/click-here.png) no-repeat;
	margin:80px 0 0 0;
	padding-top:63px;
}
#content #portfolio-thumbs.print {
	background-image:none;
}
#portfolio-thumbs ul {
	color:#685c4e;
	float:left;
	font:1.572em/normal GraublauWebRegular,Arial,Verdana,sans-serif;
	padding:0 0 16px 11px;
}
#portfolio-thumbs ul li {
	float:left;
	padding-right:12px;
}
#portfolio-thumbs ul li a {
	color:#beb8a9;
}
#portfolio-thumbs ul li a:hover {
	text-decoration:none;
	color:#0f3b66;
}
#portfolio-thumbs ul li img {
	padding-right:5px;
	position:relative;
	top:-4px;
}
#portfolio-thumbs ul li a img {
	opacity:0.4;
}
#portfolio-thumbs ul li a:hover img {
	opacity:1;
}
#portfolio-thumbs ul li.last {
	padding-right:0;
}
#portfolio-thumbs ul#thumbnails {
	padding:6px 0 16px 0;
}
#content img.portfolio-small {
	border:2px solid #fff;
	box-shadow:0 0 9px #bbb;
  	-moz-box-shadow:0 0 9px #bbb;
  	-webkit-box-shadow:0 0 9px #bbb;
	margin-bottom:8px;
	opacity:1;
	padding-right:0;
}

/* ------ 5. 	Header ------ */

#header h1 {
	float:left;	
}

/* ------ 6. 	Navigation ------ */

#header ul {
	display:inline;
	float:right;
	margin:20px 15px 0 0;
}
#header ul li {
	color:#514639;
	float:left;
	font:1.1425em/normal GraublauWebRegular,Arial,Verdana,sans-serif;
}
#header ul li a {
	color:#514639;
	display:inline-block;
	padding:1px 10px;
        font-weight:bold;
        font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;

}
#header ul li a.selected {
	background-color:#695b4b;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-khtml-border-radius:10px;
	color:#fff;
	font-weight:normal;
	margin:0 6px;
	padding:1px 23px;
}
#header ul li a:hover.selected {
	text-decoration:none;
}

/* ------ 7. 	Featured Work ------ */

#featured-work {
	clear:both;
	height:410px;
	position:relative;
}
#featured-info {
	height:255px;
	left:41px;
	position:absolute;
	top:78px;
	width:145px;
	z-index:1000;
}
#featured-text {
	min-height:245px;
  	height:auto !important;
  	height:245px;
}
#featured-info h2 {
	font:1.572em/1.55 GraublauWebRegular,Arial,Verdana,sans-serif;
	padding-bottom:8px;
}
#featured-info h3 {
	font:1.1em/1.55 GraublauWebRegular,Arial,Verdana,sans-serif;
	font-weight:900;
}
#featured-info p {
	font:0.8575em/1.6 Georgia, "Times New Roman", Times, serif;
	padding-bottom:1em;
}
#portfolio-button {
	left:14px;
	position:relative;
	z-index:1001;	
}

/* ------ 8. 	Social Links ------ */

ul#social-links {
	display:inline;
	float:right;
	margin:40px 25px 1px 0;	
}
ul#social-links li {
	color:#0f3b66;
	float:left;
	font:0.9285em/normal GraublauWebRegular,Arial,Verdana,sans-serif;
	padding:20px 6px 0 6px;
}
ul#social-links li.twitter {
	padding:0 6px 0 6px;
}
ul#social-links li.last {
	padding:20px 0 0 6px;
}

/* ------ 9. 	Footer ------ */

/*.column {
	float:left;
	width:150px;	
}
.long-column {
	float:left;
	width:230px;	
}
.last-column {
	float:left;
	width:170px;	
}
#footer h3 {
	color:#695b4b;
	font:1.286em/normal GraublauWebRegular,Arial,Verdana,sans-serif;
	padding:1.05em 0 0.5em 0;
}
#footer h3.hide {
	visibility:hidden;	
}
#footer ul {
	margin-bottom:1.05em;	
}
#footer ul li {
	font:1em/1.65 GraublauWebRegular,Arial,Verdana,sans-serif;	
}
#footer ul li a {
	color:#373737;
}
p.copyright {
	background:url(../img/footer-divide.png) left top repeat-x;
	clear:both;
	color:#40372d;
	font:0.9em/4 GraublauWebRegular,Arial,Verdana,sans-serif;
}*/

.footer {
        clear:both;
	float: left;
	width: 950px;
	margin: 50px 0 0;
	padding: 0 0 10px 0;
	font-size: .9em;
	text-align: center;
        position:relative;
font:0.9em/4 GraublauWebRegular,Arial,Verdana,sans-serif;
      
}
img.center {
	display: block;
	margin: 0 auto 0 auto;
}



/* ------ 10. 	Misc ------ */

::selection {
	background:#0F3B66;
	color:#fff;
}
::-moz-selection {
	background:#0F3B66;
	color:#fff;
}
.clear {
	clear:both;
	font-size:0;
	line-height:0;	
}
#skip {
	position:absolute;
	left:-5000px;	
}
#top {
	background-color:#695b4b;
    background-image:-moz-linear-gradient(100% 100% 90deg, #52483d, #988877);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#988877), to(#52483d));
	display:none;
	bottom:0;
	font:0.928em/2.6 GraublauWebRegular,Arial,Verdana,sans-serif;
	height:2.5em;
	position:fixed;
	text-align:center;
	width:100%;
	z-index:1002;
}
#top a {
	color:#fff;
	display:block;
	height:2.5em;
	width:100%;
}
#top a:hover,#top a:focus {
	color:#1e1b1b;
	text-decoration:none;
}
#top img {
	position:relative;
	top:-1px;
	left:-4px;
}
/*--------------------- footer--------------*/

#content_middle {
	float: left;
	margin-left:20px;
	padding: 0;
	width: 900px;	
	font-family: "Georgia", Times, serif;
	font-size: 1em;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1.8em;
	text-align: center;

}


.buckets {
	width: 880px;
	margin: 0 auto 0 auto;
        position:relative;
        
}

.about {
	float: left;
	width: 240px;
	/*padding: 0 10px 0;*/
	margin-left:100px;
}

.contact {
	float: left;
	width: 240px;
	padding: 0 10px 0;
}

.clients {
	float: left;
	width: 240px;
	padding: 0 10px 0;
	position:relative;
}


/*****Basic Layout*****/
div#container {
margin-top:180px;
overflow:hidden;
width:800px;
margin-left:200px;
}
ul#filter {
float:left;
font-size:16px;
list-style:none outside none;
margin-left:116px;
width:100%;
}
ul#filter li {
border-right:1px solid #000000;
float:left;
line-height:16px;
margin-right:10px;
padding-right:10px;
}
ul#filter li:last-child {
border-right:medium none;
margin-right:0;
padding-right:0;
}
ul#filter a {
color:#000000;
text-decoration:none;
}
ul#filter li.current a, ul#filter a:hover {
text-decoration:underline;
}
ul#filter li.current a {
color:#333333;
font-weight:bold;
}
ul#portfolio {
float:left;
list-style:none outside none;
margin-left:0;
width:800px;
}
ul#portfolio li {
border:3px solid #ffffff;
float:left;
margin:20px 10px 10px 0;
padding:5px;
width:202px;
}
ul#portfolio a {
display:block;
width:100%;
}
ul#portfolio a:hover {
text-decoration:none;
}
ul#portfolio img {
border:2px solid #ffffff;
display:block;
padding-bottom:0px;
}

#statusdiv{
position: absolute;
padding: 0px;
left: -300px;
background-color: lightyellow;
border: 0px solid gray;
visibility: hidden;
}