/* -- [ generic styles ] ------------------------ */

body {
	background:url(images/bg2.jpg) repeat-x #fff;
	margin:0;
	padding:0;
	font:12px Verdana,Arial,Helvetica,sans-serif;
	color:#444;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul,h1,h2,h3,h4,p,blockquote,ol {
margin:0;
padding:0;
}
a {
	text-decoration:none;
	outline:none;
	color:#322362;
	font-weight:bold;
}
a:hover {
text-decoration:underline;
}
.clr:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clr-left:after {
content: ".";
display: block;
height: 0;
clear: left;
visibility: hidden;
}
.clr-right:after {
content: ".";
display: block;
height: 0;
clear: left;
visibility: hidden;
}
.left-img {
float:left;
border:1px solid #BDBDBD;
padding:3px;
margin:4px 7px 0 0;
background:#f5f5f5;
}
.right-img {
float:right;
border:1px solid #BDBDBD;
padding:3px;
margin:5px 0 0 7px;
background:#f5f5f5;
}
blockquote {
background:url(images/blockquote.gif) no-repeat top left;
padding:10px 0 10px 40px;
font-style:italic;
}
.content ul {
margin:10px 0 10px 30px;
list-style-image:url(images/list-style.gif);
}
.content ol {
margin:10px 0 10px 30px;
}

/* -- [ canvas ] ------------------------ */

#canvas {
	width:740px;
	margin:0 auto;
}

/* -- [ header ] ------------------------ */

#header {
width:740px;
height:150px;
margin-bottom:4px;
}
#logo {
	background:url(images/logo.png) no-repeat;
	width:356px;
	height:150px;
	text-indent:-9999pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* -- [ navigation ] ------------------------ */

#navigation ul {
list-style:none;
position:absolute;
margin:-35px 0 0 386px;
}
#navigation li { 
float:left;
margin:0 8px 0 0;
}
#navigation li a {
width:82px;
height:22px;
text-indent:-9999pt;
display:block;
}

/* -- [ navigation image buttons ] ------------------------ */

#b-home {
background:url(images/home.jpg) no-repeat;
}
#b-home:hover {
background:url(images/home.jpg) 0 -22px no-repeat;
}
#b-about {
background:url(images/about.jpg) no-repeat;
}
#b-about:hover {
background:url(images/about.jpg) 0 -22px no-repeat;
}
#b-work {
background:url(images/work.jpg) no-repeat;
}
#b-work:hover {
background:url(images/work.jpg) 0 -22px no-repeat;
}
#b-contact {
background:url(images/contact.jpg) no-repeat;
}
#b-contact:hover {
background:url(images/contact.jpg) 0 -22px no-repeat;
}

/* -- [ info ] ------------------------ */

#info {
	height:199px;
	margin-bottom:20px;
}
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}
#info-tabs {
list-style:none;
position:absolute;
margin:-30px 0 0 3px;
}
#info-tabs li {
float:left;
}
#info-tabs li a {
> display:block;
> background:url(images/inf-button.jpg) no-repeat; width:20px; 
> height:20px; color:#eee; padding:2px 0 0 5px; margin-right:0px; }



#info-tabs li a:hover, .tabs-selected a {
background:url(images/inf-button-h.jpg) no-repeat !important;
}

/* -- [ content styles ] ------------------------ */

.content {
	line-height:18px;
	margin-bottom:22px;
}
.content p {
	margin-bottom:10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.top-link {
float:right;
margin:-10px 4px 0 0;
text-indent:-9999pt;
width:20px;
height:20px;
display:block;
background:url(images/2.png) no-repeat; /* this is the ie7 hack! without it top link doesn't work :( */
}
.content-title h2 {
font:20px "Trebuchet Ms", Arial;
}
.content-title {
	background:url(images/title-bg.jpg) 0 13px no-repeat;
	padding-bottom:15px;
	margin-bottom:10px;
}
.content-title-h3 {
	font:17px "Trebuchet Ms", Arial;
	border-bottom:1px solid #F03643;
	margin-bottom:20px;
	font-family: "Trebuchet Ms", Arial;
}

/* -- [ image titles ] ------------------------ */

#about-title {
	background:url(images/about-title.jpg) no-repeat;
	height:21px;
	width:500px;
	text-indent:-9999pt;
}
#work-title {
	background:url(images/work-title.jpg) no-repeat;
	height:21px;
	width:110px;
	text-indent:-9999pt;
}
#contact-title {
background:url(images/contact-title.jpg) no-repeat;
height:21px;
width:80px;
text-indent:-9999pt;
}

/* -- [ work page ] ------------------------ */

.work-box {
width:358px;
height:150px;
float:left;
margin:0 0 20px 0;
background:#444;
border:1px solid #304D50;
}
.work-info {
background:url(images/1.png);
width:358px;
color:#fff;
position:relative;
margin:-27px 0 0 0;
padding-top:2px;
height:25px;
line-height:100% !important;
}
.work-client {
float:left;
padding:5px;
}
.work-visit {
float:right;
padding:5px;
}
.work-visit a {
color:#fff;
font-weight:bold;
}
.work-visit a:hover {
text-decoration:underline;
}
.seperator { /* this is the seperator between portfolio boxes */
width:20px;
height:150px;
float:left;
}

/* -- [ contact form ] ------------------------ */

#contactform textarea {
border:1px solid #6CA1A9;
background:#fff;
font:11px tahoma, verdana, arial, serif;
padding:5px;
color:#333;
width:500px;
height:150px;
}
#contactform .neus {
background:#fff;
margin-bottom:10px;
color:#333;
width:150px;
}
#contactform .send {
	font:9px "small fonts", tahoma, arial, serif;
	padding:5px 10px 5px 10px;
	text-transform:uppercase;
	margin-top:5px;
	color:#fff;
	border:1px solid #BC1616;
	background-color: #322362;
}
#contactform input {
background:#fff;
border:1px solid #6CA1A9;
font:11px tahoma, verdana, arial, serif;
padding:5px;
margin-right:3px;
color:#5E4435;
display:block;
}
#contactform label {
margin-bottom:2px;
display:block;
}
#contactform input:focus, #contactform textarea:focus {
border:1px solid #F1414E;
}

/* -- [ footer ] ------------------------ */

#footer {
width:100%;
background:url(images/ftr-bg.jpg) repeat-x;
height:86px;
}
#footer p {
margin:0 auto;
width:740px;
padding:30px 0 0 0;
color:#eee;
}
#footer a {
color:#fff;
}