/* www.visarulaj.com MAIN CSS */


/* MAIN LAYOUT ************************************/

body {
	margin: 40px 0px;
	background-image: url(../images/body.gif);
	FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
	FONT-SIZE: 10px;
	color: #000;
	}

div.center {
	text-align: center; /* Container to the centered layout */
	}

#main {
	text-align: left;
	width: 770px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF;
	border: solid 1px #9fa3a6;
	padding-bottom: 40px;
	height: 600px
	}

/* Fix div height that does'nt work on mosilla */
html>body #main {
	height: auto;
	min-height: 600px; /*Value for other browsers*/
	}
html>body #main:after {
    CONTENT: "."; 
    DISPLAY: block; 
    HEIGHT: 0;
    CLEAR: both; 
    VISIBILITY: hidden;
	}
html>body #main { 
	DISPLAY: inline-table;
	}

/* Hides from IE-mac \*/
* html>body  #main {HEIGHT: 1%;}
html>body #main {DISPLAY: block;}
/* End hide from IE-mac */


p {text-align: left;}

a:link, a:visited, a:active {
	text-decoration: none;
	color: #cc0000;
	}

a:hover{
	text-decoration: none;
	}

img.icon {
	margin: 0px 6px 0px 20px;
	border: none;
	}


/* TOP *******************************************/

#top{
	width: 625px;
	height: 200px;
	}
	
.left {
	float: left;
	width: 345px;
	}
	html>body .left {
	width: 343px; /*Value for other browsers*/
	}
	
.logo {
	margin: 35px 0px 25px 45px;
	}

h1 {
	FONT-SIZE: 11px; FONT-WEIGHT: bold;
	FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
	PADDING: 14px 0px 3px 45px;
	MARGIN: 0px;
	TEXT-ALIGN: left;
	COLOR: #FFF;
	}

.left p {
	MARGIN: 14px 10px 0px 45px;
	FONT-SIZE: 10px;
	FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
	}
	
.right {
	float: right;
	border: solid #eff2f3;
	border-width: 0px 1px 1px 1px;
	background-color: #FFF;
	height: 180px;
	width: 280px;
	margin: 0px;
	}


/* Sidebar Navigation *************************************/

#sidebar {
	float: right;
	margin-top: 35px;
	width:105px;
	}

#sidebar ul {	
	LIST-STYLE-TYPE: none;
	MARGIN: 0px; PADDING: 0px;
	}

#sidebar ul li {
	BORDER: solid #9fa3a6; BORDER-WIDTH: 1px 0px 1px 1px;
	MARGIN-BOTTOM: 5px;
	PADDING: 0px;
	HEIGHT: 26px;
	}

#sidebar ul li.home {
	background: url(../images/nav_home_bg.gif) right repeat-y;
	}
#sidebar ul li.web {
	background: url(../images/nav_web_bg.gif) right repeat-y;
	}
#sidebar ul li.design {
	background: url(../images/nav_design_bg.gif) right repeat-y;
	}
#sidebar ul li.illus {
	background: url(../images/nav_illus_bg.gif) right repeat-y;
	}
	
#sidebar ul li a:link, #sidebar ul li a:visited, #sidebar ul li a:active {
	DISPLAY: block;
	COLOR: black;
	PADDING: 10px 5px 4px 5px;
	FONT-SIZE: 10px; FONT-WEIGHT: bold;
	FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
	BACKGROUND-COLOR: transparent; 
	TEXT-DECORATION: none;
	WIDTH: 100%; /*First WinIE value*/
	MARGIN: 0px !important
	}
	.main_web>#sidebar ul li a, .main_home>#sidebar ul li a , .main_design>#sidebar ul li a,  .main_illus>#sidebar ul li a {
	WIDTH: auto; /*Value for other browsers*/
	}

#sidebar ul li.home a.selected {BACKGROUND-COLOR: #9FA3A6; COLOR: white;}
#sidebar ul li.web a.selected {BACKGROUND-COLOR: #4ba338; COLOR: white;}
#sidebar ul li.design a.selected {BACKGROUND-COLOR: #b0332b; COLOR: white;}
#sidebar ul li.illus a.selected {BACKGROUND-COLOR: #b0992b; COLOR: white;}

#sidebar ul li a:hover { COLOR: white; }
#sidebar ul li.home a:hover {background: #B2B5B8 url(../images/nav_home_bg.gif) right repeat-y;}
#sidebar ul li.web a:hover {background: #6FB560 url(../images/nav_web_bg.gif) right repeat-y;}
#sidebar ul li.design a:hover {BACKGROUND: #C05C55 url(../images/nav_design_bg.gif) right repeat-y;}
#sidebar ul li.illus a:hover {BACKGROUND: #C0AD55 url(../images/nav_illus_bg.gif) right repeat-y;}

#t_shirt {float: right; margin: 8px;}



/* CONTET *******************************************/
#content {
	width:600px;
	margin-left: 45px;
	padding: 0px;
	clear: left;
	}
.main_home #content {
	clear: both;
	}
	
	

/* THUMBS list */

#content a.thumb{
width: 90px;
float: left;
text-decoration: none;
margin-right: 7px;
margin-top: 20px; 
padding: 0px;
}
#content a.thumb:link, #content a.thumb:visited, #content a.thumb:active{
border: solid 1px white;
}

#content a.thumb img{
BORDER: 1px solid #666666;
float: left;
width:80px;
height: 60px;
margin:4px;
}

#content a.thumb span{
width: 82px;
display: block;
font-size: 9px;
color: white;
margin: 0px;
margin-left: 4px;
padding: 1px 2px;
clear: left;
}
html>body #content a.thumb span {
	width: 78px; /*Value for other browsers*/
	}


/* HOME THEME */
.main_home #content a.thumb:hover {border: solid 1px #9fa3a6; cursor: hand; }
.main_home #content a.thumb span {background-color: #9fa3a6;}

.main_home #top h1{BACKGROUND-COLOR: #9fa3a6;}
.main_home #top .right {
	background: url(../images/right_home_bg.gif) no-repeat;
	background-position: 0px 31px;
	}
	html>body .main_home #top .right {
	background-position: 0px 29px; /*Value for other browsers*/
	}

.main_home #top{
	height: 200px;
	}

.main_home .right {
	height: 174px;
	}

.main_home .info_box {
	BORDER: solid 1px #e7e8e9;
	float: right;
	height: auto;
	width: 280px;
	margin: 6px 0px 5px 0px;
	BACKGROUND: url(../images/nav_info_bg.gif) repeat-y;;
	}
.main_home .info_box p {
	margin: 5px 15px 5px 35px;
	}

.mail_form {
	MARGIN: 0px;
	PADDING: 0px;
	}

p.info_box_form {
	PADDING-TOP: 0px;
	}
p.info_box_form label {
	WIDTH: 50px;
	MARGIN-TOP: 5px;
	FLOAT: left;
	}
p.info_box_form input {
	width: 170px;
	FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
	FONT-SIZE: 10px;
	MARGIN-TOP: 2px;
	COLOR: #009900;
	BORDER: solid 1px #9fa3a6;
	}
p.info_box_form input.btn {
	width: 60px;
	FLOAT:	right;
	FONT-SIZE: 10px;
	COLOR: black;
	MARGIN: 3px 5px 3px 0px;
	}
p.info_box_form textarea {
	width: 220px;
	FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
	FONT-SIZE: 10px;
	HEIGHT: 80px;
	COLOR: #009900;
	}

img.box_arrow {
	MARGIN: 0px 15px 0px -30px;
	BORDER: none;
	}
img.box_arrow_up {
	MARGIN-LEFT: -30px;
	BORDER: none;
	}

p.info_box_form_closed {
	DISPLAY: none;
	}


/* HOME PORTLAITS */

.main_home #content div { /*Container*/
	width: 180px;
	float: left;
	margin-right: 20px;
	margin-top: 60px;
	padding: 0px;
	}
html>body .main_home #content div {
	width: 180px; /*Value for other browsers*/
	}

.main_home #content div h3{ /*Portlait Head*/
	display: block;
	font-size: 10px;
	color: white;
	margin: 0px;
	padding: 1px 5px 2px 5px;
	}

.main_home #content div div.portlait_content { /*Portlait Content*/
	height: 230px;
	margin: 0px; padding: 0px;
	BORDER: solid #9fa3a6; BORDER-WIDTH: 0px 1px 0px 1px;
	}
html>body .main_home #content div div.portlait_content{
	width: 178px; /*To compensate the border inside*/
	}
.main_home #content div div.portlait_content img{
	BORDER: 1px solid #666666;
	margin: 6px;
	}
.main_home #content div div.portlait_content h4{
	font-size: 12px;
	margin: 6px 6px 4px 6px;
	display: block;
	}
.main_home #content div div.portlait_content p{
	margin: 5px 6px 0px 6px;
	}

.main_home #content div div.portlait_foot {/*Portlait Foot*/
	margin: 0px; padding: 0px;
	background: url(../images/portlait_foot_bg.gif) repeat-x;
	}
.main_home #content div div.portlait_foot a { 
	font-size: 9px;
	float: right;
	text-align: right;
	width: 70px;
	display: block;
	BORDER-RIGHT: solid 1px #9fa3a6;
	background: white url(../images/portlait_foot_tab.gif) bottom left no-repeat;
	PADDING: 0px 6px 2px 0px;
	}
html>body .main_home #content div div.portlait_foot a {
	width: 64px; /*Value for other browsers*/
	}

.main_home #content div.portlait-web h3 {background-color: #4ba338;}  /*Portlait Themes*/
.main_home #content div.portlait-web h4 {color: #4ba338;}

.main_home #content div.portlait-design h3 {background-color: #b0332b;}
.main_home #content div.portlait-design h4 {color: #b0332b;}

.main_home #content div.portlait-illus h3 {background-color: #b0992b;}
.main_home #content div.portlait-illus h4 {color: #b0992b;}



/* WEB THEME */
.main_web #content a.thumb:hover {border: solid 1px #4ba338; cursor: hand;}
.main_web #content a.thumb span {background-color: #4ba338;}

.main_web #top h1 {BACKGROUND-COLOR: #4ba338;}
.main_web #top .right {
	background: url(../images/right_web_bg.gif) no-repeat;
	background-position: 0px 31px;
	}
	html>body .main_web #top .right {
	background-position: 0px 29px; /*Value for other browsers*/
	}

/* DESIGN THEME */
.main_design #content a.thumb:hover {border: solid 1px #b0332b; cursor: hand;}
.main_design #content a.thumb span {background-color: #b0332b;}

.main_design #top h1{BACKGROUND-COLOR: #b0332b;}
.main_design #top .right {
	background: url(../images/right_design_bg.gif) no-repeat;
	background-position: 0px 31px;
	}
	html>body .main_design #top .right {
	background-position: 0px 29px; /*Value for other browsers*/
	}

/* ILLUSTRATION THEME */
.main_illus #content a.thumb:hover {border: solid 1px #b0992b; cursor: hand;}
.main_illus #content a.thumb span {background-color: #b0992b;}

.main_illus #top h1{BACKGROUND-COLOR: #b0992b;}
.main_illus #top .right {
	background: url(../images/right_illus_bg.gif) no-repeat;
	background-position: 0px 31px;
	}
	html>body .main_illus #top .right {
	background-position: 0px 29px; /*Value for other browsers*/
	}

/* DETAILS - PORTFOLIO ITEM */

#details {
	margin: 3px 0px 10px 0px;
	background: #eff2f3 url(../images/details_bg.gif) repeat-y;
	padding: 5px 10px;
	clear: left;
	}

/* Clearfix */
#details:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
#details { display: inline-block; }
/* Hides from IE-mac \*/
* html #details {height: 1%;}
#details {display: block;}
/* End hide from IE-mac */

#details p.details_left, #details p.details_right {
	display: block;
	margin: 0px; padding: 0px;
	FONT-SIZE: 9px;
	FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
	}

#details p.details_left {
	width: 280px;
	float: left;
	margin-left: 21px;
	}
	#details >p.details_left {
	margin-left: 43px; /*Value for other browsers*/
	width: 276px;
	}

#details p.details_right {
	width: 263px;
	float: right;
	}

.right_item {
	float: right;
	border: solid #eff2f3;
	border-width: 0px 1px 1px 1px;
	background-color: #FFF;
	height: 110px;
	width: 280px;
	margin: 0px;
	background: url(../images/right_tool_bg.gif) repeat-x;
	background-position: 0px 80px;
	}
	html>body .right_item {
	background-position: 0px 78px; /*Value for other browsers*/
	height: 107px;
	width: 279px;
	}


#details label {
	font-weight: bold;
	padding-right: 2px;
	}

#content .portfolio_item, #content .portfolio_item_border {
	padding: 20px 0px;
	text-align: center;
	margin: none !important
	}
#content .portfolio_item_border {
	border: solid #eff2f3;
	border-width: 1px;
	}

#content .portfolio_item img {
	border: none;
	margin-bottom: 10px;
	}

#content .portfolio_item img.border {
	border: solid #CCCCCC 1px;
	}

/* TOOLBAR */

.tool_left, .tool_right {
	width: 46%;
	margin: 87px 0px 0px 0px;
	}

.tool_left {
	float: left;
	}
.tool_right {
	float: right;
	text-align: right;
	}

.tool_left a:link, .tool_left a:visited, .tool_left a:active,
.tool_right a:link, .tool_right a:visited, .tool_right a:active {
	font-size: 9px;
	}


.tool_left img, .tool_right img{
	border: none;
	margin-right: 5px;
	}
.tool_left img{
	margin-left: 5px;
	}


/* Testing */
p.valtech_temp_phone {
	PADDING-LEFT: 161px;
	PADDING-TOP: 230px;
	background: url(../valtech_rsr/css_phone.gif) no-repeat
	}