@font-face {
    font-family: 'AllerRegular';
    src: url('http://boardhost.com/css/font-face/aller_rg-webfont.eot');
    src: url('http://boardhost.com/css/font-face/aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://boardhost.com/css/font-face/aller_rg-webfont.woff') format('woff'),
         url('http://boardhost.com/css/font-face/aller_rg-webfont.svg#AllerRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AllerBold';
    src: url('http://boardhost.com/css/font-face/aller_bd-webfont.eot');
    src: url('http://boardhost.com/css/font-face/aller_bd-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://boardhost.com/css/font-face/aller_bd-webfont.woff') format('woff'),
         url('http://boardhost.com/css/font-face/aller_bd-webfont.svg#AllerBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

* { margin: 0; padding: 0; outline:0; }

body {
    font-size: 12px;
    line-height: 18px;
    font-family: Arial, Helvetica, Sans-Serif;
    color: #454545;
    background: #fff url(images/body.jpg) repeat-x top ;
}


a { color: #3F5374; text-decoration: underline; cursor:pointer; }
a:hover { color: #516C95; }
a img { border: 0; }

input, textarea, select { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
textarea { overflow: auto; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }

.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

.shell { width: 968px; margin: 0 auto; }

#header { width: 100%; position: relative ; }

h1#logo { width: 274px; height: 48px; padding: 50px 0 0 8px; float: left; display: inline; }
h1#logo a { display: block; width: 274px; height: 48px; background: url(images/logo2.png) no-repeat 0 0 ; font-size: 0; line-height: 0; text-indent: -4000px; }

#navigation  { float: right; display: inline; padding: 66px 22px 0 0 ; position: relative ; z-index: 10; }
#navigation ul { list-style-type: none;  float: right; display: inline; }
#navigation ul li { float: left; display: inline; font-size: 16px; line-height: 45px; text-shadow: 1px 1px 2px #000000; padding: 0 1px; }
#navigation ul li a { display: block; width: 139px; height: 45px; background: url(images/nav-a.png) no-repeat 0 0 ; color: #fff; text-align: center; text-decoration: none; }
#navigation ul li a.active,
#navigation ul li a:hover { background: url(images/nav-a-hover.png) no-repeat 0 0 ;  }
.shadow { height: 5px; width: 100%; background: url(images/shadow.png) no-repeat center ; position: absolute ; left: 0; bottom: 0; font-size: 0; line-height: 0; text-indent: -4000px; z-index: 20; }

.main-top { background: url(images/main-top.png) no-repeat top center ; width: 100%; height: 10px; font-size: 0; line-height: 0; text-indent: -4000px; }
.main { background: url(images/main.png) repeat-y center ; }
.main-bottom { background: url(images/main-bottom.png) no-repeat top center ; width: 100%; height: 42px; font-size: 0; line-height: 0; text-indent: -4000px; }

h6 { color: #33455a; font-size: 12px; font-weight: bold;  }

#content { width: 600px; float: left; display: inline; padding-left: 28px; }
#sidebar { width: 279px; float: right; display: inline; padding-right: 5px; }

.main-holder { width: 100%; }
.main .top { background: url(images/main-t.jpg) no-repeat top center ; padding-top: 26px; }
.main .bottom { background: url(images/main-b.jpg) no-repeat bottom center ; width: 100%; }

.main-home .main { background: url(images/main-home.png) ; width: 100%; }

.main-home .main-top { background: url(images/main-home-top.png) no-repeat bottom center ; }
.main-home .main-bottom { background: url(images/main-home-bottom.png) no-repeat top center ; height: 25px; }

.main-home .top { background: url(images/main-home-t.jpg) no-repeat top center ; }
.main-home .bottom { background: url(images/main-home-b.jpg) no-repeat bottom center ; }
.main-home #sidebar { width: 305px; }

.article h3 { font-size: 24px; color: #33455a; line-height: 30px; font-family: 'AllerRegular', sans-serif; padding-bottom: 33px; font-weight: normal; }
.article h6 { padding-left: 2px; }
.article p { padding: 0 0 20px 2px; }

.box h4 { font-size: 16px; line-height: 18px; font-family: 'AllerRegular', sans-serif; color: #33455a; padding: 0 16px 27px 16px; }
.box ul { list-style-type: none; border-top: 1px solid #e0e0e0; padding-bottom: 22px; }
.box ul li { border-bottom: 1px solid #e0e0e0; font-size: 12px; }
.box ul li a { display: block; background: #f3f3f3; color: #3e5475; text-decoration: none; border-top: 1px solid #fff; border-left: 1px solid #fff; padding: 11px 20px 12px 29px; }
.box ul li a:hover { background: #e5e9ed; }
.box p { padding: 0 10px; }

#footer { background: url(images/footer.png) repeat-x top ; padding: 35px 0 38px 0; min-width: 968px; margin-top: 30px; }
#footer h6 { float: left; display: inline; width: 74px; padding-bottom: 11px; }
#footer ul { list-style-type: none; float: left; display: inline; padding-top: 3px; }
#footer ul li { float: left; display: inline; padding: 0 7; line-height: 12px; border-left: 1px solid #858585; padding: 0 7px; }
#footer ul li.first { padding-left: 0; border: 0; }
#footer ul li a { color: #858585; text-decoration: none; }
#footer ul li a:hover { text-decoration: underline; }

.content-form h2 { color: #454545; font-size: 28px; line-height: 35px; font-weight: normal; font-family: 'AllerRegular', sans-serif; padding-bottom: 20px; }
.content-form h2 span { color: #f88300; font-family: 'AllerBold', sans-serif; }
.content-form p { padding-top: 10px; }
.content-form p.address { font-size: 24px; color: #000; float: left; display: inline; font-family: 'AllerBold', sans-serif; line-height: 51px; padding: 0; }
.content-form .field { float: left; display: inline; width: 190px; height: 51px; background: url(images/field.png) no-repeat 0 0 ; }
.content-form .field input { border: 0; background: transparent; width: 170px; font-size: 24px; font-weight: bold; padding: 10px; }
.content-form .button { border: 0; background: url(images/button.png) no-repeat ; font-size: 22px; color: #fff; font-family: 'AllerBold', sans-serif; width: 151px; height: 44px; cursor: pointer;  text-align: left; padding-left: 13px; text-shadow: 0px 1px 2px #000000; margin-top: 3px; margin-left: 10px; }

.box-form { color: #454545; padding: 0 26px 0 17px; }
.box-form a { color: #454545; }
.box-form .title { font-weight: bold; padding-bottom: 10px; }
.box-form .left ,
.box-form .right { width: 125px; }
.box-form label { padding-left: 9px; }
.box-form .field { display: block; width: 126px; height: 41px; background: url(images/box-field.png) no-repeat 0 0 ; margin: 2px 0 20px 0; }
.box-form .field input { padding: 12px 10px; width: 106px; border: 0; background: transparent; }
.box-form .button { float: right; display: inline; width: 88px; height: 36px; background: url(images/box-button.png) no-repeat 0 0 ; border: 0; cursor: pointer; font-size: 11px; font-weight: bold; padding-bottom: 5px; text-shadow: 1px 1px 1px #ffffff; }

.col1 { width: 410px; float: left; display: inline; padding-right: 15px; padding-left:10px;}
.col3 { width: 527px; float: left; display: inline; }
.cols { padding-top: 25px; }
.cols h4 { font-size: 20px; line-height: 25px; font-family: 'AllerBold', sans-serif; font-weight: normal; color: #454545; padding-bottom: 19px;  }
.cols h4 span { color: #f88300; }
.cols ul { list-style-type: none; margin-left: 3px; }
.cols ul li { padding: 0 0 5px 19px; background: url(images/col-li.png) no-repeat 0 5px ; }

/*
root element for the scrollable.  when scrolling occurs this
element stays still.
*/
.scrollable {
  /* required settings */
  position:relative;
  overflow:hidden;
  width: 400px;
  height:500px;
}
 
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accommodate scrollable
items.  it's enough that you set width and height for the root element
and not for this element.
*/
.scrollable .items {
  /* this cannot be too large */
  width:20000em;
  position:absolute;
}
 
/*
a single item. must be floated in horizontal scrolling.  typically,
this element is the one that *you* will style the most.
*/
.items div {
  float:left;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(hori_large.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:180px 10px;
    cursor:pointer;
    font-size:1px;
}

/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }


/* left */
a.left { margin-left: 0px; }
a.left:hover  { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }

/* up and down */
a.up, a.down  {
    background:url(vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}

/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }

/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }


/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}

/* simple css-based tooltip */
.tooltip {
    background-color:#FBFBFB;
    border:2px solid #E5E5E5;
    padding:10px 15px;
    width:225px;
    display:none;
    color:#454545;
    text-align:left;
    font-size:12px;
 
    /* outline radius for mozilla/firefox only */
    -moz-box-shadow:0 0 10px #000;
    -webkit-box-shadow:0 0 10px #000;
}