@font-face {
  font-family: "OpenSans-Regular";
  src: url(font/OpenSans-Regular.ttf) format("truetype");
}/* CSS Document */

<style>
.menu{
    width:35px;
    height:35px;
    position:relative;
    font-family: OpenSans-Regular;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}
.item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:35px;
    margin:0px 0px;
    height:35px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}

.link{
	right: 0px;
    left:0px;
    top:0px;
    position:absolute;
    width:35px;
    height:35px;
}
.icon_home{
    background:transparent url(../images/home.png) no-repeat top left;
}
.icon_mail{
    background:transparent url(../images/mail.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_find{
    background:transparent url(../images/find.png) no-repeat top left;
}
.icon_photos{
    background:transparent url(../images/photos.png) no-repeat top left;
}
.item_content{
    position:absolute;
    height:35px;
    width:120px;
    overflow:hidden;
    left:56px;
    top:0px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}
    /*  
	http://www.freshdesignweb.com/beautiful-image-hover-effects-with-jquery-css.html 
	*/
	 .freshdesignweb{width:950px; margin:0px 0px 0px 0px;}
	 .freshdesignweb a:link{text-decoration:none;}
     .freshdesignweb article{ float:left; width:157px; height:157px; } /*cursor:pointer;opacity:0.5;*/
	/*portfolio*/
	.fdw-background{ background-color:rgba(0,0,0,0.6);opacity:0; margin-top:-25px; width:100%; height:100%; }
	.fdw-background h4{font-size:20px; font-family: 'Dosis', sans-serif; text-align:center; padding:40px 40px 0; }
	.fdw-background .fdw-port{ text-align:center; padding:0 40px 0; }
	.fdw-background .fdw-port a{ padding:8px 15px; font-size:1em; }
	/*subtitle*/
	.fdw-subtitle{ font-size:0.8em; margin-top:-20px; color:#0CF; }
	.fdw-subtitle a{ color:#F90; }
	/*columns*/
	.c-two{ width:314px !important; }
	/*align*/
	.a-center{ text-align:center; }
	/*border*/
	.border{ border:1px solid #CCC; margin:-1px;}
	/*link buttons*/
    .fdw-port a{ 
		background-color:#336699; 
		color:#fff; 
		border-radius:3px;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		-o-border-radius:3px;
		-webkit-box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
		-moz-box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
		box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
		-o-box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
		text-shadow:0 1px 1px #000;
	}
    .fdw-port a:hover{ 
		background-color:#f2f2f2; 
		color:#336699 !important; 
		text-shadow:0 1px 1px #ccc;
		-webkit-box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
		-moz-box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
		box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
		-o-box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
	}