/** em widths to use as trigger points 40em =~ 640px    50em =~ 800px     64em =~ 1024px **/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,section{margin:0; padding:0}
fieldset,img{border:none}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal; font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal}
q:before,q:after{content:""}
abbr,acronym{border:none}
body{text-align:center; font:62.5%/1.5 Cambria, Verdana, Arial, Helvetica, sans-serif; background-color:#007fc0}
a{text-decoration:none; color:#666}
a:hover{border-bottom:1px dotted #666; color:#666}

#content{margin-right:auto; margin-left:auto; background-color:#fff}

/** formorial **/
/** input type search in webkit - render same as input type text while maintaining functionality, ie., recent search list, clear and reset [x] functionality **/
/** these lines undo WebKit's native rounded styling - http://sonspring.com/journal/formalize-css **/
input, button, select, textarea{margin:0; vertical-align:middle}

input[type=search]{-webkit-appearance:none}
input[type=search]::-webkit-search-decoration{display:none}

/** hide vertical scrollbar (@ least in ffox) **/
body{overflow-y:hidden}
/** hide horizontal scrollbar (@ least in ffox) **/
body{overflow-x:hidden}

/** ui consistency via http://host.sonspring.com/formalize/assets/stylesheets/formalize.css **/
::-moz-focus-inner {border:0}

/* html:hover * { display: none !important; } */




/** thinning text for safari 5 & chrome http://orderedlist.com/our-writing/resources/html-css/thinning-text-in-webkit-safari/ **/
body{-webkit-font-smoothing:antialiased}
/** image flip http://mir.aculo.us/demos/flip.html **/
.flip-horizontal{ -webkit-transform: matrix(-1, 0, 0, 1, 0, 0) }
.flip-vertical{ -webkit-transform: matrix(1, 0, 0, -1, 0, 0) }

/*
cross-browser css transform (rotation)
// css
.rotate {
   -moz-transform: rotate(-30deg);
     -o-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
           filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.154, M12=-0.988, M21=0.988, M22=0.154);
       -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.154, M12=-0.988, M21=0.988, M22=0.154)";
             zoom: 1;
}
*/

/** Using Borders to Produce Angled Shapes **/
/** controls/utilities css **/
/**
.arrow{display:block; text-indent:-9999px; font-size:0; line-height:0%; width:0}
.arrow-down{border-bottom:20px solid #77c; border-left:10px solid #f6f6f6; border-right:10px solid #f6f6f6}
.arrow-up{border-top:20px solid #77c; border-left:10px solid #f6f6f6; border-right:10px solid #f6f6f6}
.arrow-right{border-top:10px solid #f6f6f6; border-left:20px solid #77c; border-bottom:10px solid #f6f6f6}
.arrow-left{border-top:10px solid #f6f6f6; border-right:20px solid #77c; border-bottom:10px solid #f6f6f6}
.hourglass{display:block; text-indent:-9999px; font-size:0px; line-height:0%; width:0}
.hourglass-vertical{border-top:20px solid #77c; border-left:10px solid #f6f6f6; border-right:10px solid #f6f6f6; border-bottom:20px solid #77c}
.hourglass-horizontal{border-left:20px solid #77c; border-top:10px solid #f6f6f6; border-bottom:10px solid #f6f6f6; border-right:20px solid #77c}


Down arrow

Up arrow
font-size: 0px; line-height: 0%; width: 0px;

Left arrow
font-size: 0px; line-height: 0%; width: 0px;

Right arrow
font-size: 0px; line-height: 0%; width: 0px;

Hourglass

Sideways hourglass
 **/
 
/** cross-browser compatibilty **/
/** ie6 min-height fix **/
#container{min-height:500px} * html #container{height:500px}



/* not first child of ul
o perform that match, you can use li>*:first-child. */

@media all and (max-width: 600px) { }
@media all and (min-width: 600px) { }