@font-face     { font-family: bristle; src: url(/fonts/bristle.otf); } /* NO  unless for headers only*/
@font-face     { font-family: calligri; src: url(/fonts/calligri.otf); } /* NO unless for headers only */
@font-face     { font-family: clearwater; src: url(/fonts/clearwater.otf); } /* decent */
@font-face     { font-family: eamon; src: url(/fonts/eamon.otf); } /* not bad */
@font-face     { font-family: churchill; src: url(/fonts/churchill.otf); } /* good */
@font-face     { font-family: lollipop; src: url(/fonts/lollipop.otf); } /* candidate */
@font-face     { font-family: zadoka; src: url(/fonts/zadoka.otf); } /* not bad */

body               { background-color: #FEC9EC; }

h1             { font-size: 160%; margin: 0 }
h2             { font-size: 120%; line-height: 1.4em; margin: 0 0 10px 0; }

h1, h2, #perex, #nav ul li                     { font-family: lollipop; }

#resolution { background-color: #d0d0d0; color: #000}
#resolution span:after  { content:"default desktop, no media query" }


#wrap          { min-width: 960px; max-width: 1440px; }

#top           { box-shadow: 0 0 10px #606; margin-bottom: 20px; min-width: 960px;
			           background: #9f4188; 
                 background: -webkit-linear-gradient(top,  #6a1453 0%,#fe99e9 100%); 
                 background: linear-gradient(to bottom,  #6a1453 0%,#fe99e9 100%);} 


                
#top_inner             { min-width: 960px; max-width: 1440px; padding-left: 20px; margin: 0 auto; background-image: url(../img/bg_top.png);  }
#logo                  { float:left; line-height: 0 }
#logo img              { width: 280px; height: 80px; border: 0 }
#logo .home { display: none }

#container             { float: left; height: 80px; width: 430px; padding-left: 20px; position: relative;  }
#perex                 { padding-top: 10px; font-size: 18px; color: #fff; font-weight: bold}
#perex a               { color: #fc0; text-decoration: none }

#selector              { float: right; padding-top: 10px; padding-right: 20px }

.selector                { }
.selector a              { display: block; text-decoration: none} 
.selector ul             { }
.selector li             { float: left; list-style-type:none;  }
.selector a.root         { background-color: #ffc; background-image: url(../img/selector_arrow.png); background-position: top right; background-repeat: no-repeat;  color: #000; border: 1px solid #666; width: 200px; padding: 5px 10px; position: relative }
.selector a.root.chosen  { background-color: #531643; color: #fff }  
.selector a.root:hover   { background-color: #531643; color: #fff}
.selector li:hover ul    { display: block }
.selector ul             { width: 200px; border-width: 0 1px 1px 1px; border-style: solid; border-color: #666; background: #d0d0d0; display: none; position: absolute; z-index: 10 }
.selector ul li          { float: none}
.selector ul li a        { background: #ffc; color: #000; padding: 5px 10px;  }
.selector ul li a:hover  { background: #531643; color: #fff}



#nav                   { width: 480px; position: absolute; bottom: 0; float: left;  }
#nav ul                { padding: 0; margin: 0; list-style-type: none}
#nav ul li             {  font-size: 18px; list-style-type: none; float: left; }
#nav ul li a           { border-width: 2px 2px 0 2px; border-style: solid; border-color: #fff; border-radius: 5px 5px 0 0; background-color: #963B7F; margin-right: 10px; color: #fff; padding: 3px 10px; text-decoration: none; text-align: center; display: block; }
#nav ul li a:hover, #nav ul li a.sel   { background-color: #B30C31; color: #fff; }


#header, #cities, #error, #seekbar, #result, #search, #empty, #filter, .line           { margin-bottom: 20px; margin-left: 20px; margin-right: 20px; }

h1        { float: left }
#controls { float: right }



#regs         { background: #531643; border-color: #B2699E; border-radius: 5px; box-shadow: 0 0 5px #000;  padding: 10px 0 0 10px; margin-left: 20px; margin-right: 20px; margin-bottom: 20px }
#regs div     { float: left; font-size: 14px;   }
#regs a       { display: block; text-align: center; text-decoration: none; background: #EDDDEA; color: #531643; border-width: 1px; border-style: solid; border-color: #000;  padding: 5px 10px; border-radius: 5px; }
#regs a:hover,  #regs a.sel      { border-color: #F05DCD;  background: #531643; color: #fff; box-shadow: 0 0 5px #F05DCD}


#construct                          { padding-left: 20px; margin-bottom: 20px }
#tips, #list_e, #list_f, #lines     { padding-left: 20px;   }
.it                                 { padding-right:20px; padding-bottom: 20px; }


#tips .it        { width: 25%; float: left}

#tips .tp_4, .tp_5, .tp_6   { display: none }


#bottom             { border-width: 1px 1px 0 1px; margin-left: 20px; margin-right: 20px; border-radius: 5px 5px 0 0  }
#bottom .blocks     { width: 50%;  float: left}
#bottom .blocks p   { width: 33.333333%; float: left}

#bottom .cluster     { width: 50%; float: left}


#foot               { border-top: 1px solid #A00179 }



#regs div      { width: 20%; padding-right: 10px; padding-bottom: 10px;  }



#recent_f               { width: 50%; float: left; }
#recent_e               { width: 50%; float: left;  }

.more                   { margin-bottom: 20px; padding-right: 20px; float: right }

#filter a img        { float: left; width:30px; height: 30px; margin-right: 5px; position: relative; top: 0 }
#filter p            { float: left; line-height: 30px; padding-right: 10px;   }


#list_e .it             { width: 50%; float: left; }
#list_f .it             { width: 33.333333%; float: left ;}

#list_e .name           { font-size: 20px; margin-bottom: 20px }
#list_f .name           { font-size: 24px; margin-bottom: 5px }

#list_f .text          { height: 65px; overflow: hidden; font-size: 0.8em; margin-bottom: 10px;  }



.line                { background-color: #CC99CC; color: #606; padding: 5px; border: 1px solid #909; border-radius: 5px; text-align: center }


#result, #search        { border-width: 2px; border-radius: 5px; box-shadow: 1px 1px 5px #606; border-radius: 5px; box-shadow: 1px 1px 5px #606; }


#result          { padding: 20px 20px 0 20px}

#photo .holder   { display: block; width: 100%;  }
.area            { position: absolute; top: 0; bottom: 0; right: 0; left: 0; text-align: center; overflow: hidden}
.area img        { height: 100%; }       

#photo         { width: 60%; float: left}
#frame, #thumbs         { margin-right: 30px; padding: 10px;  }
#info          { width: 40%; float: left}


#stats p       { width: 50%; }
#stats div     { width: 33.333333%; }

#data          { display: inline; clear: none}


#edit                { float: right; position :absolute; bottom: 0; right: 0}

#error div             { width: 25%; float: left }


#search                     { padding-top: 20px; }

#search .field              { padding-left: 20px; margin-bottom: 5px; }
#search .cell, #search .scell, #search .bcell            { padding-right: 20px; padding-bottom: 20px}
#search .nr                 { padding-right: 20px }
#search .ncell               { padding-bottom: 20px}

#search .cell, #search .ncell { width: 25%; float: left }
#search .scell { width: 50%; float: left }
#search .bcell { width: 25%; float: left }

input[type="number"]  { -moz-appearance:textfield; }
input::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button  {-webkit-appearance: none }  




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





}

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

#tips .it        { width: 20% }
#tips .tp_4      { display: block }

#regs div      { width: 14.285714%; padding-right: 10px; padding-bottom: 10px; }
#regs .global  { display: none }

#list_e .it      { width: 33.333333%; }

#lines .it       { width: 50%; float: left }
#lines .data     { height: 170px; overflow: hidden }

#list_f .text          { height: 80px; }

#photo    { width: 50%; }
#info     { width: 50%; }


}

@media all and (min-width: 1440px) {
#resolution { background-color: #9999CC; color: #fff}
#resolution span:after  { content:"10: 1440px cap" }

#tips .it        { width: 16.666666% }
#tips .tp_5      { display: block }

#recent_f        { width: 33.333333%; float: left }
#recent_e        { width: 33.333333%; float: left }
#recent_l        { width: 33.333333%; float: left; clear: none;  }


#list_f .it      { width: 25%; float: left; }



}