html {height:100%;
overflow-x:hidden; overflow-y:hidden;}
body { 
background: #333333; font-size: 13px; font-family: verdana; color: #c7c7b2;
 }

a:link {color:#6699cc;}
a img {
    border: 0; border: none;
}
@font-face {
    font-family: 'good_timesregular';
    src: url('goodtime-webfont.eot');
    src: url('goodtime-webfont.eot?#iefix') format('embedded-opentype'),
         url('goodtime-webfont.woff') format('woff'),
         url('goodtime-webfont.ttf') format('truetype'),
         url('goodtime-webfont.svg#good_timesregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.container-fluid { /*background: url(../img/actual-site-1200x600-1.jpg) no-repeat; background-position: center top;*/  /* border: 1px solid #ff0000; */}
.container-inner {width: 1260px; /*border: 1px solid #fff;*/ margin: 0px auto; background-color: #313131;}

.logo {padding-top: 40px;  text-align: center; clear: both; width: 100%; margin-bottom: 8px; /*border: 1px solid #dfdfdf;*/ background: url(../img/logo-back-mesh1.jpg) no-repeat;}
.logo a:link {text-decoration: none;}
.logo a:visited {text-decoration: none;}
.logo a:hover {text-decoration: none;}
.logo a:active {text-decoration: none;}
.logoBlue {color:#6699cc; font-family: 'good_timesregular', Arial, sans-serif; font-size: 28px; clear: both; }
.logoWhite {clear: both;}
 
.center-content {width: 95%;  margin: 0px auto; clear: both; border: 1px solid #656565;}
.content-left {width: 45%; float: left; /*border-right: 1px solid #3c3c3c; */height: 98%;  padding-right: 4px; }
.content-right {width: 54%; float: left; height: 98%; padding-bottom: 2px; padding-left: 3px; }

.category {width: 49%; height: 50%; float: left;}
.image-catName {width: 207px; height: 126px;  margin: 4px 0px 0px 4px; }
img.a1, img.a2, img.a3, img.a4 {position: absolute;z-index: 10;}	
img.b1, img.b2, img.b3, img.b4 {position: absolute;}
#topCurtain1, #topCurtain2, #topCurtain3, #topCurtain4 {position: absolute; width: 128px; height: 63px;  margin: 0px;z-index: 12; background-color: #666;}
#bottomCurtain1, #bottomCurtain2, #bottomCurtain3, #bottomCurtain4 {position: absolute; width: 128px; height: 63px;  margin: 63px 0px 0px 0px;  z-index: 12; background-color: #666;}
.transparency50 {
    /* Theoretically for IE 8 & 9 (more valid) */  
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);   
    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;    
    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;  
    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;} 
#rectangle1a, #rectangle2a, #rectangle3a, #rectangle4a {position: absolute;z-index: 13; width: 130px; height: 130px;  margin: -3px 0px 0px -3px; border: 1px solid #bbb; display: none;}
#rectangle1b, #rectangle2b, #rectangle3b, #rectangle4b {position: absolute;z-index: 13; width: 156px; height: 156px;  margin: -15px 0px 0px -15px; border: 1px solid #bbb; display: none;}

.projects-button {width: 220px; height: 142px; float: left; margin-top: 50px; margin-left: 23px; background: url(../img/buttons-home.jpg) no-repeat;}
.imageBack {}
.sliding-lines {width: 197px; height: 400px; background: url(../img/moving-lines.gif) no-repeat; position: absolute; z-index: 1000; margin-left: -30px; }



.bottom {width: 100%; height:100px; /*border: 1px solid #ff9988;*/ background: url(../img/bottom-back-mesh1.jpg) top right no-repeat;}
.navigation {color:#767676; font-family: 'good_timesregular', Arial, sans-serif; font-size: 11px; letter-spacing: 1px; clear: both; text-align: center; padding-top: 20px;}
.navigation a:link {color: #767676; text-decoration: none; } 
.navigation a:visited {color: #767676; text-decoration: none;} 
.navigation a:hover {color: #767676; text-decoration: underline;}
.navigation a:active {color: #767676; text-decoration: none;}
.copyright {}





/*FOR MAKING SITE RESPONSIVE*/
/* Large desktop */
@media (min-width: 1200px) { 
    html {height:100%;
overflow-x:hidden; overflow-y:hidden;}
    .container-inner {width: 1260px;  } 
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 980px) and (max-width: 1250px) { 

    html {height:100%; overflow-y: visible; }
    .container-inner {width: 100%;   } 
    .center-content { width: 98%;}
    .content-left {width: 46%; float: left; height: 100%; }
    .projects-button { margin-left: 2em;}
    .category {margin-left:1px;  }
    .content-right {width: 52%; float: right; height: 100%;  }

} 
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 

    html {height:100%; overflow-y: visible; }
    .container-inner {width: 100%;   } 
    .center-content { width: 98%;}
    .content-left {width: 98%; float: left; height: 430px; }
    .projects-button { margin-left: 7em;}
    .category {margin-left:2px;}
    .content-right {width: 98%; float: left; height: auto; }

} 

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    html {height:100%; overflow-y: visible; }
    .container-inner {width: 100%;/*border: 1px solid #fff;*/ margin: 0px auto; background-color: #313131;  }
    .center-content {width: 98%; margin: 0px auto; clear: both; border: 1px solid #656565;}
    .content-left {width: 98%; float: left; /*border-right: 1px solid #3c3c3c; */height: 430px;  padding-right: 4px; padding-bottom: 2px;}
    .projects-button { margin-left:5em;}
    .content-right {width: 98%; float: left; padding-bottom: 2px; padding-left: 3px; }
 }
 
 /* Landscape phones and down */
@media (max-width: 606px) { 
.container-inner {}
  .category {margin-left:0px; }
.category img {max-width: 100%;}
.projects-button { margin-left: 1em;

}
/* Landscape phones and down */
@media (max-width: 550px) { 
.projects-button { margin-left: 10em;}
.content-left {height: 760px;}
.category { height: 170px; clear: both;}

}

/* Landscape phones and down */
@media (max-width: 480px) { 
.projects-button { margin-left: 7em;}
}