﻿/*
JustClickMedia
Copyright 2010 JustClickMedia. All rights reserved.

Author: Dali Zheng
*/

@font-face {
	font-family: 'CantarellRegular';
	src: url('fonts/Cantarell-Regular-webfont.eot');
	src: local('?'), url('fonts/Cantarell-Regular-webfont.woff') format('woff'), url('fonts/Cantarell-Regular-webfont.ttf') format('truetype'), url('fonts/Cantarell-Regular-webfont.svg#webfontEZowxjcD') format('svg');
	font-weight: normal;
	font-style: normal;
}

*{margin:0;padding:0;border:0;}
*:focus{outline:none;}

html,body{height:100%;}
body {
	color:#b6d7ec;
	font-family:Arial, sans-serif;
	font-size:12px;
	background:#2c4a6b url("images/bg.png") center top repeat-x;
	}

/* font styles */
p,ul,ol{line-height:18px;margin-bottom:8px;font-size:12px;}
a{color:#fff;text-decoration:none;border-bottom:1px #cbe3f3 dotted;padding-bottom:1px;}
a:hover{background:url("images/trans_black.png") 0 0 repeat;}
h1,h2{font-family:CantarellRegular,sans-serif;font-size:21px;color:#fff;;margin-bottom:18px;letter-spacing:-1px;}
h1,h2 {text-shadow:#1c4e6f 2px 2px 1px;}
h1 {font-size:38px;letter-spacing:-2px;line-height:46px;padding:0 10px;margin:0;}

/* classes */
.container {width:960px;margin:auto;position:relative;
/* THE GRID
background:url("images/grid.png") 0 0 repeat; */
}
.clear {clear:both;}
.line {height:2px;background:url("images/line.png") center repeat;margin:0 10px;}
.column {float:left;margin:10px;position:relative;min-height:1px;}
.column p {padding:0 10px;}
.column h2 {padding:0 9px;}
.column ul {padding:0 25px;list-style-type:circle;}
.w60 {width:60px;}
.w140 {width:140px;}
.w220 {width:220px;}
.w_3rd {width:300px;}
.w_380 {width:380px;}
.w_half {width:460px;}
.w540 {width:540px;}
.w_2_3rd {width:620px;}
.w_700 {width:700px;}
.w_780 {width:780px;}
.w_full {width:940px;}
.lower {margin-bottom:28px;}
.left {float:left;}
.right{float:right;text-align:right;}
.dark{color:#012c47;}
.white {color:#fff;}
.space {height:12px;}

.highlight {/*background:url(images/trans_yellow.png) 0 0 repeat;*/}

/* page wrapper */
#wrapper {position:relative;min-height:100%;background:url("images/light.png") center 0 repeat-x;}

/* header */
#header {/*border-top:6px #1c4057 solid;*/}
#header .container {padding-top:40px;}
#header a {padding:0;border:0;}
#title {width:300px;float:left;margin:0 0 22px 20px;padding:0;}
#title a {width:373px;height:69px;display:block;background:url("images/logo.png") left 0px no-repeat;}
#title span {display:none;}
#notice {width:280px;float:left;padding:0 10px;margin:28px 10px 0 10px;font-style:italic;color:#7CA4BF;}

/* menu */
#menu {height:50px;width:280px;padding:10px;float:right;margin:2px 10px 0 0;background: url("images/menu.png") right 0 no-repeat;list-style-type:none;}
#menu a span {display:none;}
#menu li {float:left;}
#menu li a {display:block;height:50px;background:none;}
#home {width:85px;}
#portfolio {width:110px;}
#about {width:85px;}
.Home {background:url("images/menu_home.png") 0 0 no-repeat !important;}
.Portfolio {background:url("images/menu_portfolio.png") 0 0 no-repeat !important;}
.About {background:url("images/menu_about.png") 0 0 no-repeat !important;}

/* top */
#top {background:url("images/top.png") 0 0 repeat;min-height:6px;}
#top .container {padding:20px 0 12px 0;display:none;}
#top h2 {margin:0;text-shadow:#000 0 -1px 0;font-weight:normal;}
#contactform {padding-bottom:40px;}
#top label {display:block;padding:0 10px;color:#7CA4BF;}
#top input, #Message {border-bottom:1px #294769 solid;width:280px;padding:5px;font-family:Arial,sans-serif;font-size:12px;color:#b6d7ec;background:url("images/trans_black.png") 0 0 repeat;}
#top input {margin:6px 5px 12px 5px;}
#MessageLabel {position:absolute;top:0;left:320px;}
#Message {position:absolute;top:21px;left:325px;height:74px;overflow:hidden;}
#Submit {font-weight:bold;border-bottom:none !important;border-top:1px #8DC482 solid;background:#5B9E4D !important;color:#fff !important;cursor:pointer;position:absolute;width:68px !important;height:26px;bottom:0;right:5px;}
#close {cursor:pointer;position:absolute;top:31px;right:20px;height:25px;width:25px;background:url("images/close.png") 0 0 no-repeat;}
#thanks {position:absolute;bottom:20px;right:10px;font-style:italic;display:none;color:#7CA4BF;}
#output {display:none;}

/* contact */
#contact {position:absolute;top:0px;right:20px;width:124px;height:30px;background:url("images/contact.png") 0 0 no-repeat;}
#contact a {display:block;width:124px;height:30px;border:none;background:none;}
#contact span {display:none;}

/* filter */
#filter {background:none;float:right;margin:15px -14px 0 0;list-style-type:none;}
#filter li {float:left;margin-left:10px;height:24px;padding-left:4px;background:url("images/button_left.png") 0 0 no-repeat;}
#filter li a {border:none;display:block;background:url("images/button.png") right 0 no-repeat;padding:3px 8px 0 4px;height:21px;font-weight:bold;}
#filter_text {float:right;margin:18px -33px 0 0;color:#94b7cf;}
#filter .current {background:url("images/highlight_left.png") 0 0 no-repeat !important;}
#filter .current a {background:url("images/highlight.png") right 0 no-repeat !important;color:#1c4057;}

/* work */
.work {height:220px;background:url("images/trans_black.png") 0 0 repeat;}
.work img {display:block;position:absolute;top:10px;left:10px;width:280px;height:167px;background:url("images/trans_black_stripe.png") 0 0 repeat;}
.work h2 {font-size:14px;letter-spacing:0;position:absolute;top:186px;left:0px;font-weight:normal;}
.work a {border:none;background:none;}

.bigwork {background:url("images/trans_black.png") 0 0 repeat;width:920px;padding:10px 10px 8px 10px;}
.bigwork img {min-height:50px;background:url("images/trans_black_stripe.png") 0 0 repeat;}

/* feature */
#feature {}
#feature .container {height:400px;position:relative;}
#blurb {position:absolute;top:54px;left:10px;width:540px;background:none;}
#blurb h2 {font-size:38px;letter-spacing:-2px;line-height:46px;padding:0 9px;}
#blurb p {padding:0 10px;width:380px;}
#pic {position:absolute;top:9px;right:0;width:480px;height:300px;background:url("images/feature_bg.png") center no-repeat;}
#inner {width:394px;height:214px;position:absolute;top:43px;left:43px;background:url("images/tile.png") center repeat;}
#ct {position:absolute;right:15px;bottom:20px;background:url("images/ct.png") 0 0 no-repeat;width:100px;height:100px;}
#ct a {display:block;height:80px;width:80px;margin:10px;border:none;background:none;}

/* content */
#content {background:url("images/gradient.png") center 2px no-repeat;}
#content .container {min-height:100px;padding-bottom:186px;}

/* main */
#main {}
#main .container {padding:30px 0;}

/* carousel */
#carousel {width:920px;height:479px;list-style-type:none;margin:0;padding:0;position:relative;}
#carousel li {width:920px;height:479px;}
#prev, #next {z-index:1000;height:479px;width:460px;}
#prev {cursor:w-resize;position:absolute;top:0;left:0;}
#next {cursor:e-resize;position:absolute;top:0;left:460px;}

/* footer */
#footer {width:100%;position:absolute;bottom:0;background:#fff;color:#888;border-top:44px #e2e2e2 solid;overflow:hidden;}
#footer .container {padding:30px 0 40px 0;}
#footer a {color:#369;border:none;}
#footer a:hover {background:none;color:#69c;}

/* special */
.label {min-height:1px;width:80px;display:block;float:left;}
#page_header {background:url("images/trans_black_stripe.png") 0 0 repeat;margin:1px 10px 10px 10px;padding:0 0 1px 0;}
#page_header .column {margin:0;}
#page_header h1 {line-height:40px;position:relative;top:5px;}
.fudge {position:relative;left:-3px;}
#space {height:158px;}
#about_description {margin:17px 0px;font-style:italic;color:#94b7cf;text-align:left;}


