html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{ margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
} body { line-height: 1; background-color: #7f848a; font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #494f57; }
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/**** Generic Styles ****/
.float_left { float: left; }
.float_right { float: right; }
.error01 { font-size: 9px; color: #CC0000; }
a { color: #1b96c1; outline: none; cursor: pointer; text-decoration: none; }
a:hover, a:focus, a:active { color: #1b96c1; text-decoration: none; }
a span { color: #1b96c1; text-decoration: underline; }
/**** header ****/
.hdr_wrap { width: 100%; height: 102px; background-color: #FFFFFF; background-image: url(../images/Top_Header_Pattern_Bg.png); background-repeat: repeat-x; }
.hdr_content { position: relative; margin: 0px 20px 0px 20px; padding: 0px 0px 0px 0px; width: 960px; margin-left: auto; margin-right: auto; height: auto; text-align: left; }
.logo { left: 2px; top: 11px; position: absolute; z-index: 100; }
h1.tagline { left: 650px; top: 44px; width: 330px; position: absolute; font-size: 18px; color: #c3c3c3; text-align: right; }
.nav_wrap { width: 100%; height: 50px; background-image: url(../images/nav_bar_bg.gif); background-repeat: repeat-x; }
.nav { position: relative; margin: 0px 20px 0px 20px; width: 960px; margin-left: auto; margin-right: auto; height: auto; text-align: left; }
#c-div ul { float:left; padding: 10px 30px 0px 0px; }
#c-div ul li { float: left; padding: 0px 44px 0px 0px; }
#c-div ul li a:link, #c-div ul li a:visited { color: #f7f6f4; text-shadow: 1px 1px 1px #09475f; font-size: 16px; font-weight: normal; display: block; padding: 5px 10px 5px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid transparent; }
#c-div ul li a:hover, #c-div ul li a:active { color: #f7f6f4; text-shadow: 1px 1px 1px #09475f; font-size: 16px; font-weight: normal; background: #0c5772; border: 1px solid #0b4f68; }
#c-div ul li.active a { color: #f7f6f4; text-shadow: 1px 1px 1px #09475f; font-size: 16px; font-weight: normal; background: #0c5772; border: 1px solid #0b4f68; }
.subnav_wrap { width: 100%; height: 44px; background-color: #1b96c1; }
.subnav { position: relative; margin: 0px 20px 0px 20px; width: 960px; margin-left: auto; margin-right: auto; height: auto; text-align: left; }
#s-div ul { float: left; top: -2px; left: 0px; position: absolute; }
#s-div ul li { float: left; padding: 0px 22px 0px 17px; }
#s-div ul li a:link, #s-div ul li a:visited { color: #0c5772; text-shadow: 1px 1px 1px #44a9cc; font-size: 14px; font-weight: normal; display: block; padding: 16px 10px 5px 10px; }
#s-div ul li a:hover, #s-div ul li a:active { color: #0c5772; text-shadow: 1px 1px 1px #44a9cc; font-size: 14px; font-weight: normal; }
#s-div ul li.active a { padding-top: 16px; color: #f7f6f4; text-shadow: 1px 1px 1px #09475f; font-size: 14px; font-weight: normal; background-image: url(../images/subnav_arrow.gif); background-repeat: no-repeat; background-position: center top; }
.main_wrap { width: 100%; height: auto; background-color: #FFFFFF; position: top, left; display: table; background-image: url(../images/bckgnrd-prod.gif); background-repeat: repeat-x; }
.main { position: relative; margin: 0px 20px 0px 20px; width: 960px; height: auto; margin-left: auto; margin-right: auto; text-align: left; display: table; }
.featured_wrap { width: 100%; height: 460px; background-color: #1580a6; /* background-image: url(../images/featured_bg.gif); background-repeat: repeat-x;*/ }
.featured { position: relative; margin: 0px 20px 0px 20px; width: 960px; margin-left: auto; margin-right: auto; height: 460px; text-align: left; overflow: hidden;}
.featured h1 { top: 43px; left: 1px; position: absolute; font-size: 30px; font-weight: normal; color: #09607d; text-shadow: 1px 1px 1px #4dadcf; }
.featured h2 { top: 112px; left: 1px; position: absolute; font-size: 46px; font-weight: bold; color: #FFFFFF; text-shadow: 1px 1px 1px #000000; }
/**** home ****/
.clients_wrap { width: 100%; height: auto; background-color: #FFFFFF; }
/* clients
.clients { position: relative; margin: 0px 20px 0px 20px; padding: 0px 0px 0px 0px; width: 960px; margin-left: auto; margin-right: auto; height: auto; text-align: left; }
*/
#clients { position: relative; margin: 0px 20px 0px 20px; padding: 0px 0px 0px 0px; width: 960px; height: 110px; margin-left: auto; margin-right: auto; text-align: left; }
.featured_img { margin-left: 0px; width: 960px; height: 578px; }
.callout-icons { padding-left: 53px; width: 907px; }
.callouts { width: 960px; height: 200px; }
.callouts h1 { font-size: 18px; color: #242424; font-weight: bold; margin-bottom: 13px; }
.callouts p { width: 210px; line-height: 20px; }
.callouts ul li { float: left; padding-right: 26px; width: 220px; height: auto; }
.callouts ul li.last { padding-right: 0px; }
/**** overview page ****/
.btn-viewReels { float: left; margin: 30px 18px 46px 4px; }
.btn-viewPrj { float: left; margin: 30px 0px 46px 0px; }
.benefits-container { float: left; padding-bottom: 40px; width: 960px; height: auto; display: table; }
.benefits-left { float: left; width: 491px; height: auto; display: table; }
.benefit-l { width: 491px; height: 132px; }
.benefit-copy-l {float: left; width: 421px; height: 132px; }
.benefit-copy-l h3 { margin: 0px 0px 12px 0px; font-size: 24px; font-weight: normal; color: #1b96c1; }
.benefit-copy-l p { width: 390px; line-height: 20px; font-size: 14px; color: #494f57; }
.icon { float: left; width: 70px; height: 132px; }
.benefits-right { float: left; width: 469px; height: auto; display: table; }
.benefit-r { width: 469px; height: 132px; }
.benefit-copy-r {float: left; width: 399px; height: 132px; }
.benefit-copy-r h3 { margin: 0px 0px 12px 0px; font-size: 24px; font-weight: normal; color: #1b96c1; }
.benefit-copy-r p { width: 378px; line-height: 20px; font-size: 14px; color: #494f57; }
/***** Reels *****/
.reel-box01 { margin: 0px 0px 48px 0px; width: 960px; height: 457px; background-image: url(../images/reels-bckgrnd-reel-creator.jpg); background-repeat: no-repeat; font-size: 14px; line-height: 20px; }
.reel-callout01 { position: relative; left: 560px; top: 0px; width: 375px; }
.reel-callout02 { position: relative; left: 712px; top: 40px; width: 247px; }
.reel-box02 { margin: 0px 0px 20px 0px; width: 960px; height: 556px; background-image: url(../images/reels-bckgrnd-analytics.jpg); background-repeat: no-repeat; font-size: 14px; line-height: 20px; }
.reel-callout03 { position: relative; left: 10px; top: 0px; width: 460px; }
.reel-box03 { margin: 0px 0px 24px 0px; width: 960px; height: 438px; background-image: url(../images/reels-bckgrnd-media-pckg.jpg); background-repeat: no-repeat; font-size: 14px; line-height: 20px; }
.reel-callout04 { position: relative; left: 0px; top: 0px; width: 430px; }
.reel-callout05 { position: relative; left: 498px; top: -92px; width: 460px; }
.reel-box04 { margin: 0px 0px 24px 0px; width: 960px; height: 455px; background-image: url(../images/reels-bckgrnd-reports.jpg); background-repeat: no-repeat; font-size: 14px; line-height: 20px; }
.reel-callout06 { position: relative; left: 580px; top: 83px; width: 366px; }
.reel_list { margin: 12px 0px 0px 12px; font-size: 14px; color: #1b96c1; }
.reel_list ul { width: 212px; color: #1b96c1; padding: 10px 0px 0px 0px; }
.reel_list ul li { display: block; padding: 0px 0px 0px 20px; color: #1b96c1; line-height: 24px; background-image: url(../images/icon-check.gif); background-repeat: no-repeat; background-position: center left; }
/**** Projects ****/
.prj-box01 { margin: 0px 0px 0px 0px; width: 960px; height: 324px; background-image: url(../images/prj-bckgrnd-file-mgmt.jpg); background-repeat: no-repeat; font-size: 14px; line-height: 20px; }
.prj-callout01 { position: relative; left: 650px; top: 0px; width: 305px; }
.prj-box02 { margin: 0px 0px 55px 0px; width: 960px; height: 365px; background-image: url(../images/prj-bckgrnd-share.jpg); background-repeat: no-repeat; font-size: 14px; line-height: 20px; }
.prj-callout02 { position: relative; left: 0px; top: 0px; width: 308px; }
.prj-box03 { margin: 0px 0px 0px 0px; width: 960px; height: 381px; background-image: url(../images/prj-bckgrnd-permissions.jpg); background-repeat: no-repeat; font-size: 14px; line-height: 20px; }
.prj-callout03 { position: relative; left: 662px; top: 0px; width: 290px; }
.prj-box04 { margin: 0px 0px 10px 0px; width: 960px; height: 420px; background-image: url(../images/prj-bckgrnd-review.jpg); background-repeat: no-repeat; background-position: right top; font-size: 14px; line-height: 20px; }
.prj-callout04 { position: relative; left: 0px; top: 86px; width: 290px; }
.prj-box05 { margin: 0px 0px 0px 0px; width: 960px; height: 517px; background-image: url(../images/prj-bckgrnd-microsite.jpg); background-repeat: no-repeat; font-size: 14px; line-height: 20px; }
.prj-callout05 { position: relative; left: 630px; top: 87px; width: 314px; }
.prj-box06 { margin: 0px 0px 0px 0px; width: 960px; height: 420px; background-image: url(../images/prj-bckgrnd-analytics.jpg); background-repeat: no-repeat; background-position: top right; font-size: 14px; line-height: 20px; }
.prj-callout06 { position: relative; left: 0px; top: 68px; width: 374px; }
.prj_list { margin: 12px 0px 0px 12px; font-size: 14px; color: #1b96c1; }
.prj_list ul { color: #1b96c1; padding: 10px 0px 0px 0px; }
.prj_list ul li { display: block; padding: 0px 0px 0px 20px; color: #1b96c1; line-height: 24px; background-image: url(../images/icon-check.gif); background-repeat: no-repeat; background-position: center left; }
.schedule-demo { padding: 32px 0px 48px 0px; width: 960px; height: 46px; }
.schedule-demo p { float: left; padding: 11px 0px 0px 0px; font-size: 24px; color: #494f57; }
/**** Why Choose Simian ****/
.box-l { margin: 5px 0px 46px 0px; width: 960px; height: auto; display: table; font-size: 14px; line-height: 20px; }
.img-l { float: left; width: 410px; height: 272px; }
.box-cont-l { float: left; width: 550px; height: auto; display: table; }
.box-cont-l p { padding: 0px 0px 28px 0px; width: 540px; }
.box-r { margin: 5px 0px 46px 0px; width: 960px; height: auto; display: table; font-size: 14px; line-height: 20px; }
.img-r { float: right; width: 410px; height: 272px; text-align: right; }
.box-cont-r { float: right; width: 550px; height: auto; display: table; }
.box-cont-r p { float: left; padding: 0px 0px 28px 0px; width: 540px; }
/***** knowledge base & blog ********/
.main_content { float: left; margin-top: 31px; width: 630px; height: auto; }
.main_content h1 { margin: 0px 0px 12px 0px; font-size: 36px; font-weight: normal; color: #1e1e1e; }
.main_content h1 a { margin: 0px 0px 12px 0px; font-size: 36px; font-weight: normal; color: #1e1e1e; text-decoration: none; }
.main_content h2 { margin: 0px 0px 20px 0px; font-size: 18px; font-weight: normal; color: #494f57; }
.main_content h2 span { color: #1b96c1; }
.main_content h3 { margin: 0px 0px 16px 0px; font-size: 14px; font-weight: bold; color: #494f57; }
.main_content h3 span { font-weight: normal; }
.main_content h4 { margin: 0px 0px 6px 0px; font-size: 14px; font-weight: bold; color: #494f57; }
.main_content p { margin: 0px 0px 32px 0px; font-size: 14px; width: 630px; line-height: 20px; }
.kb_search { float: left; margin: 31px 0px 20px 100px; width: 228px; background-color: #f6f6f6; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #ebebeb; }
.kb_menu { margin: 7px 0px 0px 12px; font-size: 13px; }
.kb_menu ul { width: 212px; color: #a4a4a4; padding: 0px 0px 17px 0px; }
.kb_menu ul li { display: block; padding-top: 7px; }
.kb_menu ul li a { margin: 7px 0px 0px 0px; padding: 0px 0px 0px 18px; width: 198px; height: auto; font-weight: normal; color: #a4a4a4; background-image: url(../images/bg_bullet.gif); background-repeat: no-repeat; background-position: center left; }
.kb_menu ul li a:hover { color: #414141; }
.kb_menu ul li.active a { color: #414141; }
.kb_sub { margin: 0px 0px 0px 18px; height: auto; font-size: 13px; }
.kb_sub ul { width: 190px; color: #a4a4a4; padding: 0px 0px 0px 0px; }
.kb_sub ul li { display: block; padding-top: 7px; }
.kb_sub ul li a { margin: 7px 0px 0px 0px; padding: 0px 0px 0px 0px; background-image: none; height: auto; font-weight: normal; color: #a4a4a4; }
.kb_sub ul li a:hover { color: #414141; }
.kb_sub ul li.active a { color: #414141; }
.kb_share { clear: both; margin: 0px 0px 0px 0px; font-size: 16px; height: 36px;}
.kb_share ul { width: 630px; }
.kb_share ul li { display: inline; }
.kb_share ul li a { font-weight: 100; color: #a4a4a4; }
.kb_share ul li a:hover { color: #414141; }
#kb_bookmark { padding: 7px 28px 30px 45px; background-image: url(../images/icon_bookmark.gif); background-repeat: no-repeat; background-position: top left; }
#kb_voteup { padding: 7px 28px 30px 45px; background-image: url(../images/icon_voteup.gif); background-repeat: no-repeat; background-position: top left; }
#kb_twitter{ padding: 7px 28px 30px 45px; background-image: url(../images/icon_kbTwitter.gif); background-repeat: no-repeat; background-position: top left; }
#kb_facebook { padding: 7px 28px 30px 45px; background-image: url(../images/icon_kbFacebook.gif); background-repeat: no-repeat; background-position: top left; }
h1.kb_comment { margin: 36px 0px 6px 0px; font-size: 14px; font-weight: bold; color: #1b96c1; }
h1.kb_comment span { font-size: 12px; font-weight: normal; color: #494f57; }
p.kb_comment { margin: 0px 0px 15px 0px; width: 548px; line-height: 20px; }
.kb_form { margin-top: 30px; width: 630px; height: auto; }
.kb_form span { color: #1b96c1; }
.kb_div { width: 630px; height: 1px; margin: 28px 0px 42px 0px; background-color: #bababa; }
.pagination { margin: 60px 0px 60px 0px; width: 630px; height: 28px; }
.pagination ul li { float: left; padding: 0px 6px 0px 0px; }
.pagination ul li a:link, .pagination ul li a:visited { padding: 4px 8px 4px 8px; color: #a4a4a4; font-size: 12px; font-weight: normal; display: inline; background-color: #f1f1f1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #e3e3e3; }
.pagination ul li a:hover, .pagination ul li a:active { color: #a4a4a4; font-size: 12px; font-weight: normal; }
.pagination ul li.active a { color: #ffffff; font-size: 12px; font-weight: normal; background-color: #2599c3; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #4e8ea5; }
/**** Standard Page ****/
.std_page { padding-top: 31px; width: 960px; height: auto; }
.std_page h1 { margin: 0px 0px 10px 0px; font-size: 36px; font-weight: normal; color: #1e1e1e; }
.std_page h2 { margin: 0px 0px 22px 0px; width: 720px; font-size: 24px; font-weight: normal; color: #494f57; }
.std_page h3 { margin: 0px 0px 12px 0px; font-size: 24px; font-weight: normal; color: #1b96c1; }
.std_page h4 { margin: 0px 0px 28px 0px; font-size: 36px; font-weight: normal; color: #1e1e1e; }
/**** Platform ****/
.platform { padding-top: 31px; width: 960px; height: auto; }
.platform h1 { margin: 0px 0px 10px 0px; font-size: 36px; font-weight: normal; color: #1e1e1e; }
.platform h2 { margin: 0px 0px 22px 0px; width: 720px; font-size: 24px; font-weight: normal; color: #494f57; }
.platform h3 { margin: 0px 0px 16px 0px; font-size: 24px; font-weight: 100; color: #1b96c1; }
.platform h4 { margin: 0px 0px 12px 0px; font-size: 18px; font-weight: normal; color: #494f57; }
.platform p { margin: 0px 0px 24px 0px; font-size: 14px; font-weight: normal; line-height: 18px; }
.platRow01 { clear: both; width: 960px; height: auto; margin-bottom: 42px; display: table; }
.platText01 { float: left; width: 620px; height: auto; }
.platText02 { float: left; margin-left: 14px; width: 430px; height: auto; }
/**** In Focus ****/
.if_gallery { width: 960px; height: 340px; }
.if_gallery h1 { margin: 18px 0px 12px 0px; font-size: 24px; color: #1e1e1e; font-weight: normal; }
.if_gallery h1 a { color: #1e1e1e; }
.if_gallery h2 { width: 86px; margin: 18px 0px 0px 0px; font-size: 14px; color: #1b96c1; font-weight: bold; background-image: url(../images/icon_arrow.png); background-repeat: no-repeat; background-position: right center; }
.if_gallery h2 a { color: #1b96c1; }
.if_gallery p { margin: 0px 0px 0px 0px; width: 302px; height: 60px; line-height: 20px; }
.if_gallery ul li { display: inline; float: left; margin: 0px 27px 0px 0px; width: 302px; height: auto; }
.if_gallery ul li.last { margin: 0px 0px 0px 0px; width: 302px; }
.if_back { top: -20px; left: 906px; position: relative; width: 54px; margin: 18px 0px 0px 0px; font-size: 14px; color: #1b96c1; font-weight: bold; background-image: url(../images/icon_arrow.png); background-repeat: no-repeat; background-position: right center; }
.if_back h2 a { color: #1b96c1; }
.if_img { margin-left: -13px; }
.if_quote { clear: both; margin-bottom: 40px; width: 960px; line-height: 20px; display: table; }
.if_quote h1 { margin-bottom: 12px; font-size: 24px; color: #1e1e1e; font-weight: 100; }
.if_quote p { margin-bottom: 22px; line-height: 20px; }
.if_quote p span { margin-bottom: 22px; line-height: 20px; color: #999999; }
.if_quote ul li { display: inline; float: left; margin: 0px 45px 0px 0px; width: 290px; height: auto; }
.if_quote ul li.last { margin: 0px 0px 0px 0px; width: 290px; }
/**** About *****/
p.stdPage02 { width: 630px; font-size: 14px; line-height: 20px; margin: 0px 0px 28px 0px; }
/**** pricing *****/
.plans { width: 960px; height: 318px; }
.plans h1 { margin: 14px 0px 12px 17px; font-size: 30px; color: #ffffff; font-weight: normal; }
.plans ul li { display: inline; float: left; margin: 0px 27px 0px 0px; width: 302px; height: 294px; background-image: url(../images/bcgrnd_pricing.gif); background-repeat: no-repeat; }
.plans ul li.last { margin: 0px 0px 0px 0px; width: 302px; }
.price { float: left; margin: 20px 0px 0px 16px; width: 108px; height: 144px; font-size: 48px; font-weight: bold; color: #1b96c1; }
.price sup { vertical-align: top; font-size: 24px; font-weight: normal; color: #1b96c1; }
.price span { padding-left: 14px; font-size: 12px; font-weight: normal; color: #1b96c1; }
.info { float: left; margin-top: 23px; width: 159px; }
.info ul li { display: block; margin: 0px 0px 14px 0px; padding: 0px 0px 0px 17px; width: 159px; height: auto; font-weight: normal; color: #494f57; background-image: url(../images/bullet_pricing.gif); background-repeat: no-repeat; background-position: center left; }
.custom_plan { margin-bottom: 28px; width: 960px; height: 56px; text-align: center; background-color: #f6f6f6; color: #494f57; font-size: 14px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #c5c5c5; }
.custom_plan h1 { margin: 6px 0px 2px 0px; font-size: 24px; color: #1b96c1; font-weight: normal; }
.details { width: 960px; height: 260px; line-height: 20px; }
.details h1 { margin: 0px 0px 18px 0px; font-size: 24px; color: #1b96c1; font-weight: normal; }
.details ul li { display: inline; float: left; margin: 0px 27px 0px 0px; width: 302px; height: 184px; }
.details ul li.last { margin: 0px 0px 0px 0px; width: 302px; }
/**** Contact *****/
.contact_form { float: left; width: 410px; height: auto; }
.contact_main { float: left; width: 440px; height: auto; }
.contact_main h1 { margin: 0px 0px 12px 0px; font-size: 20px; font-weight: normal; color: #1e1e1e; }
.contact_main p { margin: 0px 0px 18px 0px; font-size: 14px; font-weight: normal; color: #494f57; line-height: 16px; }
.contact_sales { float: left; width: 240px; height: auto; }
.contact_support { float: left; width: 200px; height: auto; }
/***** FOOTER *******/
.ftr_wrap { clear: both; width: 100%; height: auto; background-color: #7f848a; border-top: solid 7px #bababa; }
.ftr { position: relative; margin: 0px 20px 0px 20px; width: 960px; height: 260px; margin-left: auto; margin-right: auto; text-align: left; }
.ftr_links { width: 960px; height: 100px; margin-top: 46px; }
.ftr_links h1 { font-size: 12px; color: #ffffff; font-weight: normal; margin-bottom: 16px; }
.ftr_links ul li { float: left; width: 160px; height: auto; color: #232323; font-size: 11px; line-height: 18px; }
.ftr_links ul li a { color: #232323; font-size: 11px; }
.ftr_links ul li a:hover { color: #FFFFFF; }
.ftr_links ul li.first { width: 150px; }
.ftr_links ul li.last { width: 329px; }
.newsletter { clear: both; margin: 60px 0px 22px 0px; width: 960px; height: 47px; background-image: url(../images/newsletter_bg.gif); background-repeat: no-repeat; }
/****** buttons *******/
.watch_video { top: 266px; left: 2px; position: absolute; z-index: 1000; }
.ftr_icon { margin-right: 20px; }
.subscribe { float: right; margin: 11px 13px 0px 0px; }
.kb_submit { margin: 26px 0px 40px 0px; }
.buy { float: left; margin: 20px 0px 0px 17px; }
.request_demo { float: left; margin: 10px 0px 0px 82px; }
.btn_contact { margin-top: 20px; }
/****** PLatform Scroller *******/
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 396px;
height: 374px;
}
.scrollable h1 { margin: 41px 0px 0px 0px; font-size: 14px; color: #1e1e1e; font-weight: 100; }
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it's enough that you set the width and height for the root element and
not for this element.
*/
.scrollable .items {
/* this cannot be too large */
width: 3000em;
position: absolute;
clear: both;
}
.items div {
float:left;
width: 680px;
height: 374px;
}
/* single scrollable item */
.scrollable img {
float:left;
width: 396px;
height: 304px;
}
/* position and dimensions of the navigator */
.navi {
top: -60px;
left: 0px;
position: relative;
z-index: 10000;
width: 200px;
height: 20px;
}
/* items inside navigator */
.navi a {
width: 18px;
height: 18px;
float:left;
margin-right: 7px;
background:url(../images/navigator.png) 0 0 no-repeat;
display:block;
font-size:1px;
}
/* mouseover state */
.navi a:hover {
background-position: 0 -18px;
}
/* active state (current page state) */
.navi a.active {
background-position:0 -36px;
}
/***** INPUT FIELDS ******/
.input_newsletter { float: right; margin: 11px 6px 0px 0px; padding: 0px 0px 0px 14px; width: 239px; height: 25px; font-size: 11px; color: #62666a; border: none; background-color: transparent; background-image: url(../images/newsletter.png); background-repeat: no-repeat; }
.input_knowledgebase { margin: 11px 0px 10px 8px; padding: 0px 0px 0px 10px; width: 202px; height: 24px; font-size: 11px; color: #a6a6a6; border: none; background-color: transparent; background-image: url(../images/knowdedge_base.png); background-repeat: no-repeat; }
label.kb { float: left; padding-bottom: 7px; width: 300px; font-size: 14px; }
.input01_kb { float: left; margin: 0px 0px 15px 0px; padding: 0px 0px 0px 4px; width: 294px; height: 23px; border: solid 1px #bababa; }
.textarea_kb { margin: 0px 0px 0px 0px; padding: 4px 0px 0px 4px; width: 614px; height: 136px; border: solid 1px #bababa; }
label.contact { width: 302px; color: #5b5b5f; font-size: 14px; }
.input01 { clear: both; margin: 7px 0px 18px 0px; padding: 0px 0px 0px 4px; width: 294px; height: 25px; border: solid 1px #a0a0a0; }
.input01_error { clear: both; margin: 7px 0px 18px 0px; padding: 0px 0px 0px 4px; width: 294px; height: 25px; border: solid 1px #CC0000; }
.login01 { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size: 11px; width: 198px; height: 17px; }
.searchBox01 { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: solid 1px #CCCCCC; width: 158px; height: 17px; color: #707070; }
.select01 { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size: 11px; color: #707070; }
.textarea02 { margin: 6px 0px 6px 0px; padding: 0px 0px 0px 0px; font-size: 11px; color: #707070; width: 245px; }