/*credit subtlepatterns.com for background texture*/

html, body { width:100%; height:100%; margin:0; padding:0; }
form { height:100%; min-height:100%;  }

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


body { font-family:'Open Sans', sans-serif; font-size:16px; color:#fff; line-height:30px; background:#222; }

form, div, table, td { margin:0; padding:0; }

a, a.Button { color:#fec502 ; text-decoration:none; }
a:hover, a.Button:hover { color:#fae7a5; text-decoration:underline; }
a.Button,  #PageContent a.Button { display:block; float:left; clear:left; font-size:16px; font-weight:bold; margin:10px 0 0 0; padding:5px 10px; background:#fec502; color:#000; cursor:pointer; text-decoration:none!important; text-transform: uppercase; }
.Button:hover, #PageContent a.Button:hover, a.Button:hover {background:#fae7a5; color:#000; text-decoration:underline!important;}


#PageContent a, a strong, strong a { text-decoration:underline !important; }

a img { border:none; outline:none; }

p, ul { padding:0; margin:26px 0; }
ul li { margin:0 0 0 14px; }

h1, h2, h3, h4, h5, h6 {padding:0; margin:10px 0 20px 0; color:#fff;}
h1, h5 {text-transform:uppercase;}

h1 { font:bold 28px/40px 'Open Sans', sans-serif; margin:0; }
h2 { font:400 24px/34px 'Open Sans', sans-serif; }
h3 { font:normal  20px/30px 'Open Sans', sans-serif; color:#999; }
h4, h5 { font:bold 18px/20px 'Open Sans', sans-serif; }
h6 { font:900 16px/20px 'Open Sans', sans-serif; color:#999; }


strong { font-weight:bold; }
em { font-style:italic; }

hr { background:none; border:none; border-top:1px solid #aaa; }

input,select,textarea { font-family:'Open Sans', sans-serif; }

blockquote:before { content:'\201C'; font-style:normal; font-size:80px; color:#fff;  display:block; position:absolute; top:40px; left:-60px;}
blockquote { max-width:50%; margin:0px 0 30px 60px !important; float:right; font-size:14px; font-style:italic; text-indent:60px; position:relative; color:#aaa !important;} 

    /* Good ol' clearfix */
    .cf:before,.cf:after, .Container:before, .Container:after { content: " "; display: table; }
    .cf:after, .Container:after { clear: both; }
    .cf, .Container { *zoom: 1; } /* For IE 6/7 only */
/* ------------------------------------------------------------------ Wrap & background elements */

#Wrapper { width:100%; height:100%; }  
#Wrapper #Container { height:100%; min-height:100%; position:relative; z-index:10; } 

#PageHeaderBottom,#MainAreaBottom { clear:both; } 


/* ------------------------------------------------------------------ Shared Styles */  

#PageHeader, .main-text-block, #ShoppingCart, #AlbumList .Row, #SubAlbumList .Row  { background:rgba( 0, 0, 0, 0.8); }  /*black*/
.ie7 #PageHeader, .ie7 .main-text-block, .ie7 #ShoppingCart, .ie7 #AlbumList .Row, .ie7 #SubAlbumList .Row,
.ie8 #PageHeader, .ie8 .main-text-block, .ie8 #ShoppingCart, .ie8 #AlbumList .Row, .ie8 #SubAlbumList .Row { background: #000; }  

.header, .title {background:rgba( 254, 197, 2, 0.5); }  /*Yellow*/      
.ie7 .header, .ie7 .title, .ie8 .header, .ie8 .title { background: #FED201; } 

.header:hover {background:rgba( 254, 197, 2, 0.9); }

.header, .header:hover { transition:background-color 0.5s linear; -webkit-transition:background-color 0.4s linear; }

.footer { background:rgba( 51, 51, 51, 0.62);} /*Grey*/
.ie7 .footer, .ie8 .footer { background: #666; }

/* ------------------------------------------------------------------ header */

.header, #PageHeader  {width:100%; position:fixed; top:0; left:0; z-index:20;}     
    
    .client-nav, .contact {width:50%; float:left; *width: 49%; }    
    .client-nav, .contact, .client-nav a, .contact a {color:#000; text-transform:uppercase; font-weight:700;}
    .client-nav {font-size:12px;}
        .client-nav ul, .Alignment {padding-left:250px;}
            .contact {height:80px; }
            .contact ul {padding-right:60px; float:right;}   
                .contact ul li {margin-left:60px; padding-left:50px; display:block; }
                .client-nav li {padding-left:50px;}
                .contact ul li, .client-nav ul li { background: url(pictures/gs_webgraphics/icons.png) 0 0 no-repeat;}
        
                .contact ul li.phone {background-position:0px -298px;}
                .contact ul li.email {background-position:0px -222px;}
                .client-nav ul li.client {background-position:0px 0px; margin-left:0;}
                .client-nav ul li.album {background-position:0px -75px;}
                .client-nav ul li.basket {background-position:0px -148px;}
            
                .contact ul li.facebook { background-position:-11px -370px; background:display:block; width:30px; height:30px; padding:0; overflow:hidden; text-indent:-999px;}
                .contact ul li.facebook a {display:block; width:30px; height:30px;}    

    .header li {float:left; list-style:none;}

#PageHeader { top:80px; width:100%; border:3px solid #fec502; border-left:none; border-right:none; }              

.logo, .LogoLink {display:block; width:123px; height:100px; overflow:hidden; text-indent:-999px; background:url(pictures/gs_webgraphics/logo.png) no-repeat; position:relative; z-index:40;}
.logo {position:fixed; left:60px; top:50px; z-index:40;}    



/* Main nav */

#PageHeader .PageMenu { float:left; position:relative; z-index: 99; width: 100%; }
#PageHeader .PageMenu .MenuItem:before {content:"//"; padding-right:20px; vertical-align:middle; color:#bbb; float: left;}
#PageHeader .PageMenu .MenuItem { float:left; display:block; position:relative; line-height:40px; width:auto; padding:0 10px;}
#PageHeader .MenuItem a { float:right; display:block; margin:8px 2px 0; padding:0; text-transform:uppercase; text-decoration:none; font:600 14px/25px 'Open Sans', sans-serif;  *float: none;  }
#PageHeader .MenuItem a.Selected, #PageHeader .MenuItem a:hover { border-bottom:1px solid #fff; }

#PageHeader .MenuItem.aid_YOUR_PHOTOS, #PageHeader .MenuItem.aid_ALBUM_CHOICE, #PageHeader .MenuItem.aid_BASKET {display:none;}

#PageHeader .PageMenu .First{padding-left:0;}
#PageHeader .PageMenu .First:before {content:"";}
#PageHeader .PageMenu .First a{margin-left:0;}


/* Submenu */

#PageHeader .PageMenu .SubMenu { display:none; margin:0; position:absolute; top:28px; left:10px; z-index:99999999; padding:5px 0 0 0; }
#PageHeader .PageMenu .MenuItem:hover .SubMenu { display:block; }

#PageHeader .PageMenu .SubMenu ul { margin:0; padding:0 0 5px 0; list-style:none; text-align:left;}
#PageHeader .PageMenu .SubMenu li { margin:0; padding:0; }
#PageHeader .PageMenu .SubMenu a { color:#fff !important; white-space:nowrap; padding:8px 10px !important; line-height:25px; font-size:14px; background:#cc3300; margin-top:0px;}
#PageHeader .PageMenu .SubMenu a:hover { color:#fff; background:#000; }
#PageHeader .PageMenu .SubMenu a.SubSelected { color:white !important; }  

.mobile-menu { display: none; }


/* ------------------------------------------------------------------ Main content area */

#MainArea {margin-left:60px;}

#PageContent {width:30%; margin:20% 5% 0 0; }

.main-text-block, .title { padding: 40px; }

.main-text-block .Content img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ Footer*/

.footer { padding:20px 40px; font-size:12px; line-height:18px; text-transform: uppercase; }
#PageContent .footer, #PageContent .footer a { color: #aaa; text-decoration: none!important; }

    .copyright, .phosys {width:50%; float:left;}
    .phosys {text-align:right; font-size: 9px; text-decoration:none!important; }
    #PageContent .phosys a { text-decoration:none!important; }
    #PageContent .phosys a:hover { text-decoration: underline!important; }
    
#PageFooter {display:none;}


/* ------------------------------------------------------------------ Quick Contact */
#QuickContact ul li a  { display:none; text-decoration:none; }
#QuickContact ul, #QuickContact li  { list-style:none; padding:0; margin:0; }   

#QuickContact ul li a.Button {display:block; color:#000; text-decoration:none;}

#QuickContact .Row     { padding:5px 0; margin:0 0 0 0; width:90%; }
#QuickContact .Footer  { width:126px; height:40px; margin:0; position:relative; }
#QuickContact .Info    { color:#888; font-weight:bold; }
#QuickContact .Message { font-weight:normal !important; }
#QuickContact .Label { width:100px; float:left; }

#QuickContact span, #QuickContact input, #QuickContact input { display:block; font-size:16px; cursor:text;  }
#QuickContact span {color:#fff;}
#QuickContact input, #QuickContact textarea { font-size:14px; width:80%; padding:6px 5px; color:#888; }
#QuickContact textarea { height:70px;}



/* ------------------------------------------------------------------ Image List */
body.BETA, body.cat_LRGPHOTOALBUM, body.cat_PHOTOALBUM {background:#333 url(pictures/gs_webgraphics/background.jpg);}
body.BETA #PageContent { width: 25%; float: left; margin-top: 200px; position: relative; }

body.LIGHTBOX #PageContent {width:30%;}

#ImageList, #AlbumList, #SubAlbumList { width: 65%; *width: 62%; }
#ImageList, #LightBox, #AlbumList { float:right; margin:200px 5% 0 0;}

body.cat_LRGPHOTOALBUM #ImageList, body.cat_PHOTOALBUM #ImageList { width: 93.5%; }

#ImageList.SubLevel0 { display: none; }

#ImageList.SubLevel1, #ImageList.SubLevel2, #ImageList.SubLevel3, #ImageList.SubLevel4, #ImageList.SubLevel5 {margin-top:0;}

.Item { display: inline-block; vertical-align: middle; margin:0 2% 4% 0; text-align:center; *float:left; *height:150px;}

body.CLIENTALBUM .Item, body.cat_LRGPHOTOALBUM .Item, .body.cat_PHOTOALBUM .Item { width: 17%; margin: 0 0 20px 2%; }
body.CLIENTALBUM .Item .ThumbTable, body.cat_LRGPHOTOALBUM .Item .ThumbTable, body.cat_PHOTOALBUM .Item .ThumbTable { margin: 0px auto; display: block; }

.Item .ThumbTable, .Item .ThumbTable td, .Item .ThumbTable tr, .Item .ThumbTable table, .Item .ThumbTable tbody, .ThumbNail, .ThumbRow { width: 100%; display: block; } 
.Item img, .ThumbNail img, .Thumbnail img { border:2px solid #fff; max-width: 100%; margin: 0px auto; display: block; }
.ThumbNail, .Thumbnail img { margin-bottom: 10px; display: block; }
.Item img:hover {border:2px solid #FEC502;}

#ImageList .LightBox { display:none; text-align: center; opacity: 0.4; max-width: 100%; }

body.CLIENTALBUM #ImageList .LightBox, body.cat_LRGPHOTOALBUM #ImageList .LightBox, body.cat_PHOTOALBUM  #ImageList .LightBox { display: block; }
#ImageList .LightBox input { max-width: 100%; }
#ImageList .LightBox:hover { opacity: 1; }
#ImageList .Item .LightBox a { display: none; }

#LightBoxList_MyError {color:#fff; font-size:20px;}


/* Paging */
#ImageList .Pager { width: 100%; padding: 40px 0 10px 0; clear: both; position: relative; margin: 40px 0; }

#ImageList .Pager .Button { float:left; }
#ImageList .Pager .Button a { float:left; color:#000; font-size:14px; font-weight:bold; text-transform:uppercase; text-decoration:none; padding:2px 15px; margin:7px 0; background:#fec502; display:block; position:relative; }
#ImageList .Pager .Button a:hover {text-decoration:underline; background:#fae7a5;}

#ImageList .Pager .Button.Next,
#ImageList .Pager .Button.Previous { position:absolute; top:0; left:0; }

#ImageList .Pager .Button.Next { right: 0; left: auto; }


/* Pagelinks */
#ImageList .Pager .Pages { width:100%; float:left; margin:20px 0; padding:5px 0; border:1px dotted #fff; }
#ImageList .Pager .Pages ul {list-style:none; padding:0; margin:0; }


/* Heading */
#ImageList .Pager .Pages ul li a { display:none; }


/* Links */
#ImageList .Pager .Pages ul ul li {float:left;}
#ImageList .Pager .Pages ul ul li a{ display:block; z-index:99998; color:#9e9b9c; float:left; font-weight:bold; font-size:11px; padding:4px; text-indent:10px; margin:0 5px 2px 5px;  
border:none; text-decoration:none; background:none; position:relative; }

#ImageList .Pager .Pages ul ul li a:empty { display:none; } /* bugfix */

#ImageList .Pager .Pages ul ul a:hover    { cursor:pointer; color:#fec502; }
#ImageList .Pager .Pages ul ul a.Selected { cursor:default; color:#fec502; text-decoration:underline; }
#ImageList .Pager .Pages ul ul a.Selected:hover { color:#fec502; }

li.Button:hover, #ImageList .Pager .Button:hover, #ImageList .Pager .Pages ul ul a:hover {background:none;}

*+html #ImageList .Pager .Pages { float:left; }
*+html #ImageList .Pager .Pages ul .Button * { float:left; } /* IE 7 */
*+html #ImageList .Pager .Pages ul li a { display:block; background:#fff; width:5px; height:25px; text-indent:-9999px; }
*+html #ImageList .Pager .Pages ul ul a { display:none; }
*+html #ImageList .Pager .Pages ul ul li a { display:none; }
*+html #ImageList .Pager .Pages ul ul li a:first-child { display:block; width:auto; text-indent:10px; background:url('pictures/gs_webgraphics/icon-page.gif') left center no-repeat; }


/* ------------------------------------------------------------------ AlbumList */

    #AlbumList .Row { width:17.5%; min-height: 330px; padding:20px 10px 20px 10px; margin:0 0 2% 2%; position:relative; overflow:hidden; cursor:pointer; display: inline-block; vertical-align: top; box-sizing: border-box; }

        #AlbumList .Row .ThumbTable, #AlbumList .Row .ThumbTable tr, #AlbumList .Row .ThumbTable td, #AlbumList .Row .ThumbTable table, #AlbumList .Row .ThumbTable tbody { display: block; width: 100%; }
            #AlbumList .Row .ThumbTable img { border:2px solid #fff; max-width: 100%; box-sizing: border-box; }

        #AlbumList .Row .Title {color:#fec502; float:left; clear:both; display:block; text-decoration:none; font-size:16px; line-height:16px; padding-bottom:5px; }

        #AlbumList .Row .Description {font-size:12px; font-style:italic; line-height:14px; float:left; clear:both; }

        #AlbumList .Row .Button {color:#aaa; position:absolute; bottom:5px; right:5px; font-size:11px; }

    #AlbumList .Row:hover .Title,
    #AlbumList .Row:hover .Button {color:#fae7a5; }
    
    #AlbumList .Row .Button:hover {background:none;}
    
/* ------------------------------------------------------------------ Album Login */
    
#AlbumLogin {clear:both; height:240px;}

.CLIENTALBUM #AlbumLogin .AlbumID, body.cat_LRGPHOTOALBUM #AlbumLogin .AlbumID, body.cat_PHOTOALBUM #AlbumLogin .AlbumID {display:none;}


/* ------------------------------------------------------------------ Lightbox */

#LightBoxList_List { width: 100%; }

#LightBox { padding:0; font-size:12px; width:55%; }

#LightBox .Header { display:none; }

#LightBox .Row { width: 140px; height: 150px; position:relative; overflow:hidden; list-style:none; float:left; padding:0; margin:0 0 20px 20px; cursor:pointer; }

*+html #LightBox .Row { width:140px; }

#LightBox .Row .Product { width: 100%; margin:0; padding:0 0 0 0; font-size:12px; text-align:center; line-height:16px; text-align: center; }

#LightBox tr { float:left; }
#LightBox td tr { float:none; }

#LightBox .Row .Quantity { display:none; }
#LightBox .Row .Option   { display:none; }

#LightBox .Row .Remove { width: 75px; margin: 0px auto; }
#LightBox .Row .Remove input { display: inline-block; vertical-align: middle; }
#LightBox .Row .Remove:before { content: "Remove:";}

#LightBox .Footer .Send { display:none; }
#LightBox .Footer .Button { float: right; margin-bottom: 40px; }

#LightBox .ErrorText { margin-left:20px; color:#fff; font-weight:bold; }     

/* ------------------------------------------------------------------ Image Popup Window */

#PopupWindow #MainImage { height: 100%; }
#PopupWindow #MainImage, .OuterImage, .MainImageWrapper, .MainImage { overflow: auto; clear: both; }
#PopupWindow { background:#333 url(pictures/gs_webgraphics/background.jpg); }
#PopupWindow img#MainImage_TheImage { border: 2px solid #fff; display: block; margin: 0px auto; margin-top: 40px; }

#PopupWindow .ImageControls { width:100%; height:40px; margin: 40px 0 0 0; }

#PopupWindow .ImageControls .Previous { float:left; font-weight:bold; font-size:0.8em; text-decoration:none; margin:5px 0 0 10px; }
#PopupWindow .ImageControls .Previous:hover { text-decoration:none;}
#PopupWindow .ImageControls .Next { float:right; font-weight:bold; font-size:0.8em; text-decoration:none; margin:5px 10px 0 0; }
#PopupWindow .ImageControls .Next:hover { text-decoration:none;}
#PopupWindow a[disabled] { display:none; }

#PopupWindow .CaptionBottom { width:100%; text-align:center; font-size:0.8em; font-style:italic; font-weight:bold; color:#fff; text-transform: uppercase;  }

.ImageFilter { text-align: center; margin: 10px 0;  }
.ImageFilter img { margin: 0 15px 0 0; }
.ImageFilter:before { content: "Choose Image Colour:"; font-size: 12px; padding-right: 10px; text-transform: uppercase; display: inline-block; vertical-align: middle; }

/* ------------------------------------------------------------------ Add to basket popup */

#MetaData {width:140px; margin: 20px 20px 0 20px; }
#MetaData span.Button { display:block; cursor:pointer; padding:5px 10px; background:#FEC502; color:#000; text-decoration:none; font-size:14px; font-weight:bold;  }
#MetaData span.Button:hover { background:#FAE7A5; }
#MetaData span.Button:after {padding-left:5px; content:"\00bb"; }

.MetaData { position:fixed; top:55px; left:20px; text-align:left; background:#333; padding:5px; font-size:14px; border:2px solid #fff; width:280px!important; max-width: 90%; cursor:pointer; } 

  
.MetaData .MetaDataTitle { display:none; font-size:11px; font-weight:bold; font-size:14px; text-align:left; line-height:25px; color:#fff; padding:5px; background:#555;}

.MetaData .MetaDataField, .MetaData .MetaDataFieldOver { font-size:14px; color:#fff; line-height:14px; padding: 10px 0; }
.MetaData .MetaDataFieldOver { cursor:pointer; color:#FEC502; }

.MetaData .MetaDataHeading { font-size:11px; font-weight:bold; color:#fff; line-height:25px; padding:4px; background:#555; }

.MetaData .MetaDataCommand, .MetaData .MetaDataCommandOver { font-size:14px; text-align:right; color:#fff; line-height:25px; padding: 10px 0; padding-right:20px !important; *padding-right:40px !important;}
.MetaData .MetaDataCommandOver { cursor:pointer; color:#FEC502; background: url(pictures/gs_webgraphics/cart.png) no-repeat right top; }

.MetaData .MetaDataBasket, .MetaData .MetaDataBasketOver { font-size:14px; color: #000; line-height:25px;}
.MetaData .MetaDataBasketOver { color:#fff; }   

#PopupWindow #MainImage_imgTable .MetaData .MetaDataField td, #PopupWindow #MainImage_imgTable .MetaData .MetaDataFieldOver td { width: 100%; display: block; }
#PopupWindow #MainImage_imgTable .MetaData .MetaDataTitle, #PopupWindow #MainImage_imgTable .MetaData .MetaDataHeading  { width: 100%; }     

#PopupWindow #MainImage_imgTable #MainImage_TheImage { max-width: 100%!important; height: auto!important; }

.MetaData nobr { white-space: pre-wrap!important; } 

.MainImage { padding: 0 20px; }
.MainImage .Image { max-width: 100%; height: auto!important; display: block; }

/* ------------------------------------------------------------------ Basket Page */



/* ------------------------------------------------------------------ Shopping Cart */

#ShoppingCart { width: 65%; float: right; margin-top: 200px; margin-right: 5%; padding: 15px 40px; box-sizing: border-box; *width: 60%; }

#ShoppingCart .Header { border-bottom: 1px dotted #fff; overflow: auto; color: #888888; }

#ShoppingCart .Header .Product, #ShoppingCart .Header .Option, #ShoppingCart .Header .Price, 
#ShoppingCart .Header .Quantity, #ShoppingCart .Header .Total, #ShoppingCart .Header .Remove { float: left; width: 15%; text-align: right; }

#ShoppingCart .Header .Thumbnail { width: 10%; text-indent: -9999em; }
#ShoppingCart .Header .Product  { text-align: left; width: 20%; text-indent: -9999em; }
#ShoppingCart .Header .Option   { text-align: left; width: 25%; text-indent: -9999em; }

#ShoppingCart .Header .Remove  { width: 10%; }

#ShoppingCart .List { overflow: auto; clear: both; }

#ShoppingCart #BasketList_List { width: 100%; }
#ShoppingCart .Quantity input { text-align: right; width: 45px; }

#ShoppingCart .Row { padding:10px 0; overflow:auto; clear:both; border-bottom:1px dotted #574B51; font-size:16px; }

#ShoppingCart .Row .Thumbnail table { width:20%; height:130px; }
#ShoppingCart .Row .Thumbnail img { display:block; border:2px solid #fff; max-width:100%; height:auto; }

#ShoppingCart .Row .Thumbnail { float:left; text-align:center; width:20%; padding-right: 5%; }
#ShoppingCart .Row .Product   { display:none;}

#ShoppingCart .Row .Option, #ShoppingCart .Row .Price, #ShoppingCart .Row .Quantity,  
#ShoppingCart .Row .Total, #ShoppingCart .Row .Remove   { float:left; text-align:right; width:15%; padding-top:20px; } 
#ShoppingCart .Row .Option  { text-align:left; width:25%; }
#ShoppingCart .Row .Remove  {width:10%;}

#ShoppingCart .Footer { overflow:auto; padding:10px 0; }

#ShoppingCart .Footer .Total { float:right; clear:both; font-weight:bold; font-size:20px; width:100%; text-align:right; color:white; }
#ShoppingCart .Footer .Button { float:left; margin:15px 20px 0px 0px; clear:none; }

#ShoppingCart .Row .Thumbnail tr, #ShoppingCart .Row .Thumbnail td, #ShoppingCart .Row .Thumbnail table, #ShoppingCart .Row .Thumbnail tbody { display: block; width: 100%; }


/* ------------------------------------------------------------------ ColorBox */

/*  ColorBox Core Style */

#colorbox, #cboxOverlay, #cboxWrapper {position:absolute; top:0; left:0; z-index:999999999; overflow:hidden; border: none; }
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:visible;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/*  ColorBox example user style */
    
#cboxOverlay { background:#000 url('pictures/gs_webgraphics/bg-pattern.png') 0 0 repeat;  }
#cboxWrapper { }
#cboxTopLeft      { width:80px; height:30px; }
#cboxTopCenter    {             height:30px; }
#cboxTopRight     { width:80px; height:30px; }
#cboxMiddleLeft   { width:80px;              }
#cboxMiddleRight  { width:80px;              }
#cboxBottomLeft   { width:80px; height:30px; }
#cboxBottomCenter {             height:30px; }
#cboxBottomRight  { width:80px; height:30px; }

#cboxContent { background:#fff; padding:0 2px 2px 2px; }

.cboxPhoto { display:block; margin-top:2px; }

#cboxLoadingGraphic { background:url('pictures/gs_webgraphics/colorbox_loading.gif') center center no-repeat; }
#cboxLoadingOverlay { background:transparent; }

#cboxTitle     { display:none !important; }
#cboxCurrent   { display:none !important; }
#cboxSlideshow { display:none !important; }

#cboxSlideshow.hover { }

#cboxPrevious, #cboxNext { position:absolute; top:0; width:49%; height:100%; margin:0 0 -50% 0; text-indent:-9999px; border: none; }

#cboxPrevious { left:-70px;  background:url('pictures/gs_webgraphics/prev.png') left  center no-repeat; }
#cboxNext     { right:-70px; background:url('pictures/gs_webgraphics/next.png') right center no-repeat; }

#cboxClose { position:absolute; display:none; top:-25px; right:0; padding:0 5px; text-align:center; color:#FEC502; font-size:14px; line-height:20px; margin:5px 0; }
#cboxClose:hover { color:#fae7a5; }

#cboxLoadedContent { position:relative; padding:0; margin:0; }
#cboxLoadedContent iframe { display:none !important; position:absolute !important; top:0 !important; left:0 !important; }


/* ------------------------------------------------------------------ Sub-Album Lists */

#SubAlbumList { overflow:auto; padding-bottom:20px; margin:200px 5% 0 0; float:left }

#SubAlbumList .Row { width:17.5%; height: 230px; padding:20px 10px 20px 10px; margin:0 0 2% 2%; position:relative; overflow:hidden; cursor:pointer; display: inline-block; vertical-align: top; box-sizing: border-box; }

#SubAlbumList .Row .Title {color:#fec502; float:left; clear:both; display:block; text-decoration:none; font-size:16px; line-height:16px; padding-bottom:5px; }     
#SubAlbumList .Row .Description {font-size:12px; font-style:italic; line-height:14px; float:left; clear:both; }

#SubAlbumList .Row .Button {color:#aaa; position:absolute; bottom:5px; right:5px; font-size:11px; }
#SubAlbumList .Row:hover .Title,
#SubAlbumList .Row:hover .Button { color: #fae7a5!important; }
    
#SubAlbumList .Row .Button:hover {background:none;}

#SubAlbumList .ThumbTable table, #SubAlbumList .ThumbTable tbody, #SubAlbumList .ThumbTable tr, #SubAlbumList .ThumbTable td { display: block; width: 100%; }
#SubAlbumList .ThumbTable  { display: block; }

#SubAlbumList .Row .ThumbTable img { border:2px solid #fff; max-width: 100%; box-sizing: border-box; }



/* Back */

#SubAlbumList .Row.Back { height:20px; width:100%; padding:0 0 20px 0; margin: 0; background: none; font-weight: bold; }

#SubAlbumList .Row.Back .ThumbTable, #SubAlbumList .Row.Back .Thumbnail { display:none; }

#SubAlbumList .Row.Back .Title       { margin:0; }
#SubAlbumList .Row.Back .Description { display:none; }
#SubAlbumList .Row.Back .Button      { display:none; }



/* -------------------------------------------------------------------------------- */
/* No Script */
/* -------------------------------------------------------------------------------- */

#NoScript, .chromeframe {position:fixed; bottom: 0; left:0; width:100%; z-index:9999999; background: #333;  text-align:center;}

#NoScript p, .chromeframe p {color:#fff; padding:20px 150px; font-size:16px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}



/* -------------------------------------------------------------------------------- */
/* Media Queries */
/* -------------------------------------------------------------------------------- */

/*1480px*/

        @media only screen and (max-width: 1580px) {
        
          .contact {font-size:12px;} 
          .contact, .client-nav {width:auto;}
          .contact ul li  {margin-left:20px;}
        
          #AlbumList, #ImageList, #LightBox, #ShoppingCart, #SubAlbumList  {width:60%;} 
          body.BETA #PageContent { width: 30%; } 
          
          .main-text-block, .title {padding:40px;}  
        }     
        
         @media only screen and (max-width: 1440px) {
         
        #PageContent { width: 50%; }
        #AlbumList .Row, body.CLIENTALBUM .Item, #SubAlbumList .Row, body.cat_LRGPHOTOALBUM .Item, body.cat_PHOTOALBUM .Item  { width: 22.5%; }
        
        }  
  
             
/*1280px*/
        @media only screen and (max-width: 1280px) {
        
       .logo { position: absolute; top: 75px; }
       .header { position: relative; } 
       #PageHeader { position: static; }
              
       .client-nav ul { padding-left: 60px; }
       .contact ul { padding-left: 10px; }
       .contact ul li.phone { margin-left: 0; }
       
       .Alignment { padding-left :200px; }

        body.BETA #PageContent, #AlbumList, #ImageList, #LightBox, #ShoppingCart, #SubAlbumList { margin-top: 100px; }
        

        } 


/*1140px*/        
        @media only screen and (max-width: 1140px) {
         #AlbumList, #ImageList, #LightBox, #ShoppingCart, #SubAlbumList  { width: 50%; } 
         body.BETA #PageContent { width: 35%; } 
                 
        .Item { width: 30%; margin-right: 2.5%; display: inline-block; vertical-align: top; float: none; height: auto; }
        .Item .ThumbTable, .Item .ThumbTable tr, .Item .ThumbTable td, .Item .ThumbTable tbody, .Item .ThumbTable table { display: block; width: 100%; }
        .Item a img { max-width: 100%; width: auto; height: auto; max-height: 100px; }  
        
        #AlbumList .Row, body.CLIENTALBUM .Item, #SubAlbumList .Row, body.cat_LRGPHOTOALBUM .Item, body.cat_PHOTOALBUM .Item { width: 30%; }
       
        }
        
/*1020px*/         
        @media only screen and (max-width: 1020px) {
        
       .contact, .client-nav  { font-size: 10px; } 
       .contact ul { padding:0 0 0 10px; }  
       
       }  
       
       
        @media only screen and (min-width: 920px) and (max-width: 1280px) {  

        }      
        
/*920px*/

      @media only screen and (max-width: 920px) {        
                 
        #MainArea {margin:0 60px;}
        body.BETA #PageContent, #AlbumList, #ImageList, #LightBox, #ShoppingCart, #SubAlbumList  { float: none; width: 100%; margin-top: 50px; }
        body.BETA .text-area .footer  { display: none; } 
        
       .Item a img { max-height: auto; }    

      }
        
/*820px*/        
        @media only screen and (max-width: 1080px) {  
        
        .mobile-menu { display: block; float: right; padding: 5px 10px; font-weight: bold; } 
        .hamburger { display: inline-block; width: 20px; height: 16px; vertical-align: middle; margin-right: 5px; }
        .hb-bar { display: block; height: 2px; background: #FEC502; width: 20px; position: relative; box-sizing: border-box; transition: all 0.5s ease-in-out 0s; opacity: 1; }
        .hb-bar + .hb-bar { margin-top: 4px; }                         
                
        .hb-bar { transform: rotate(0deg); top: 0; }
        .hb-bar:nth-child(2n) { transform: rotate(0deg); }
        .hb-bar:nth-child(3n) { opacity: 1; }
            
        .menu-open .hb-bar { transform: rotate(45deg); top: 6px; }
        .menu-open .hb-bar:nth-child(2n) { transform: rotate(135deg); top: 0; }
        .menu-open .hb-bar:nth-child(3n) { opacity: 0; } 
        
        body.fixedPosition { position: fixed; background: #000; }
        body.fixedPosition #superbgimage, body.fixedPosition #MainArea { opacity: 0.4; }
        #PageHeader, #PageHeader.push, body.fixedPosition .logo, .logo { transition: left 0.3s ease; }
        #Wrapper { right: 0; position: relative; }
        #Wrapper, #Wrapper.push, #PageHeader .PageMenu, #PageHeader .PageMenu.open-menu { transition: right 0.3s ease;}
        #PageHeader.push { left: -241px; opacity: 1; }
        #Wrapper.push { right: 241px; }
        body.fixedPosition .logo { left: -241px; }
        
        #PageHeader.push .Alignment { overflow: auto; height: 100%; }
        
        .Alignment { padding: 0; }
        .client-nav {display:none;}
        
        .header { display: none; }
        .PageHeader { margin-top: 40px; }
        .logo { top: 12px; left: 20px; }

           
        #PageHeader .PageMenu { width: 240px; position: fixed; right: -241px; top: 0; bottom: 0; background: #000; }
        #PageHeader .PageMenu.open-menu { right: 0; }
        
        #PageHeader .PageMenu .MenuItem {background:none; float:none; padding:0; }
        #PageHeader .MenuItem a {float:none; display:block; line-height:40px; padding:10px 20px; border-bottom:1px solid #fff; margin: 0; }
        #PageHeader .MenuItem a:hover, #PageHeader .MenuItem a.Selected:hover {background:#FEC502; color:#000;}
        #PageHeader .MenuItem a.Selected {background:none; text-decoration:underline;}
        
        #PageHeader .PageMenu .MenuItem:before {content:""; padding-right:0;}
        
        #PageHeader .MenuItem.aid_YOUR_PHOTOS, #PageHeader .MenuItem.aid_ALBUM_CHOICE, #PageHeader .MenuItem.aid_BASKET {display:block;}
            
        #MainArea {margin:0 20px;}

      
        }  
               
/*768px*/        
        @media handheld, only screen and (max-width: 768px) {
        

        #PageContent { width: 70%; }
        
                
        
        #ShoppingCart .Header { display:none; }
    
        #ShoppingCart .Row { height: auto; padding-bottom: 20px; }
        #ShoppingCart .Row .Thumbnail, #ShoppingCart .Row .Option, #ShoppingCart .Row .Price, #ShoppingCart .Row .Quantity, 
        #ShoppingCart .Row .Total, #ShoppingCart .Row .Remove {float:none; width:95%; text-align:left; padding-left:5%;}
        #ShoppingCart .Row .Thumbnail {display:block; width:90%; padding-top:10px;}
                       
        #ShoppingCart .Row .Price:before, #ShoppingCart .Row .Quantity:before, 
        #ShoppingCart .Row .Total:before, #ShoppingCart .Row .Remove:before {padding-right:5px; font-weight:bold;}
                       
        #ShoppingCart .Row .Price:before {content:"Price:"; }
        #ShoppingCart .Row .Quantity:before {content:"Quantity:"; }
        #ShoppingCart .Row .Total:before {content:"Total:"; }
        #ShoppingCart .Row .Remove:before {content:"Delete:"; }
        
       
        }   

/*600px*/        
@media screen and (max-width: 600px) { 

#PopupWindow #MainImage_imgTable, #PopupWindow #MainImage_imgTable table, #PopupWindow #MainImage_imgTable tbody, #PopupWindow #MainImage_imgTable td, #PopupWindow #MainImage_imgTable tr { width: 100%; display: block; box-sizing: border-box; }
#PopupWindow #MainImage_imgTable { max-width: 90%; }
#PopupWindow #MainImage_imgTable #MainImage_TheImage { margin: 80px 20px; }

} 

/*580px*/        
        @media handheld, only screen and (max-width: 580px) {
        
        
        .main-text-block, .title { padding: 20px; }
        #PageContent { margin: 60% 0 0 0; width: 100%; }
                
        #PageHeader .MenuItem.aid_YOUR_PHOTOS, #PageHeader .MenuItem.aid_ALBUM_CHOICE, #PageHeader .MenuItem.aid_BASKET {display:block;}  
        .Item, body.CLIENTALBUM .Item, #AlbumList .Row, #SubAlbumList .Row, body.cat_LRGPHOTOALBUM .Item, body.cat_PHOTOALBUM .Item { width: 46.5%; }
        
        #QuickContact input, #QuickContact textarea { width: 100%; }
        
        blockquote { width: 100%; max-width: 70%; float: none; }
        blockquote::before { top: 0; }
        
        } 
        
/*480px*/
        @media handheld, only screen and (max-width: 480px) {
            #PopupWindow #MainImage_imgTable #MainImage_TheImage  { max-height: 300px!important; max-width: 100%; height: auto; width: auto!important; } 
            #PopupWindow .CaptionBottom { bottom: 80px; }
        }         
    
/*400px*/
        @media handheld, only screen and (max-width: 400px) {

        #LightBoxList_List tr, #LightBoxList_List td, #LightBoxList_List, #LightBoxList_List tbody { display: block; width: 100%; max-width: 100%; }
        #LightBox .Row { margin: 0 auto 20px auto; float: none; height: auto; }
        
         #AlbumList .Row, #SubAlbumList .Row { width: 100%; margin-right: 0; margin-left: 0; height: auto; }
         .Item a img { max-height: none; }
   
        }   
        
/*400px*/
        @media handheld, only screen and (max-width: 320px) {

         body.CLIENTALBUM .Item, body.cat_LRGPHOTOALBUM .Item, body.cat_PHOTOALBUM .Item { width: 100%; margin-right: 0; margin-left: 0; height: auto; }
   
        }
// from System Meta Data