@font-face {
	font-family: 'HelveticaLight';
	src: url('../fonts/helveticalight-webfont.eot');
	src: local('☺'), url('../fonts/helveticalight-webfont.woff') format('woff'), url('../fonts/helveticalight-webfont.ttf') format('truetype'), url('../fonts/helveticalight-webfont.svg#webfontQxsIeIpD') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: DroidSans;
    src: url(http://www.susantodesign.com/fonts/DroidSans.ttf);
}

body {
    font-size: 12px;
    font-family: 'Signika Negative', sans-serif;
    text-align: left;
	background:#fff url(../images/bg1.gif) repeat-x top;
    color: #343434;
	margin:0;
}

.clearer {
    clear: both;
}

img {
    vertical-align: top;
	border:0;
}

a {
	text-decoration:none;
}

a:hover {
    color: #828a8f;
}

#container {
    width: 922px;
    margin: 0px auto;
    text-align: left;
}

/* Header */
#slogan {
    text-align: right;
    line-height: 24px;
    padding: 24px 20px;
}

#header {
    height: 40px;
    border-bottom: 1px dotted #dfdfdf;
}

#logo {
    float: left;
	margin-top:35px;
	background: url(../images/logo_susantodesign.png) no-repeat;
	width: 250px;
	height:60px;
	overflow:hidden;
	text-indent:-9999px;
}

#logo a{
	height:100%;
	display:block;
}

/* Navigation */
#navigation {
    float: right;
    list-style-type: none;
	padding-top:0px;
}

#navigation li {
	font-family: 'Signika Negative', sans-serif;
    display: block;
    float: left;
}

#navigation li a {
    display: block;
    float: left;
    text-decoration: none;
	font-size:15px;
	font-weight:normal;
    margin-right: 20px;
	color:#576366;
}

#navigation li a:hover {
	color: #de7b1c;
}

#navigation li a.active {
    color: #de7b1c;
}

/* Column Homepage */

.main-block{
	width:100%;
	overflow:hidden;
	background:url(../images/bg-main-block.gif) repeat-y;
}
.main-block .holder{
	width:920px;
	overflow:hidden;
	font-size:12px;
	color:#576366;
}
.main-block .col{
	float:left;
	width:260px;
	margin:0 2px 0 0;
	padding:18px 0 2px 25px;
	background:#fff;
}
.main-block h2{
	margin:0 0 5px;
	font-size:24px;
	line-height:30px;
	color:#fff;
}
.main-block h3{
	margin:0 0 8px;
	font-size:18px;
	font-family: 'Brawler', arial, serif;
	font-weight: normal;
	line-height:18px;
	color:#f08e30;
}
.main-block p{
	margin:0 0 15px;
	line-height:16px;
}
.main-block a{color:#ccc;}
.main-block .news-block{
	font-size:13px;
	line-height:16px;
}
.main-block .news-block p{
	margin:0 0 8px;
	line-height:16px;
}

#bigmessage {
	font-family: 'Brawler', arial, serif;
	font-size:21px;
	line-height:26px;
	color:#616c6f;
	padding:20px 24px;
	border-bottom: 1px dotted #cdcdcd;
}

.quoter { font-size:12px; padding-top:15px; color:#000; line-height:18px; }

.more a { font-size:12px; color: #999999; }
.more a:hover { color: #de7b1c; }

#content h4 { 
	font-family:'Signika Negative', sans-serif;
	font-weight:normal;
	color:#aab0b1;
	font-size:20px;
	padding:0 0 -10px 0;
}



/* Client List Menu */
#columns_menu {
    font-size: 10px;
    font-weight: bold;
    line-height: 15px;
    padding: 22px 10px 36px 60px;
}

#columns_menu a {
    color: #868b8c;
    text-decoration: none;
}

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

#columns_menu .active {
    color: #fff;
}

#columns_menu .column {
    width: 95px;
    float: left;
}

/* Showcase */
#work_images {
    position: relative;
    z-index: 1;
}

#work_images img {
    position: relative;
    z-index: 1;
}

#work_images img.work1 {
    margin: 0px 0px 65px 150px;
}

#work_images img.work2 {
    position: absolute;
    top: 85px;
    left: 404px;
    z-index: 2;
}

#work_images img.work3 {
    margin: -20px 0px 0px 284px;
}

#work_images img.work4 {
    margin: -20px 0px 0px 154px;
}

#pagination {
    position: relative;
    z-index: 3;
    margin-top: -75px;
    font-size: 12px;
    padding-bottom: 80px;
}

#pagination a {
    margin: 0px 2px;
}

.work_name {
    padding-left: 45px;
}

.image {
	float: right;
	padding:0 0 30px 30px;
}

.testimonial {
	float: right;
	width: 160px;
	font-family: 'Brawler', arial, serif;
	font-size:14px;
	line-height:18px;
	color: #aab0b1;
	padding:18px;
	margin-left:20px;
	background-color:#efefef;
	border-radius:7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}

.testimonial strong, .testimonial em {
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	line-height:9px;
	color: #555a5d;
}


/* Side Nav */
#sidenav {
	font-family: 'Signika Negative', sans-serif;
	width: 150px;
	float:left;
	font-size:14px;
	line-height:24px;
	color:#666666;
	margin:0 0 0 58px;
}

#sidenav a { color:#de7b1c; }

#sidenav ul {
	margin:0;
	padding:0;
	list-style:none;
}

#sidenav ul li a{
	color:#4f5355;
	text-decoration:none;
}

#sidenav ul li a:hover{
	color:#aab0b1;
	text-decoration:none;
}

#sidenav .active {
	color:#de7b1c;
}

#leftInfo {
	font-size:11px;
	color:#999;
	line-height:16px;
	width:150px;
	float:left;
	margin:25px 0 0 0;
}

/* Content */
#content {
	width: 690px;
	margin:0;
	float:left;
}

.header {
	font-size:28px;
	line-height:36px;
	font-weight:normal;
	color:#aab0b1;
	padding: 0 0 15px 0;
}
.bodycopy {
	font-size: 14px;
	font-weight:400;
	line-height:20px;
	color: #576366;
	text-align:left;
	overflow:hidden;
}

.bodycopy a {
	color: #f08e30;
}

.bodycopy a:hover {
	color: #f08e30;
	text-decoration:underline;
}

.bodycopy .profile img {
	float:right;
	padding: 10px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.bodycopy .intro {
	font-family: 'Signika Negative', sans-serif;
	color:#9f9fa1;
	font-size: 18px;
	line-height:22px;
}

.bodycopy .ini {
	font-family: 'Signika Negative', sans-serif;
	color:#f08e30;
	font-weight:700;
	font-size: 18px;
	line-height:22px;
}

.bodycopy .quote {
	font-family: 'Brawler', arial, serif;
	color:#aab0b1;
	font-size: 18px;
	line-height:22px;
}

.bodycopy h2 { color:#aab0b1; }

.heading2 {
	color:#6c7276;
	font-weight:bold;
	font-size:14px;
	line-height:24px;
}

.column1 {
	float:left;
	width:220px;
}

.column1 ul.list {
	margin:0;
	padding:0;
}

.column2 {
	float:left;
	width:220px;
}

.list {
	margin:0;
	padding:0;
	list-style:none;
	line-height: 18px;
}
		 

/* FORM */
.fieldframe { float:left; }
input[type='text'], textarea {
	width:300px;
	border:1px solid #dfdfdf;
	padding:7px 5px;
	background-color:#efefef;
	color:#444444;
	-webkit-border-radius: 4px; 
	-moz-border-radius: 4px; 
	border-radius: 4px;
	outline:none;
}

form select {
	width:300px;
}

/* PORTFOLIO */

.thumbnail img { border: none; }
.thumbnail a, .thumbnail a:hover { border:none; padding:0; }
.thumbnail td { font-size:11px; font-family: 'HelveticaLight', Helvetica, sans-serif; }


/* Footer */
#footer {
	background-color: #efefef;
    font-size:11px;
	line-height:16px;
	margin:0 auto;
    color: #aaa;
	position:relative;
	padding: 15px 0;
	border-top: 1px dotted #dfdfdf;
}

#footer a {
    color: #aaa;
    text-decoration: none;
}

#footer a:hover, #footer a.active {
    color: #de7b1c;
}

#space-header {
    height: 25px;
}

.sitemap_content {
	width:870px;
	margin: 0 auto;
	padding-bottom:20px;
}

#footer .global_sitemap {
	margin: 0 auto;
	float:left;
}

.global_sitemap h4, #footer .global_sitemap h4 a {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color:#777;
	font-weight: normal;
	margin:3px 0;
}
.global_sitemap#services {
	font-size:11px;
	display:block;
	width: 100px;
}

.global_sitemap#services ul{
	list-style:none;
	padding:0;
	margin:0;
}

.global_sitemap#portfolio {
	font-size:11px;
	display:block;
	width: 100px;
}

.global_sitemap#portfolio ul{
	list-style:none;
	padding:0;
	margin:0;
}

.global_sitemap#about {
	font-size:11px;
	display:block;
	width: 100px;
}

.global_sitemap#about ul{
	list-style:none;
	padding:0;
	margin:0;
}

.global_sitemap#contact {
	font-size:11px;
	display:block;
	width: 160px;
}

.global_sitemap#contact ul{
	list-style:none;
	padding:0;
	margin:0;
}

.global_sitemap#connect {
	font-size:11px;
	display:block;
	width: 120px;
}

.global_sitemap#connect ul{
	list-style:none;
	padding:0;
	margin:0;
}