/*  CSS Document for ORANGE */
/*
******************************************************************************************************

Title:			main.css
Browser(s): 	All 

Author: 		Marko Prljić (http://www.markoprljic.iz.hr)
Created: 		23.11.2008
Modified:       Ryan Upton, 6.01.2010 - Added more styles and comments

******************************************************************************************************
*/

/*-------------------------------DEFINE BODY PROPERTIES----------------------------------------*/

/* Global preferences. DO NOT CHANGE. */
*{
	margin: 0 auto 0 auto; /* GLOBAL RESET */
	padding: 0;
}

/* Default styling used on EVERY page
   Sets things like the background, default font, etc. */
body
{
    background-position: left top;
    margin: 0 auto 0 auto;
    font-size: 10px;
    font-family: Arial, Sans-Serif;
    font-weight: normal;
    line-height: 150%;
    color: #333;
    background: #E3E6E4 url(images/bg.jpg) top left repeat-x;
    background-attachment: fixed;
}

/* default handling for any if the div, p, ul, h2, h3, h4, img tags used throughout the site*/
div, p, ul, h2, h3, h4, img
{
    padding: 0px;
    margin: 0px;
    border: none;
    font-size: medium;
}

/* not sure, but it was in the template, so I've left it.. just in case */
.spacer
{
	clear:both; 
	font-size:0px; 
	line-height:0px;
}

/* What the link text looks like when you are NOT hovering over it */
a
{
    outline: none; /* Remove Firefox's dotted borders */
    text-decoration: none;
    color: #999999;
    font-size: 13px;
}

/* What the link text looks like when you hover over a link */
a:hover
{
    color: #333;
    font-size: 13px;
}

/* Remove borders on images used as links*/
a img
{
    border: none;
} 

/* ---------------------------- END header styles ---------------------------- */
/*HEADINGS: Everytimg a header is used, one of these styles is called (depending on which is used) */

h1
{
    font-size: 35px;
    color: #FF6600;
    border-style: none;
    border-width: 10px;
    border-color: inherit;
    margin: 0;
    padding: 10px 0 0 10px;
    line-height: 150%;
}

h2
{
    font-size: 35px;
    border: none;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 150%;
}

h3
{
    font-size: 25px;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 150%;
}

h4
{
    font-size: 20px;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 150%;
}

h5
{
    font-size: 12px;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 150%;
}

h6
{
    font-size: 12px;
    border: none;
    margin: 0 0 10px 0;
    padding: 0;
    line-height: 150%;
    color: #FF6600;
}
/* ---------------------------- END header styles ---------------------------- */

/* Default settings for anything between the <p> and </p> tags (paragraph) on all pages*/
p
{
    font-size: 11px;
    padding: 20px 0 0 0;
}

/* Style of the long horizontal line (forgot where it's used)
    Identical to the short horizontal line, except for the width */
.hr
{
    border-bottom: 1px solid #CCCCCC;
    border-left: none;
    border-right: none;
    border-top: none;
    margin: 10px 0 10px 10px;
    padding: 0;
    width: 940px;
}

/* Style of the short horizontal line (forgot where it's used)
    Identical to the long horizontal line, except for the width */
.hr_s
{
    border-bottom: 1px solid #CCCCCC;
    border-left: none;
    border-right: none;
    border-top: none;
    margin: 10px 0 10px 0;
    padding: 0;
    width: 200px;
}

/* Used for aligning things like images on the left */
.left
{
    float: left;
}

/* Used for aligning things like images on the right */
.right
{
    float: right;
}

/* Not sure where it's used, but it was in the template, so I've left it alone */
.stroke
{
    border: 1px solid #CCCCCC;
}

/* Unordered (bulleted) list style. Shows the small 'oranged' instead of bullets (or whatever the Bullet.png image is) */
ul
{
    list-style-image: url("Images/Bullet.png");
} 

/* Ordered (numeric) list style. Shows the small 'oranged' instead of numbers (or whatever the Bullet.png image is) */
ol
{
    list-style-image: url("Images/Bullet.png");
}

/*-------------------------------END----------DEFINE BODY PROPERTIES----------------------------------------*/
/* Main content wrapper. This limits the width of the main content area. 
   PLEASE DONT CHANGE! */
#wrapper
{
    width: 960px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}
/*------------------------------HEADER--------------------------------*/

/* Propertis of the upper most portion of the page, where the logo image and the "small" menu are */
#header
{
    height: 100%;
    padding: 0;
}

/* Not sure where this is used, but it was in the template, so I've left it alone */
.teaser
{
    padding: 10px 0 0 10px;
}

/* General Properties of the menu "block" at the top of the page */
#menu
{
    float: right;
    padding: 0;
    margin: -15px 10px 0 0;
}

/* Properties of the links in the menu at the top of the page */
#menu a
{
    float: left;
    text-align: left;
    text-decoration: none;
    font-size: 11px;
    padding: 0 5px 2px 5px;
    color: #999;
    display: block;
    border: none;
}

/*Chanage bg color on menu item hover*/
#menu a:hover
{
    color: #fff;
    background-color: #F59202;
}

/*Chanage bg color on menu item active*/
#menu a.current
{
    color: #fff;
    background-color: #F59202;
}

/*------------------------------CONTENT--------------------------------*/

/* Used primeraly on the main page, to control the styles of the main navigation boxes. */
.box
{
    width: 200px;
    height: 302px;
    padding: 10px;
    margin: 10px;
    float: left;
    display: inline;
    overflow: hidden;
    background: #E3E6E4 url(images/bg_box.jpg) top left repeat-x;
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-top: 2px solid #F59202;
    color: #6D7B8D;
}

/* what to do to the box when the most cursor is over it */
.box:hover
{
    width: 200px;
    height: 298px;
    padding: 10px;
    margin: 10px;
    float: left;
    display: inline;
    overflow: hidden;
    background: #E3E6E4 url(images/bg_box_hover.jpg) top left repeat-x;
    border-bottom: 4px solid #000;
    border-left: none;
    border-right: none;
    border-top: 2px solid #F59202;
}

/* Centeres an object... not sure when its used, so I left it */
.center
{
    margin: 30px 60px 20px 60px;
}

/* This controld the main content area sizing, position, and margins */
.main
{
    float: left;
    padding: 0;
    margin: 10px 0 0 10px;
    width: 690px;
    display: inline;
}

/* This controld the sidebar ("Relevant Links") content area sizing, position, and margins */
.side
{
    float: right;
    padding: 10px;
    margin: 10px;
    width: 200px;
    height: 100%;
    display: inline;
    background-color: #E3E6E4;
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-top: 2px solid #F59202;
}

/* Sidebar paragraph tag styling */
.side p
{
    font-size: 10px;
    padding: 0;
}

/* Sidebar paragraph tag styling: when a news class is used in a paragraph in he side bar, this is called. */
.sidelarge p .news
{
    padding: 0;
}

/* Whenever a text quote is used. This adds the small quote symbols for extra effect */
.quote
{
    background: url(images/quote.png) top left no-repeat;
    margin: 20px 0 0 0;
    display: inline-block;
    overflow: hidden;
}

/* A paragraph style for inside a quoted area */
.quote p
{
    padding: 10px;
    font-size: 12px;
}

/* A paragraph style for inside a quoted area */
.quote p.signature
{
    color: #000;
    font-size: 1em;
    font-style: italic;
}

/* Seems to be the same as higher in this file. Both styles are combines, but I don't know when/if this is explicitly called, so I've left it */
ul
{
    list-style-type:none;
    padding: 10px;
    margin: 10px 0 0 20px;
}

/* Similar to above, but also affects the individual list items */
ul li
{
    list-style-type:none;
    font-size: 12px;
    color: #666;
    padding: 0 0 4px 0;
}

/*------------------------------FOOTER--------------------------------*/

/* Style for that little bit of text at the base of some pages */
#footer
{
    width: 920px;
    padding: 10px;
    margin: 0;
    font-size: x-small;
    font-family: Arial, Helvetica, sans-serif;
}

/* ------------------------------ BEGIN FORM STYLES ------------------------------------- */
/* Not sure where or when these are used (as far as I know they are not used), but they 
   came with the orginal template, so I've left them alone */
form#two
{
    width: 100%;
    padding: 0;
    margin-top: 5px;
}

form#two fieldset
{
    width: 100%;
    padding: 5px 0 0 0;
    font-family: Arial, sans-serif;
    margin-bottom: 0.5em;
    border: 0;
    font-size: 11px;
}

form#two input
{
    border: 1px solid #ccc;
    padding: 0.5em 0 0 0.5em;
    margin-bottom: 0.6em;
    width: 400px;
    height: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #999999;
}

form#two value
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #999999;
}

form#two textarea
{
    width: 660px;
    height: 15em;
    border: 1px solid #ccc;
    padding: 0.5em;
    overflow: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #999999;
}

form#two #button1
{
    float: left;
    color: #ffffff;
    padding: 0;
    cursor: pointer;
    width: 50px;
    margin: 20px 20px 0 0;
    border: none;
    font-family: Arial, sans-serif;
    font-size: 10px;
    background-color: #F59202;
}

form#two #button1:hover
{
    margin: 20px 20px 0 0;
    color: #000000;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10px;
    border: 1px solid #cccccc;
}

/* ------------------------------ END FORM STYLES ------------------------------------- */

/* Set the background and text used on the buttons throughout the site */
.button
{
    color: #ffffff;
    padding: 0;
    cursor: pointer;
    margin: 20px 20px 0 0;
    border: none;
    font-family: Arial, sans-serif;
    font-size: small;
    background-color: #F59202;
}

/* Set the background and text used on the buttons (when the mose is hovering over them) throughout the site */
.button:hover
{
    margin: 20px 20px 0 0;
    color: #000000;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: small;
    border: 1px solid #cccccc;
}

/* Heading used as a title in a table */
.tableFieldHeading
{
    font-weight: bold;
    line-height: 125%;
    color: #FF6600;
    font-size: small;
}

/* Heading used as a label for a user input field */
.fieldHeading
{
    font-weight: bold;
    font-variant: small-caps;
    font-size: small;
    line-height: 125%;
    text-align: right;
    color: #FF6600;
    padding-right: 10px;
}

/* Same as .fieldHeading, but right aligned */
.fieldHeading_R
{
    font-weight: bold;
    font-variant: small-caps;
    font-size: small;
    line-height: 125%;
    text-align: right;
    float: right;
    color: #FF6600;
    padding-right: 10px;
}

/* Styles for the user inut fields (text boxes, etc) */
.InputField
{
    border: 1px solid #ccc;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    height: 20px;
}

/* Used to put a thin border around selected DIV objects */
div.thinborder
{
    border-width: 1px;
    border-color: #FF6600;
    border-style: solid;
}