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 { }
.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-top: 1px solid #656565; border-bottom: 1px solid #656565;}
.content-left {width: 47%; float: left;  height: 99%;  padding-right: 4px; padding-bottom: 2px; border-right: 1px solid #3b3b3b; }

.verticalLine1 {margin: -2px 0px 0px 0px; width: 160px; height: 20px; background: #313131; border-right: 1px solid #656565; clear: both;}
.verticalLine2 {margin: 0px; width: 160px; height: 24px; /*background: #313131;*/ border-right: 1px solid #656565; clear: both;}
.tvScreen { margin: 0px 0px 0px 16px ; width: 430px; height: 252px; border: 2px solid #6d7582;
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 4px; 
  /* Firefox 1-3.6 */
  -moz-border-radius: 4px; 
  -o-border-radius: 4px;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 4px; 
   clear: both; }
   .projectIndex {}
  .pageHeading{color:#6699cc; font-family: 'good_timesregular', Arial, sans-serif; font-size: 16px; clear: both; margin: 10px;}
  #projectCatList {position: absolute; width: 430px; height: 212px; overflow: hidden; }
   #scroller {position: absolute; width: 430px;}
    #scroller ul {width: 420px;}
   #scroller ul li {list-style: none; padding-bottom: 2px; margin-bottom: 4px; font-size: 13px;  }
   #scroller ul li a:link {color: #ccc; text-decoration: none; /*background: #424242;*/ padding: 2px 8px 2px 8px; font-size: 13px; }
  #scroller ul li a:visited {color: #ccc; text-decoration: none;}
  #scroller ul li a:hover {color:#6699cc; text-decoration: underline;}
  #scroller ul li a:active {color: #ccc; text-decoration: none;}
  .selected {background: #996619;}
  .listLeft {float: left; width: 185px; /*border: 1px solid #fff;*/ }
  .listRight { float: left; width: 230px; /*border: 1px solid #fff;*/}
  .listLeft ul {margin-left: -20px;}
  .listRight ul  {margin-left: -26px;}

#scroller ul li a.active:hover {color: #ccc; text-decoration: none;} 
/*.tvBase { background: url(../img/tv-base.png); width: 203px; height: 26px;  margin: 0px 0px 0px 120px; }*/
.horizontalElement {width: 418px; height: 20px; margin: 1px 0px 0px 0px; clear: both; background: url(../img/orangeDesign.png) no-repeat top right; }
.navPlusDesign {width: 100%; height: 100px;  margin-bottom: 1px; }
.projectsNavigate {width: 370px; height: 100%;  float: left; }
.design {width: 190px; height: 100%; float: left; background: url(../img/rightDesign.png); }
.verticalLine3 {margin: 0px; width: 160px; height: 19px; background: #313131; border-right: 1px solid #656565; clear: both;}

.category {width: 25%; height: 100%; float: left; }
.image-catName {width: 70px; height: 70px;  margin: 0px ; }
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: 70px; height: 35px;  margin: 0px;z-index: 12; background-color: #666;}
#bottomCurtain1, #bottomCurtain2, #bottomCurtain3, #bottomCurtain4 {position: absolute; width: 70px; height: 35px;  margin: 35px 0px 0px 0px;  z-index: 12; background-color: #666;}
#textTitle1, #textTitle2, #textTitle3, #textTitle4 {z-index: 11; position: absolute; color:#6699cc; font-family: 'good_timesregular', Arial, sans-serif; font-size: 12px; margin: -14px 0px 0px 0px; display: none; }
#textTitle1 {margin-left:-4px; }
#textTitle2{margin-left:-14px; }
#textTitle3 {margin-left:-20px;}

.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: 70px; height: 70px;  margin:0px ; border: 1px solid #bbb; display: none;}
#rectangle1b, #rectangle2b, #rectangle3b, #rectangle4b {position: absolute;z-index: 13; width: 95px; height: 95px;  margin: -15px 0px 0px -15px; border: 1px solid #bbb; display: none;}

.projects-button {width: 75px; height: 75px;  margin-top: 22px; margin-left: 18px; background: url(../img/projectThumb.png) no-repeat;}


.transparency95 {
    /* 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=75)";   
    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=95); 
    /* Older than Firefox 0.9 */
    -moz-opacity:0.95;  
    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.95; 
    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.95;} 
.content-right {width: 52%; float: left; height: 99%; padding-bottom: 2px; padding-left: 3px;/*border: 1px solid #ff9900;*/}
.square11, .square12, .square21, .square22 {width: 307px; height: 217px; float: left; margin: 1px; /* border: 1px solid #ff9900;*/}
.square11, .square21, .square31 {margin-left: 5px;}

.square2211,.square2212,.square2221,.square2222 {width: 152px; height: 107px; float: left; margin-left: 0px;}
.square2211,.square2221 {margin-right: 1px; }
.square2221,.square2222    {margin-top:3px;}
.square2212,.square2222 {margin-left: 1px;}


/*-- THE PROJECT THUMBS--*/
#colorCurtain11, #colorCurtain12, #colorCurtain21 {position: absolute;z-index: 10; width: 307px; height: 217px; background: #996619; display: none;}
#projectTitle11, #projectTitle12, #projectTitle21 {position: absolute; z-index: 12; color:#ffffff;   font-family: 'good_timesregular', Arial, sans-serif; font-size: 11px; letter-spacing: 1px; clear: both; text-align: center; padding: 12px 0px 0px 0px; display: none; width: 303px;}
#projectDescription11, #projectDescription12, #projectDescription21 {font-family: verdana; font-size: 13px; padding: 6px 0px 0px 0px; color: #c7c7b2; display: none; text-align: center; width: 303px;}


#colorCurtain2211, #colorCurtain2212,#colorCurtain2221, #colorCurtain2222
{position: absolute;z-index: 10; width: 152px; height: 107px;  background: #996619; display: none;}
#projectTitle2211, #projectTitle2212,#projectTitle2221, #projectTitle2222
  {position: absolute; z-index: 12; width: 148px; color:#ffffff;   font-family: 'good_timesregular', Arial, sans-serif; font-size: 12px; clear: both; text-align: center; padding: 6px 0px 0px 0px; display: none;}
#projectDescription2211, #projectDescription2212, #projectDescription2221, #projectDescription2222
 { font-family: verdana; padding: 28px 0px 0px 0px; color: #c7c7b2; font-size: 12px; width: 148px; text-align: center; line-height: 10px;text-align: center; display: none;}


.hidden {display: none;}

.bottomBase {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: 30px; }
.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: 768px) and (max-width: 1199px) { 

       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;}
    
    .content-right {width: 98%; float: left; padding-bottom: 2px; padding-left: 3px; }
.design {display: block;}
.downloadProfile {width: 40%; }
.horizontalElement {width: 418px; }
 #content-inner1 {background: #424242; width: 100%; height: 377px; margin: 0px; position: relative; }
.square11, .square12, .square21, .square22 {width: 307px; height: 217px;  float: left; margin: 4px 4px 4px 10px;  /*border: 1px solid #ff9900;*/}
     

} 


@media (min-width: 640px) and (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;}
    
    .content-right {width: 98%; float: left; padding-bottom: 2px; padding-left: 3px; }
.design {display: block;}
.downloadProfile {width: 40%; }
.horizontalElement {width: 418px; }
 #content-inner1 {background: #424242; width: 98%; height: 377px; margin: 0px; position: relative; }
.square11, .square12, .square21, .square22 {width: 307px; height: 217px;  float: left;  margin: 4px 4px 4px 10px;   /*border: 1px solid #ff9900;*/}

}

/* Landscape phone to portrait tablet */
 @media (max-width: 639px) { 
    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; }
    .design {display:  none;}
    .downloadProfile {width: 40%; }
    .horizontalElement {width: 98%; }
    #content-inner1 {background: #424242; width: 98%; height: 377px; margin: 0px; position: relative; }
   .projects-button { margin-left: 3em;}
   .category {margin-left:0px;}
   .tvScreen { width: 400px;}
    .listLeft { width: 160px;    }
  .listRight { width: 230px; }

.square11, .square12, .square21, .square22 {width: 307px; height: 217px;  float: left; margin: 10px 10px 10px 40px; /*border: 1px solid #ff9900;*/}
 }
 

/* Landscape phones and down */
@media (max-width: 480px) { 
   html {height:100%; overflow-y: visible; }
.container-inner {}
  .content-right, .content-left  { }
  .design {display:  none;}
  #content-inner1 {background: #424242; width: 98%; height: 377px; margin: 0px; position: relative; }
  .tvScreen { width: 360px;}
  .horizontalElement {width: 98%; }
  .projects-button { margin-left: 2em;}
    .category {margin-left:0px;}
  .downloadProfile {width: 40%; }
 .listLeft { width: 155px;    }
  .listRight { width: 190px; }
.square11, .square12, .square21, .square22 {width: 307px; height: 217px;  float: left; margin: 10px 10px 10px 40px;  /*border: 1px solid #ff9900;*/}
}