body {
	background-image: url(back_offline.jpg);
	background-repeat: no-repeat;
	background-attachment:fixed;
	font:13px/20px Arial,Tahoma,Helvetica,sans-serif;
	color:#222;
}

#header{
	padding: 0;
	margin: -10px 30px 0 0;
	vertical-align: top;
}
#wrapper-outer{
	width: 925px;
	margin-top: 25px;
	margin-right: 30px;
	margin-left:auto;
}

#wrapper{
		
}

#container{
	padding: 12px 12px 12px 12px;
	background-color: #fff;

				}
					#container h2, #container h3{
						text-transform:uppercase;
						text-transform:capitalize;
						letter-spacing:1px;
					}
					#container h2 span, #container h3 span{
						color:#0099fa;
					}
					#mainarea{
						width:610px;
					
					}
					#sidearea{
						width:270px;
						float:right;
						font-size:12px;
					}
						#sidearea .list-none{
							margin:0;
							list-style:none;
						}
							#sidearea .list-none a{
								font-weight:normal;
							}						
						.image{
							background:#fff;
							padding:3px;
							border:1px solid #cbcbcb;
						}
						.mblock{
							width:295px;
						}


a {
	color:#222;
	text-decoration:none;
	font-weight:bold;
}
a:hover {text-decoration:none;color:#0099fa;}
h1{font-size:32px;}
h2{font-size:22px;}
h3{font-size:20px;}
h4{font-size:15px;}
h5, h6{font-size:14px;}
h1,h2,h3,h4,h5{margin:0 0 15px 0; color:#212121;font-family:"Sansation","Trebuchet MS",Arial, Helvetica;font-weight:normal;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{ color:#578200;font-weight:normal;}							
img{border:none;}
.clear{clear:both;}
.floatleft{float:left;}
.floatright{float:right;}
.center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.normal, .normal a{font-weight:normal;}
.textbold{font-weight:bold;}

/* PORTFOLIO */

#content{
	position:relative;
	display:block;
	width:900px;
	clear:both;	
	z-index:1;
	}
	
#portfolio_menu{
	display:block;
	width:891px;
	padding:5px;
	border-top:1px #d4d4d4 dotted;
	border-bottom:1px #d4d4d4 dotted;
	margin:12px 0px 10px 0px;}

ul#portfolio-filter{ margin: -20px 0; padding: 0; height: 64px;  line-height: 64px; }
ul#portfolio-filter li{ display: inline; }
ul#portfolio-filter a{ margin-right: 0.5em; padding: 0.5em 1em; color: #AAA;  text-decoration: none; }
ul#portfolio-filter a:hover{ color: #444; }
ul#portfolio-filter a.current{ color: #fff; }
ul#portfolio-filter a.current{ background-color: #0296f6; }
ul#portfolio-list{ list-style-type: none; }

.boxcaption:hover{  
    float: left;  
    position: absolute;  
    background: #000;  
    height: 100px;  
    width: 100%;  
    }  

ul.clearli li {
	clear:both;
}
ul.display li {
	padding: 10px;	
}
ul.display li a {
    color: #e7ff61;
    text-decoration: none;
}
ul.display li .content_block {
    margin: 0 0 0 0;
	display:block;
	background:no-repeat url('images/shadow-thum.jpg') 4px 167px;
}
ul.display li .content_block h2 {
    margin: 0;
    padding: 5px;
    font-weight: normal;
    font-size: 14px;
}
ul.display li .content_block h2 a {
    font-weight: bold;
	color:#2e2e2e;
    font-size: 14px;
}
ul.display li .content_block h2 a:hover {
	text-decoration:underline;
}
ul.display li .content_block p {
    margin: 0;
    padding: 5px 5px 5px 300px;  <span style="color: #777;">/*--The left padding keeps the
content from flowing under the image--*/</span>
    font-size: 1.2em;
}
ul.display li .content_block a img{ <span style="color: #777;">/*--Double border technique--*/</span>
    padding: 5px;
    border: 4px solid #E0E0E0;
    background: #fff;
    margin: 0 15px 0 0; 
    float: left; 
	opacity: .8;  
    /* For IE 5-7 */  
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
     /* For IE 8 */  
     -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
}
ul.display li .content_block a img:hover{ 
    border: 4px solid #818181;
	opacity: 1;  
    /* For IE 5-7 */  
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);  
     /* For IE 8 */  
     -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  
}

ul.thumb_view li{ width: 245px; float: left; } <span style="color: #777;">/*--Switch the width
to accommodate for the three column layout--*/</span>
ul.thumb_view li h2 { display: inline; }
ul.thumb_view li p{ display: none; }
ul.thumb_view li .content_block a img { margin: 0 0 10px;  }


a.switch_thumb {
	position:absolute;
	top:-7px;
	right:-10px;
	width: 237px;
	height: 37px;
	display: block;
	background: url(images/switch.gif) no-repeat;
	outline: none;
	text-indent: -9999px;
}
a.swap { background-position: left bottom; }
a:hover.switch_thumb {
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
