/* KERN + LEAD CSS
 * By: Drew Hornbein
 * 8/21/09
 */
 
/* colors
 * #ed2e92 - pink
 */

/* GLOBAL ========== */

* {margin: 0;padding: 0;}

img {border: none;}

a {color:#ed2e92; text-decoration:none;}
a:visited{color:#cf2880;}
a:hover{color:#CCCCCC;}
a:focus{outline:none;}

.clear {clear:both;display:block;width:100%;}
.break {clear:both;}
.alignleft{text-align: left;}
.aligncenter{text-align: center;}
.alignright{text-align: right;}
.alignjustify{text-align:justify;}
.left{float: left;}
.right{float: right;}

.bold {font-weight: bold;}
.doubleSpace {line-height: 2;}

.black {color: #444;}
.pink {color:#ed2e92;}

h1,h2,h3,h4,h5,h6 {}

h1 {color:#888; font-size:1.5em; font-weight:normal;}
h2 {color:#666; font-size:1.1em;}
h3 {}
/* h4 list title */
h4 {font-size: 0.85em; line-height: 1.5; margin-bottom: 0;}
h5 {color:#black; font-size:2.4em; line-height: 1.2em; text-align:left;}
h6 {}

p {font-size:1em; line-height:1.65; margin:0 0 1em; text-align:left;}

ul,ol {font-size:0.85em; line-height:1.65; margin:0 0 1em; list-style-position: inside; text-align:justify;}

p strong {color:#666;}

.altText { font-style:italic;}
.fold {background:white url(i/background_shadow.png) repeat-x scroll 0 10px; clear:both; display:block; height:30px; margin:10px 0; width:100%;}

body {
background: white url(i/background.png) repeat-x scroll 0 top;
color:#AAA;
font-family:"Helvetica Neue", Helvetica, Arial, san-serif;
font-size:100%;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1;
text-align:center;
}


.scrnTitle {
font-family:"Helvetica Neue", Helvetica, Arial, san-serif;
font-size:25px;
color: #666;
font-weight: bold;
line-height:1;
}

/* graphics */

.computer {
background: white url(i/graphic_computer.jpg) no-repeat scroll center center;
position:relative;
width:280px;
height:147px;
}
.computer img {margin:14px 0 0 54px;}

/* WRAPPER ====================== */

.wrapper {
margin:0 auto 10px;
/*overflow:auto;*/
position:relative;
text-align:left;
width:960px;
}

.wrapper .title {
background-color:#CCCCCC;
color:#888888;
left:20px;
padding:5px;
position:absolute;
top:-30px;
z-index:100;
}

/* NAV ======================= */

#nav {height:40px; margin:0 0 0 10px;}

#nav ul {margin:0;}

#nav ul li {
float:left;
list-style:none;
line-height:40px;
}

#nav ul .right {float:right;}

#nav ul li a,#nav ul li a:link,#nav ul li a:visited {
color:#aaa;
display:block;
height:auto;
padding:0 10px;
}

#nav ul li a:hover,#nav ul li #activeNav {background-color:#ccc;color:#fff;}


#subNav {
color:#AAAAAA;
margin:0;
padding:0 20px;
z-index:100;
}

#subNav li {display: inline; list-style: none;}

#subNav a,
#subNav a:link,
#subNav a:visited {
color:inherit;
}

#subNav a:hover,
#subNav li .active {color:#444;}

/* HEADER ===================== */

#header {
margin:0 20px 15px;
}

/* HERO ======================== */

#loader {padding:100px;color:#EEE;}

/*#hero {position:relative;}*/

/*#hero .subNav {
color:#CCC;
left:20px;
padding:5px 0;
position:absolute;
top:-20px;
z-index:100;
}*/


/* slide show */

.slide {clear:both; }
.slide ul {height:450px;margin:0;}
.slide ul li {list-style:none;width:960px;}

.slide .pager {height:10px;margin:0 20px;}
.slide .pager a {
background:#CCCCCC url(i/white_pixel.png) repeat-y scroll right 0;
cursor:pointer;
display:block;
float:left;
height:15px;
margin:0;
width:148px;
text-indent:-30000px;
}
.slide .pager a.activeSlide {background-color:#999;}


/*#pager .pager {
background-color:#CCCCCC;
cursor:pointer;
display:block;
float:left;
height:10px;
margin:0 1px;
width:148px;
}

#hero #pager .active {background-color:#999;}

#hero #pager .pager:hover {background-color:#999;}*/

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

.picture {background-color: #E6E6E6; width:100%; height: 280px; overflow: hidden; text-align: center;}

/* FOOTER ====================== */

.footer {
margin:0 auto;
overflow:auto;
text-align:center;
width:960px;
}

.footer p {font-size:0.85em;text-align:center;}

/* GRID ======================= */

.colFull {float:left;margin:20px;width:920px;}

/* four column layout
 * columns are 240px (960px/4) width with 20px margin
 * slots refer to starting position of column, automatically start in slot1
 * width is 2 = 50%, 3 = 75%, 4 = 100%
 */
.fourCol {float:left;margin:20px; display:inline;/*ie bug fix*/}

.fourColalt {float:left; margin:0px; display: inline;}

.fourCol_width1 {width:200px;}

.fourCol_width2 {width:440px;}

.fourCol_width3 {width:680px;}

.fourCol_slot2 {}

.fourCol_slot3 {}

.fourCol_slot4 {}

/* three column layout
 * columns are 320px (960px/3) width with 20px margin
 * slots refer to starting position of column, automatically start in slot1
 */
.threeCol {float:left;margin:20px; display:inline;/*ie bug fix*/}

.threeCol_width1 {width:280px;}

.threeCol_width2 {width:600px;}

.threeCol_slot2 {}

.threeCol_slot3 {}

/* two column layout
 * columns are 480px (960px/2) width with 20px margin
 * slots refer to starting position of column, automatically start in slot1
 */
.twoCol {float:left;margin:20px; display:inline;/*ie bug fix*/}

.twoCol_width1 {width:280px;}

.twoCol_width2 {width:400px;}

.twoCol_slot2 {}

.twoCol_slot3 {}