@media all and (min-width: 0) {
#resolution           { background-color: #fff; color: #000}
#resolution strong    { display: none }
#resolution span:after  { content:"0: media query enabled up to 479" }

/* reset desktop defaults */
body           { background-color: #fff}
#wrap          { max-width: 1280px; width: auto; }

#wrapper  { float:none; width: auto}
#main     { margin: 0 0 0 0;  }
#content, #full, #empty  { padding-top: 0; margin-right: 0; border: none}
#side     { float:none; width:auto; margin-left:0; }


#inner     { padding-left: 0; margin-bottom: 0}
#empty     { padding-right: 0 }

#foot     { margin-left: 0; margin-right: 0}

#content h1    { float: none; }
#controls      { float: none }

/* reset excess desktop defaults */

#top           { margin-bottom: 20px; border-bottom: 20px solid #2f2f2f; margin-left: 0; margin-right: 0 }
#top_bg        { display: none }
#art           { display: none}
#logo          { position: absolute; top: 10%; left: 35%; right: 35%; width: auto }
#perex         { display: none} 
#menu.l        { position: absolute; top: 25%; left: 2% }
#menu.r        { position: absolute; top: 25%; right: 2% }
#menu a        { padding: 5px 10px}


#empty           { padding-left: 10px; padding-bottom: 10px; margin-bottom: 10px }
.e_desc          { margin-bottom: 20px; margin-right: 10px  }
.e_menu p        { width: auto; float: none }
.e_menu a        { margin-right: 10px; margin-bottom: 20px }

#content h1    { margin-left: 10px }

#controls a    { text-align: center; margin-left: 10px; margin-right: 10px;  margin-bottom: 20px }


#filter        { margin-bottom: 20px; margin-left: 0; margin-right: 0}

#recent_e          { margin-left: 10px; margin-right: 0}
#recent_e .wdth    { width: auto; float: none}
#recent_e .it      { margin-right: 10px; margin-bottom: 20px }

#recent_e .it_image  { margin-left: 5px; margin-right: 5px; margin-top: 5px; }
#recent_e .it_cont   { padding-top: 10px; padding-bottom: 10px; padding-left: 5px; padding-right: 5px}


#list_e          { margin-left: 10px}
#list_e .wdth    { width: auto; float: none }
#list_e .it      { margin-right: 10px; margin-bottom: 20px }
#list_e .it_head a { white-space: nowrap;  }

#list_e .it_text          { display: none }
#list_e .it_image         { width: 100%; float: none; margin-bottom: 10px }
#list_e .it_image .scale  { margin-right: 0}
#list_e .it_cont          { padding: 5px; height: auto  }



#list_f          { margin-left: 10px}
#list_f .wdth    { width: auto; float: none}
#list_f .it      { margin-right: 10px; margin-bottom: 20px }

#list_f .it_head          { padding-top: 5px; padding-left: 5px; padding-right:5px;  }
#list_f .it_cont          { padding: 5px;  }

#list_f .it_head a        { white-space: nowrap; overflow: hidden; display: block; }


.link_more          { margin-bottom: 20px; margin-right: 10px   }


#result         { margin-left: 10px; margin-right: 10px; }
#image          { margin-bottom: 20px; width: auto; float: none}
#photos         { margin-bottom: 10px; }



.sidemenu           { margin-bottom: 20px; margin-left: 10px; margin-right: 10px}
.sidemenu li        { width: auto; float: none}
.sidemenu li a      { display: block; padding-left: 5px; margin-right: 0; margin-bottom: 0; border-width: 0px 0px 1px 0px }



#recent_f         { margin-left: 10px; margin-bottom: 10px }
#recent_f .head   { margin-right: 10px }
#recent_f .wdth   { width: 50%; float: left }
#recent_f .area   { margin-right: 10px; margin-bottom: 10px; border-width: 1px; border-style: solid; border-color: #636C49; overflow: hidden }


#links             { margin-left: 10px; margin-bottom: 20px; margin-right: 10px; }
#links p           { float: none; width: auto }
#links a           { display: inline-block; margin-left: 5px; margin-bottom: 8px;  }

#webring                  { margin-left: 10px; }
#webring .wdth            { width: auto; float: none}
#webring img              { margin-right: 10px; width: 80px; height: 80px }
#webring .item            { margin-right: 10px; margin-bottom: 10px; padding: 10px;  }


#seekbar      { margin-left: 10px; margin-right: 10px }


.warning      { margin-right: 10px }






}



@media all and (min-width: 480px) {
#resolution { background-color: #FFFF33; color: #000}
#resolution span:after  { content:"2: cool smartphones 480 and up portrait" }

#content h1           { float: left }

#menu.l        { top: 30%;  }
#menu.r        { top: 30%; }


#controls    { float: right}



#recent_e .wdth    { width: 50%; float: left }
#list_e .wdth    { width: 50%; float: left }
#list_f .wdth    { width: 50%; float: left }


.sidemenu li       { width: 50%; float: left; }

#recent_f .wdth    { width: 33.333333% }
#recent_f .rf_9    { display: none}


#links p           { width: 50%;  float: left; }
}



@media all and (min-width: 600px) {
#resolution { background-color: #009; color: #fff}
#resolution span:after  { content:"3: nexus portrait 600 and up; better smartphones landscape" }


/* change top look */
#top_bg        { display: block }
#logo          { position: absolute; top: 10%; left: 2%; width: 26% }
#perex         { position: absolute; bottom: 6%; right: 2%; left: auto; font-size: 1.4em; color: #000; text-shadow: 1px 1px 2px #fff; text-align: left; display: block} 


#menu.l        { top: 20%; left: auto; right: 15% }
#menu.r        { top: 20%;  }


/* change top look */


#recent_e .wdth    { width: 33.333333%; }

#list_e .wdth             { width: auto; float: none }
#list_e .it_text          { display: block}

#list_e .it_image         { width: 30%; float: left; }
#list_e .it_image .scale  { margin-right: 10px }
#list_e .it_cont          { padding: 5px; }

#list_f .wdth             { width: 33.333333%; }

.link_more                { float: right }






#recent_f .wdth    { width: 25% }
#recent_f .rf_8    { display: none}

#links p           { width: 33.333333%;  }
.sidemenu li       { width: 33.333333%; }

}



@media all and (min-width: 768px) {
#resolution { background-color: #c00; color: #fff}
#resolution span:after  { content:"4: Ipad portrait, Nexus landscape 768 and up" }

#logo          { position: absolute; top: 10%; left: 2%; width: 20% }
#perex         { position: absolute; bottom: 6%; left: 2%; font-size: 1.2em; color: #000; text-shadow: 1px 1px 2px #fff; text-align: left; display: block} 
#art           { position: absolute; top: 10%; right: 15%; width: 30%; display: block }

#menu a        { padding: 8px 20px }
#menu.l        { top: 20%; left: auto; right: 2% }
#menu.r        { top: 60%;  }


#recent_e .wdth    { width: 25%; }

#list_e .wdth             { width: 50%; float: left}

#list_e .it_image         { width: 40%; float: left; }
#list_e .it_head a        { white-space: normal; }
#list_e .it_cont          { height: 160px; overflow: hidden}

#list_f .wdth             { width: 20%; }

#image                  { width: 50%; float: left; }
#photos                   { margin-right: 20px; }

#recent_f .wdth    { width: 20% }
#recent_f .rf_8,#recent_f .rf_9    { display: block}

#links p           { width: 25%; }
.sidemenu li       { width: 25%; }


#webring .wdth            { width: 50%; float: left}


.e_menu p    { float: left; width: 33.333333% }


}

@media all and (min-width: 1024px) {
#resolution { background-color: #FF00CC; color: #fff}
#resolution span:after  { content:"5: Ipad landscape 1024 and up to 1279" }


#recent_e .wdth    { width: 20%; }

#list_e .it_image         { width: 30%; float: left; }



#links p           { width: 20%;  }
.sidemenu li       { width: 20%; }
}

@media all and (min-width: 1280px) {
#resolution { background-color: #f60; color: #000}
#resolution span:after  { content:"6: 1280 and up - desktops" }

body      { background-color: #2f2f2f; }

#top       { border-bottom: 2px solid white; margin-left: 10px; margin-right: 10px; }



#inner     { padding-left: 10px; margin-bottom: 20px }

#wrapper  { float:left; width:100%}
#main     { margin: 0 0 0 200px;  }
#content, #full, #empty  { padding-top: 20px; margin-right: 10px; border: 1px solid #636C49; }
#side     { float:left; width:200px; margin-left:-100%; }


#empty    { padding-left: 20px; padding-right: 10px }

#foot     { margin-left: 10px; margin-right: 10px }




#content h1    { margin-left: 20px }
#controls a    { margin-right: 20px }




#recent_e          { margin-left: 20px; margin-right: 10px }
#recent_e .it      { margin-right: 10px; margin-bottom: 10px }

#filter          { margin-left: 20px; margin-right: 20px   }

#list_e          { margin-left: 20px }
#list_e .it      { margin-right: 20px; }
#list_e .it_image         { width: 40%; }

#list_f          { margin-left: 20px }
#list_f .it      { margin-right: 20px; }

.warning      { margin-right: 20px }

#seekbar      { margin-left: 20px; margin-right: 20px }

#recent_f         { margin-right: 10px; margin-left: 0 }
#recent_f .area   { border: 1px solid #fff; }

#recent_f .wdth   { width: 50% }
#recent_f .rf_8, #recent_f .rf_9 { display: none }

.sidemenu          { margin-right: 20px; margin-left: 0}
.sidemenu li      { width: auto; float: none; }

#links           { margin-left: 0; margin-right: 20px }
#links p         { width: auto; float: none }


#image                    { margin-bottom: 0 }

#result                   { margin-left: 20px; margin-right: 20px;  }



#foot_line           { margin-bottom: 20px }

#footer               { margin-bottom: 20px }


#webring                  { margin-left: 10px; }
#webring .wdth            { width: 33.333333%; float: left}


}