/* using height:100% on html and body allows to style containers with a 100% height
 * the overflow declaration is to make sure there is a gutter for the scollbar in all browsers regardless of content
 * font-size: 100.01% to prevent bugs in IE and Opera
 */
html 
{
  height: 100%;
  font-size: 90%;
}
/* this choice of font-family is supposed to render text the same across platforms
 * letter-spacing and line-height makes the text a bit more legible 
 */	
body 
{
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: .05em;
  height: 100%;
  margin: 0 auto;
  color: #444;
  line-height: 1.4;
}

 
@media screen and (max-device-width: 480px)
{
  body
  {
    -webkit-text-size-adjust: none;  /*** 100%? ***/
  }
}


/* margin and padding reset  
 */
html, body, pre, code, form, blockquote, th, td  /*******************/
{
  margin: 0;
  padding: 0;
  border: 0;
}
p 
{
  margin: 1em 0;
  padding: 0;
}
footer
{
   margin: 3em auto 0;
   font-size: 0.8em;
}

h1, h2, h3, h4, h5, h6 
{
  letter-spacing: .05em;
  padding: 0;
}

h1 
{
   font-size: 1.5em;
   font-weight: 900;
   margin: 1.7em 0 1.2em 0;
   padding: 0;
}
h2 
{
   font-size: 1.4em;
   font-weight: 800;
   margin: 1.5em 0 1em 0;
   padding: 0;
}
h3 
{
   font-size: 1.3em;
   font-weight: 700;
   margin: 1.3em 0 0.8em 0;
   padding: 0;
}
h4 
{
   font-size: 1.2em;
   font-weight: 600;
   margin: 1.2em 0 0.7em 0;
   padding: 0;
}
h5 
{
   font-size: 1.1em;
   font-weight: 500;
   margin: 1.1em 0 0.6em 0;
   padding: 0;
}
h6 
{
   font-size: 1em;
   font-weight: normal;
   margin: 1em 0 0.5em 0;
   padding: 0;
}

 
/* don't mess up the order (link, visited, hover, active)
 * IE do not do anything with "outline" because does not support it 
 */
a:link {color: #4747ff;}
a:visited 
{
   text-decoration: none;
   color: #50b;
}
a:hover 
{
   text-decoration: none;
   color: #00f;
   outline: none;
}
a:focus {text-decoration: none;}
:focus {outline: 1px dotted #444;}
a:active 
{
   color: #a00;
   outline: none;
}


pre, code, kbd, samp, var 
{
  font-family: "Courier New", Courier, monospace;
  font-size: 1em;
}


abbr 
{
  border-bottom: 1px dotted #333;
} 


/* zeroing out line-height should prevent from messing with the gap between lines
 */
sub, sup 
{
   line-height: 0;
}



/* A class for list-style:none is at the end 

/*ul {list-style: url('dash444.gif');}
ul ul {list-style: url('arrow555.gif');}
ul ul ul {list-style-image: none; list-style: circle;}
ul ul ul ul {list-style: url('dash444.gif');}
ol {list-style-image: none;}*/
ol ol {list-style: lower-alpha;}
ol ol ol {list-style: decimal-leading-zero;}
ol ol ol ol {list-style: decimal;}

dt 
{
  font-weight: bold;  
}

dd {
   margin-left: 1.8em;
}



/* according to Eric Meyer's reset: tables still need 'cellspacing="0"' in the markup
 */
table 
{
  border-collapse: collapse;
  border-spacing: 0;
}

/* all th should be centered unless they are in tbody (table body)
 */
th {text-align: center;} 
tbody th {text-align: left;} 



blockquote, q, dfn 
{
  font-style: italic;
}

/*
 ************************************* interesting idea of deleting automaticaly inserted quotes *********************
 * to prevent some browsers from inserting quotes on "q" and "p" ("p" in blockquotes) 
q:before, q:after {content: '';}*/


hr 
{
  margin-right: 2em;
  margin-left: 2em;
}


/*form elements*/

legend 
{
  margin: 0;
  padding: 0 0.4em;
}

/* line height helps to set the vertical alignment of radio buttons and check boxes (remember to group these in fieldsets) 
 */
fieldset 
{
   line-height: 1;
   margin: 0.7em 0.3em;
   border: 1px solid #bbb;
   padding: 0.7em;
}

/* in webkit/Mac, select fails to inherit color, font-*, etc if there is no other styling like background for example (border will do to)
 */
select 
{
	background-color:transparent;
	font-family: Georgia, "DejaVu Serif", serif;
   letter-spacing: .05em;
}

/* vertical alignment of checkboxes (a different value is served to IE 7 -   *vertical-align: baseline;)
 */
input[type="checkbox"] 
{
  vertical-align: text-bottom; 
}

/* vertical alignment of radio buttons
 */
input[type="radio"] {vertical-align: bottom;}

textarea, input:not([type="submit"]), input:not([type="reset"]), input:not([type="button"]) 
{
   margin: 0.15em;
   border: 1px solid #bbb;
   padding: 0.15em;
   letter-spacing: .05em;
   font-family: sans-serif;
   font-size: 0.83em;
   line-height: 1.2;
}

button, input[type="submit"], input[type="reset"], input[type="button"]
{
   font-family: Georgia, "DejaVu Serif", serif;
   font-size: 0.8em;
   letter-spacing: .05em;
   cursor: pointer;
   margin: 0;
   padding: .2em .6em;
   border: 1px solid #bbb;
   background-color: #e0e0e0;
   border-radius: 13px;
   box-shadow: 0 3px 3px #fff inset, 0 -12px #c0c0c0 inset, 0 3px 1px -1px #666;
   text-shadow: 0 1px 1px #fff;
   vertical-align: middle;
}
button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover
{
   border: 1px dotted #e0e0e0;
   background-color: #ededed;
   box-shadow: 0 4px 2px #fff inset, 0 -12px #d7d7d7 inset, 0 3px 2px -1px #999;
   text-shadow: 0 1px #fff;
}
button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active
{
   border: 1px solid #a0a0a0;
   background-color: #f3f3f3;
   box-shadow: 0 0px 2px 2px #ddd inset, 0 -12px #ddd inset;
   text-shadow: 1px 1px #fff;
}



/* classes
 */
.listStyleNone
{
   margin: 0;
   padding: 0;
   list-style: none;
}
.listStyleNone a 
{
  text-decoration: none;
}

.marginPadding_0 
{
   margin: 0;
   padding: 0;
}