@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
    
  /*  normal*/
       
    BODY {      
                margin : 5px auto;  
                width : 800px;        
        }

   div { width : 100%;
          margin : auto;              
              /*border :1px solid black;*/
        }
    #header {
            background-image : url(diet30_head.jpg);
            background-repeat :no-repeat;
            height : 340px;  			
        }
  #footer {
          background : #f2fdfc;          	  
          margin : auto;
        }
		 
  
  table {  margin : auto;
           width : 100%;
        }

        th {  text-align : center;
              padding-top : 5px;
			  
        }       
        
		
  h1
    {    	 
			FONT-SIZE: 4em;
            FONT-FAMILY: 微軟正黑體, 標楷體, 新細明體;
            text-align: center;                  
			color : #000;
			 background-color: #6fafd5;          
           /* for IE */
          filter:alpha(opacity=45);
           /* CSS3 standard */
         opacity:0.45;
       }
	   
        /*normal screen*/
        .header_content {           
             
            FONT-SIZE: 1.25em;
            font-weight : 600;
            FONT-FAMILY: 新細明體;
            line-height : 1.15;  
            width:65%;                    
            
        } 
           
            
   .dataTables tbody tr:nth-child(odd) td,
   .dataTables>thead>th {
              background-color: #d2eef8;
        }

   /*dataTables*/

        .dataTables>tbody>tr>td,
        .dataTables>thead>th>td{
            padding: 8px;
            line-height: 1.35;
            vertical-align : middle;
            text-align : left;
            border-top: 1px solid #e3ebda;
        }

        .underLine {            
            text-decoration: underline;
        }

@media (max-width: 767px) {

    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .table > tbody > tr > td:before {
        content: "";
        display: none;
    }

    .table > tbody > tr {
        border: 1px solid #ccc;
        width: 90%;
        margin: 10px auto;
        border-radius: 6px;
        background: #fff;
        display: block;
        padding: 15px 15px;
        -webkit-box-shadow: 0 8px 30px -8px rgba(0,0,0,0.15);
        box-shadow: 0 8px 30px -8px rgba(0,0,0,0.15);
    }

        .table > tbody > tr > td {
            border-top: 0;
            display: block;
            line-height: 1.3em;
            padding: 10px;
            text-align: left !important;
        }

    .table > thead {
        content: "";
        display: none;
    }

      h1 { FONT-SIZE: 2.5em; 
	     padding : 5px 5px 5px 5px;
         		 }
}

@media (max-width: 435px) {

    
      h1 { FONT-SIZE: 2em; 
	     padding : 1px 3px 3px 3px;
         		 }
}

@media (min-width: 767px){

       .header_content {
        margin-top: 50px;
        margin-left: 280px;
        FONT-SIZE: 1.35em;
        font-weight: 600;
        FONT-FAMILY: 新細明體;
        line-height: 1.3;
        
    }

 }