/* 

Author: Gavin Chua

Version: 1.0 (initial release)

*/



@import url("css/base.css");



/* typography

-----------------------------------------------------------------------------------------------

*/

@font-face {

font-family:"SoulMission";

src: url("fonts/SoulMission.eot");

src: local("SoulMission"), url("fonts/SoulMission.ttf") format("truetype");

}

	

@font-face {

font-family:"Note this";

src: url("fonts/NoteThis.eot");

src: local("Note this"), url("fonts/NoteThis.ttf") format("truetype");

}



/* header

-----------------------------------------------------------------------------------------------

*/

body {

background:url('images/background-floor.jpg') repeat center top;

width:100%;

margin:0 auto;

padding:0;

}



#bg-table-wrap {

background:#fff url('images/background-table.jpg') repeat center top;

width:100%;

margin:0 auto;

padding:0;

}



#header-container {

background:transparent url('images/header.jpg') no-repeat center 0;

height:530px;

width:960px;

margin:0 auto;

}



#header h1 {

left:50px;

position:relative;

top:430px;

width:350px;

}



/* nav

-----------------------------------------------------------------------------------------------

*/

#nav {

position:relative;

}



#nav ul {

left:50px;

position:absolute;

top:185px;

width:350px;

}



#nav li {

display:block;

font:400 45px "SoulMission";

line-height:50px;

list-style:none outside none;

text-transform:lowercase;

}



#nav li a {

border:none;

color:#917356;

}



#nav li.current a,#nav li a:hover,#nav li a.selected {

background-color:transparent;

color:#9D2525;

text-decoration:none;

}



#nav li div {

background:transparent url('images/icon-arrow.png') no-repeat 10px 0;

display:none;

}



#nav li div span {

color:#9D2525;

display:inline-block;

font:bolder 23px "Note this";

margin-left:70px;

padding:10px;

}



/* content

-----------------------------------------------------------------------------------------------

*/

#main-content {

background:transparent url('images/header.jpg') no-repeat center -530px;

height:720px;

width:960px;

margin:0 auto;

}



#main-content a {

border:none;

}



#main-content a:hover {

background-color:transparent;

}



section {

background:transparent url('images/header-h2-background.png') no-repeat 0 0;

width:820px;

margin:0 auto 50px;

}



section h2 {

text-transform:lowercase;

height:37px;

width:210px;

}



#who-am-i-container {

border:medium dashed #917356;

font-size:13px;

margin:0 auto;

padding:20px;

}



#who-am-i-container img {

margin-right:20px;

}



#who-am-i-container a {

border-bottom:1px dashed #655B44;

color:#655B44;

}



#who-am-i-container a:hover,#who-am-i-container a.selected {

background-color:#655B44;

color:#fff;

}



#what-i-do-tabs {

margin-top:-75px;

}



#what-i-do-tabs-item {

padding:0 15px 35px;

}



#what-i-do-tabs-item li {

display:inline;

font:bolder 30px "Note this";

list-style:none outside none;

padding-left:20px;

text-transform:lowercase;

}



#what-i-do-tabs-item li a {

border:none;

color:#655B44;

}



#what-i-do-tabs-item li a:hover,#what-i-do-tabs-item li a.selected {

background-color:transparent;

color:#891e1e;

text-decoration:none;

}



#softwares,#languages,#others {

display:none;

margin:0;

padding:0;

}



#what-i-do-container {

border:medium dashed #917356;

width:750px;

margin:0 auto;

padding:20px;

}



#what-i-do-container ul li {

float:left;

line-height:30px;

list-style:none outside none;

width:360px;

}



#what-i-do-container ul li.pad {

margin-right:30px;

}



#what-i-do-container li span {

background:transparent url('images/star-ratings.png') no-repeat top left;

width:66px;

height:19px;

margin-top:5px;

}



#what-i-do-container li span.star-ratings1 {

background-position:0 0;

}



#what-i-do-container li span.star-ratings2 {

background-position:0 -69px;

}



#what-i-do-container li span.star-ratings3 {

background-position:0 -138px;

}



/* tooltip

-----------------------------------------------------------------------------------------------

*/

.tooltip {

display:block;

background:transparent url('images/black_arrow.png');

font-size:12px;

height:70px;

width:160px;

color:#fff;

text-align:center;

padding:25px;

}



.tooltip img {

border:0;

cursor:pointer;

margin:0 8px;

}



.tooltip.bottom {

background:url(images/black_arrow_bottom.png);

padding-top:40px;

height:55px;

}



/* portfolio

-----------------------------------------------------------------------------------------------

*/ 

#bg-portfolio-wrap {

background:transparent url('images/background-image-portfolio.jpg') no-repeat center 0;

}



#portfolio-wrap {

position:relative;

height:490px;

overflow:hidden;

width:760px;

margin:0 auto;

padding:15px 0;

}



#portfolio-content {

width:9999px;

position:absolute;

height:400px;

}



.portfolio-item {

position:relative;

float:left;

width:760px;

height:360px !important;

overflow:hidden;

background-repeat:no-repeat;

background-position:0 -40px;

}



.portfolio-item img {

cursor:url("/wordpress/wp-content/plugins/highslide/graphics/zoomin.cur"), pointer !important;

}



.ic_caption {

position:absolute;

opacity:0.8;

overflow:hidden;

left:0;

right:0;

cursor:default;

margin:0;

padding:0;

}



.ic_caption h3 {

margin:0;

padding:15px;

}



.ic_text {

font-size:12px;

margin:0;

padding:15px;

}



#portfolio-nav a#portfolio-nav1 {

background-position:0 0;

}



#portfolio-nav a#portfolio-nav2 {

background-position:-130px 0;

}



#portfolio-nav a#portfolio-nav3 {

background-position:-260px 0;

}



#portfolio-nav a#portfolio-nav4 {

background-position:-390px 0;

}



#portfolio-nav a#portfolio-nav5 {

background-position:-520px 0;

}



#portfolio-nav a#portfolio-nav6 {

background-position:-650px 0;

}



#portfolio-nav a#portfolio-nav7 {

background-position:-780px 0;

}



#portfolio-nav a#portfolio-nav1:hover,#portfolio-nav li.active a#portfolio-nav1 {

background-position:0 -106px;

}



#portfolio-nav a#portfolio-nav2:hover,#portfolio-nav li.active a#portfolio-nav2 {

background-position:-130px -106px;

}



#portfolio-nav a#portfolio-nav3:hover,#portfolio-nav li.active a#portfolio-nav3 {

background-position:-260px -106px;

}



#portfolio-nav a#portfolio-nav4:hover,#portfolio-nav li.active a#portfolio-nav4 {

background-position:-390px -106px;

}



#portfolio-nav a#portfolio-nav5:hover,#portfolio-nav li.active a#portfolio-nav5 {

background-position:-520px -106px;

}



#portfolio-nav a#portfolio-nav6:hover,#portfolio-nav li.active a#portfolio-nav6 {

background-position:-650px -106px;

}



#portfolio-nav a#portfolio-nav7:hover,#portfolio-nav li.active a#portfolio-nav7 {

background-position:-780px -106px;

}



#portfolio-nav span.active {

display:inline-block;

position:absolute;

top:-40px;

background:transparent url('images/icon-arrow-portfolio.png') no-repeat center 0;

width:100px;

height:35px;

padding:0 1px;

}



#portfolio-nav {

position:absolute;

top:440px;

text-align:center;

}



#portfolio-nav li {

display:inline-block;

background:transparent url('images/background-image-portfolio-thumb.jpg') no-repeat center 0;

width:100px;

height:70px;

padding:0 1px;

}



#portfolio-nav a {

display:inline-block;

background:transparent url('images/image-portfolio-thumb.png') no-repeat top left;

width:80px;

height:56px;

border:none;

cursor:pointer;

margin:7px 10px;

}



.portfolio-overlay-wrap {

height:607px;

overflow-y:auto;

}



.apple_overlay {

display:none;

background-image:url(images/transparent.png);

width:780px;

height:620px;

font-size:11px;

padding:45px;

}



.apple_overlay .close {

background-image:url(images/close.png);

position:absolute;

right:15px;

top:15px;

cursor:pointer;

height:35px;

width:35px;

}



/* Gallery

-----------------------------------------------------------------------------------------------

*/

#breadcrumbs {

float:right;

text-transform:lowercase;

color:#917356;

font:bold 14px Verdana,Geneva,sans-serif;

margin:-60px 20px 0;

}



#breadcrumbs-lost {

font-weight:400;

font-size:12px;

}



#breadcrumbs-current {

background:#917356;

color:#d4c3b0;

font-weight:bolder;

padding:5px;

}



#breadcrumbs a {

color:#917356;

padding:5px;

}



#breadcrumbs a:hover,#breadcrumbs a:active {

color:#d4c3b0;

padding:5px;

}



#ngg-gallery {

width:820px;

clear:both;

position:relative;

}



.ngg-album {

width:185px;

display:inline-block;

float:left;

padding:0 10px 40px;

}



.ngg-albumtitle,.ngg-description {

text-align:center;

}



.ngg-albumtitle {

color:#086F8F;

}



.ngg-albumcontent {

background:transparent url('images/background-gallery-image.jpg') no-repeat center 0;

width:185px;

height:150px;

float:left;

}



.ngg-thumbnail img {

padding:15px 12px;

}



.ngg-description {

color:#917356;

}



.ngg-gallery-thumbnail {

background:transparent url('images/background-gallery-image.jpg') no-repeat center 0;

width:185px;

height:150px;

float:left;

padding:10px;

}



.ngg-gallery-thumbnail img {

padding:6px 12px;

}



.ngg-navigation {

clear:both;

text-align:center;

color:#917356;

font-weight:700;

position:absolute;

top:510px;

left:0;

width:820px;

}



.ngg-navigation a {

text-decoration:none;

color:#917356;

margin:2px;

padding:5px;

}



.ngg-navigation a:hover,.ngg-navigation a:active {

color:#d4c3b0;

padding:5px;

}



.ngg-navigation span {

font-weight:bolder;

background:#917356;

color:#d4c3b0;

margin:2px;

padding:5px;

}



/* scroll to top

-----------------------------------------------------------------------------------------------

*/

#topcontrol {

width:75px;

}



#topcontrol img {

vertical-align:middle;

width:11px;

height:60px;

}



#topcontrol span {

width:60px;

font:bolder 18px/20px "Note this";

color:#9D2525;

padding-top:2px;

}



/* form

-----------------------------------------------------------------------------------------------

*/

form#get-in-touch {

position:relative;

}



form#get-in-touch small {

color:#9D2525;

}



form#get-in-touch ul li {

list-style:none outside none;

}



form#get-in-touch input[type="text"],form#get-in-touch input[type="email"],form#get-in-touch textarea {

margin-top:15px;

width:200px;

border:1px solid #ddd;

color:#9D2525;

box-shadow:1px 1px 3px #000;

border-radius:5px;

padding:4px 4px 6px;

}



form#get-in-touch input[type="text"]:focus,form#get-in-touch input[type="email"]:focus,form#get-in-touch textarea:focus {

box-shadow:0px 0px 8px #9D2525;

}



form#get-in-touch textarea {

overflow-x:hidden;

height:60px;

}



form#get-in-touch .error {

background:transparent url("images/errormsg.png") no-repeat top left;

display:block;

color:#fff;

font-size:10px;

position:absolute;

left:200px;

margin-top:-40px;

width:203px;

height:50px;

}



form#get-in-touch .error span {

margin-left:35px;

line-height:45px;

text-shadow:1px 1px 1px #555;

}



form#get-in-touch .loader {

background:transparent url("images/ajax-loader.gif") no-repeat top left;

width:48px;

height:48px;

float:left;

position:absolute;

top:140px;

left:150px;

}



form#get-in-touch .success {

height:31px;

font:bold 18px "Note this";

color:#9D2525;

letter-spacing:1.5px;

text-transform:lowercase;

}



form#get-in-touch button {

display:inline-block;

color:#DCD4B8;

text-decoration:none;

box-shadow:1px 1px 3px #000;

border-radius:5px;

border:1px solid #000;

position:relative;

cursor:pointer;

background-color:#9D2525;

font-family:SoulMission;

font-size:14px;

height:30px;

margin:15px 59px 0 0;

padding:5px 10px 6px;

}



form#get-in-touch button:hover {

background-color:#5F1717;

color:#fff;

}



/* footer

-----------------------------------------------------------------------------------------------

*/

#footer {

width:100%;

margin:0 auto;

}



#footer-top {

background:#fff url('images/background-table-edge.jpg') repeat center top;

height:50px;

width:100%;

margin:0 auto;

}



#footer-content-wrap {

width:960px;

margin:0 auto;

}



#footer-content {

background:url('images/background-paper.png') no-repeat center 0;

height:334px;

padding:25px 40px 0 100px;

}



#footer-content span.footer-content-title {

font:bolder 20px "Note this";

letter-spacing:2px;

text-decoration:underline;

line-height:1;

color:#9D2525;

}



#footer-content-getintouch,#footer-content-inspirations,#footer-content-tutorials {

font-size:12px;

width:270px;

}



#footer-content ol {

margin-top:7px;

}



#footer-content-separator {

height:150px;

width:20px;

}



#footer-content ol li {

list-style-type:none;

margin-bottom:15px;

}



#footer-content ol li:before {

color:#9D2525;

content:"\00BB \0020";

font-size:12px;

}



#footer-bottom {

background:url('images/background-paper.png') no-repeat center -364px;

height:90px;

padding:55px 0 0 95px;

}



#footer-bottom-text {

font-size:9px;

color:#000;

}



#footer-bottom-text ul li {

list-style-type:none;

}



#footer-bottom-text a.footer-validator {

border:medium none;

color:#fff;

font:14px "SoulMission";

margin-right:20px;

}



#footer-bottom-text a.footer-validator:hover,#footer-bottom-text a.footer-validator.selected {

background-color:transparent;

color:#9D2525;

text-decoration:none;

}



#footer-bottom-text a.footer-compatibility-tables {

font-size:13px;
margin-right:20px;

}

#footer-bottom-text a.footer-find-me-on-facebook {

border:none;

opacity:0.8;

}

#footer-bottom-text a.footer-find-me-on-facebook:hover {

background-color:transparent;

opacity:1;

}


#footer-bottom-text a.footer-ripie6 {

border:medium none;

color:#9D2525;

font:18px "SoulMission";

margin-left:230px;

padding:5px;

}



#footer-bottom-text a.footer-ripie6:hover,#footer-bottom-text a.footer-ripie6.selected {

color:#fff;

}



#footer-toggler a {

border:none;

color:#fff;

display:block;

font:20px "SoulMission";

height:50px;

text-align:center;

width:70px;

margin:-27px 37px;

}



#footer-toggler a:hover,#footer-toggler a.selected {

background-color:transparent;

color:#9D2525;

text-decoration:none;

}