* { margin:0; }
html, body { font-family:verdana,sans-serif; font-size:11px; margin:0; padding:0; color:#313131; height:100%; width:100%; }
html { background:#fff url('pictures/gs_webgraphics/bg_turq.gif') top repeat-x; }
form { width:100%; height:100%; }

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

a         { color:#393939; outline:none; }
a:visited { color:#888; }
a:hover   { color:#17acdd; text-decoration:none; }
a img     { border:none; outline:none; }
strong    { font-weight:bold; }
p, ul     { line-height:1.7em; padding-bottom:10px; }

h1 { clear:both; padding-bottom:0.2em; margin:0; font:italic 20px verdana,sans-serif; color:#00c0d1; }
h2 { clear:both; padding:0.5em 0;      margin:0; font:normal 18px verdana,sans-serif; color:#313131; }
h3 { clear:both; padding:0.3em 0;      margin:0; font:bold   16px verdana,sans-serif; color:#313131; }

.Button { font-weight:bold; font-size:1.2em; text-decoration:none; background:#00c0d1; color:#fff;  padding:4px 10px; }
.Button:hover { background:#00d4b5; color:#fff;  }

img { max-width: 100%; height: auto; }

/* Good ol' clearfix */
.cf:before, .cf:after, #AlbumList:before, #AlbumList:after { content: " "; display: table; }
.cf:after, #AlbumList:after{ clear: both; }
.cf, #AlbumList { *zoom: 1; } /* For IE 6/7 only */

/* ------------------------------------------------------------------ Main Nav */

#PageHeader { width: 100%; max-width: 100%; max-width:960px; height:150px; background:url('pictures/gs_webgraphics/logo.gif') 15px 35px no-repeat; }

#PageHeader .PageMenu { height:30px; float:right; padding:55px 15px 0 0; }
#PageHeader .PageMenu .Alignment { float:right; }

#PageHeader .PageMenu .MenuItem { float:left; padding:0; margin:0 1px; }

#PageHeader a, .mobile-menu { color:#5b5b5b; font-family:arial,verdana,sans-serif; line-height:50px; font-weight:bold; font-size:14px; text-decoration:none; display:block; background:#e9e9e9; padding:0 10px; }
#PageHeader a:hover,
#PageHeader a.Selected { color:#fff; background:#00c0d1; }

.LogoLink { width:200px; height:100px; position:absolute; top:35px; display:block; text-indent:-9999px; overflow:hidden; }

/* ------------------------------------------------------------------ Main Area */

#Wrapper   { width: 100%; max-width:960px; min-height:100%; margin:0 auto; z-index:100; background:#fff url('pictures/gs_webgraphics/bg_turq.gif') top repeat-x;
-moz-box-shadow:0px 0px 5px #aaa; -webkit-box-shadow:0px 0px 5px #aaa; box-shadow:0px 0px 5px #aaa; behavior:url('pictures/gs_webgraphics/PIE.htc'); position:relative; }

#Container { overflow:auto; padding-bottom: 120px;  } 

#MainArea #PageContent { margin:0 auto; }

#MainArea #ImagePlayer,
#MainArea #flashcontent,
#MainArea #MainImage     { max-height:440px; margin:0 auto; padding:10px; margin: 0 15px; background:#e9e9e9; overflow: hidden; }

body.BETA #MainArea #ImagePlayer, /* Hides jQuery image player for Contact + Portfolio pages */
#MainArea #ImagePlayer .id { display:none; }

#MainArea #PageText { margin:0 auto; padding:40px 15px; clear:both; }

#MainArea #PageText .A { width:30%; float:left; }
#MainArea #PageText .B { width:65%; float:right; padding-bottom:40px; }

#Map { width:60%; height:440px; float:right; padding:1.5%; margin:0 15px 10px 0; background:#e9e9e9; }
#Map iframe { border:1px solid #ccc; }


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

#PageFooter  { display:none; }
#Footer      { width:100%; height:120px; position:relative; z-index:101; margin-top:-120px; /* negative value of footer height */
	clear:both; background:url('pictures/gs_webgraphics/bg_grey.gif') bottom repeat-x; }
#FooterAlign { width: 100%; max-width:930px; padding-top:20px; font-size:10px; border-top:1px solid #e9e9e9; margin:0 auto; }

#Footer strong  { color:#00c0d1; font-size:18px; padding-right:10px; }
#Footer a       { color:#313131; text-decoration:none; }
#Footer a:hover { color:#00c0d1; }

#Footer .Left  { float:left; }
#Footer .Left .Email     { line-height:28px; font-size:14px; font-weight:bold; }
#Footer .Left .Copyright,
#Footer .Left .Phosys    { line-height:18px; }

#Footer .Right { float:right; text-align:right; }
#Footer .Right .Phone    { line-height:28px; font-size:14px; font-weight:bold; }
#Footer .Right .Gap      { padding:0 10px; }
#Footer .Right .Address  { line-height:18px;  }



.ie7 #Wrapper, .ie8 #Wrapper, .ie7 #PageHeader, .ie8 #PageHeader { width: 960px; } 
.ie7 #FooterAlign, .ie8 #FooterAlign  { width: 930px; }

/* ------------------------------------------------------------------ Gallery */

#Gallery, #T-Gallery, #thumbnails { visibility: hidden; }         
.main-image, #ImagePlayer{ background: url('pictures/gs_webgraphics/loading.gif') no-repeat center center; }

#gallery-wrapper { background: #eee; clear: both;  padding: 15px; margin: 0 15px; overflow: hidden; max-height: 440px; }  
    .main-image { float: right; width: 70%; position: relative; } 
        .SlideshowImage { float: left; text-align: center; }       
            .SlideshowImage img { max-width: 100%; }

.id, .caption { display: none; }

#thumbnails { width: 100%!important;  }
    .thumb-page { float: left; min-height: 350px!important; width: 100%; }            
    .thumbnails-wrapper { float: left; width: 28.5%; position: relative; }
        .thumbframe { width: 75px; height: 75px; overflow: hidden; border: 2px solid #fff; float: left; margin: 5px; cursor: pointer; box-sizing: border-box; }
            .thumbframe.selected { border: 2px solid #00BFD0; }
            .thumbframe img { min-height: 75px; max-width: 100px;}           

#next, #prev { width: 50%; float: left; margin-top: 20px; }  
#nextImage, #prevImage { width: 50%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99999; }

    #next a, #prev a, #nextImage a .arrow, #prevImage a .arrow { width: 33px; height: 33px; display: block; overflow: hidden; text-indent: -9999px; background: url('pictures/gs_webgraphics/arrows.gif') no-repeat bottom left; }
    #nextImage a, #prevImage a { display: block; width: 100%; height: 100%; }
    
    #nextImage a .arrow, #prevImage a .arrow { background: none; position: absolute; top: 42%; left: 0; }
    #nextImage, #nextImage a .arrow { right: 0; left: auto; }
    
    #prevImage:hover a .arrow, #nextImage:hover a .arrow { background: url('pictures/gs_webgraphics/box-arrows.gif') no-repeat bottom left; opacity: 0.6; margin-left: 20px; }
    #nextImage:hover a .arrow { margin-right: 20px; }
    #next a, #nextImage:hover a .arrow { background-position: top left; float: right; } 
        #next a.disabled, #prev a.disabled { opacity: 0.2; }
        #nextImage a.disabled, #prevImage a.disabled, #prevImage:hover a.disabled .arrow, #nextImage:hover a.disabled .arrow { background: none; }
        
.ie7 .thumbframe { width: 60px; height: 60px; }
.ie7 #next { width: 33%; }


/* ------------------------------------------------------------------ Portfolio */

#AlbumList { height:auto; margin:0 15px; padding:10px 15px; background:#e9e9e9; clear: both; }

#AlbumList .Row { width: 27.7%; height:170px; float:left; margin:15px 2.8%; cursor:pointer; overflow:hidden; background:#fff;
-moz-box-shadow:0px 0px 5px #aaa; -webkit-box-shadow:0px 0px 5px #aaa; box-shadow:0px 0px 5px #aaa; behavior:url('pictures/gs_webgraphics/PIE.htc'); position:relative; }
#AlbumList .Row .ThumbTable   { width:100%; height:135px; float:left; overflow:hidden; }
#AlbumList .Row .Thumbnail    { width:100%; height:135px; float:left; overflow:hidden; }

#AlbumList .Row .Title        { width:90%; position:absolute; bottom:20px; left:0; z-index:999999; padding:0 5%; margin:0; font:normal 18px/18px tahoma,arial,sans-serif; color:#5b5b5b; letter-spacing:3px; text-transform:uppercase; background:#fff;  }
#AlbumList .Row .Description  { display:none;  }

#AlbumList .Row .Button       { width:90%; height:20px; position:absolute; bottom:0; left:0; float:left; padding:0 5%; margin:0; font:bold italic 14px/20px tahoma,arial,sans-serif; color:#fff; }
#AlbumList .Row:hover .Button { background:#fff; color:#00c0d1; }


/* ------------------------------------------------------------------ Contact Form */

#ContactForm             { width:265px; height:430px; background:#e9e9e9; float:left; padding:30px 10px 0; margin:0 0 10px 15px; }
#ContactForm .Row        { width:100%;  float:left; clear:both; margin:8px 0; }
#ContactForm .Label      { width:auto;  float:left; padding:2px 0; text-transform:uppercase; color:#888; }
#ContactForm .Field      { width:257px; float:left; padding:5px 3px; margin:0; border:1px solid #ccc; color:#333; font-family:courier,arial,sans-serif; }
#ContactForm  select.Field { width:264px; }

#ContactForm .Button     { float:right; margin:10px 2px; }

#ContactForm .VAMRequiredFieldMarker { width:10px; height:10px; padding:0 0 0 5px; margin:0; display:block; overflow:hidden; background: url('pictures/gs_webgraphics/requireddot.gif') right bottom no-repeat; }
#ContactForm .VAMRequiredFieldMarker img { position:relative; left:-99999px; display:block; }

*+html #ContactForm .Row { position:relative; }
*+html #ContactForm .VAMRequiredFieldMarker { position:absolute; top:0; right:0; }


/* ------------------------------------------------------------------ Page Specific */



#SiteMap { display:none; }


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

.mobile-menu { display: none; }

@media handheld, only screen and (max-width: 960px) {

#FooterAlign { width: auto; padding: 20px 15px; }       
#Map { width: calc(100% - 350px);}   

.thumbframe { width: 70px; height: 70px; }    

}


@media handheld, only screen and (max-width: 940px) {

#gallery-wrapper { max-height: 700px; } 
.thumb-page { min-height: 170px!important; }

.thumbnails-wrapper, .main-image { width: 100%; } 
#thumbnails { margin-top: 10px; }
    
}


@media handheld, only screen and (max-width: 660px) {

#PageHeader { background: none; overflow: auto; }

.LogoLink { width: 100%; background:url('pictures/gs_webgraphics/logo.gif') center center no-repeat; }

#PageHeader { height: auto; margin: 20px 0; }

#PageHeader .PageMenu, #PageHeader .PageMenu .Alignment { padding: 0; margin: 0; float: none; }
#PageHeader .PageMenu { margin-top: 150px; height: auto; }
#PageHeader .PageMenu .Alignment { margin: 0px 15px; display: block; clear: both; }

#Container { padding-bottom: 0; }

#MainArea #PageText .A,
#MainArea #PageText .B,
#Footer .Left,
#Footer .Right { width: 100%; float: none; text-align: left!important; }    

#MainArea #PageText { padding: 20px 15px; } 

#MainArea #PageText .A { margin-bottom: 20px; }

#AlbumList .Row { width: 46.4%; margin:15px 1.8%;  }

#Footer { height: auto; margin-top: 0; }

#Footer .Right { text-align: left; }

#ContactForm { width: 85%; padding: 15px 5%; margin: 20px 2.5%; }
#ContactForm .Label { width: 100%; }

#ContactForm .Field { max-width: 90%; }

#AlbumList, #ContactForm, #Map { float: none; clear: both; }
#AlbumList { overflow: auto; }
#Map { width: 92%; margin: 0 2.5%; }

#gallery-wrapper { max-height: 800px; } 
.thumb-page { min-height: 250px!important; }


}

@media handheld, only screen and (max-width: 520px) {

#PageHeader .PageMenu { margin-top: 190px; }

#PageHeader .PageMenu .Alignment { display: none; }

#PageHeader .PageMenu .MenuItem { width: 100%; margin: 0; border-bottom: 2px solid #fff; }

.mobile-menu { display: block; width: 95%; margin: 0 2.5% 20px; padding:  0; text-align: center; position: absolute; top: 150px; }

.thumbframe { width: 59px; height: 59px; }

}



@media handheld, only screen and (max-width: 420px) {

#AlbumList .Row { width: 100%; margin:15px 0; float: none; }

#gallery-wrapper { max-height: 860px; } 
.thumb-page { min-height: 320px!important; }

.thumbframe { width: 64px; height: 64px; }

}


@media handheld, only screen and (max-width: 320px) {

.Gap { display: none; }

}


@media handheld, only screen and (min-width: 520px) {

#PageHeader .PageMenu .Alignment { display: block!important; }


}
// from System Meta Data