/**
 * Fleea CSS Default
 * 
 * @author  Lya Santoso
 * @version	01
 * 
 */

@import url("reset.css");

/* GENERAL BASIC TYPOGRAPHY */
body {
        font-size: 81.25%; /* 13px */
	font-family: Arial, Helvetica, sans-serif;
	line-height:1.538em;
}
h1,h2,h3,h4,h5,h6{
	font-weight:bold;
}
a:hover{
	cursor:pointer;
}
p{
	margin-bottom:1em;
}
ul p{
	margin:0;
}
h1, h2{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
h1{
	font-size:2.77em;
	line-height:1.67em;
}
h2{
	font-size:1.85em;
	line-height:1.67em;
}
h3{
	font-size:1em;
}
h4{
	font-size:0.85em;
	font-weight:normal;
}
hr{
	height:2px;
	background: url('../img/title_separator_small.png') repeat-x;
	margin-bottom:1em;
	border: none;
}
#header a, #footer a{
	background-color:transparent;
}
a{
	color:#39C;
	text-decoration:none;
	border-bottom:1px dotted #39C;
}
a:hover, a:focus{
	text-decoration:none;
	border-bottom:1px solid #39C;
}
a:focus{
	color:#ff7200;
	border-bottom:1px solid #ff7200;
}
a img{
	background-color:transparent;
}
a.highlight_background:hover{
	text-decoration:none;
	background-color:#3D6C88;
}
a.highlight_background:focus{
	text-decoration:none;
	background-color:#ff7200;
	color:white;
	border-bottom:none;
}
h1 a, h2 a, h3 a, h4 a, a.none, .footer a{
	text-decoration:none;
	border-bottom:none;
}
ul{
	margin-left:1.1em;
        margin-bottom:1em;
}
ul li{
	list-style:square
}
.footer ul, ul.menu_list{
	margin-left:0;
}
.footer ul li, ul.menu_list li{
	list-style:none;
}
.footer h3{
	color:#d3d5d7;
	margin:1em 0;
}

table{
    background-color:#eee;
    width:100%;
}
table td{
    border-bottom:1px solid #fff;
    border-right:1px solid #fff;
    padding:0.5em;
}

/* Text */
.text_right{
	text-align:right
}
.text_center{
	text-align:center
}
.code{
	margin-left:2em;
}
strong{
	font-weight:bold;
}

/* form */
form, textarea{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
}
.text{
	border:1px solid #39c;
	color:#3d6c88;
	background-color:#e8f7ff;
}
input.text{
	width:22em; /* smaller than .part */
}
.submit{
	background-color:#39c;
	color:#fff;
	border:2px solid #39c;
}
.footer .submit{
	background-color:#838586;
	border:2px solid #838586;
}
.footer .text{
	border:1px solid #000;
	color:#000;
	background-color:#b8b9ba;
}
.error_form, .footer .error_form{
        background-color:#FBE3E4;
        border:1px solid #FBC2C4;
        color:#8A1F11;
}
label.error_form, .footer label.error_form{
        background-color:transparent;
        border:none;
        color:#FBE3E4;
}
label.error_form{
        color:#8A1F11;
        background-color:#FBE3E4;
}

/* grid */

.wrapper{
	width:72.3em;
	margin:0 auto;
}
.wrapper_content{
	width:84.61em;
	margin:0 auto;
	position:relative;
}

/* Typography */
.highlight{
	font-weight:bold;
	color:#39c;
}
.highlight_background{
	background-color:#39c;
	color:#fff;
	padding:0 3px
}
h4{
	margin-bottom:1.538em;
}
h3 .sub{
	display:block;
	font-size:0.85em;
	line-height:1em;
	margin-bottom:0.61em;
	font-weight:normal;
}

/* HEADER */
#header{
	height:auto !important;
	min-height : 4.69em;
	height : 4.69em;
}
#header{
	background:transparent url('../img/header_background.png') repeat-x scroll left bottom;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom:2.08em;
        min-width:100%;
	padding:0
}
#header h2{
	font-size:1.38em;
	font-weight:bold;
}
ul.menu{
	display:inline-block;
}
ul.menu li{
	display:inline;
	list-style-type:none;
}

/* Top Link */
ul#top_link{
	float:right;
	font-size:0.77em;
	font-family: verdana, Arial, Helvetica, sans-serif;
	color:white;
	display:none;
}
ul#top_link li{
	/* border-right:1px solid #38a4da; */
	padding:0 1em;
}
ul#top_link li a{
	color:#71d0ff;
}
ul#top_link li a:hover{
	text-decoration:none;
}
ul#top_link li ul{ /* Todo : Make Javascript Injection for drop down menu in the change theme functionality */
	display:none;
}

/* Menu */
#menu{
	float:right;
	clear:right;
}
.menu a{
	color:#fff;
	line-height:2.9em;
	display:inline-block;
	text-align:center;
	width:auto !important;
	min-width:5em;
	width:5em;
}
#menu a{
	background: transparent url('../img/vertical_separator.png') repeat-y scroll left top;
	padding:0 1em;
}
#menu a:hover, #menu a:focus, #menu li.active{
	background: #000 url('../img/vertical_separator.png') no-repeat scroll left top;
	border:none;
}
#menu li.active span{
	background: #000 url('../img/arrow_up_menu.png') no-repeat scroll bottom center;
}
.menu li{
	float:left;
}
.menu li.last{
	margin-right:0;
}

/* CONTENT */
.title{
	text-align:center;
	margin-bottom:1.58em;
}
.title h2{
	line-height:0.83em;
}
.title_separator{
	line-height:1.58em;
}


/* FOOTER */
html,body, #wrapper{
	height:100%;width:100%;
}
#wrapper{
	position:relative;
	min-height:100%;
	height:auto !important;
	height:100%;
	width:100%;
}
#footer{
	bottom:0;
	color:#fff;
	position:absolute;
	width:100%;
	font-family: Arial, Helvetica, sans-serif;
	background:#000 url(../img/footer_big_bg.jpg) repeat-x scroll left top;
	color:#a5aaad;
}
#footer a{
	color:#a5aaad;
}
#footer a:hover{
	text-decoration:underline;
}
#footer .bottom{
	background:transparent url(../img/footer_bg.jpg) repeat-x scroll left top;
	height:4.6em;
	line-height:4.6em;
	margin-top:1em;
	position:absolute;
	width:100%;
	bottom:0;
}
.bottom p{
	font-size:0.92em;
	margin-bottom:0;
}
#menu_special{
	width:8.46em;
	height:1.92em;
	background: url('../img/menu_special_background.png') no-repeat;
	padding:0.4em 1.1em 0.6em;
	display:block;
}
a#menu_special{
	color:#39c;
	font-weight:bold
}
a#menu_special:hover{
	text-decoration:none;
}
.arrow{
	position:relative;
	top:-0.2em;
	margin-right:0.5em;
}
.footer{
	height:auto !important;
	min-height : 30em;
	height : 30em;
}
.footer_margin{
	margin-top:3em;
}
.media{
    margin-top:1em;
}
.media a{
    width:32px;
    height:32px;
    display:block;
    float:left;
    margin-left:1em;
}
.media a:hover{
    background-position: 0 -32px;
}
.media .facebook{
    background: url('/img/media/facebook.png') no-repeat;
}
.media .linkedin{
    background: url('/img/media/linkedin.png') no-repeat;
}
.media .delicious{
    background: url('/img/media/delicious.png') no-repeat;
}
/* interactive */
.arrow_slideshow{
	margin-top:5.28em;
}

#screen{
	width:84.61em; /* wrapper_content */
}
ul#screen, ul#screen ul{
	margin:0;padding:0;
}	
	#screen li{
		float:left;
		list-style:none;
		padding:0;
	}
	#screen .jq-ss-crop{
		float:left;				
	}
	#screen a{
		background-color:transparent
	}
	#view{
		width:72.3em; /* wrapper */
		overflow:hidden;
	}
		#images{
			width:3818px !important;
			width:3822px;
		}
	#left, #right{
		background-color:transparent;
		display:inline-block;
		width:6em;
	}
	
/* tool tip */

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }

/* tooltip styling */ 
#logo_tip {
	position:absolute;
	display:none;
        background:url(../img/logo_bg.png); 
        height:207px; 
        width:176px;
        color:#fff; 
	text-align:center;
        z-index:3;
}


/* CONTACT PAGE */
#contact #flowtabs h2{
	display:inline-block;
}
#flowtabs a{
	display:block;
	padding:0.2em 1em;
	color:#000;
	background-color:#f2f2f2
}
#flowtabs a:hover, #flowtabs a:focus{
	border:none;
	background-color:#f2f2f2
}
#contact #flowtabs .current{
	background-color:#e8f7ff;
}
.contact_form{
	background-color:#e8f7ff;
}
.contact_form input.text, .contact_form textarea{
	background-color:#fff;
}
.contact_form input.text{
	width:30em;
}
.contact_form label{
	font-weight:bold;
}
.contact_form .contact_inside{
	margin:0 2em;
}
.mail{
	margin-top:1em;
}
#contact_small p{
    margin-bottom:0.5em;
}

/* shadow */
.shadow_left{
	background : url('../img/shadow_img_left.png') repeat-y top left;
	padding-left:4px;
	position:relative;
}
.shadow_right{
	background : url('../img/shadow_img_right.png') repeat-y top right;
	padding-right:4px;
}
.shadow_top{
	background : url('../img/shadow_img_top.png') repeat-x top left;
	padding-top:4px;
}
.shadow_bottom{
	background : url('../img/shadow_img_bottom.png') repeat-x bottom left;
	padding-bottom:4px;
}
.shadow_topleft, .shadow_topright, .shadow_bottomleft, .shadow_bottomright{
	position:absolute;
	height:4px;
	width:4px;
}
.shadow_topleft{
	background : url('../img/shadow_img_topleft.png') no-repeat top left;
	top:0;
	left:0;
}
.shadow_topright{
	background : url('../img/shadow_img_topright.png') no-repeat top right;
	top:0;
	right:0;
}
.shadow_bottomleft{
	background : url('../img/shadow_img_bottomleft.png') no-repeat bottom left;
	bottom:0;
	left:0;
}
.shadow_bottomright{
	background : url('../img/shadow_img_bottomright.png') no-repeat bottom right;
	bottom:0;
	right:0;
}
.portfolio_banner{
	position:absolute;
	top:0;
	left:0;
	background : url('../img/portfolio_banner.png') no-repeat bottom right;
	height:105px;
	width:105px;
	z-index:2;
}
.img_portfolio{
	top:0;
	left:0;
}
.portfolio_single{
	background : #25333b url('../img/portfolio_background.jpg') repeat-x;
        position:relative;
        padding: 1em 0;
}
.portfolio_single_image{
    margin: 1px 0 1px 23.538em;
}
.portfolio_desc{
    width:21em;
    float:left;
    margin-right:1.538em;
    color:#fff;
    position:absolute;
    bottom:1em;
    left:0;
    margin-left:1em;
}
.portfolio_desc h3.highlight{
    text-transform: uppercase;
    font-weight:bold;
    font-size:1.07em;
}
.portfolio_desc p{
    font-size:0.85em;
    color:#999;
}
#portfolio_snapshot{ 
    position:relative; 
    overflow:hidden; 
    clear:both;
    height:470px;
}

#portfolio_full{
    position:relative; 
    overflow:hidden; 
    clear:both;
}
 
/* override single pane */ 
#portfolio_snapshot .item, #portfolio_full .item { 
    float:left; 
    display:block; 
    cursor:pointer;
    margin-right:1px;
} 
 
/* our additional wrapper element for the items */ 
#portfolio_snapshot .items, #portfolio_full .items { 
    width:20000em; 
    clear:both; 
    margin:0; 
    padding:0;
}
#portfolio_snapshot .items{
    position:absolute;
}

#portfolio_full{
}

.portfolio_snapshot{
	border:10px solid #24323a;
	margin-right:1.538em;
}
#portfolio .portfolio_snapshot{
	border:2px solid #24323a;
}
.portfolio_single_link{
    text-align:center;
    padding:1.5em;
}
.portfolio_single_link p{
    display:inline-block;
    margin:0 auto;
    text-align:center;
}
.portfolio_single_link a{
    width:1em;
    height:1em;
    display:block;
    background-color:#e8f7ff;
    float:left;
    margin:0.2em;
    border:none;
}
.portfolio_single_link a.current, .portfolio_single_link a:hover{
    background-color:#3d6c88;
    border:none;
}
.portfolio_single_link a:focus{
    background-color:#ff7200;
}

.portfolio_image_home{
    max-height:462px;
    overflow:hidden;
}
#portfolio_snapshot .portfolio_img{
    margin-bottom:-5px;
}
#expandall{
	min-height:1em;
}

/* prev-Next button */
p.subtitle{
	position:relative;
	line-height:2.2em;
	margin-top:1em;
}
.prev_next{
	position:absolute;
	left:0;
}
.prev, .next{
	width:76px;
	height:28px;
	background:url('../img/prev_next_button.png') no-repeat;
	display:inline-block;
	margin:0;
	color:#ccc;
}
a.prev:hover , a.next:hover{
	color:#39c;
	background:url('../img/prev_next_button_hover.png') no-repeat;
}
.prev, .next, a.prev:hover, a.next:hover, a.prev:focus, a.next:focus{
	border:none;
}
.next, a.next:hover{
	background-position:right;
}

/* prev/next button for portfolio_full */
a#prev, a#next{
	margin-top:25em;
	display:block;
	width:43px;
	height:73px;
	position:absolute;
	border:none;
}
#prev{
	background: url('../img/left_arrow.png') no-repeat;
	left:0
}
#next{
	background: url('../img/right_arrow.png') no-repeat;
	right:0;
}
.navi{
    display:none;
}
/* blog_snapshot */
.current a, a.current{
	color:black;
	cursor:default;
	border:none;
}

/* article, blog */
.comment{
	padding:1em 0;
	border-top:1px dotted #999;
}
.comments{
	border-bottom:1px dotted #999;
        margin:2em 0;
}

/* grid */
.part, .two_part, .three_part{
	margin-right:1.538em;
	float:left;
}
.part{
	width:23.07em; /* 11x20px */
}
.two_part{
	width:47.68em;
}
.three_part{
	width:82em;
}
.three_part p{
	margin-bottom:1.5em;
}
.first{
	margin-left:0;
}
.last{
	margin-right:0;
}
.bottom{
	bottom:0;
}
.row{
	padding-top:3.07em;
}
.none{
    display:none;
}
.clear{
	clear:both;
}
.clearleft{
	clear:left;
}
.left{
	float:left;
}
.right{
	float:right;
}
.absolute{
	position:absolute;
}
.relative{
	position:relative;
}
.warning{
	padding:1em;
	text-align:center;
	background-color:#FFF6BF;
	border:1px solid #FFD324;
}
.minleft{
	margin-left:-4px;
}
.center{
    text-align:center;
}
a.readmore{
    background-color:#E8F7FF;
    padding:0.5em 0.7em;
    border:none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px
}
a.readmore:hover{
    color:#ff7200;
    background-color:#ffead9;
}

/* SERVICE */
/* tool */
#tip{
    display:none;
    background:#FFF6BF;
    border:1px solid #FFD324;
    padding:5px;
}
#tool a {
   background: url('../img/tools.png') no-repeat top left;
   float:left;
   width:3em;
   height:2em;
   border:none;
}
#tool .tools-comment:hover { background-position: 0 0; } 
#tool .tools-comment { background-position: 0 -65px; } 
#tool .tools-delicious:hover { background-position: 0 -195px; } 
#tool .tools-delicious { background-position: 0 -130px; } 
#tool .tools-facebook:hover { background-position: 0 -260px; } 
#tool .tools-facebook { background-position: 0 -325px; } 
#tool .tools-linkedin:hover { background-position: 0 -455px; } 
#tool .tools-linkedin { background-position: 0 -390px; } 
#tool .tools-phone:hover { background-position: 0 -583px; } 
#tool .tools-phone { background-position: 0 -520px; } 


/* enhancement */
::selection {
	background: #3FBAF4;  /* Safari */
        color:#fff;
	}
::-moz-selection {
	background: #3FBAF4;  /* Firefox */
        color:#fff;
}