/* -------------- landing page -------------- */

body { color: #000; position:relative;  height:100%;
       font-family:Arial, Verdana, sans-serif; line-height:18px; font-size:13px; }
a       { outline:0 !important; }
a:hover { text-decoration:none;}

div#lev-1 {
  position:relative;
  width:100%;
  height:100%;
  z-index:1;    
  background-image:url('../img/grid_square.jpg');
  background-repeat:repeat;
}

div#lev-2 {
  position:relative;
  width:100%;
  height:100%;
  display:none;  
  z-index:1;   
}

div.left-div-wrap {
  width:50%;
  height:100%;
  position:absolute;
  top:0;
  right:50%;
  background: transparent url('../img/left_brain.jpg') no-repeat top right;
}


div.right-div-wrap {
  width:50%;
  height:100%;
  position:absolute;
  top:0;
  left:50%;
  background-color:#000;
  background-image:url('../img/right_brain.jpg');
  background-repeat:no-repeat;
}

*+html div.left-div-wrap  { margin-right:-1px; } /* only for ie7 */
*+html div.right-div-wrap { margin-left:-1px; } /* only for ie7 */

div.left-div-wrap.hover {
  background: #be3d07 url('../img/creative_hover_bg.jpg') no-repeat top right;  
  
}        

div.right-div-wrap.hover {
  background:#f4f6e3 url('../img/logical_hover_bg.jpg') no-repeat top left;
} 

div.left-div {
  /*width:480px;*/
  width:100%;
  height:100%;
  float:right;
  position:relative;
}

div.right-div {
  /*width:480px;*/
  width:100%;
  height:100%;
  float:left;
  position:relative;
}

div#logo { 
   width:208px;
   height:115px;
   background: transparent url('../img/jacksonmarketing_logo.png?v=1') no-repeat top left;
   margin:0 auto;
   position:relative;
   z-index:3;
   text-align:center;
   background-position-x: 45px;
}

a#logical, a#creative {
  /*width:200px;*/
  width:100%;
  height:470px;
  display:block;
  text-indent:-5000px;
  position:absolute;
  top:150px;
}

a#logical  { right:0; }
a#creative { left:0;  }

div#creative-container {
   width:100%;
   display:none;
   background: #be3d07 url('../img/creative_container_bg.jpg') repeat-x top center;
}

div#creative-content-wrap {
  background: transparent url('../img/base_2000.jpg?v=1') no-repeat top center;
  width:100%;
  margin:0 auto;
  position:relative;
}

div#logical-container {
   background-color:#f4f6e3;
   display:none;
}

       
/*----   creative pages    --------------*/
#creative-content-wrap-next {
  width:100%;
  position:relative;
}

#creative-content-wrap-next div.center-mask {
  position:absolute;
  top:245px;
  left:0;
  width:100%;
  height:125px;
  background: #000000 url('../img/creative_center_bg.jpg?v=1') no-repeat top center; 
  z-index:-999;
}

#creative-content-wrap-next div.center-mask a {
  width:210px;
  height:120px;
  margin:0 auto;
  display:block;
  position:relative;
  z-index:2;
}

#creative-content-wrap-next div.social-media-ctner {
  height:115px;
  width:120px;
  position:absolute;
  top:250px;
  left:-3;
  z-index:3;
  background: url('../img/social_media_ctner_bg.png') no-repeat top center;
}

#creative-content-wrap-next div.accessibility-ctner {
  float: right;
  z-index: 9;
  margin-top: 300px;
  margin-right: 50px;
  position: relative;
}
#creative-content-wrap-next div.accessibility-ctner a{
  color: white;
  font-size: 14px;
  text-decoration: underline;
}

#creative-content-wrap-next div.social-media-ctner a { display:block; width:36px; height:36px;  text-indent:-20000px; margin:4px 10px;}
#creative-content-wrap-next div.social-media-ctner a.linkedin { display:block; background:transparent url('../img/social_media_icons_creative_new.png') no-repeat -1px -1px;  }
#creative-content-wrap-next div.social-media-ctner a.youtube  { display:block; background:transparent url('../img/social_media_icons_creative_new.png') no-repeat -1px -38px;  }
#creative-content-wrap-next div.social-media-ctner a.vimeo    { display:block; background:transparent url('../img/social_media_icons_creative_new.png') no-repeat -38px -1px;  }
#creative-content-wrap-next div.social-media-ctner a.facebook    { display:block; background:transparent url('../img/social_media_icons_creative_new.png') no-repeat -38px -38px;  }


div#creative-content-wrap.bios div.center-mask{
   z-index:0;
  *z-index:-1; /* ie7 */
}

div#creative-content{
   width:960px;
   margin:0 auto;
   position:relative;
   z-index:2;
}
div#creative-content div.content {
  width:100%;
  position:relative;
}

div#creative-content a { color:#fff; }

div#creative-content a.nav {text-indent:-99999px;}
div#creative-content a.nav-home       { width:153px; height:108px; position:absolute; top: 120px; left:130px; background:transparent url('../img/01_nav_home_on.gif') no-repeat center center; }
div#creative-content a.nav-work       { width:270px; height:113px; position:absolute; top: 10px; left:390px;  background:transparent url('../img/02_nav_work_on.gif') no-repeat center center; }       
div#creative-content a.nav-bios        { width:136px; height:107px; position:absolute; top: 120px; right:130px; background:transparent url('../img/03_nav_bio_on.gif') no-repeat center center; }     
div#creative-content a.nav-approach   { width:270px; height:109px; position:absolute; top: 480px; left:70px;  background:transparent url('../img/04_nav_approach_on.gif') no-repeat center center; }
div#creative-content a.nav-contact    { width:224px; height:104px; position:absolute; top: 455px; right:60px; background:transparent url('../img/05_nav_contact_on.gif') no-repeat center center; }      
div#creative-content a.nav-left-brain { width:204px; height:156px; position:absolute; top: 35px; right:-50px; background:transparent url('../img/brain_switch_left.png') no-repeat center center; }       
       
div#creative-content a.close-btn      { width:33px; height:32px; position:absolute; top: 250px; left:250px; background:transparent url('../img/close.gif') no-repeat center center; }       
       
div#creative-content-wrap.index a.close-btn, 
div#creative-content-wrap.index div.content  
{ display:none; }


div#creative-content-wrap.index.home div#creative-content-wrap-next, 
div#creative-content-wrap.index.work div#creative-content-wrap-next, 
div#creative-content-wrap.index.bios div#creative-content-wrap-next, 
div#creative-content-wrap.index.approach div#creative-content-wrap-next, 
div#creative-content-wrap.index.accessibility div#creative-content-wrap-next, 
div#creative-content-wrap.index.contact div#creative-content-wrap-next {
  background-color: rgba(190, 61, 7, 0.95);
  filter: alpha(opacity=95);
}

div#creative-content-wrap.index.home a.nav,     
div#creative-content-wrap.index.work a.nav,     
div#creative-content-wrap.index.bios a.nav,     
div#creative-content-wrap.index.approach a.nav,     
div#creative-content-wrap.index.accessibility a.nav,    
div#creative-content-wrap.index.contact a.nav 
{ background-color: #be3d07; opacity:0.05; filter: alpha(opacity=5); pointer-events: none; }

div#creative-content-wrap.index.home a.nav-home, 
div#creative-content-wrap.index.work a.nav-work, 
div#creative-content-wrap.index.bios a.nav-bios, 
div#creative-content-wrap.index.approach a.nav-approach, 
div#creative-content-wrap.index.accessibility a.accessibility, 
div#creative-content-wrap.index.contact a.nav-contact 
{  background-color: #be3d07; opacity:1; filter: alpha(opacity=100); pointer-events: none; }

div#creative-content-wrap.index.home div.content-home,  
div#creative-content-wrap.index.work div.content-work,   
div#creative-content-wrap.index.bios div.content-bios,   
div#creative-content-wrap.index.approach div.content-approach, 
div#creative-content-wrap.index.accessibility div.content-accessibility, 
div#creative-content-wrap.index.contact div.content-contact 
{ display:block; }

div#creative-content-wrap.index.home a.close-btn     { z-index:50; display:block; top:150px; left:850px; }    
div#creative-content-wrap.index.work a.close-btn     { z-index:50; display:block; top:20px; left:780px;  }     
div#creative-content-wrap.index.bios a.close-btn     { z-index:50; display:block; top:95px; left:830px;  }     
div#creative-content-wrap.index.approach a.close-btn { z-index:50; display:block; top:400px; left:750px; }      
div#creative-content-wrap.index.accessibility a.close-btn { z-index:50; display:block; top:150px; left:850px; }  
div#creative-content-wrap.index.contact a.close-btn  { z-index:50; display:block; top:450px; left:900px; }



/* -----------  logical page --------------*/

div#logical-content-wrap { 
  background-image:url('../img/grid_square.jpg');
  background-repeat: repeat;
  width:100%;
}

div#logical-content-wrap h1 { color:#0B5689; }

div#logical-content-wrap-next {
  width:960px;
  min-height:1000px;
  background-image:url('../img/logical_bg.png?v=1');
  background-repeat: repeat-y;  
  margin:0 auto;
  position:relative;
}
div#logical-content-wrap-next div.center-logo{
   width:208px;
   height:115px;
   background: transparent url('../img/jacksonmarketing_logo.png?v=1') no-repeat top left;
   margin:0 auto;
   position:relative;
   z-index:5;
   background-position-x: 45px;
}
div#logical-content-wrap-next div.center-logo a{
   width:208px;
   height:90px;
   display:block;
}

div#logical-content {
  margin-top:-60px;
}

div#logical-content div.nav-container {
  margin-left:10px;
  padding:100px 0 20px 0;
  width:100%;
  border:0px solid red;
  text-align:left;
  position:relative;
} 

div#logical-content div.nav-container ul {
	  width:878px;
	  height:42px;
	  margin-left:0;
	  margin-bottom:0;
	  padding-left:62px;
	  background: transparent url('../img/nav_gen_bg.png?v=1') repeat-x top left;
}

div#logical-content div.nav-container div.nav-arrow {
	  height:13px;
	  width:26px;
	  margin-top:-2px;
	  background: transparent url('../img/logical_nav_bg.png?v=1') no-repeat -30px -80px;
	  border:0px solid yellow;
}

div#logical-content div.nav-container ul li {
  display:inline;
  display:block;
  float:left;
  border:0px solid black;
}

div#logical-content div.nav-container ul a {
  width:100px;
  padding:5px 0;
  text-indent:-99999px;
  height:29px;
  display:block;
  text-align:center;
  background-image: url('../img/logical_nav_bg.png');
  background-repeat: no-repeat;  
  border:0px solid red;
}

div#logical-content div.nav-container a.nav-home            { background-position: 15px 0;}
div#logical-content div.nav-container a.nav-home:hover      { background-position: 15px -40px; }
div#logical-content div.nav-container a.nav-approach        { background-position: -75px 0; }
div#logical-content div.nav-container a.nav-approach:hover  { background-position: -75px -40px; }
div#logical-content div.nav-container a.nav-bios            { width:80px; background-position: -168px 0; }
div#logical-content div.nav-container a.nav-bios:hover      { width:80px; background-position: -168px -40px; }
div#logical-content div.nav-container a.nav-work            { background-position: -238px 0; }
div#logical-content div.nav-container a.nav-work:hover      { background-position: -238px -40px; }
div#logical-content div.nav-container a.nav-contact         { background-position: -338px 0; }
div#logical-content div.nav-container a.nav-contact:hover   { background-position: -338px -40px; }

div#logical-content-wrap.home div.nav-container a.nav-home    { background-position: 15px -40px;}
div#logical-content-wrap.home div.nav-container div.nav-arrow { margin-left: 107px; }
div#logical-content-wrap.approach div.nav-container a.nav-approach { background-position: -75px -40px; }
div#logical-content-wrap.approach div.nav-container div.nav-arrow  { margin-left: 204px; }
div#logical-content-wrap.bios div.nav-container a.nav-bios     { background-position: -168px -40px; }
div#logical-content-wrap.bios div.nav-container div.nav-arrow  { margin-left: 295px; }
div#logical-content-wrap.work div.nav-container a.nav-work     { background-position: -238px -40px; }
div#logical-content-wrap.work div.nav-container div.nav-arrow  { margin-left: 388px; }
div#logical-content-wrap.contact div.nav-container a.nav-contact  { background-position: -338px -40px; }
div#logical-content-wrap.contact div.nav-container div.nav-arrow  { margin-left: 484px; }

div.nav-container a.to-right-brain { 
   width:159px;
   height:145px;
   display:block;
   background:#eee;
   position:absolute;
   top:15px;
   right:50px;
   background: transparent url('../img/to_right_brain.png?v=1') no-repeat top left;
   text-indent:-99999px;
}

div#logical-content div.footer { padding:10px 0; text-align:left; margin-left:60px; clear:both; margin-top:-30px; line-height:35px; overflow:auto;}
div#logical-content div.footer  { font-size:10px; color:#0B5689; }
div#logical-content div.footer .social-media-ctner { text-align:center; float:left; margin-left:45px; }
div#logical-content div.footer .social-media-ctner a { width:32px; height:32px; float:left; text-indent:-20000px; margin:0 2px;}
div#logical-content div.footer .social-media-ctner a.linkedin { display:block; background:transparent url('../img/social_media_icons_logical.png') no-repeat -70px 0;  }
div#logical-content div.footer .social-media-ctner a.youtube  { display:block; background:transparent url('../img/social_media_icons_logical.png') no-repeat -105px 0;  }
div#logical-content div.footer .social-media-ctner a.vimeo    { display:block; background:transparent url('../img/social_media_icons_logical.png') no-repeat -140px 0;  }
div#logical-content div.footer .social-media-ctner a.facebook    { display:block; background:transparent url('../img/social_media_icons_logical.png') no-repeat -35px 0;  }



div#logical-content div.content { padding:0 20px; text-align:left; margin-left:10px;  display:none; }
div#logical-content-wrap.home div.content-home { display:block; }
div#logical-content-wrap.work div.content-work { display:block; }
div#logical-content-wrap.bios div.content-bios { display:block; }
div#logical-content-wrap.approach div.content-approach { display:block; }
div#logical-content-wrap.contact div.content-contact { display:block; }
div#logical-content-wrap.accessibility div.content-accessibility { display:block; }

div.content-blk { background-color:#e9eff3; margin: 40px 25px; overflow:auto;}
div.content-blk .content-blk-l { padding:20px 25px;}
div.content-blk .content-blk-r { width:250px; background-color:#e2e6b2; vertical-align:top; }
div#logical-content-wrap div.content h1 { margin:0 0 0 50px;  }


.circle{ color:#fff; width:20px; height:20px; border-radius:10px; font-size:10px; color:#fff; line-height:20px; text-align:center; background:#ccc}   
.circle:hover { background-color:#eee; }
.btn-sub-content-close { position:absolute; top:10px; right:10px; } 
div#logical-content .content-home ul { list-style:none; margin-left:0;}

div#logical-content-wrap.contact div.content-contact div.logical-content-form { background-color: white;width: 75%;padding: 15px 15px; }
div#logical-content-wrap.contact div.content-contact div.logical-content-form .err-alert { color: #a94442;background-color: #f2dede;border-color: #ebccd1;padding: 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px;}
div#logical-content-wrap.contact div.content-contact div.logical-content-form .success-alert { color: #3c763d;background-color: #dff0d8;border-color: #d6e9c6;padding: 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px;}
div#logical-content-wrap.contact div.content-contact div.logical-content-form td{ padding: 8px 15px; vertical-align: top; }
div#logical-content-wrap.contact div.content-contact div.logical-content-form input{ width: 263px; }
div#logical-content-wrap.contact div.content-contact div.logical-content-form textarea{ width: 263px; height: 123px; }
div#logical-content-wrap.contact div.content-contact div.logical-content-form img{ float: right; }

div#creative-content-wrap.contact div.content-contact div.creative-content-form { background-color: white;width: 90%;padding: 15px 15px; }
div#creative-content-wrap.contact div.content-contact div.creative-content-form .err-alert { color: #a94442;background-color: #f2dede;border-color: #ebccd1;padding: 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px;}
div#creative-content-wrap.contact div.content-contact div.creative-content-form .success-alert { color: #3c763d;background-color: #dff0d8;border-color: #d6e9c6;padding: 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px;}
div#creative-content-wrap.contact div.content-contact div.creative-content-form td{ padding: 8px 15px; vertical-align: top; }
div#creative-content-wrap.contact div.content-contact div.creative-content-form input{ width: 263px; }
div#creative-content-wrap.contact div.content-contact div.creative-content-form textarea{ width: 263px; height: 123px; }
div#creative-content-wrap.contact div.content-contact div.creative-content-form img{ float: right; }