/************************************************************************************************************
* Web Designer Toolbox- © The toolbox for Web Designers (www.royvella.com)
* This is intended to help all the good designers work less at coding - Please feel free to use and improve.
* Visit my website at http://www.royvella.com for what's latest in the 'box!
*************************************************************************************************************/

/* ------------------------------------------------------------------
   Base - Styles to be used globally throughout a site
   ------------------------------------------------------------------ */



/* Resets CSS
------------------------------------------------------------------ */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,input,select,textarea,p,blockquote,th,td {margin:0;padding:0;font-size:100%;}

table {border-collapse:collapse;border-spacing:0;}

fieldset,img {border:0;}

address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}

caption,th {text-align:left;}

map {margin:0;padding:0;}



/* Fonts
---------------------------------------------------------------------------------
 
  * Most browsers have a default font size of Medium which is 16px. 
    So on body, assuming a font size is not specified on html and that the 
    default font size is set to 16px, font-size:1em or 16px or 100%.

  * Making the "body and/or html" font-size 62.5% brings the default font size of 16px to 10px/1em/100%
    This makes it easier to determine the px values for em or % --- for example:
    em to px sizing can now be determined by multiplying "em*10" : 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc.
	% to px sizing can now be determined by dividing "10/%" : 100% is 10px, 50% is 5px, 200% is 20px, etc
	
  * this is based on "child(tags other than body) / parent(body and/or html tag) = child" relationship
    that is why I reset all tags above to font-size:100%.  This way the child tags don’t get any inherited sizes from the parent.
  
----------------------------------------------- */

body {
font:62.5% arial,helvetica,clean,sans-serif; /*See notes above about the sizing */
line-height:1.4em;}

pre, code {font:115% monospace;}



/* Tags
------------------------------------------------------------------ */

html,body {
height:100%; /* needed for container min-height */
background:#000;
color:#fff;
}

p { margin-bottom: 15px; /*Set defaults here*/ } 

ul { margin-left:15px; list-style-type: square; /*Set defaults here*/ }

ol { margin-left:15px; list-style-type: decimal; /*Set defaults here*/ }

dl { /*Set defaults here*/ }

dl dt { /*Set defaults here*/ }

dl dd {/*Set defaults here*/ }

blockquote { background: #CCCCCC; color: #333333; padding: 10px; margin: 10px; /*Set defaults here*/ }

table { font-size: 100%; border-collapse: collapse; border-spacing: 0; }

td, th { vertical-align: top; } 

h1, h2, h3, h4, h5, h6 { /*add properties that will be in all header tags here*/ } 

h1 {  font:250% "Arial Narrow",Arial, Helvetica, sans-serif; line-height: 150%;  } 

h2 { font-size: 180%; line-height: 150%; } 

h3 { font-size: 160%; line-height: 150%; } 

h4 { font-size: 140%; line-height: 150%; } 

h5 { font-size: 120%; line-height: 150%; } 

h6 { font-size: 100%; line-height: 150%; } 

small { font-size: 90%; } 

fieldset { padding: 5px 0; margin-bottom: 15px; }



/* Form Elements
------------------------------------------------------------------ */

.input-text { border: 1px solid #666; padding: 2px; color: #666; font-size: 11px; }

.input-select { border: 1px solid #666; color: #333; font-size: 11px; }



/* Links
------------------------------------------------------------------ */

a img { border: 0; } 

a, a:link, a:visited { color: #fff; text-decoration: none; } 

a:hover { color: #333; text-decoration: underline; } 
