/* CSS Document */
/************************************************************************

	Site: eROI.com
	Author:		eROI		[www.eroi.com] 

       1. Portfolio Sidebar Styles
       2. Guides Button Styles


/***********************************************************************
	 1. PORTFOLIO SIDEBAR
************************************************************************/

ul#pnav {
        padding: 0;
        margin: 0 3px 0 0;
}

div#portfoliosidebar {
	width: 326px;
	float: right;
	padding:12px 0 70px 0;
	margin: 0 4px 0 0;
      display:inline;
}

h3#chooseacategory {
        width: 120px;
        height: 11px;
        background: url(/uploads/images/h_choosecategory.gif) no-repeat top left;
        padding: 0 0 7px 0;
}

span.disappear {
        display: none;
}

div#portfoliosidebar ul {
       list-style-type: none;
       display:block;
       margin:0;
       padding:0;
       float:left;
       width: 326px;

}

div#portfoliosidebar ul li{
		clear: both;
		margin:0;
		padding:0;
		float:left;
		display:inline;
		width: 326px;
		overflow:hidden;
		
}

div#portfoliosidebar ul li.MTitle {

        cursor:pointer;
}

div#portfoliosidebar h2 {
	width: 326px;
	height: 37px;
	padding: 0 0 4px 0;
        margin: 0;
}

div#portfoliosidebar h2 span {
        display: none;
}

h2#web-design {
	background: url(../uploads/images/flag_webdesign_off.gif) no-repeat top left;
}
li.on h2#web-design {
	background: url(../uploads/images/flag_webdesign_on.gif) no-repeat top left;
}
h2#email-design {
	background: url(../uploads/images/flag_emaildesign_off.gif) no-repeat top left;
}
li.on h2#email-design {
	background: url(../uploads/images/flag_emaildesign_on.gif) no-repeat top left;
}
h2#e-commerce {
	background: url(../uploads/images/flag_ecommerce_off.gif) no-repeat top left;
}
li.on h2#e-commerce {
	background: url(../uploads/images/flag_ecommerce_on.gif) no-repeat top left;
}
h2#blog-design {
	background: url(../uploads/images/flag_blog_off.gif) no-repeat top left;
}
li.on h2#blog-design {
	background: url(../uploads/images/flag_blog_on.gif) no-repeat top left;
}
h2#branding {
	background: url(../uploads/images/flag_identity_off.gif) no-repeat top left;
}
li.on h2#branding {
	background: url(../uploads/images/flag_identity_on.gif) no-repeat top left;
}

div#portfoliosidebar ul.subcategory {
      width:295px;
      margin:0 0 0 15px;
      padding:0 0 5px 0;
      display:inline;
      float:left;
        overflow:hidden;
}

div#portfoliosidebar ul.subcategory li {
	float: left;
	text-align: center;
	margin: 0 2px 0 2px;
        padding-bottom:5px;
	clear: none;
        width:auto;
        overflow:hidden;
}

div#portfoliosidebar ul.subcategory li div {
       background: #ffffff;
       border: 1px solid #d7d7d7;
}

div#portfoliosidebar ul.subcategory li div a {
        display: block;
        border: 2px solid #fff;
}

div#portfoliosidebar ul.subcategory li div a#activeProject {
       border: 2px solid #677377;
}

div#portfoliosidebar ul.subcategory li div a:hover {
      border: 2px solid #4c9fbe;
}

div#portfoliosidebar ul.subcategory li div a img{
       width:45px;
       height:45px;
       border: 2px solid #fff;
}


/***********************************************************************
	 2. GUIDES BUTTON
************************************************************************/

div#guides {	
        clear:left;
	width: 289px;
	padding: 1px;
	border: 1px solid #d9d9d9; 
	background-color: #e7e7e7;
        margin:10px 0 0 6px;
}

div#eroiU {
	width: 287px;
	height: 90px;
	background: url(../images/bg-guide-eroiu.jpg) repeat-x;
        border:1px solid #fff;
}	

div#eroiU div.description {		
	width: 170px;
	height: 67px;
	padding: 20px 5px 20px 90px;

}	
	

div#eroiU div.description h1 {
	background:url(../images/title-home-guides.gif) no-repeat;
	width: 168px;
	height: 13px;
	font: 11px Arial, Helvetica, sans-serif;
}

div#eroiU div.description h1 span {
	display: none;
}	

div#eroiU div.description p {
	margin: 3px 0 0 3px;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #5c5c5c;
        letter-spacing:-1px;
        line-height:15px;
}	

div#eroiU a {
	width: 100%;
	height: 100%;
	display: block;
	text-decoration: none;
}		

div#eroiU a:hover {
	background: url(../images/bg-guide-eroiu-over.jpg) repeat-x;		
	cursor: pointer;	
	color: #5c5c5c;				
}