body {
  
    margin: 0px;
    font-family:"微軟正黑體", 'Raleway', sans-serif;
    color:#231714;
    padding-top: 10px;
    padding-bottom: 0px;
  
}

body ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}


.main {
    margin: 0 auto;
  
   
   
}

.featurette {
    
    padding-bottom:80px;

}

.fb-share-button {


  
    width:60px;
}



/* will be red only in google chrome */
.wb-button  {
    
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .wb-button  {
     position:absolute;
    top:8px;
}
}



.list-inline {  
    padding:8px;
    vertical-align: middle;
    

}


h2 {        
        color:#231714;       
        font-weight: normal;       
        font-size: 2.2em;
        word-spacing: -0.05em;
        letter-spacing: 0.045em;
        margin-bottom:20px;
    }


.banner {
    background-color: #333333;
    color: #fefefe;
    padding: 20px;
    padding-top: 80px;
    padding-bottom: 80px;
}
.title {
    font-size: 140%;
    font-weight: bold;
}
.header {
    
    background: url(../images/menu_bg.png);
    

   padding:20px 0 10px 0;
    
    border-bottom: 0px solid #CACACA;


}

.header.scroll-to-fixed-fixed {
    color: blue;
}



#create .row {
     padding-bottom:20px;
}


.content {
    padding: 20px;
    overflow: hidden;
}


.footer-x {
    
 
    position:fixed;
    bottom: 0px; 
    width: 100%; 
    height: 60px; 
    background: url(../images/menu_bg.png);

}









.demos li {
    margin-bottom: 20px;
}
.left {
    float: left;
    width: 680px;
}
.right {
    float: left;
    margin-left: 40px;
}
.summary {
    border: 1px solid #dddddd;
    overflow: hidden;
    margin-top: 20px;
    background-color: white;
}
.summary .caption {
    border-bottom: 1px solid #dddddd;
    background-color: #dddddd;
    font-size: 12pt;
    font-weight: bold;
    padding: 5px;
}
.summary.scroll-to-fixed-fixed {
    margin-top: 0px;
}
.summary.scroll-to-fixed-fixed .caption {
    display:none;
}
.contents {
    width: 150px;
    margin: 10px;
    font-size: 80%;
}


.codrops-header-special {
position: absolute;
top: 80px;
left: 0px;
text-align: left;
}

.marketing {
    margin-top:100px;
}




#layout_block  div.block.zoom{	
    z-index: 1;
}




/**
clearfix
*/

.clearfix: after{
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0.1px;
 
  line-height: 0;
}




* html .clearfix{
  display: inline-block;
}

/**
ie7
*/

*: first-child+html .clearfix {
  display: inline-block;
}

/**
ie8
*/

html>/**/body .clearfix
{
  display: inline-block;
}

#layout_block {

position: relative; 
 width:990px; 
 

}


 #picOne, #picTwo {
          
           display: none;
           padding-bottom:10px;

        }

        #pics {
            width: 100%;
            height: 300px;
            border:0px solid #000;
            text-align:center;
        }

#layout_block div.block{
	
	position:absolute;
	width:400px;
	height:224px;
    margin-top: 400px;
    margin-left: auto;
    margin-right: auto;
	left: 270px;
}


 th {
           
            white-space: nowrap;
            font-weight:normal;
        }



#layout_block div.block.zoom{
	top:-160px;
   
	
}


.footer-wrapper {
    position: relative;
    height: 50px;
}


.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
} 

nav {
 text-align:center;

}


nav ul li {
display: inline-block;
zoom: 1;
height: 40px;
width: 80px;
margin: 0px 12px 0px 0px;
background: url(../images/comm.png);
}



nav ul li.feature { background-position: 0px 10px; width:73px;}
nav ul li.spec {background-position: 0px -50px; width:35px;}
nav ul li.lens {background-position: 0px -110px; width:35px;}
nav ul li.adv {background-position:  0px -170px; width:35px;}
nav ul li.cover {background-position:  0px -290px; width:152px;}
nav ul li.share {background-position: 0px -230px; width:93px;}



nav ul li a:hover {background: url(../images/comm.png);}



nav ul li.feature a:hover, nav ul li.feature.selected { background-position: -500px 10px; width:73px;}
nav ul li.spec a:hover, nav ul li.spec.selected {background-position: -500px -50px; width:35px;}
nav ul li.lens a:hover, nav ul li.lens.selected {background-position: -500px -110px; width:35px;}
nav ul li.adv a:hover, nav ul li.adv.selected {background-position:  -500px -170px; width:35px;}
nav ul li.cover a:hover, nav ul li.cover.selected {background-position:  -500px -290px; width:152px;}
nav ul li.share a:hover, nav ul li.share.selected {background-position: -500px -230px; width:93px;}



.links {
   font-size:0.8em;
   text-align:center;
}



.links a:link, .links  a:visited, .links a:active, .links a:hover{
        color:black;
        text-decoration: none;
      
    }

.links a:hover{ 
    color:black; 
    background-color:#efefef;
    }


.copyright {
    margin-top:10px;
}

.wb-button {
    border:1px solid #000;
   height:10px;
}


nav h3 {
    display: inline-block;
    zoom: 1;
    height: 40px;
    width: 80px;
    margin: 0px 0px 0px 0px;
    background: url(../images/comm.png);



    background-position: 0px -320px;
    
    border:1px solid #000;
float:right;


}





nav ul li a {
display: block;
height: 100%;
width: 100%;
text-indent: -9999px;
}


.jumbotron {
    background-color:#fff;
}

.space {
    padding-top:50px;
}


h2{
height: 60px;
width: 300px;
background: url(../images/comm.png);
background-position: -800px 0px;
display: inline-block;
overflow: hidden;
font-size: 0px;
}


h2.title1{background-position: -800px -0px;}
h2.title2{background-position: -800px -100px;}
h2.title3{background-position: -800px -200px;}
h2.title4{background-position: -800px -300px;}
h2.title5{background-position: -800px -400px;}
h2.title6{background-position: -800px -500px;}
h2.title7{background-position: -800px -600px;}