@import url(reset.css);
@import url(tipTip.css);
@import url(fancybox/jquery.fancybox-1.3.4.css);


/************************************************************************
 MAIN STYLE
************************************************************************/

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height: 1.5;
	color:#a88d2a;
	background: url(images/bg.jpg) center top repeat #90c1be;
	height: 100%;
}
a,a:visited,a:hover{
    text-decoration: none;
    color: #ea624e;
}
a:active{
    position: relative;
	top: 2px;
}
h1,h2,h3,h4,h5,h6{
	font-family: 'Rokkitt', Arial, Verdana, Helvetica, sans-serif;
}

::-moz-selection {
	color: #fff;
	color: rgba(255,255,255,.85);
	background: #ea624e;
}
::selection {
	color: #fff;
	color: rgba(255,255,255,.85);
	background: #ea624e;
}
/************************************************************************
 TOP
************************************************************************/
.top_wrapper{
	width: 100%;
	float: left;
	clear: both;
}
.top_inner{
	width: 960px;
	margin: 0 auto;
	padding: 45px 0;
}


/************************************************************************
 LOGO
************************************************************************/
.logo{
	width: 381px;
	height: 171px;
	margin: 0 auto;
}


/************************************************************************
 MAIN
************************************************************************/
.main{
	width: 100%;
	float: left;
	clear: both;
}
.main_inner{
	width: 940px;
	padding: 10px;
	margin: 0 auto;
	background: url(images/body_bg.gif) left top repeat #f5e8bb;
	border: 1px solid #7cb3b1;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	overflow: auto;
	overflow-x: hidden;
	behavior: url(images/PIE.htc);
}


/************************************************************************
 MENU
************************************************************************/
.menu{
	width: 944px;
	height: 49px;
	float: left;
	clear: both;
	background: url(images/menu_bg.png) left top no-repeat;
	margin-left: -2px;
}
.menu ul{
    float:left;
    height:29px;
    padding:10px;
}
.menu ul > li{
    float:left;
    color:#fff;
    margin:5px 0 0 27px;
    height:46px;
}
.menu ul > li:first-child{
    margin-left:5px;
}
.menu ul > li a{
    float:left;
    color:#fff;
    display:block;
}
.menu ul > li a.menu_home,.menu ul > li a.menu_home:visited{
    width:70px;
    height:19px;
    text-indent: -9999px;
    background:url(images/menu_home.png) left top no-repeat;
}
.menu ul > li a.menu_home:hover,.menu ul > li a.menu_home:active{
    background:url(images/menu_home.png) left bottom no-repeat;
}
.menu ul > li.current_menu_item a.menu_home{
    background:url(images/menu_home.png) left bottom no-repeat;
}
.menu ul > li a.menu_about,.menu ul > li a.menu_about:visited{
    width:73px;
    height:20px;
    text-indent: -9999px;
    background:url(images/menu_about.png) left top no-repeat;
}
.menu ul > li a.menu_about:hover,.menu ul > li a.menu_about:active{
    background:url(images/menu_about.png) left bottom no-repeat;
}
.menu ul > li.current_menu_item a.menu_about{
    background:url(images/menu_about.png) left bottom no-repeat;
}
.menu ul > li a.menu_portfolio,.menu ul > li a.menu_portfolio:visited{
    width:105px;
    height:19px;
    text-indent: -9999px;
    background:url(images/menu_portfolio.png) left top no-repeat;
}
.menu ul > li a.menu_portfolio:hover,.menu ul > li a.menu_portfolio:active{
    background:url(images/menu_portfolio.png) left bottom no-repeat;
}
.menu ul > li.current_menu_item a.menu_portfolio{
    background:url(images/menu_portfolio.png) left bottom no-repeat;
}
.menu ul > li a.menu_blog,.menu ul > li a.menu_blog:visited{
    width:59px;
    height:23px;
    text-indent: -9999px;
    background:url(images/menu_blog.png) left top no-repeat;
}
.menu ul > li a.menu_blog:hover,.menu ul > li a.menu_blog:active{
    background:url(images/menu_blog.png) left bottom no-repeat;
}
.menu ul > li.current_menu_item a.menu_blog{
    background:url(images/menu_blog.png) left bottom no-repeat;
}
.menu ul > li a.menu_contact,.menu ul > li a.menu_contact:visited{
    width:86px;
    height:20px;
    text-indent: -9999px;
    background:url(images/menu_contact.png) left top no-repeat;
}
.menu ul > li a.menu_contact:hover,.menu ul > li a.menu_contact:active{
    background:url(images/menu_contact.png) left bottom no-repeat;
}
.menu ul > li.current_menu_item a.menu_contact{
    background:url(images/menu_contact.png) left bottom no-repeat;
}

/************************************************************************
 CONTENT
************************************************************************/
.content{
	width: 940px;
	min-height:300px;
	float: left;
	clear: both;
}

/************************************************************************
 HELLO
************************************************************************/
.hello{
	width: 920px;
	float: left;
	clear: both;
	margin-top: 40px;
	padding: 0 0 0px 0;
	margin-left: 10px;
	text-align: center;
}
.hello img{
	margin-bottom: 30px;
}
.hello h1{
	font-size:50px;
	color: #ea624e;
	text-shadow: 1px 1px 0px #a42f1e;
}
.hello h2{
	margin-top: 10px;
	font-size:37px;
	line-height: 1.2;
	color: #baa867;
	text-shadow:1px 1px 0px #8c7a3d;
}

.read_more{
    display:inline-block;
    margin-top:4px;
    font-size:11px;
    font-weight:bold;
    padding-right: 20px;
    background: url(images/arrow.png) right 1px no-repeat;
}
.read_more:hover{
	-moz-opacity:0.7;
	opacity:0.7;
}

/************************************************************************
 RECENT WORK
************************************************************************/
.recent_work{
	width: 920px;
	float: left;
	clear: both;
	padding: 0 0 0 0;
	margin: 50px 0 0 10px;
	text-align: center;
}
.recent_work ul{
	list-style-type: none;
	float: left;
	clear: both;
	width: 920px;
	margin-top:50px;
}
.recent_work ul li{
	float: left;
	width: 215px;
	height: 100px;
	margin-left: 20px;
	margin-bottom: 20px;
}
.recent_work ul li:first-child{
	margin-left: -2px;
}
.fancybox_title_link{
	display: inline-block;
	padding: 2px 8px;
	background: #000;
	background: rgba(0, 0, 0, .8);
	border: 3px solid #fff;
	-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, .3);
	box-shadow: 0px 0px 4px rgba(0, 0, 0, .3);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 20px;
	color: #fff;
	font-weight: bold;
}
a.fancybox_title_link,a.fancybox_title_link:visited, a.fancybox_title_link:hover, a.fancybox_title_link:active{
	color: #fff;
	font-weight: bold;
}

/************************************************************************
 CONTACT ME HOME
************************************************************************/
.contact_me{
	width: 920px;
	float: left;
	clear: both;
	padding: 0;
	margin: 55px 0 0 10px;
	text-align: center;
	text-shadow:1px 1px 0px #FFF1E5;
}
.contact_me .box{
	width: 290px;
	float: left;
	text-align: left;
	margin: 50px 0 0 20px;
}
.contact_me .first_box{
	margin-left: 3px;
}
.contact_me h3{
	font-size:31px;
	line-height: 32px;
	color: #ea624e;
	text-shadow: 1px 1px 0px #a42f1e;
}
.contact_me p{
	font-size:14px;
	margin: 15px 0;
}
.contact_me .quote,.contact_me .quote:visited{
	display: inline-block;
	width:214px;
	height: 44px;
	text-indent: -9999px;
	margin-left: -2px;
	background: url(images/quote.png) left top no-repeat;
}
.contact_me .quote:hover,.contact_me .quote:active{
	background: url(images/quote.png) left bottom no-repeat;
}
.contact_me .tweets{
    float: left;
    clear:both;
    width: 290px;
    margin: 15px 0 0 0;
    
}
.contact_me .tweets li{
    float: left;
    clear:both;
    width: 270px;
    padding: 10px;
    padding-bottom: 8px;
    margin: 10px 0 0 0;
    background: rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, 0.02);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 1px 1px 0px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, .2);
    box-shadow: 1px 1px 0px rgba(0, 0, 0, .2);
    behavior: url(images/PIE.htc);
}
.contact_me .tweets li:first-child{
    margin-top:0;
}
.contact_me .tweets li a{
    font-size:11px;
}
.contact_me .tweets li a.tweet_date{
	float: right;
	margin-top:4px;
}

/************************************************************************
 SOCIAL ICONS
************************************************************************/
.social_icons a{
	display: inline-block;
	width: 34px;
	height: 34px;
	margin-right:2px; 
	text-indent: -9999px;
}
.social_icons a.twitter_icon,.social_icons a.twitter_icon:visited{
	background: url(images/twitter_icon.png) left bottom no-repeat;
}
.social_icons a.twitter_icon:hover,.social_icons a.twitter_icon:active{
	background: url(images/twitter_icon.png) left top no-repeat;
}
.social_icons a.facebook_icon,.social_icons a.facebook_icon:visited{
	background: url(images/facebook_icon.png) left bottom no-repeat;
}
.social_icons a.facebook_icon:hover,.social_icons a.facebook_icon:active{
	background: url(images/facebook_icon.png) left top no-repeat;
}
.social_icons a.dribbble_icon,.social_icons a.dribbble_icon:visited{
	background: url(images/dribbble_icon.png) left bottom no-repeat;
}
.social_icons a.dribbble_icon:hover,.social_icons a.dribbble_icon:active{
	background: url(images/dribbble_icon.png) left top no-repeat;
}
.social_icons a.forrst_icon,.social_icons a.forrst_icon:visited{
	background: url(images/forrst_icon.png) left bottom no-repeat;
}
.social_icons a.forrst_icon:hover,.social_icons a.forrst_icon:active{
	background: url(images/forrst_icon.png) left top no-repeat;
}
.social_icons a.flickr_icon,.social_icons a.flickr_icon:visited{
	background: url(images/flickr_icon.png) left bottom no-repeat;
}
.social_icons a.flickr_icon:hover,.social_icons a.flickr_icon:active{
	background: url(images/flickr_icon.png) left top no-repeat;
}



/************************************************************************
 THATS ALL
************************************************************************/
.thats_all{	
	width: 920px;
	float: left;
	clear: both;
	padding: 0;
	margin: 65px 0 0 10px;
	text-align: center;
}
.thats_all a,.thats_all a:visited{
	display: inline-block;
	width: 700px;
	height: 40px;
	background: url(images/title_thats_all.png) left top no-repeat;
}
.thats_all a:hover,.thats_all a:active{
	background: url(images/title_thats_all.png) left bottom no-repeat;
}

/************************************************************************
 CLEARER
************************************************************************/
.clearer{
	width: 920px;
	height: 50px;
	float: left;
	clear: both;
	padding: 0;
	margin: 0;
}

/************************************************************************
 FOOTER
************************************************************************/
.footer_wrapper{
	width: 100%;
	float: left;
	clear: both;
}
.footer_inner{
	width: 960px;
	margin: 0 auto;
	padding: 20px 0;
	text-align: center;
	color: #468f8e;
	text-shadow: 1px 1px 0px #a6dddc;
	
}