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%; /*height: 438px;*/ 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: 14px;  }
   #scroller ul li a:link {color: #ccc; text-decoration: none; /*background: #424242;*/ padding: 2px 8px 2px 8px; font-size: 14px; }
  #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;}

#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:-9px; }
#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;}

.content-right {width: 52%; float: left; height: 440px; padding-bottom: 2px; }
.content-inner {width: 97%; height: 97%; margin: 8px auto; background: #3d3d3d;} 
.gap {width: 100%; height: 24px; background: #313131 url(../img/gap-head.jpg) no-repeat;  }
.heading {color:#6699cc; font-family: 'good_timesregular', Arial, sans-serif; font-size: 16px; padding: 6px 0px 2px 9px; width: 50%; float: left; }
.downloadProfile {width: 30%; float: right; padding-top: 7px;}
.downloadProfile a:link {color:#6699cc; font-family: 'good_timesregular', Arial, sans-serif; font-size: 12px; text-decoration: none; padding: 10px 0px 0px 9px; }
.downloadProfile a:visited {color:#6699cc; text-decoration: none; }
.downloadProfile a:hover {color:#6699cc; text-decoration: underline;}
.downloadProfile a:active {color:#6699cc; text-decoration: none;} 
p {margin: 0px;}
#content-inner1 {background: #424242; width: 604px; height: 377px; margin: 2px 0px 0px 0px; overflow: hidden; position: absolute; }
#content-inner1 #scroller1 p {color: #c7c7b2; padding: 12px; line-height: 20px; }
#scroller1 {position: absolute;  max-width: 100%;}

.principalImage {padding: 4px 25px 45px 10px; float: left;}
#scroller1 p a:link {color:#c7c7b2; text-decoration: none;}
#scroller1 p a:visited {color:#c7c7b2; text-decoration: none;}
#scroller1 p a:hover {color:#6699cc; text-decoration: underline;}
#scroller1 p a:active {color:#c7c7b2; text-decoration: none;}

.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: 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 {}

/*EASY TABS CSS*/
    .etabs { margin: 0; padding: 0; background: #313131;}
    .tab { display: inline-block; zoom:1; *display:inline; background: #3d3d3d; border-bottom: none; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; width: 140px; margin-bottom: 2px; }
    .tab a { font-family: 'good_timesregular', Arial, sans-serif; font-size: 13px; padding: 4px 0px 2px 2px; line-height: 22px; 
    display: block; padding: 0 6px; outline: none; color:#6699cc; text-decoration: none; text-align: center;}
    .tab a:hover { text-decoration: underline; }
    .tab.active { background: #996619; /*padding-top: 6px; top: 1px;*/ padding-top: 2px; position: relative;  border-color: #666; }
    .tab a.active { /*font-weight: bold;*/ color:#ccc;}
    .tab-container .panel-container {   padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
    .panel-container { margin-top: 2px; margin-bottom: 10px; /*border: solid #fff 2px;*/ min-height: 370px; /*background: #3d3d3d;*/ }
.highlight {color:#6699cc; }

.panel-container ul li {margin-bottom: 4px; font-size: 13px;}

/*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; }

     

} 


@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; }

}

/* 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;}
  .tab {width: 250px; clear: both; margin: 4px 0px 4px 10px;}
.tab a {padding: 10px ;}
 .content-right {height: 700px;}
 }
 

/* 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%; }
 .content-right {height: 840px;}
}