/* ==========  ========== */
/* ========== ========== ========== */

@charset "UTF-8";
/* CSS Document */

html {
height:101%;
}

body {
background:url(../images/layout/body.png) top repeat-x #E6F3FB;
} 

* {
outline:none;
}

.contentbg {
background:url(../images/layout/content.png) top repeat-y; /* Main background area (white panel) */
}

.headerbg {
background:url(../images/layout/header.jpg) top no-repeat; /* Main header background (background bubbles) */
}

.hidden {
display:none;
}

.contentwshade {
background:url(../images/layout/contentwshade.png) top no-repeat;
margin-top:-20px;
padding-top:20px;
}

.contentarea {
	padding-bottom:20px;
}

p.largetext {
font-size:15px;
}

a.more {
display:block;
text-indent:-9999px;
height:24px;
width:52px;
background:url(../images/buttons/more.png) top no-repeat;
}

a.more:hover {
background-position:bottom;
}

a.view {
display:block;
text-indent:-9999px;
height:24px;
width:52px;
background:url(../images/buttons/view.png) top no-repeat;
}

a.view:hover {
background-position:bottom;
}

blockquote p {
color:#0D1820;
font-style:italic;
margin:0;
}

blockquote {
background:#EAF6FD;
border:1px solid #D1ECF8;
padding:10px 10px 10px 10px;
margin:0 0 20px 0;
}

strong.author {
font-weight:bold;
color:#300;
display:block;
padding-left:19px;
background:url(../images/icons/author.png) left no-repeat;
margin-top:10px;
font-style:normal;
}

.smallsidebar p {
font-size:11px;
color:#999;
}

.smallsidebar h5 {
margin-bottom:10px;
}

/* ========== Contact ========== */

fieldset {
border:1px solid #ccc;
}

legend {
border:1px solid #ccc;
padding:5px 10px;
font-weight:bold;
color:#300;
background:#f6f6f6;
}

label {
display:block;
font-weight:bold;
color:#333;
padding:5px 0 10px 0;
}

input, textarea {
font:120% Helvetica, Arial, sans-serif;
padding:5px;
border:1px solid #ccc;
}

input[type=submit] {
cursor:pointer;
background:#85C942;
border:1px solid #498929;
color:#fff;
}




/* ========== ========== ========== */

/* ========== footer ========== */

.footer {
background:#E6F3FB;
clear:both;
padding-top:30px;
padding-bottom:30px;
color:#999;
font-size:90%;
margin:0 2px 0 0;
border-top:2px solid #D7E3EA
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .footer { margin:0 0 0 2px }
}

.footer .nav {
float:right;
margin:0;
padding:0;
}

.footer .nav li {
list-style:none;
float:left;
margin-right:10px;
border-right:1px solid #fff;
padding-right:10px;
}

.footer .nav a {
color:#093C7D;
font-weight:normal;
text-decoration:underline;
}

.footer .nav a:hover {
text-decoration:none;
}

.footer .nav li.last {
margin-right:0;
padding-right:0;
border-right:none;
}


/* ========== ========== ========== */

/* ========== Work ========== */

p.screenshot {
width:270px;
height:226px;
background:url(../images/layout/work.png) top no-repeat;
position:relative;
}

p.screenshot img {
position:absolute;
top:17px;
left:7px;
}

.workinfo {
border:1px solid #E8E8E8;
background:url(../images/layout/workinfo.png) top repeat-x;
height:60px;
padding-left:10px;
}

.workinfo h5 {
font-size:12px;
font-weight:bold;
color:#300;
padding-top:5px;
margin-bottom:12px;
}

.workinfo a {
color:#569932;
text-decoration:underline;
padding-left:17px;
background:url(../images/icons/view.png) left no-repeat;
font-weight:normal;
}

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

.latestwork {
margin-bottom:25px;
}

.work-large {
width:545px;
height:457px;
position:relative;
background:url(../images/layout/work-large.png) top no-repeat;
}

.work-large img {
position:absolute;
top:33px;
left:14px;
}

/* ========== ========== ========== */

/* ========== News ========== */

.newspost h4 {
border-bottom:1px solid #eee;
background:url(../images/icons/news.png) left no-repeat;
padding-left:20px;
padding-bottom:5px;
}

.newspost span.date {
float:right;
text-align:right;
padding-left:20px;
background:url(../images/icons/date.png) left no-repeat;
font-size:12px;
}

.newspost p {
font-size:15px;
}

/* ========== ========== ========== */

/* ========== Services ========== */

ul.services {
margin:0 0 15px 0;
padding:0;
border-bottom:1px solid #E8E8E8;
}

ul.services li {
list-style:none;
background:url(../images/layout/services.png) top no-repeat;
height:21px;
margin:0;
padding:5px 0 0 30px;
font-weight:bold;
}

/* ========== ========== ========== */

/* ========== Breadcrumbs ========== */

ul.breadcrumbs {
height:43px;
background:url(../images/layout/breadcrumbs.png) top no-repeat;
margin:0 0 10px;
padding:5px 0 0 10px;
}

ul.breadcrumbs li {
list-style:none;
float:left;
padding-right:13px;
margin-right:10px;
background:url(../images/general/breadcrumb.gif) right no-repeat;
}

ul.breadcrumbs li.last {
background:none;
}

/* ========== ========== ========== */

/* ========== Homepage ========== */

.intro {
height:215px;
background:url(../images/homepage/intro.png) no-repeat;
position:relative;
margin-bottom:20px;
}

.intro h4 {
position:absolute;
top:115px;
left:70px;
font-size:12px;
color:#D1ECF8;
}

/* ========== ========== ========== */

/* ========== Copyright area ========== */

.copyright {
font-size:11px;
color:#666;
height:30px;
}

.copyright p {
padding-top:6px;
}

/* ========== ========== ========== */

/* ========== Header area ========== */

.header {
position:relative;
height:237px;
}

.header h1 {
font-size:30px;
color:#900;
padding-top:40px;
margin-bottom:0;
letter-spacing:-2px;
}

.header h1 a {
color:#900;
text-decoration:none;
}

.header h1 a:hover {
color:#300;
}

.header h3 {
font-size:12px;
font-weight:bold;
color:#0B171E;
margin:0;
padding:0;
}

.header .nav {
position:absolute;
top:150px;
margin:0 0 0 5px;
padding:0;
left:1px;
}

body:last-child:not(:root:root) .header .nav {
	left: 1px;
}

.header .nav li {
list-style:none;
float:left;
padding:9px 0px 12px 0;
margin:0 5px 0 0;
}

.header .nav li a {
padding:9px 11px 12px 11px;
font-weight:bold;
color:#ccc;
text-decoration:none;
}

.header .nav li a:hover {
background:url(../images/nav/a_hover.png) bottom no-repeat;
color:#fff;
}

body.about ul.nav li.about a, body.news ul.nav li.news a, body.work ul.nav li.work a, body.services ul.nav li.services a, body.contact ul.nav li.contact a, body.single ul.nav li.single a, body.threecolumns ul.nav li.threecolumns a, body.elements ul.nav li.elements a  {
background:white;
border-bottom:1px solid white;
color:#900;
}

/* ========== ========== ========== */