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

.fg a:link, .fg a:active, .fg a:visited {outline:0;text-decoration:none;color:#004e7b;}
.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-family:roboto_c;font-size:14px;}
.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;
overflow:hidden;
float:left;
margin:0;
padding:0;
width:100%;
}

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

.fg .thumbwrap-inner {
overflow:hidden;
display:block;
width:100%;
}

.fg .thumb {
position:relative;
display:block;
overflow:hidden;
float:left;
margin:5px;
border-radius:3px;
box-shadow: 0px 0px 3px 1px #9a9a9a;
}

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

.fg .thumb:hover {box-shadow: 0px 0px 3px 1px #9a9a9a;}
.fg .thumb-itself img {max-width:100%;height:auto;display:block;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;}

.fg .thumb .caption {
position:absolute;
left:0;
bottom:0;
font-family:roboto_r;
display:block;
width:calc(100% - 14px);
padding:3px 7px 7px 7px;
height:38px;
line-height:20px;
font-size:12px;
color:#444;
background:#fff;
text-align:left;
overflow:hidden;
display:block;
}

.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;padding-left:5px;padding-right:5px;font-size:13px;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;top:4px}
.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';}