HTML / CSS模式窗口的问题

Question

我在HTML / CSS和我的localhost上设计了一个模态窗口，模态窗口工作正常但在我的远程服务器上我不能在模态窗口上使用选项卡这里我发布完整的css我用来创建这个模态窗口。

 *emphasized text*.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 450px;
position: relative;
margin: 10% auto;
padding: 15px 20px 13px;
border-radius: 10px;
background: -moz-linear-gradient(#d8cfd8, #ffffff) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: linear-gradient(#d8cfd8, #ffffff) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(#d8cfd8, #ffffff) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.modalDialog2{
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog2:target {
opacity:1;
pointer-events: auto;
}

.modalDialog2 > div {
background: -moz-linear-gradient(#d8cfd8, #ffffff) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: linear-gradient(#d8cfd8, #ffffff) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(#d8cfd8, #ffffff) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px;
margin: 5% auto 0;
padding:25px;;
position: relative;
width: 800px;
}
.close {
/*background: linear-gradient(#d8cfd8, #ffffff) repeat scroll 0 0 rgba(0, 0, 0, 0);*/
color: #000;
line-height: 25px;
position: absolute;
right: 0px;
text-align: center;
top: 0px;
width: 24px;
margin: 8px;
text-decoration: none;
font-weight: bold;  
}
  .close-2{
    color: #000;
    line-height: 25px;
    position: absolute;
    right: 0px;
    text-align: center;
    top: 0px;
    width: 24px;
    margin: 3px;
    text-decoration: none;
   font-weight: bold;
  }
  .close:hover, .close-2:hover { color:white; }
  .tab_container {
  /*min-height: 100%;*/
   overflow: auto;
  /* padding: 10px;*/
    display:none;
    background-color: #fff;
   margin-top: 20px;
   margin-bottom: 20px;
  border-radius: 20px;
  width: 760px;
  height:300px;
  }
  .tab_container ul{
   float:left;
   width:220px;
  text-align:left;
  }
   #pop_tab div{

float: left;
padding: 23px;
cursor: pointer;
border-radius: 10px;
font-size: 100%;
margin: 0 auto;
}
#p1{display:block;}
#s1{display:block;}
#c1{display:block;}
#f1{display:block;}
#o1{display:block;}

/* TABS starts HERE */
.tabs input[type=radio] {
      position: absolute;
      top: -9999px;
      left: -9999px;
  }
.tabs {
    width: 760px;
    float: none;
    list-style: none;
    /*position: relative;*/
    padding: 0;
  }
  .tabs li{
    float: left;
  }
  .tabs label {
      display: block;
      padding: 10px 20px;
      border-radius: 2px 2px 0 0;
      color: #000;
      font-size: 14px;
      font-weight: normal;
     font-family: Arial, Helvetica, sans-serif;
      background: rgba(255,255,255,0.2);
      cursor: pointer;
      position: relative;
      top: 3px;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      border-radius: 10px;
  }
  .tabs label:hover {
    background: rgba(255,255,255,0.5);
    top: 0;
  }

  [id^=tab]:checked + label {
    background: #9DBA60;
    color: white;
    top: 0;
  }

     [id^=tab]:checked ~ [id^=tab-content] {
      display: block;
  }
    .tab-content{
    z-index: 2;
    display: none;
    text-align: left;
    width: 100%;
    font-size: 20px;
    line-height: 140%;
    padding-top: 10px;
    background: #9DBA60;
    padding: 15px;
    color: white;
    position: absolute;
    /*top: 53px;*/
    left: 0;
    box-sizing: border-box;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
  }
    /* TABS ends HERE */

任何帮助将不胜感激。网站上有两个链接，一个使用wordpress标头，另一个使用codeigniter标头      1）Wordpress标题        http://aws1.chemfreecom.com/      2）使用codeigniter头        http://aws1.chemfreecom.com/search 现在codeigniter标题工作得很好，但我遇到wordpress标题的问题，因为相同的HTML / CSS无法使用它。