/*  
Theme Name: Taissa Farmiga Fan
Theme URI:  http://www.taissa-farmiga.net/gallery/
Description: Coppermine theme edited by Secret Smile Design for Taissa Farmiga Fan
Author: Cristina (contatosecretsmile@gmail.com)
Author URI: http://www.secretsmile.flaunt.nu/
Version: 1.0
*/

html {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
 *, *:before, *:after {
     -webkit-box-sizing: inherit;
     box-sizing: inherit;
}
 body, button, input, select, textarea {
     color: #484848;
     font-size: 14px;
     line-height: 2.0;
     margin: 0;
     word-wrap: break-word;
}
 body {
     background-color: #ffffff;
}

/* ----------------- GENERAL STYLE ----------------- */
 a {
     color: #e4966d;
     text-decoration: none;
     cursor: help;
}
 a:hover {
     color: #ac9aa8;
     text-decoration: none;
}
 a, .image, .button, .buttonlist ul li a, .catlink a:before, .admin_menu {
     -webkit-transition: all .3s ease-in-out 0s;
     -moz-transition: all .3s ease-in-out 0s;
     -ms-transition: all .3s ease-in-out 0s;
     -o-transition: all .3s ease-in-out 0s;
     transition: all .3s ease-in-out 0s;
}
 h1, h2, h3, h4, h5, h6 {
     clear: both;
     margin-top: 20px;
     margin-bottom: 10px;
     line-height: 1.5;
     letter-spacing: 0;
     text-align: left;
}
 hr {
     border: 0;
     height: 1px;
     margin: 10px 0;
     background-image: -webkit-linear-gradient(left, #e9e9e9, #dddddd, #e9e9e9);
     background-image: -moz-linear-gradient(left, #f0f0f0, #dddddd, #f0f0f0);
     background-image: -ms-linear-gradient(left, #e9e9e9, #dddddd, #e9e9e9);
     background-image: -o-linear-gradient(left, #e9e9e9, #dddddd, #e9e9e9);
}
 ::selection {
     background-color: #e4966d;
     color: #ffffff;
}
 ::-moz-selection {
     background-color: #e4966d;
     color: #ffffff;
}
 ::-webkit-selection {
     background-color:#e4966d;
     color: #ffffff;
}
 ::-o-selection {
     background-color: #e4966d;
     color: #ffffff;
}
 ::-ms-selection {
     background-color: #e4966d;
     color: #ffffff;
}
 ::-webkit-scrollbar {
     height: auto;
     width: 11px;
     background-color: #e4966d;
     border: 5px solid #ffffff;
}
 ::-webkit-scrollbar-thumb {
     height: auto;
     background-color: #e4966d;
     border: 4px solid #ffffff;
}
 p {
}
 pre.filepath {
     margin: 0;
     padding: 0;
}
 ul, ol {
     margin:0;
     padding: 0;
}
 li {
     margin:0;
     padding: 0;
     list-style-position: outside;
}
 ul li {
     list-style-type: none;
}

/* Fonts */

 body, button, input, select, textarea, .tableb strong, .thumbnails .thumb_title_views {
     font-family: 'Sarabun', sans-serif;
     font-weight: 400;
}
 h1, h2, h3, h4, h5, h6, em, #menus-wrapper, #footer .inner, .tableh1, .tableh1b, .tableh2, .catlink, .alblink, .thumbnails .thumb_title_title {
     font-family: 'Lato', sans-serif;
     font-weight: 400;
     font-style: italic;
}
 .cpgnav, .tableh1a span, .tableh1_info, .statlink_bread, .navmenu, #tabs_dropdown_select, .admin_menu_wrapper, .statlink span, .thumbnails .thumb_caption_ctime, .tableh1a, .button, .buttonlist ul li a {
     font-family: 'Open Sans', sans-serif;
     font-weight: 600;
}
 a.menu-link:before, .thumbnails .thumb_title_title:before, .catlink a:before {
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
}
 .main-menu ul li > a[href*="twitter.com"]:before {
     font-family: 'Font Awesome 5 Brands';
     font-weight: 400;
}

/* ----------------- CONTAINERS ----------------- */

 #menus-wrapper {
     max-width: 1200px;
     display: block;
     margin: 0 auto;
     padding: 0;
}
 #main-wrapper {
     max-width: 1180px;
     margin: 0 auto;
}
 .content-wrapper {
     margin: 0 auto;
     padding: 0;
}
 .cpgcontent {
     margin: 10px auto 0 auto;
     max-width: 100%;
}

/* ----------------- HEADER ----------------- */

 #header {
     background-image: url(images/header.jpg);
     background-repeat: no-repeat;
     background-position: top center;
     width: 100%;
     height: 450px;
     border: none;
     float: left;
     margin: 0 auto;
     padding: 0;
     display: block;
     position: relative;
     overflow: hidden;
}
 #mobile-header {
     display: none;
}

/* ----------------- MENU ----------------- */

 .menu-wrapper {
     position: relative;
     padding: 0;
     margin: 0 auto;
     display: block;
     text-align: center;
}
 .menu-link {
     display: none;
}
 .main-menu {
     display: inline-block;
     font-size: 0.929em;
     text-transform: uppercase;
     padding: 0;
     position: relative;
     margin: 0 auto;
}
 .main-menu ul, .main-menu ul li {
     list-style-type: none;
     padding: 0;
     margin: 0;
}
 .main-menu > ul {
     text-align: center;
}
 .main-menu > ul > li {
     display: inline-block;
     position: relative;
     padding: 20px 10px;
}
.main-menu > ul > li:after {
     content: "";
     position: absolute; 
     left: 0;
     top: 0;
     bottom: 0;
     background: #d0d0d0;
     width: 1px;
     height: 100%;
}
 .main-menu > ul > li:first-child:after {
     display: none;
}
 .main-menu a {
     display: inline-block;
     padding: 0 8px;
     margin: 0 20px;
     text-decoration: none;
     color: #4e4e4e;
     position: relative;
}
 .main-menu a:hover {
     color: #ac9aa8;
}
 .main-menu ul li > a[href*="twitter.com"]:before {
     content: "\f099";
     color: #4e4e4e;
     margin-right: 5px;
     font-style: normal;
}
 .main-menu ul li > a[href*="twitter.com"]:hover:before {
     color: #ac9aa8;
}

/* ----------------- TABLE ----------------- */

 .cpgnav {
     width: 100%;
     float: left;
     overflow: hidden;
     margin: 20px auto 25px auto;
     padding: 0;
     font-size: 0.857em;
     position: relative;
     font-style: italic;
     color: #929292;
     text-align: center;
}
 .cpgnav a {
     color: #929292;
     margin: 0 6px;
}
 .cpgnav a:hover {
     color: #ac9aa8;
}
 .maintable {
     margin: 20px auto 0 auto;
     padding: 20px 10px;
     border: 1px solid #d0d0d0;
}
 .tableh1 {
     padding-bottom: 10px;
     margin: 8px 0;
     font-size: 2.0em;
     line-height: 1.5;
     letter-spacing: -0.5px;
     color: #4e4e4e;
     position: relative;
     text-transform: uppercase;
     text-align: center;
}
 .tableh1:after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     left: 0;
     z-index: 1;
     border: 3px solid rgb(228, 182, 160);
     border-image-slice: 5 5 0 0;
     border-image-width: 13px 13px 13px 13px;
     border-image-outset: 0;
     border-image-repeat: space;
     border-image-source: url("images/mainbg.jpg");
     width: 90%;
     margin: 0 auto;
     display: inline-block;
}
 .tableh1b {
     padding: 10px 0;
     margin: 8px 0;
     font-size: 1.154em;
     line-height: 1.1;
     letter-spacing: -0.5px;
     color: #4e4e4e;
     position: relative;
     text-transform: uppercase;
     border-bottom: 4px double #dd8986;
}
 .tableh1a {
     font-size: 0.857em;
     padding: 5px;
     font-style: italic;
}
 .tableh1a span {
     color: #929292;
     text-align: center;
}
 .tableh1_info {
     color: #929292;
     font-size: 0.857em;
     font-style: italic;
     letter-spacing: -0.5px;
     padding: 10px 0 5px 0;
     border-top: 1px dashed #e9eadf;
}
 .tableh2 {
     font-size: 1.0em;
     color: #4e4e4e;
     padding: 10px 0 5px 0;
     background-color: transparent;
     text-transform: uppercase;
     position: relative;
}
 .tableh3 {
     margin: 0;
     font-size: 0.923em;
     font-weight: 700;
     color: #929292;
}
 .tableb {
     padding: 3px 10px;
}
 .tableb strong {
     color: #484848;
}
/* This class will be used in conjunction with class tableb: attributes not particularly (re)-assigned will be taken into account from tableb. */
/* It is being used to accomplish alternating row colors for lists. */
/* It's recommended to only assign another background color that slightly differs from the one defined in tableb */
 .tableb_alternate {
     background-color: #ffffff;
     width: auto;
     margin: 0 auto;
}
 .tablef {
     background-color: transparent;
     border: 1px dashed #e9eadf;
     padding: 10px;
}

/* ----------------- FOOTER ----------------- */

 #footer {
     clear: both;
     width: 100%;
     float: left;
     margin: 0 auto;
     z-index: 1;
     text-align: center;
     color: #4e4e4e;
}
 #footer a {
     color: #4e4e4e;
     position: relative;
     padding: 0 6px;
}
 #footer a:hover {
     color: #ac9aa8;
}
 #footer .footer-wrapper {
     margin: 0 auto 30px auto;
     max-width: 1160px;
     padding: 0;
     overflow: hidden;
}
 #footer .footer-wrapper:before, #footer .footer-wrapper:after {
     display: table;
     content: ' ';
}
 #footer .inner {
     padding: 0;
     margin: 0 auto;
     display: block;
     text-transform: uppercase;
}
#footer .disclaimer {
     overflow: hidden;
     margin: 0;
     padding: 0;
     text-align: justify;
     font-style: italic;
}
 #scroll {
     position: fixed;
     margin: 0 auto;
     bottom: 0.9rem;
     right: 1.0rem;
     width: 25px;
     height: 25px;
     border: 2px solid #d0d0d0;
     color: #d0d0d0;
     background-color: transparent;
     text-decoration: none;
     text-align: center;
     -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
     border-radius: 100px;
}
 #scroll:hover {
     color: #ffffff;
     background: #ac9aa8;
     border: 2px solid #ac9aa8;
     text-decoration: none;
}
 .fa-angle-up:before {
    line-height: 21px;
}

/* ----------------- FORMS ----------------- */

 .textinput {
     border: 1px solid #e9eadf;
     padding: 0 3px;
}
 .listbox {
     vertical-align : middle;
     padding: 3px;
     border: 1px solid #e9eadf;
     background: #ffffff;
}
 .radio {
     font-size: 100%;
     vertical-align : middle;
}
 .checkbox {
     font-size: 100%;
     vertical-align : middle;
     margin-right: 5px;
}
 .bblink a {
     text-decoration: none;
}
 .bblink a:hover {
     text-decoration: none;
}
 .comment_date {
     color: #929292;
     font-size: 90%;
     vertical-align : middle;
}

/* ----------------- NAVIGATION ----------------- */

 .admin_menu_wrapper {
     width: 95%;
     margin: 15px auto;
     font-size: 0.769em;
     text-transform: uppercase;
}
 .admin_menu {
     background-color: #fcfcfc;
     border: 1px solid #e9eadf;
     color: #929292;
     margin-top: 0px;
     margin-bottom: 0px;
     text-align: center;
     text-shadow: none;
     font-size: 0.857em;
     padding: 0 3px;
}
 .admin_menu:hover {
     color: #929292;
     border: 1px solid #e9eadf;
}
 .admin_menu a {
     color: #929292;
     text-decoration: none;
     padding: 4px;
     text-shadow: none;
     margin: 1px;
     font-size: 1.077em!important 
}
 .admin_menu a:hover {
     text-decoration: none;
     text-shadow: none;
}
 .admin_float {
     float:left;
     margin-left: 1px;
     margin-right: 1px;
     margin-top: 1px;
     margin-bottom: 1px;
     display: block;
     position: relative;
     white-space:nowrap;
    /*width:100px;
     */
}
 #admin_menu_anim {
     background-image: url(images/button_bg_anim.gif);
}
 .icon {
     vertical-align:middle;
     margin-right: 5px;
}
 .statlink span {
     display: block;
     text-transform: uppercase;
     letter-spacing: -0.5px;
     width: 100%;
     float: left;
     padding: 8px 0;
     font-size: 0.786em;
}
 .statlink span strong {
     color: #929292;
}
 .statlink_bread {
     display: block;
     padding: 0;
      color: #929292;
     font-style: italic;
     text-align: center;
}
 .statlink_bread a {
     color: #929292;
}
 .statlink_bread a:hover {
     color: #ac9aa8;
}
 .statlink {
     font-size: 0.929em;
     text-transform: none;
}
 .statlink a {
     text-decoration: none;
     color: #929292;
}
 .statlink a:hover {
     text-decoration: none;
     color: #ac9aa8;
}
 .statlink h2 {
     font-size: 0.929em;
 }
 .alblink {
     position: relative;
     color: #4e4e4e;
     line-height: 22px;
     padding: 5px 0;
     display: block;
     border-top: 2px solid #dd8986;
     border-bottom: 4px double #dd8986;
}
 .alblink a {
     text-decoration: none;
     color: #4e4e4e;
     position: relative;
     padding: 0;
}
.alblink a:hover {
     color: #929292;
}
 .album_stat {
     font-size: 85%;
     margin: 5px 0;
}
 .catrow_noalb, .catrow {
     border-bottom: 1px dashed #e9eadf;
     padding: 5px;
}
 .catlink {
     display: block;
     text-transform: uppercase;
}
 .catlink a {
     color: #4e4e4e;
     padding: 4px 0;
     position: relative;
}
 .catlink:hover a {
    color: #929292;
}
.catlink a:before {
    content: "\f521";
    margin-right: 5px;
    color: #e4966d;
    font-style: normal;
}
.catlink:hover a:before { 
    color: #ac9aa8;
}
 .catrow .image {
     margin-right: 8px;
}

/* ----------------- THUMBNAILS ----------------- */

 .button, .buttonlist ul li a {
     background-position: bottom;
     cursor: pointer;
     margin-right: 1px;
     white-space: nowrap;
     text-shadow: none;
     text-decoration: none;
     text-transform: uppercase;
     font-size: 0.857em;
     border: 0;
     color: #ffffff;
     background: #e4966d;
     padding: 0 8px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
     font-style: italic;
}
 .button:hover, .buttonlist ul li a:hover {
     background: #ac9aa8;
     border: 0;
     color: #ffffff;
}
 .display_media {
     padding: 3px 10px;
}
 .display_media .image, .display_media .image:hover {
     max-width: 100%;
     height: auto;
     margin: 3px;
}
 .thumbnails {
     padding: 10px 0 8px 0;
     position: relative;
     width: 170px;
}
 .thumbnails img {
     width: auto;
     height: auto;
 }
 .thumbnails .thumb_title_title, .thumbnails .thumb_title_views, .thumbnails .thumb_caption_ctime, .thumbnails .thumb_caption_mtime, .thumbnails .thumb_resolution, .thumbnails .thumb_num_comments, .thumbnails .thumb_caption_caption, .thumbnails .thumb_filename, .thumbnails .thumb_title_owner, .thumbnails .thumb_caption_msg_date, .thumbnails .thumb_caption_author {
     display: block;
     padding: 0;
     margin: 4px 2px;
     text-align: center;
}
 .thumbnails .thumb_title_views, .thumbnails .thumb_caption_ctime, .thumbnails .thumb_caption_mtime, .thumbnails .thumb_resolution, .thumbnails .thumb_num_comments, .thumbnails .thumb_caption_caption, .thumbnails .thumb_filename, .thumbnails .thumb_title_owner, .thumbnails .thumb_caption_msg_date, .thumbnails .thumb_caption_author {
     overflow: hidden;
     font-size: 0.643em;
     text-transform: uppercase;
     font-style: italic;
}
 .thumbnails .thumb_resolution, .thumbnails .thumb_title_views {
     font-style: normal;
     letter-spacing: 0.5px;
 }
 .thumbnails .thumb_caption_ctime {
     background: #ac9aa8;
     color: #ffffff;
     padding: 0 5px;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
     width: 75px;
     text-align: center;
 }
 .thumbnails .thumb_title_title {
     line-height: 18px;
     width: 90%;
     font-size: 0.786em;
     margin: 8px auto;
     text-transform: uppercase;
     position: relative;
     color: #4e4e4e;
     border-bottom: 1px dashed #e9eadf;
     padding-bottom: 10px;
}
.thumbnails .thumb_title_title:before {
     content: "\f521";
     position: absolute;
     bottom: -8px;
     left: 0;
     right: 0;
     margin: 0 auto;
     color: #dd8986;
     font-style: normal;
}
 .user_thumb_infobox {
     margin-top: 1px;
     margin-bottom: 1px;
}
 .user_thumb_infobox th {
     font-weight : bold;
     font-size: 100%;
     margin-top: 1px;
     margin-bottom: 1px;
     text-align : center;
}
 .user_thumb_infobox td {
     font-size: 85%;
     margin-top: 1px;
     margin-bottom: 1px;
     text-align : center;
}
 .user_thumb_infobox a {
     text-decoration: none;
}
 .user_thumb_infobox a:hover {
     text-decoration: none;
}
 .sortorder_cell {
     font-size: 10px;
     padding: 0 0 0 20px;
     margin: 0;
     color: #929292;
}
 .sortorder_options {
     padding: 0;
     margin: 0 2px;
     white-space: nowrap;
}
 .navmenu {
     color: #929292;
     font-size: 0.857em;
     font-style: italic;
     padding: 10px 1px 5px 1px;
     border-top: 1px dashed #e9eadf;
}
 .navmenu img {
     margin: 1px 5px;
     padding: 0 5px;
}
 .navmenu a {
     display: block;
     color: #929292;
}
 .navmenu a:hover {
     color: #ac9aa8;
}
 #tabs_dropdown_select {
     font-size: 10px;
     border: 1px solid #e9eadf;
     background: #ffffff;
     margin-left: 3px;
}
 #tabs_dropdown_select0 {
     background: #e8e8e8;
     border: 1px solid #ffffff;
     color: #484848;
}

/* ----------------- IMAGES ----------------- */

 .image {
     border: 1px solid #e9eadf;
     margin: 0;
     padding: 2px;
     -webkit-filter: grayscale(0);
     filter: grayscale(0);
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
}
 .image:hover {
     border: 1px solid #e9eadf;
     margin: 0;
     padding: 2px;
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
}
 .albums img, .albums img:hover {
     border: 1px solid #e9eadf;
     margin: 0;
     padding: 2px;
     -webkit-filter: grayscale(0);
     filter: grayscale(0);
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
 }

/* pseudo-classes for image links */
 a:link .image{
}
 a:visited .image{
}
 a:focus .image{
}
 a:hover .image{
}
 a:active .image{
}
/* pseudo-classes for middlethumb links */
 a:link .middlethumb,a:visited .middlethumb,a:focus .middlethumb,a:hover .middlethumb,a:active .middlethumb{
}
 .imageborder {
     background-color: transparent;
     margin-top: 3px;
     margin-bottom: 3px;
}

/* ----------------- RESPONSIVE ----------------- */

 @media all and (max-width: 1024px) {
     body {
         overflow-x: hidden;
    }
     .main-wrapper {
         max-width: 95vw;
    }
     #menus-wrapper {
         max-width: 1000px;
    }
     #content-wrapper {
         max-width: 100%;
         float: left;
    }
     .cpgcontent {
         max-width: 94vw;
    }
     .display_media .image {
         max-width: 70vw!important;
         height: auto;
    }
     .tableh1_info {
         font-size: 80%;
    }
     .thumbnails .image, .thumbnails .thumbnail {
         display:inline;
         height: auto;
         max-width: 15.4vw;
    }
     .thumbnails {
         padding: 1vw 0!important;
         margin: 0!important;
    }
    .thumbnails .thumb_title_views, .thumbnails .thumb_caption_ctime, .thumbnails .thumb_caption_mtime, .thumbnails .thumb_resolution, .thumbnails .thumb_num_comments, .thumbnails .thumb_caption_caption, .thumbnails .thumb_filename, .thumbnails .thumb_title_owner, .thumbnails .thumb_caption_msg_date, .thumbnails .thumb_caption_author {
         max-width: 15vw!important;
         overflow: hidden;
    }
     .strip_image {
         max-width: 10vw!important;
         height: auto;
    }
     #film {
         width: 100%!important;
    }
     #film .thumb a:link {
         width: 100%!important;
    }
    .navmenu {
         font-size: 11px;
    }
    .navmenu a {
         display: inline-block;
         padding: 3px;
    }
    #footer .footer-wrapper {
        width: 90%;
    }
}
 @media (min-width: 768px) and (max-width: 1023px) {
    body {
         overflow-x: hidden;
    }
    .main-menu {
         width: 100%;
    }
    .main-menu a {
        margin: 0 10px;
    }
    #header {
         display: none;
    }
    #mobile-header {
         display: block;
    }
    #mobile-header img {
         width: 100%;
         height: auto;
         margin: 0;
         padding: 0;
         border: 0;
    }
    .thumbnails .image, .thumbnails .thumbnail {
         display:inline;
         height: auto;
         max-width: 15vw;
    }
    .thumbnails .thumb_title_views, .thumbnails .thumb_caption_ctime, .thumbnails .thumb_caption_mtime, .thumbnails .thumb_resolution, .thumbnails .thumb_num_comments, .thumbnails .thumb_caption_caption, .thumbnails .thumb_filename, .thumbnails .thumb_title_owner, .thumbnails .thumb_caption_msg_date, .thumbnails .thumb_caption_author {
         max-width: 15vw!important;
         overflow: hidden;
         display: block;
    }
    #footer .footer-wrapper {
        width: 90%;
    }
}
 @media (min-width: 481px) and (max-width: 767px) {
     body {
         overflow-x: hidden;
    }
     #menus-wrapper, .menu-wrapper {
         margin: 0 auto;
    }
    a.menu-link {
        display: inline-block;
        color: #4e4e4e;
        text-decoration: none;
        padding: 0;
        width: 100%;
        text-align: left;
        margin: 10px 0 10px 20px;
        text-transform: uppercase;
    }
    a.menu-link:before {
        content:"\f0c9";
        margin-right: 5px;
        font-style: normal;
    }
    .menu {
         clear: both;
         min-width: inherit;
         float: none;
    }
    .main-menu {
        display: block;
        overflow: hidden;
        max-height: 0;
        width: 100%;
    }
    .main-menu.active {
         width: 100%!important;
         max-height: 55em;
    }
    .main-menu ul {
         display: inline;
    }
    .main-menu ul li > a {
        padding: 6px 12px;
         display: block
    }
    .main-menu li, .main-menu > ul > li {
         display: block;
         padding: 0 10px;
    }
    .main-menu li a {
        text-align: left;
        display: block;
        padding: 0.8em;
        position: relative;
        border-bottom: 1px dashed #e9eadf;
    }
    .main-menu li a:hover {
        color: #929292;
    }
    .main-menu a:after {
        display: none;
    }
     #header {
         display: none;
    }
     #mobile-header {
         display: block;
    }
     #mobile-header img {
         width: 100%;
         height: auto;
         margin: 0;
         padding: 0;
         border: 0;
    }
    .thumbnails .image, .thumbnails .thumbnail {
        display: inline;
        height: auto;
        max-width: 14.5vw;
    }
    .cpgnav {
        width: 90%;
        float: none;
    }
    .thumbnails .image, .thumbnails .thumbnail {
         display: inline;
         height: auto;
         max-width: 13vw;
    }
    .thumbnails .thumb_title_views, .thumbnails .thumb_caption_ctime, .thumbnails .thumb_caption_mtime, .thumbnails .thumb_resolution, .thumbnails .thumb_num_comments, .thumbnails .thumb_caption_caption, .thumbnails .thumb_filename, .thumbnails .thumb_title_owner, .thumbnails .thumb_caption_msg_date, .thumbnails .thumb_caption_author {
         max-width: 13vw !important;
         overflow: hidden;
         display: block;
    }
    #footer .footer-wrapper {
        width: 90%;
    }
}
 @media (min-width: 400px) and (max-width: 480px) {
    body {
         overflow-x: hidden;
    }
    #menus-wrapper, .menu-wrapper {
         margin: 0 auto;
    }
    a.menu-link {
        display: inline-block;
        color: #4e4e4e;
        text-decoration: none;
        padding: 0;
        width: 100%;
        text-align: left;
        margin: 10px 0 10px 20px;
        text-transform: uppercase;
    }
    a.menu-link:before {
        content:"\f0c9";
        margin-right: 5px;
        font-style: normal;
    }
    .menu {
         clear: both;
         min-width: inherit;
         float: none;
    }
    .main-menu {
        display: block;
        overflow: hidden;
        max-height: 0;
        width: 100%;
    }
    .main-menu.active {
        width: 100%!important;
        max-height: 55em;
    }
    .main-menu ul {
        display: inline;
    }
    .main-menu ul li > a {
        padding: 6px 12px;
         display: block
    }
    .main-menu li, .main-menu > ul > li {
         display: block;
         padding: 0 10px;
    }
    .main-menu li a {
        text-align: left;
         display: block;
         padding: 0.8em;
         position: relative;
         border-bottom: 1px dashed #e9eadf;
    }
    .main-menu li a:hover {
        color: #929292;
    }
    .main-menu a:after {
        display: none;
    }
    #header {
         display: none;
    }
    #mobile-header {
         display: block;
    }
    #mobile-header img {
         width: 100%;
         height: auto;
         margin: 0;
         padding: 0;
         border: 0;
    }
    .cpgcontent {
         max-width: 93vw;
    }
    .cpgnav {
        width: 90%;
        float: none;
    }
    .thumbnails .image, .thumbnails .thumbnail {
         display: inline;
         height: auto;
         max-width: 13vw;
    }
    .thumbnails .thumb_title_title, .thumbnails .thumb_title_views, .thumbnails .thumb_caption_ctime, .thumbnails .thumb_caption_mtime, .thumbnails .thumb_resolution, .thumbnails .thumb_num_comments, .thumbnails .thumb_caption_caption, .thumbnails .thumb_filename, .thumbnails .thumb_title_owner, .thumbnails .thumb_caption_msg_date, .thumbnails .thumb_caption_author {
         max-width: 13vw !important;
         overflow: hidden;
         display: block;
    }
    .tableh1_info {
        display: none;
    }
    #footer .footer-wrapper {
        width: 90%;
    }
}
@media (max-width: 399px) {
    body {
         overflow-x: hidden;
    }
    #menus-wrapper, .menu-wrapper {
         margin: 0 auto;
    }
   a.menu-link {
        display: inline-block;
        color: #4e4e4e;
        text-decoration: none;
        padding: 0;
        width: 100%;
        text-align: left;
        margin: 10px 0 10px 20px;
        text-transform: uppercase;
    }
    a.menu-link:before {
        content:"\f0c9";
        margin-right: 5px;
        font-style: normal;
    }
    .menu {
         clear: both;
         min-width: inherit;
         float: none;
    }
    .main-menu {
        display: block;
        overflow: hidden;
        max-height: 0;
        width: 100%;
    }
    .main-menu.active {
        width: 100%!important;
        max-height: 55em;
    }
    .main-menu ul {
        display: inline;
    }
    .main-menu ul li > a {
        padding: 6px 12px;
         display: block
    }
    .main-menu li, .main-menu > ul > li {
         display: block;
         padding: 0 10px;
    }
    .main-menu li a {
        text-align: left;
         display: block;
         padding: 0.8em;
         position: relative;
         border-bottom: 1px dashed #e9eadf;
    }
    .main-menu li a:hover {
        color: #929292;
    }
    .main-menu a:after {
        display: none;
    }
    #header {
         display: none;
    }
    #mobile-header {
         display: block;
    }
    #mobile-header img {
         width: 100%;
         height: auto;
         margin: 0;
         padding: 0;
         border: 0;
    }
    .cpgcontent {
         max-width: 93vw;
    }
    .cpgnav {
        width: 90%;
        float: none;
    }
    .maintable {
        padding: 20px 4px;
    }
    .navmenu {
        padding: 0;
        border: 0;
    }
    .navmenu a {
        padding: 0;
    }
    .thumbnails .image, .thumbnails .thumbnail {
         display: inline;
         height: auto;
         max-width: 13vw;
    }
    .thumbnails .thumb_title_title, .thumbnails .thumb_title_views, .thumbnails .thumb_caption_ctime, .thumbnails .thumb_caption_mtime, .thumbnails .thumb_resolution, .thumbnails .thumb_num_comments, .thumbnails .thumb_caption_caption, .thumbnails .thumb_filename, .thumbnails .thumb_title_owner, .thumbnails .thumb_caption_msg_date, .thumbnails .thumb_caption_author {
         max-width: 13vw !important;
         overflow: hidden;
         display: block;
         margin: 4px 0 0 0;
    }
    .thumbnails .thumb_caption_ctime {
         border: 0;
    }
    .tableb {
        padding: 0;
    }
    .tableh1_info {
        display: none;
    }
    #footer .footer-wrapper {
        width: 90%;
    }
}

/* ----------------- CPG CSS ----------------- */
 .topmenu {
     line-height : 130%;
     font-size : 100%;
     text-shadow: none;
     Text-decoration: none;
}
 .topmenu a {
     text-decoration : none;
     text-shadow: none;
     text-decoration: none;
}
 .topmenu a:hover {
     text-decoration : none;
}
 .img_caption_table {
     border: none;
     background-color: #BE837C;
     width: 100%;
     margin: 0px;
}
 .img_caption_table th {
     background: #BE837C ;
     font-size : 100%;
     color : #000000;
     padding-top: 4px;
     padding-right: 10px;
     padding-bottom: 4px;
     padding-left: 10px;
     border-top : 1px solid #FFFFFF;
}
 .img_caption_table td {
     background: #BE837C ;
     padding-top: 6px;
     padding-right: 10px;
     padding-bottom: 6px;
     padding-left: 10px;
     border-top : 1px solid #FFFFFF;
     white-space: normal;
}
 .debug_text {
     border: #BDBEBD;
     background-color: #EFEFEF;
     width : 100%;
     margin : 0px;
}
 .clickable_option {
     cursor : default;
     margin-left: 5px;
}
 .listbox_lang {
     color: #000666;
     background-color: #F2F5F7;
     border: 1px solid #D1D7DC;
     font-size: 80%;
     vertical-align : middle;
}
 .pic_title {
     color: #434343;
     font-size: 100%;
     font-weight:bold;
     text-align : center;
     padding-top:0px;
     padding-bottom:0px;
     margin-top:0px;
     margin-bottom:0px;
     line-height:1.0em;
}
 .pic_caption {
     color: #434343;
     font-size: 100%;
     font-weight:normal;
     text-align : center;
     padding-top:0px;
     padding-bottom:0px;
     margin-top:0px;
     margin-bottom:0px;
     line-height:1.0em;
     background-color: transparent;
}
 .important {
    /* background-image : url(images/important.gif);
     */
     color: red;
     font-weight: bold;
     padding-left:1px;
     padding-right:1px;
     padding-top:3px;
     padding-bottom:3px;
}
 #cpgChooseLanguageWrapper {
     float:left;
}
 #cpgChooseThemeWrapper {
     float:left;
}
 .filmstrip_background {
}
 .prev_strip {
     text-align: left;
}
 .next_strip{
     text-align: right;
}
/** Swfupload css **/
 div.fieldset {
     border: 2px solid #F0F0F0;
     margin: 10px 0;
     padding: 20px 10px;
}
 div.fieldset span.legend {
     position: relative;
     padding: 3px;
     top: -30px;
     background-color: #F0F0F0;
     text-shadow: 1px 1px 0 #F0F0F0;
     font-weight: bold;
}
 div.flash {
     width: 375px;
     margin: 10px 5px;
     border-color: #F0F0F0;
}
 input[disabled]{
     border: 1px solid #ccc 
}
/* FF 2 Fix */
 .progressWrapper {
     width: 357px;
     overflow: hidden;
}
 .progressContainer {
     margin: 5px;
     padding: 4px;
     border: solid 1px #F0F0EE;
     background-color: #F0F0EE;
}
/* Message */
 .message {
     margin: 1em 0;
     padding: 10px 20px;
     border: solid 1px #FFDD99;
     background-color: #FFFFCC;
     overflow: hidden;
}
/* Error */
 .red {
     border: solid 1px #B50000;
     background-color: #FFEBEB;
}
/* Current */
 .green {
     border: solid 1px #DDF0DD;
     background-color: #EBFFEB;
}
/* Complete */
 .blue {
     border: solid 1px #CEE2F2;
     background-color: #F0F5FF;
}
 .progressName {
     font-size: 8pt;
     font-weight: 700;
     color: #555;
     width: 323px;
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
}
 .progressBarInProgress, .progressBarComplete, .progressBarError {
     font-size: 0;
     width: 0%;
     height: 2px;
     background-color: blue;
     margin-top: 2px;
}
 .progressBarComplete {
     width: 100%;
     background-color: green;
     visibility: hidden;
}
 .progressBarError {
     width: 100%;
     background-color: red;
     visibility: hidden;
}
 .progressBarStatus {
     margin-top: 2px;
     width: 337px;
     font-size: 7pt;
     font-family: Arial;
     text-align: left;
     white-space: nowrap;
     color: #555;
}
 a.progressCancel {
     font-size: 0;
     display: block;
     height: 14px;
     width: 14px;
     background-image: url(../../images/cancelbutton.gif);
     background-repeat: no-repeat;
     background-position: -14px 0px;
     float: right;
}
 a.progressCancel:hover {
     background-position: 0px 0px;
}
 .swfupload {
     vertical-align: top;
}
/**styles for photo manager*/
 table#pic_sort tr td {
     padding: 4px;
     border-bottom: 1px solid #e9e9e9;
}
/** styles for album manager and photo album*/
 table#album_sort tr td {
     padding: 4px;
     border-bottom: 1px solid #e9e9e9;
}
 table#album_sort tr td span.editAlbum {
     margin-left: 100px;
     font-size: 10px;
     line-height: 100%;
     text-decoration: underline;
     cursor: pointer;
     display: none;
     color: #FF0000;
}
 .cpg_message_info, .cpg_message_success, .cpg_message_warning, .cpg_message_error, .cpg_message_validation {
     border: 1px solid;
     margin: 10px auto;
     padding:15px 10px 15px 50px;
     background-repeat: no-repeat;
     background-position: 10px center;
     width: 97%;
     overflow: hidden;
}
 .cpg_message_info {
     color: #00529B;
     background-color: #BDE5F8;
     background-image: url('../../images/message/info.png');
}
 .cpg_message_success {
     color: #4F8A10;
     background-color: #DFF2BF;
     background-image: url('../../images/message/ok.png');
}
 .cpg_message_warning {
     color: #9F6000;
     background-color: #FEEFB3;
     background-image: url('../../images/message/warning.png');
}
 .cpg_message_error {
     color: #D8000C;
     background-color: #FFBABA;
     background-image: url('../../images/message/stop.png');
}
 .cpg_message_validation {
     color: #D63301;
     background-color: #FFCCBA;
     background-image: url('../../images/message/error.png');
}
 .cpg_summary {
     font-size:0.9em;
     border: 1px solid;
     margin: 10px 0px;
     padding:5px 10px 5px 10px;
     color: #FF2B9C;
     background-color: #FFDEEF;
     text-align:right;
     float:right;
     width:400px;
}
 #GB_window {
     background-color: #F2F5F7;
     border: 5px solid #CCD7E0;
}
 .external {
     background: transparent url('../../images/link.gif') 100% 50% no-repeat;
     padding-right: 10px;
}
 .detail_head_collapsed, .detail_head_expanded {
     color: #5C5C5C;
}
 