@charset "UTF-8";
#samplebar {
	height: 230px;
	width: 930px;
	border: 1px solid #00aed8;
	box-shadow: 1px 1px 4px #00aed8;
	background-image: url(../images/structure/samplemenu-back.jpg);
	background-repeat: no-repeat;
	background-position: center -65px;
	margin-top: 10px;
	padding: 5px;
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px;
}
.samplebar-icon {
	height: 104px;
	width: 104px;
	border: 1px solid #00aed8;
	background-color: #FFF;
	clear: none;
	float: left;
	margin: 5px;
    overflow: hidden;
}
.no-margin {
    margin-right: 0;
}
/* --- Link configuration that contains the image and label ----------------------------- */
.samplebar-icon a {
    display: block;
    position: relative;
}

.samplebar-icon a img {
    height: 104px;
    left: 0px;
    position: relative;
    top: 0px;
    width: 104px;
}

/* --- Label configuration -------------------------------------------------------------- */
.samplebar-icon a span {
	display: none;
    font-size: 16px;
    height: 100%;
    padding-top: 35px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    width: 100%;
    z-index: 100;
	font-family: 'VAGRoundedBTRegular', arial, serif;
}
   .samplebar-icon a span em {
        display: block;
        font-size: 10px;
        font-weight: normal;
	font-family: 'VAGRoundedBTRegular', arial, serif;
}

/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
    background-color: rgba(6, 190, 226, 0.5);
    color: #fff;
	text-shadow: 1px 1px 2px #000;
}
    .dark-background em {
        color: #fff;
		opacity: 0.5;
    }

/**
 * You could create multiple hover background classes for different looks depending on the
 * image type. Use your imagination!
 */