body{
    background-color: #FFFFE0;
     text-align : center;
     width:100%; 
     margin:0;
}





#hederteibel{
   
    width:100%;
    text-align : center;
    background-color:#1cc7c4;
    height:130px;
   // margin:10px;
    float:none;
 

}


#esm{
     font-size:40px;
     color:yellow;
     text-align:right;
     padding:10px;
     //margin:10px;
}



#toz{
     font-size:20px;
     color:brown;
}



#meno{
    background-color:#1cc7c4;
   font-size:15px;
    width:100%;
    text-align:center;
}

#teibel_meno{
    //float:right; 
    text-align:right;
    width:100%;
}



#tes{
   background-color:#3cc7c4; 
}



.footerteibel{
    width:100%;
    text-align : right;
    background-color:#1cc7c4;
    height:90px;
  //  margin:10px;
    float:none;
}

#footnevesht{
    font-style:italic;
    font-size:20px;
    color:brown;
    padding:10px;
    text-align:center;
}

#basicclock{
    font-style:italic;
    font-size:50;
    color:brown;
}


#wb_JavaScript1{
     font-size:40px;
     color:yellow;
     text-align:center;
}



#salamid{
   
    font-size:30px;
    color:orange; 
}


#sidebar{
   width:25%;  
   text-align:right;
   border-style:solid;
   border-width :3px;
   float:right;
   padding:10px;
   margin-right:10px;
   /*height:1500px; */
}


#kenarbar{
   width:15%;  
   text-align:right;
   border-style:solid;
   border-width :3px;
   float:left;
   padding:10px;
  // margin:10px;
  height:1500px;
  
  display:none;
}



.vasatbar{
    width:65%;
    text-align:right;
    //float:left;
    padding:10px;
   // margin:5px;
   
}






#Form_nam{
    background-color:#1cc7c4;
    
}

.fasele_post{
     background-color:#1cc7c4;
      
}

#fasele_post{
     background-color:#1cc7c4;
      
}

#Form_nam{
    font-weight:bold;
    //text-decoration:bol;
}

input[type=button] {
     font-weight:bold;
     display:none;
}







/*   این کد زیر عکس ها را داخل کادر قرار میدهد و بیرون نمیزند */
img {
    width: 100%;
    height: auto;
}

a{
    text-decoration:none; 
}

/*-----------------------------------*/

@media screen and (min-width: 700px) {
  body {
    background-color: white;
    text-align:center;
    
  }
}

#hederteibel  , #sidebar , #meno ,  #footerteibel , #vasatbar {
     margin-bottom:5px;
}








@media screen and (max-width: 700px) {
  body {
    background-color: pink;
    text-align:center;
    float:none;
  }

 #hederteibel  , #sidebar , #meno ,  #footerteibel , #vasatbar {
      float:none;
       //width:600px;
      //padding:10px;
      margin-bottom:15px;
      width: 100%;
      //display:none;
      margin:0;
      padding:5px;
  }








/*------------------------------







#menu{
     width:98%;
    float:none;
    text-align : right;
    background-color:#1ca7c4;
    height:40px;
    margin:10px;
    padding:10px;
    font-size:18px;
    font-style:italic;
    
}


body{
    background-color:white;
     text-align : right;
}



#aidi{
    width:400px;
    background-color:violet;
    border-style:solid;
    height:60px;
    border-width :6px;
    font-size:20px;
}






 این که کار میکنه 
.kelaseesmesite{
    font-size:30px;
}

این هم کار میکند 
#aidiesmesite{
    font-size:40px;
}




*/


     
     
     
     
     
     
     

/*
.kelas{
    
    text-align : right;
    
    
}
h2 {
    color:yellow;
    text-align : right;
    font-size :30px;
    
    
}
/*
td {
    background-color:white;
}



p {
    
    /*background-color:blue;
    color:yellow;
}


.footer{
    font-size:4px;
   
}

.divvv{
    
    text-align:left;
    border-color:purple;
    border:10px;
}

#aidi{
    width:400px;
    background-color:violet;
    border-style:solid;
    height:60px;
    border-width :6px;
    font-size:20px;
}


.kelasemohtava{
    
    background-color:#444888;
    border-style:solid;
   
    border-width :6px;
    font-size:20px;
    width:69%;
    float:right;
}


#id_side{
    
    background-color:#FFF777;
    border-style:solid;
   max-height:60px; 
    border-width :6px;
    font-size:20px;
    width:29%;
    float:left;
}

*/