/*========================================================

Collection of CSS tools for reuse in every (or most!) projects.

(CC) 2006 Mark Perkins. Some Rights Reserved.
                          
This stylesheet is licenced under the Creative Commons 
Attribution-ShareAlike 2.5 License. 
To view a copy of this licence, visit 
http://creativecommons.org/licenses/by-sa/2.5/

=========================================================*/

/*=========================================================

Firstly we unset all those little things that can cause us
cross-browser problems- namely borders and margins of various
elements.

Thanks to:
http://tantek.com/log/2004/09.html#d06t2354

=========================================================*/

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {
	margin:0;
	padding:0
}

/*=========================================================

Now set a few elements to different defaults, more in line
with how we tend to use them.

=========================================================*/

:link,:visited { text-decoration:none }

/*ul,ol { list-style:none }*/

a img,:link img,:visited img { border:none }

/*=========================================================

Following is for typography- if you need relatively bigger
or smaller sizes just change the font-size attribute in the 
'body' rule.

Thanks to:
http://www.thenoodleincident.com/tutorials/typography/index.html

=========================================================*/

body {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 76%; /*can't set this smaller than this value and still have it work across all browsers!!!*/
}

h1 {
	font-size: 2.0em;
	font-weight: normal;
	margin:0em;
	padding: 0em;
}

h2 {
	font-size: 1.7em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: normal;
}

h3 {
	font-size: 1.4em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: normal;
}

h4 {
	font-size: 1.2em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
}

h5 {
	font-size: 1.0em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
}

h6 {
	font-size: 0.8em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
}

ol, ul, li {font-size: 1.0em;}

p {
	font-size: 1.0em;
	line-height: 1.6em;
	margin: 1.2em 0em 1.2em 0em;
}
	
li > p {
	margin-top: 0.2em;
}

pre {
	font-family: monospace;
	font-size: 1.0em;
}
	
strong, b {
	font-weight: bold;
}

em, i {
	font-weight:normal;
	font-style:italic;
}	

/*========================================================

The following is a class to make sure that a box
containing a floated element extends down to the
end of the element. Just add the class 'floatcontainer'
onto the element that contains the floated item.

Thanks to:
http://www.positioniseverything.net/easyclearing.html

=========================================================*/

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    font-size:0;	
    clear: both; 
    visibility:hidden;
}
	
.clearfix {
	display: inline-block;
} 

/* Hides from IE Mac \*/
* html .clearfix {
height: 1px; /* change back to 1% if it doesn't work!!!*/
}

.clearfix{
display:block;
}
/* End IE Mac hack */ 

/*=========================================================

And this is a nice way to achieve a cross-browser image 
link opacity effect toggled with a mouseover.

Change the values of the :hover one to alter level of opacity

=========================================================*/

html>body  a.opacity:hover img {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5; 
	opacity: 0.5;
	-khtml-opacity: 0.5;
}

html>body  a.opacity img {
	filter:alpha(opacity=100);   
	-moz-opacity: 1.0;   
	opacity: 1.0;
	-khtml-opacity: 1.0; 
}

/*=========================================================

Simple rule to force a scrollbar on any pages that would
otherwise not get one in FF etc.

=========================================================*/

html {
	height: 100%;
	margin-bottom: 1px; 
}

/*=========================================================

Image Replacement class. Background image to be shown in
css capable browsers should be linked to appropriate headings
via an id.

=========================================================*/

.replace {
	text-indent: -10000px;
}


/*=========================================================

Accessibility stuff

=========================================================*/

 span.accesskey {
	text-decoration:none;
 }
 .accessibility {
	position: absolute;
	top: -999em;
	left: -999em;
 }

/*=========================================================

Hide all horizontal rules from css capable browsers 

=========================================================*/

hr {
	display: none;
}

/*=========================================================

draw red borders around boxes to aid debugging!!!

=========================================================*/

.debug {
	border: 1px solid #F00;
}