@import url("reset.css") ;
@import url('font-kits/kontrapunkt/kontrapunkt.css');

body { 
	position: relative;
	background-image: url(images/background.jpg) ;
	background-color: #01141B ;
	background-position: top center ;
	background-repeat: no-repeat ;
	background-attachment: fixed ;
	font-family: Arial, sans-serif ;
	color: #6aa8af ;
	line-height: 150% ;
	text-align: justify ;
}
.clear {
	clear: both ;
}
p {
	font-size: 12px ;
}
h1, h2, h3, h4, h5 {
	font-family: "KontrapunktLight" ;
}
a.boxlink {
	position: absolute ;
	top: 0;
	left: 0 ;
	display: block ;
	border: none ;
	width: 100% ;
	height: 100% ;
	z-index: 5000 ;
}
#main p {
	text-shadow: #1d2529 0 2px 0 ;
}
#top-shadow {
	position: absolute ;
	top: 0 ;
	z-index: 1 ;
	width: 100% ;
	height: 243px ;
	background-image: url(images/top-shadow.png) ;
	background-repeat: repeat-x ;
}
#header {
	position: relative ;
	z-index: 5 ;
	width: 890px ;
	height: 211px ;
	margin: 0 auto 76px ;
	top: 33px ;
	background-image: url(images/header.png) ;	
	background-repeat: no-repeat ;
	background-position: top center;
}
#header h1,
#header h2 {
	display: none ;
}
#wrapper {
	position: relative ;
	width: 890px ;
	margin: 0 auto ;
	padding: 0 ;
}
#footer {
	position: absolute ;
	bottom: 0 ;
	height: 113px ;
	width: 100% ;
	background-image: url(images/footer-tile.jpg) ;
	background-repeat: repeat-x ;
	font-size: 12px ;
	line-height: 12px ;
	overflow: hidden ;
}
#footer-deco {
	position: relative ;
	width: auto ;
	height: 113px ;
	background-image: url(images/footer-main.jpg) ;
	background-repeat: no-repeat ;
	background-position: center top ;
	margin: 0 auto ;
}
#footer-inner-wrapper {
	position: relative ;
	width: 960px ;
	height: 113px ;
	margin: 0 auto ;
	
	
}
#footer-copyright {
	position: absolute ;
	top: 90px ;
	color: #2a2c30;
}
#footer-links {
	position: absolute ;
	top: 72px ;
	color: #676971 ;
	
}
#footer-links a,
#footer-links a:link,
#footer-links a:visited {
	color: #676971 ;
	text-decoration: none ;
}
#footer-links a:active,
#footer-links a:hover {
	color: #727685 ;
	border-bottom: 1px dotted #727685 ;
}
#main {
	position: relative ;
	padding-left: 2px;
	min-height: 896px ;
	background-image: url(images/panel.png) ;
	margin: 0 auto ;
}
.section {
	position: relative ;
	margin-top: -46px ;
	width: 800px ;
	padding: 43px 43px 89px ;
	background-image: url(images/divider.png) ;
	background-repeat: no-repeat ;
	background-position: center bottom  ;
}
#main > .section:first-of-type {
	top: 0 ;
}
#main > .section:last-of-type {
	background-image: none ;
}
.section .tab {
	position: absolute ;
	top: 2px ;
	left: -35px ;
	width: 55px ;
	height: 100px ;
	background-image: url(images/sprites.png);
}
#portfolio .tab {
	background-position: -300px 0px ;
}
#services .tab {
	background-position: -300px -100px ;
}
#contact .tab {
	background-position: -300px -200px ;
}
#about .tab {
	background-position: -300px -300px ;
}
.section .tab h1 {
	display: none ;
}
ul { padding: 0 ; margin: 0 ; list-style-position: inside ;}
ul.col3 {
	
}
ul.col3 li {
	list-style-type: none ;
	float: left ;
	width: 230px ;
	font-size: 12px ;
	margin-right: 50px ;
}
ul.col3 li:last-child {
	margin-right: 0 ;
}
ul.col2 {
	
}
ul.col2 li {
	list-style-type: none ;
	float: left ;
	width: 350px ;
	font-size: 12px ;
	margin-right: 50px ;
}
ul.col2 li:last-child {
	margin-right: 0 ;
}
.last {
	margin-right: 0 ;
}
h2.imgTitle {
	background-image: url(images/sprites.png) ;
	height: 30px ;
	width: 300px ;
}
h2.imgTitle span {
	display: none ;
}
#title-design {
	background-position: 0 0 ;
}
#title-strategy {
	background-position: 0 -30px ;
}
#title-development {
	background-position: 0 -60px ;
}

/*
**	Portfolio
*/
#portfolio-thumbs ul li {
	height: 80px ;
	width: 80px ;
	background-image: url(portfolio/top-thumbs/top-thumbs.jpg) ;
	list-style-type: none ;
	float: left ;
	margin-right: 40px ;
	cursor: pointer ;
}
#portfolio-thumbs ul li:last-child {
	margin-right: 0 ;
}
#pt-4 {
	background-position: 0 0 ;
}
#pt-7 {
	background-position: 80px 0 ;
}
#pt-6 {
	background-position: 160px 0 ;
}
#pt-5 {
	background-position: 240px 0 ;
}
#pt-2 {
	background-position: 320px 0 ;
}
#pt-1 {
	background-position: 400px 0 ;
}
#pt-3 {
	background-position: 480px 0 ;
}
/*
**	Get In Touch
*/
#contact {
	
}
#title-getintouch {
	background-position: 0 -90px ;
}
#contact-email,
#contact-skype {
	position: absolute ;
	font-family: "KontrapunktLight" ;
	color: #36bbf0 ;
	background-image: url(images/sprites.png) ;
	width: 400px ;
	height: 70px ;
}
#contact-email {
	cursor: pointer ;
}
#contact-email {
	background-position: -400px -100px ;
	right: 443px ;
}
#contact-skype {
	background-position: -400px 0 ;
	right: 8px ;
}
#contact-skype .contact-button-text span {
	/* Active staus: color: #eca838 ; */
	
	color: #ec5138 ;
}
.contact-button-text {
	position: absolute ;
	left: 85px ;
	top: 21px ;
}
.contact-email-arrow {
	position: absolute ;
	right: 43px ;
	top: 25px ;
	background-image: url(images/sprites.png) ;
	background-position: -360px 0 ;
	height: 20px ;
	width: 40px ;	
}
#mail-form {
	position: relative ;
	top: 100px ;
	height: 250px ;
}
#mail-form form label span { display: none; }
#mail-form-left {
	width: 330px ;
	float: left ;
	clear: none ;
	margin-left: 37px;
}
#mail-form-right {
	width: 45% ;
	float: left ;
}
.field-one-line,
.field-textbox {
	font-family: Courier ;
	font-size: 16px ;
	font-weight: 100 ;
	border: none ;
	outline: none;
}
.field-one-line {
	width: 261px ;
	height: 37px ;
	margin-bottom: 17px;
	background-image: url(images/sprites.png) ;
	background-color: transparent ;
	background-position: -800px -39px ;
	color: #166774 ;
	font-size: 16px ;
	line-height: 37px ;
	padding-left: 10px ;
	padding-right: 10px ;
}
.field-one-line:focus {
	background-position: -800px 0 ;
	color: #25a3b7 ;
}
.field-textbox {
	width: 411px ;
	height: 147px ;
	background-image: url(images/sprites.png) ;
	background-color: transparent ;
	background-position: -1130px 0 ;
	color: #25a3b7 ;
	padding: 10px ;
}
.field-textbox:focus {
	background-position: -1130px -167px ;
	border: none ;
	outline: none;
	color: #25a3b7 ;
}
.field-block {
	position: relative ;
}
.field-block label {
	position: absolute ;
	z-index: 50;
	left: 281px ;
	background-image: url(images/sprites.png) ;
	height: 40px ;
	width: 15px ;
}
#mail-form-right .field-block label {
	left: 429px ;
	width: 30px ;
	height: 80px ;
}
#forName {
	background-position: -1100px -1px ;
}
#forEmail {
	background-position: -1100px -55px ;
}
#forTel {
	background-position: -1100px -108px ;
}
#forURL {
	background-position: -1100px -164px ;
}
#forMessage {
	background-position: -1098px -204px ;
}
#send-message {
	margin-top: 7px ;
	background-image: url(images/sprites.png) ;
	background-position: -1130px -334px ;
	border: none ;
	background-color: none ;
	width: 431px ;
	height: 33px ;
	font-family: "KontrapunktLight" ;
	font-size: 22px ;
	color: #15759b ;
	text-shadow: #000 0 1px 1px ;
}
#send-message:active {
	border:1px #585858 solid ;
	text-shadow: #585858 0 0 5px ;
}
#send-message:hover {
	color: #1788b5 ;
	text-shadow: #09348a 0 0 5px ;
}
/*
**	About
*/
#about {}
#title-aboutme {
	background-position: 0 -120px ;
}
#title-twitter {
	background-position: 0 -150px ;
}
#about-twitter {
	padding-bottom: 30px ;
}
#about-twitter-message {
	position: relative ;
	background-image: url(images/sprites.png) ;
	background-position: -400px -305px ;
	border: 1px dotted #333 ;
	height: 165px ;
	width: 355px ;
	margin: 0 auto ;
}
#aw-twitter {
	font-family: "KontrapunktLight" ;
	font-size: 15px ;
	text-align: center ;
	padding: 15px ;
}
#about-twitter-image {
	position: absolute ;
	left: 10px ;
	bottom: 10px ;
	background-image: url(images/sprites.png) ;
	background-position: -400px -200px ;
	width: 140px ;
	height: 60px ;
	
}
#TBDate {
	font-size: 12px ;
}
#TBDesc p {
	margin-bottom: 10px ;
	font-size: 15px ;
}
#about-twitter-image span {
	display: none ;
}


/*
**	Portfolio
*/
#portfolio-item {
	display: none ;
	overflow: hidden ;
}
#item-image {
	position: relative ;
	background-image: url(portfolio/main-thumbs/placeholder.jpg);
	width: 400px ;
	height: 235px ;
	float: left;
	overflow: hidden ;
	visibility: hidden ;
	cursor: pointer;
}
/*#item-control {
	position: absolute ;
	background-image: url(images/thumb-overlay.png); 
	width: 338px ;
	height: 26px ;
	bottom: -26px ;
	left: 31px ;
	font-family: "KontrapunktLight" ;
	text-align: center ;
}*/
#item-control {
	position: absolute ;
	display: none ;
	background-color: rgb(0,0,0) ;
	background-color: rgba(0,0,0,0.75);
	width: 200px;
	height: 26px ;
	top: 1px ;
	font-family: "KontrapunktLight" ;
	text-align: center ;
	-moz-border-radius: 5px ;
	-moz-border-radius-topright: 0 ;
	-moz-border-radius-topleft: 0 ;
	-webkit-border-radius: 5px ;
	-webkit-border-top-right-radius: 0 ;
	-webkit-border-top-left-radius: 0 ;
	border-radius:5px ;
	border-top-right-radius: 0 ;
	border-top-left-radius: 0 ;
	cursor: pointer;
}
#ic-centre,
#icf-centre {
	position: relative ;
	margin: 0 auto ;
	width: 200px ;
}
#item-control-full {
	display: none ;
	width: 200px ;
	text-align: center ;
	font-size: 20px ;
	background-color: rgb(0,0,0) ;
	background-color: rgba(0,0,0,0.75);
	-moz-border-radius: 5px ;
	-moz-border-radius-topright: 0 ;
	-moz-border-radius-topleft: 0 ;
	-webkit-border-radius: 5px ;
	-webkit-border-top-right-radius: 0 ;
	-webkit-border-top-left-radius: 0 ;
	border-radius:5px ;
	border-top-right-radius: 0 ;
	border-top-left-radius: 0 ;
	position: absolute ;
	top: 1px ;
	padding: 15px ;
	font-family: "KontrapunktLight" ;
}
/**#full-image:hover #item-control-full {
	display: block ;
}**/
#item-desc {
	position: relative ;
	float: left;
	margin-left: 40px ;
	width: 360px ;
	visibility: hidden ;
}
#item-desc h3 {
	color: #4897b5 ;
	}
#form-error {
	font-family: "KontrapunktLight" ;
	border: dotted 1px #333 ;
	width: 759px ;
	height: 40px ;
	line-height: 40px ;
	float: right ;
	margin-right: 2px;
	text-align: center ;
	color: #ec5138 ;
	display: none ;
}
#form-error.form-success {
	color: #E9C639 ;
}
#full-image {
	display: none ;
	width: 800px ;
	height: 20px ;
	cursor: pointer;
	
}
#services-list ul.col3 li ul li {
	list-style-type:  square ;
	padding-left: 15px ;
}
#services-list ul.col3 li p.first {
	position: relative ;
}
.readmore,
.readless {
	opacity: 0.5 ;
	color: #45AED8 ;
	border-bottom: 1px dotted #45AED8 ;
	border-top: 1px dotted #45AED8 ;
	cursor: pointer ;
}
.readmore {
	position: absolute ;
	right: 0 ;
	bottom: -10px ;
}
.readless {
	text-align: center ;
	margin-top: 25px ;
}
.readmore:hover,
.readless:hover {
	opacity: 1 ;
}
#serviceContent {
	min-height: 210px ;
	height: 210px;
}