.fg {
position:relative;
display:block;
width:100%;
margin:0 auto;
font-family:roboto_r, arial, helvetica, sans-serif;
}

.fg  a.title:link, .fg a.title:active, .fg a.title:visited {outline:0;text-decoration:none; color: #fff;
    background-color: #ad133e;
    }
.fg  a.title:hover{
	background-color:#333;}	
.showAlb, .showimage{
	min-width: 150px;
    min-height: 150px;
	display:block;
	    position: absolute;
    overflow: hidden;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border: solid 1px #fff;
	background-color: #000;
	backface-visibility:hidden;}
.fg .thumb:hover .showAlb img, .fg .thumb:hover .showimage img{
	opacity:.8;
	}		
#fgOverlay .showimage{
	min-width: inherit;
    min-height: inherit;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	}	
.fg a:hover {color:#a63510;} 

.fg img {border:0;}
.fg .clear {clear:both;}

.float-left{float:left}
.float-right{float:right}
.clear {height:0;clear:both;}
.m5-left{margin-left:5px;}
.fg .title {font-size: 20px;
    margin-left: 0;}
.fg .title small{
    color: #656565;
    font-weight: lighter;
    font-size: 12px;}	
.fg hr {line-height:1px;position:relative;clear:both;border:solid #ddd;height:0;border-width:1px 0 0;margin:0;padding:0;width:100%;}
.fg .hide{display:none}

.fg .thumbwrap-outer {
position:relative;
display:block;
float:left;
margin:0;
    margin-top: 20px;
padding:0;
width:100%;
}

.fg .thumbwrap {
position:relative;
display:block;
float:left;
margin:0 5px 5px 0;
padding:0;
width:100%;
}

.fg .thumbwrap-inner {
display:block;
width:100% !important;
}

.fg .thumb {
position:relative;
display:block;
overflow:hidden;
float:left;
width:25% !important;
height:auto !important;
padding-top: 25%;

}

.fg .thumb-itself {
position:relative;
display:block;
width:100%;
height: auto !important;
overflow:hidden;
float:left;
background:#000;
}

.fg .thumb-itself img {    width: 100%;
    height: auto;
    display: block;
    opacity: .4;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
	

    margin: auto;
    position: absolute;}
.thumbwrap-inner img{
	min-height: 100%;
    width: auto;
    max-width: inherit;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    margin: auto;
    position: absolute;}
.fg .thumb .caption {
position: absolute;
    left: 5px;
    bottom: 5px;
    right: 5px;
    font-family: roboto_r;
    padding: 3px 7px 7px 7px;
    line-height: 21px;
    font-size: 16px;
    color: #fff;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 50px;
    z-index: 1;
}
#grid .ug-tile:before {
    content: "";
    position: absolute;
    width: 100%;
    height:60%;
background: -moz-linear-gradient(top, rgba(173,19,62,0) 0%, rgba(173,19,62,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(173,19,62,0) 0%,rgba(173,19,62,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(173,19,62,0) 0%,rgba(173,19,62,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ad133e', endColorstr='#ad133e',GradientType=0 ); /* IE6-9 */
    left: 0px;
    bottom: 0px;
	z-index: 1;
	transition:all ease-in-out .6s;
	-webkit-transition:all ease-in-out .6s;
}
#grid .ug-tile:hover:before{
	height:30%;}
.fg .thumb .caption > * {
overflow:hidden;
text-overflow:ellipsis;
}

.fg .thumb .caption a {color:#444;}
.fg .thumb .caption a:hover {color:#111;}

#tooltipDiv{position:absolute;left:0;overflow:hidden;display:none;padding:15px;background-color:#fff;font-size:13px;line-height:22px;width:100%;max-width:220px;word-wrap:break-word;word-wrap:pre-wrap;border-radius:3px;box-shadow: 0px 0px 4px 1px #5a5a5a;z-index:999;}
#tooltipDiv:after {content:'';}

/*** image view overlay ***/
#fgOverlay {
position:fixed;
display:none;
width:100%;
height:100%;
overflow:hidden;
top:0;
right:0;
padding:0;
font-size:12px;
color:#575757;
background-color:#111;
z-index:497;
}

.loader{
background-image:url(images/loader.png);
background-position:50% 50%;
background-repeat:no-repeat;
}

a#fgOverlay-close {
position:relative;
display:block;
float:right;
width:48px;
height:32px;
outline:0;
cursor:pointer;
font-size:21px;
text-align:center;
text-decoration:none;
color:#888;
z-index:498;
}
a#fgOverlay-close:hover {color:#aaa;}

#fgOverlay #leftCol {width:100%;}	 

#fgOverlay #infoBox {
display:none;
position:absolute;
top:0;
left:0;
overflow:auto;
width:100%;
max-width:240px;
height:100%;
padding-left:20px;
padding-right:20px;
background-color:#eee;
font-family:roboto_c;
font-size:13px;
line-height:1.6em;
text-align:left;
z-index:498;
}

#fgOverlay #infoBox h3{font-family:roboto_c;font-size:18px;font-weight:400;}

#fgOverlay img.imgFrame,
#fgOverlay .vidFrame {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
padding:0;
display:block;
z-index:498;
}

#fgOverlay .audFrame{
position:relative;
display:block;
overflow:hidden;
margin:20% auto 0 auto;
padding:20px;
display:block;
width:100%;
max-width:560px;
background:#222;
z-index:498;	
}

#fgOverlay img.imgFrame{max-width:100%;height:auto;max-height:100%;}
#fgOverlay .vidFrame {width:100%;max-width:560px;height:100%;max-height:315px;}

#fgOverlay .bottombar {
position:absolute;
bottom:0;
left:50%;
margin-left:-113px;
width:226px;
height:48px;
line-height:48px;
font-family:roboto_c;
font-size:16px;
text-align:center;
color:#aaa;
background-color:#000;
z-index:501;
}

#fgOverlay .itemnums {
display:inline-block;
position:relative;
float:left;
width:70px;
font-size:12px;
text-align:center;
}

#fgOverlay a.icon-left-bold,
#fgOverlay a.icon-right-bold {
display:inline-block;
position:relative;
float:left;
width:30px;
height:30px;
line-height:30px;
margin-top:9px;
text-decoration:none;
color:#777;
}

#fgOverlay a.icon-left-bold:hover,
#fgOverlay a.icon-right-bold:hover{color:#aaa;}

#fgOverlay a.showThumbs,
#fgOverlay a.showInfo{
background-color:#000;
display:block;
width:48px;
height:48px;
position:relative;
float:left;
font-size:18px;
color:#888;
text-decoration:none;
}
#fgOverlay a.showInfo{float:right;font-size:20px;}
#fgOverlay a.showThumbs:hover,
#fgOverlay a.showInfo:hover {color:#aaa;}

.fg .refresh {cursor:pointer;}
.fg .description-wrapper {margin-top:10px;    
margin-bottom: 3px;
    background-color: #e5f9fb;
    padding: 15px;
	line-height:19px;}

.exifname {width:100px;display:inline-block;}

#fgOverlay #thumb-container {
display:none;
position:absolute;
left:0;
bottom:48px;
background-color:#3a3a3a;
padding:0;
width:100%;
overflow:hidden;
z-index:499;
}

#fgOverlay #thumb-container-inner {
position:relative;
float:left;
display:block; 
overflow:hidden;
width:100%;
height:52px;
}

#fgOverlay #thumb-container .thumb {
position:relative;
display:block;
float:left;
overflow:hidden;
width:64px;
height:50px;
margin:0;
background-color:#000;
border:1px solid #000;
}

#fgOverlay #thumb-container .thumb.selected {border:1px solid #91c9ed;}
#fgOverlay #thumb-container .thumb img {max-width:100%;height:auto;display:block;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;} 

#fgOverlay .thumbs-to-left,
#fgOverlay .thumbs-to-right{
display:none;	
position:fixed;
bottom:48px;
width:36px;
height:52px;
line-height:52px;
text-align:center;
text-decoration:none;
color:#aaa;
z-index:592;
background:red;	
}
#fgOverlay .thumbs-to-left{left:0}
#fgOverlay .thumbs-to-right{right:0}

.fg .noimg {width:48px;height:48px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;background:#fff url(images/noimg.png) center center no-repeat;}

#fgOverlay .fgicon{width:36px;height:36px;line-height:36px;font-family:Material Icons;text-align:center;display:block;background-color:#111;text-decoration:none;color:#aaa;z-index:502;}
.fg .fgicon{font-family:Material Icons;text-align:center;display:inline-block;text-decoration:none;color:#555;}

#fgOverlay .fgicon.icon-close{position:absolute;top:0;right:0;}
#fgOverlay .fgicon.icon-close:before {content:'\E5CD';font-size:24px;}

#fgOverlay .fgicon.icon-expand{position:absolute;top:36px;right:0;}
#fgOverlay .fgicon.icon-expand:before {content:'\E89E';font-size:24px;}

#fgOverlay .fgicon.icon-info-circled{line-height:48px;font-size:24px;float:left;}
#fgOverlay .fgicon.icon-info-circled:before {content:'\E88E';}

#fgOverlay .fgicon.icon-thumb{line-height:48px;font-size:24px;float:right}
#fgOverlay .fgicon.icon-thumb:before {content:'\E42A';}

#fgOverlay .fgicon.icon-left,
#fgOverlay .fgicon.icon-right{width:30px;height:30px;line-height:30px;font-size:18px;position:relative;top:9px;float:left}

.fg .fgicon.icon-left,
.fg .fgicon.icon-right{position:relative;top:3px;font-size:14px;}

#fgOverlay .fgicon.thumbs-to-left,
#fgOverlay .fgicon.thumbs-to-right{width:36px;height:52px;line-height:52px;font-size:28px}

#fgOverlay .fgicon.icon-left:before,
#fgOverlay .fgicon.thumbs-to-left:before,
.fg .fgicon.icon-left:before{content:'\E408';font-family:'Material Icons';}

#fgOverlay .fgicon.icon-right:before,
#fgOverlay .fgicon.thumbs-to-right:before,
.fg .fgicon.icon-right:before {content:'\E409';font-family:'Material Icons'}

.fg .fgleft,
.fg .fgright{
position:absolute;
display:inline-block;
top:50%;
margin-top:-26px;
width:26px;
height:48px;
line-height:48px;
color:#000;
background:rgba(255,255,255,.38);
font-size:21px;
z-index:19
}

.fg .fgleft{left:5px;border-top-right-radius:24px;border-bottom-right-radius:24px;text-align:left;text-indent:0px}
.fg .fgright{right:5px;border-top-left-radius:24px;border-bottom-left-radius:24px;text-align:right;text-indent:7px}

.fg .fgleft:before {content:'\E408';font-family:'Material Icons';}
.fg .fgright:before{content:'\E409';font-family:'Material Icons';}

.fg .navigate-next{display:inline-block;position:relative;height:12px;line-height:12px;color:#000;font-size:14px;position:relative;vertical-align:1px;}
.fg .navigate-next:before{content:'\E409';font-family:'Material Icons'}

.fg .rotator{position:absolute;top:50%;left:50%;margin-left:-11px;margin-top:-15px;font-size:20px;text-align:center;color:#aaa;}

@font-face {
font-family: 'roboto_c';
src: url(fonts/roboto/condensed/robotocondensed-regular-webfont.woff) format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'roboto_r';
src: url(fonts/roboto/regular/Roboto-Regular-webfont.woff) format('woff'); 
font-weight: normal;
font-style: normal;
}
@font-face {font-family:'Material Icons'; 
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(fonts/material/MaterialIcons-Regular.woff) format('woff');
font-style:normal;
font-weight:normal;
}
.material-icons {font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:18px;display: inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';}