/* CSS LAYOUT */
/* CONTROLS POSITION OF DIV BOXES */
body {
	font-family: "lucida grande","trebuchet ms", verdana, sans-serif;
	font-size: 1em;
}

/* THIS SETS THE OVERALL WIDTH OF THE SITE */
.canvas {
    padding: 0px;
    margin: 0px;
    width: 800px;
}

/* CLEARS EVERYTHING SO THE FOOTER/COPYRIGHT SITS AT BOTTOM */
.canvas:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* HEADER */
.header {
    width: 100%;
   /* _height: 175px;*/ /* FUCKING IE7 REQUIRES THIS SHIT */
}

.header .canvas {
    position: relative;
    height: 90px;
    text-align: left;
    margin: 0px;
}

/* ------ THESE ARE THE MENU BUTTONS */
.menubar {
    height: 20px;
    width: 800px;
}

.menubar a:link,
.menubar a:visited,
.menubar a:active {
    position: relative;
    top: 0px;
    display: block;
    float: right;
    text-align: center;
    width: 90px;
    height: 20px;
    font-size: .9em;
    margin-left: 0px;
    margin-right: 0px;
    text-decoration: none;
    clear: left;
}

/* GRAPHICAL MENU */

.graphical_menubar {
    width: 100%;
    height: 60px;
    float: left;
    padding-left: 30px;
}

.graphical_menubar img {
    padding: 0px;
    margin: 0px;
    width: 50px;
    height: 50px;
}

.graphical_menubar a:link,
.graphical_menubar a:visited,
.graphical_menubar a:active {
    display: block;
    float: left;
    padding: 5px;
    margin: 0px;
    width: 50px;
    height: 50px;
    text-decoration: none; /* IE REQUIRES THIS TO PREVENT UNDERLINE IN SPAN*/
    font-weight: bold; /* THIS IS NEEDED TO TRIGGER A CHANGE */
    
}

.graphical_menubar a:hover{
    display: block;
    padding: 5px;
    margin: 0px;
    font-weight: normal; /* THIS IS NEEDED TO TRIGGER A CHANGE */
}

.graphical_menubar a span{
    display: none;
}

.graphical_menubar a:hover span  {
    /*h: expression(onmouseover=new Function("this.style.display='block';"), onmouseout=new Function("this.style.display = 'none';")); */
    display: block;
    position: absolute;
    top: 10px;
    left: 200px;
    width: 400px;
    height: 60px;
    padding: 5px;
    margin: 0px;
    z-index: 100;
    font-family: Verdana, sans-serif;
    font-size: .7em;
    text-align: center;
    line-height: 2em;
}


/* DEFINES THE PRIMARY SECTION SIZE*/
.primary {
	width:760px;
    margin: 0px;
    float: left;
}

/* DEFINES THE PRIMARY CONTAINER*/
/*
.primary .container {
    float: left;
    margin: 3px;
    text-align: left;
    padding-left: 20px;
    padding-right: 0px;
    padding-top: 0em;
    padding-bottom: 1.5em;
}
*/

/* DEFINES THE PRIMARY CONTENT COLORS, FONT SIZES */
.primary {
    font-size : 1em;
    text-indent: 0em;
    line-height: 1.8em;
    float:left;
    text-align: left
    margin: 0px;
    padding-left: 40px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 20px;
    /*vertical-align: top;*/
}

/* HYPERLINK */
.primary a:link,
.primary a:visited,
.primary a:active {
    text-decoration: underline;
    font-weight: normal;
}

/* HYPERLINK MOUSEOVER */
.primary a:hover {
    text-decoration: none;
}

.primary a.button:link,
.primary a.button:visited,
.primary a.button:active {
    /*h: expression(onmouseover=new Function("this.style.backgroundColor='#FFFFFF'; this.style.color='#4466FF';"), onmouseout=new Function("this.style.backgroundColor='transparent'; this.style.color='#88AAFF';"));*/
    float: left;
    /*display: block;*/
    background-color: transparent;
    border: 1px solid #88AAFF;
    font-size: .8em;
    line-height: 1.4em;
    text-decoration: none;
    font-weight: normal;
    color: #88AAFF;
    padding: 0px;
    padding-left: 6px;
    padding-right: 6px;
    margin: 0px;
    margin-right: 5px;
}

.primary a.button:hover{
    background-color: #FFFFFF;
    border: 1px solid #4466FF;
    text-decoration: none;
    font-weight: normal;
    color: #4466FF;
}

.primary sub {
    font-size: 1.3em;
    line-height: 3em;
}

/* ------ HEADLINES */
.primary h1	{
    color: #AAAAAA;
    font-weight: normal;
    font-size: .8em;
}

.primary h1 sub {
    font-size: 1.9em;
    _font-size: 2.5em; /* IE ONLY */
   line-height: 2em;
    color: #888888;
}

/*-------------------------------------------------*/
/* GRIDX4 */
/*-------------------------------------------------*/

.grid {
    width: 340px;
    padding: 0px;
    margin: 0px;
    margin-left: 2em;
    margin-bottom: 20px;
    float: right;
    top: -2px;
}

.grid a:link img,
.grid a:visited img,
.grid a:active img {
    width: 150px;
    height: 150px;
    float: right;
    padding: 0px;
    margin: 0px;
    /*background-color: #EEEEEE;*/
    padding: 7px;
    border: 1px solid #BBBBBB;
}

.grid a:hover img{
	padding: 0px;
    border: 8px solid #000000;
}

/*-------------------------------------------------*/

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

.article {
    color: #666666;
    padding: 0px;
    margin: 0px;
    font-size: .9em;
    border-top: 1px solid #CCCCCC;
}

.article b {
	font-size: 1.1em;
}

.article a {
    text-decoration: none;
    font-weight: normal;
    color: #4466FF;
}

.article a:hover {
    text-decoration: underline;
    font-weight: normal;
    color: #0022CC;
}

.presentation {
    color: #666666;
    padding: 0px;
    margin: 0px;
    font-size: .9em;
    border-top: 1px solid #CCCCCC;
    width: 600px;
}

.presentation div {
	padding-left: 10px;
}

.presentation b {
	font-size: 1.1em;
}

.presentation a {
    text-decoration: none;
    font-weight: normal;
    color: #4466FF;
}

.presetation a:hover {
    text-decoration: underline;
    font-weight: normal;
    color: #0022CC;
}

.variable_width {
    background-color: transparent;
    /*position: relative;*/
    padding: 0px;
    margin: 0px;
    margin-bottom: 20px;
    padding-left: 40px; /* IE FLAW WILL INDENT TEXT IF WE USE MARGIN */
    float: right;
    top: -1px;
}

.screenshotx1 {
    /*float: right;*/ /* STOPPING THIS ALLOWS VARIABLE WIDTH TO SHRINK WRAP */
    width: 520px;
    padding: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0px;
    margin-bottom: 20px;
    font-size: .9em;
    text-align: center;
    border: 1px solid #CCCCCC;
    background-color: #F8F8F8;
}

.screenshotx1 img {
    border: 2px solid #000000;
    padding: 0px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
}

.screenshotx1 img.highlight {
    border: 1px solid #BBBBBB;
    padding: 0px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
}

.screenshotx2 {
    padding: 15px;
    border: 1px solid #CCCCCC;
    background-color: #F8F8F8;
    margin: 0px;
    margin-bottom: 20px;
    margin-right: 0px;
    margin-left: 20px;
    font-size: .9em;
    text-align: center;
}

/*-------------------------------------------------*/

/*-------------------------------------------------*/

.box {
    float: left;
    margin: 0px;
    margin-right: 10px;
    padding: 10px;
    border: 1px solid #CCCCCC;
    /*color: #444444;*/
    background-color: #FFFFFF;
    color: #888888;
    font-weight: normal;
    font-size: .9em;
    line-height: 1.8em;
    width: 215px;
}

.box div {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
/*
.box a {
    text-decoration: none;
    font-weight: normal;
    color: #4466FF;
}

.box a:hover {
    text-decoration: underline;
    font-weight: normal;
    color: #0022CC;
}
*/

.box a {
    width: 100px;
    height: 100px;
    border: 1px #000000 solid;
    padding: 0px;
    margin: 2px;
    /* NOTE: FLOAT IS REQUIRED TO REMOVE PADDING */
    float: left;
}

.box a:hover {
    border: 3px #000000 solid;
    padding: 0px;
    margin: 0px;
     /* NOTE: FLOAT IS REQUIRED TO REMOVE PADDING */
    float: left;
}

.box a.button:link,
.box a.button:visited,
.box a.button:active {
    width: 100px;
    height: 1.5em;
    text-align: center;
    margin-bottom: 4px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    display: block;
    /*
    background-color: #FFFFFF;
    color: #888888;
    border: 1px solid #AAAAAA;
    */
}

.info {
    margin: 0px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #DDDDDD;
    color: #AAAAAA;
    background-color: #FFFFFF;
    font-family:verdana, arial, sans-serif;
    font-weight: normal;
    font-size: .7em;
    width: 150px;
    line-height: 2em;
}

.info b {
    font-weight: normal;
    color: #666666;
}

.info:hover {
    border: 1px solid #AAAAAA;
    background-color: #FFFFEE;
    color: #666666;
}

.info a:link,
.info a:visited,
.info a:active {
    text-decoration: none;
    font-weight: normal;
    color: #AA0000;
    color: #4466FF;
}

.info a:hover {
    text-decoration: underline;
    font-weight: normal;
    color: #880000;
    color: #0022CC;
}

/* COPYRIGHT STUFF */
.copyright {
    /* MARGINS */
    margin: 0em;
    margin-left: auto;
    margin-right: auto;
    
    padding: 0em;
    padding-bottom: 3em;
    /* TEXT */
    text-align: center;
    font-size: .8em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 2em;
}

/* HYPERLINK */
.copyright a:link,
.copyright a:visited {
    text-decoration: underline;
}

/* HYPERLINK MOUSEOVER */
.copyright a:hover {
    text-decoration: underline;
}