/* oooooooooooooooooooooooooooooooooooooooooooooooo */ /* Author -> www.mezmamedia.com -> Richie Grainger /* Date -> 23 April 2010 /* File -> style.css /* Contact -> www.mezmamedia.com -> richie@mezmamedia.com /* Copyright (c) -> Mezma Media /* oooooooooooooooooooooooooooooooooooooooooooooooo */ a:link { color: #22aee0; background-color: transparent; text-decoration: underline; } a:visited { color: #22aee0; background-color: transparent; text-decoration: underline; } a:hover { color: #8ce1ff; background-color: transparent; text-decoration: none; } a.tl:link { color: #7f7f7f; background-color: transparent; text-decoration: none; } a.tl:visited { color: #7f7f7f; background-color: transparent; text-decoration: none; } a.tl:hover { color: #22aee0; background-color: transparent; text-decoration: none; } a.tlr:link { color: #525252; background-color: transparent; text-decoration: none; } a.tlr:visited { color: #525252; background-color: transparent; text-decoration: none; } a.tlr:hover { color: #22aee0; background-color: transparent; text-decoration: none; } a.ptl { font-size: 12px; } a.ptl:link { color: #353535; background-color: transparent; text-decoration: underline; } a.ptl:visited { color: #353535; background-color: transparent; text-decoration: underline; } a.ptl:hover { color: #00bcff; background-color: transparent; text-decoration: none; } a.pil:link { color: #515151; background-color: transparent; text-decoration: none; } a.pil:visited { color: #515151; background-color: transparent; text-decoration: none; } a.pil:hover { color: #878787; background-color: transparent; text-decoration: none; } a.fl:link { color: #5d656b; background-color: transparent; text-decoration: underline; } a.fl:visited { color: #5d656b; background-color: transparent; text-decoration: underline; } a.fl:hover { color: #4289bf; background-color: transparent; text-decoration: none; } a.bwd:link { color: #748999; background-color: transparent; text-decoration: none; } a.bwd:visited { color: #748999; background-color: transparent; text-decoration: none; } a.bwd:hover { color: #4289bf; background-color: transparent; text-decoration: underline; } a.page:link { color: #4f6972; background-color: transparent; text-decoration: underline; } a.page:visited { color: #4f6972; background-color: transparent; text-decoration: underline; } a.page:hover { color: #00bcff; background-color: transparent; text-decoration: none; } a.btl { background: url(background_images/bt_link.gif) no-repeat; overflow: hidden; display: block; float: left; text-align: left; text-decoration: none; margin-right: 2px; width: 154px; height: 39px; } a.btl:link { color: #fff; } a.btl:visited { color: #fff; } a.btl:hover { background: url(background_images/bt_linko.gif) no-repeat; color: #fff; } a.btl div { padding: 10px 0px 0px 10px; } body { background-image: url(background_images/page_bg.jpg); background-repeat: repeat-x; background-position: top; height: 100%; background-color: #fff; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; text-align: center; /* Center the body ONLY for IE until big is fixed */ font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #515151; } /* oooooooooooooooooooooooooooooooooooooooooooooo TEXT TYPES HERE oooooooooooooooooooooooooooooooooooooooooooooo */ .text_red { color: #dd0000; } .text_faq { color: #000000; font-size: 12px; font-weight: bold; } .text_pname { font-size: 13px; font-weight: bold; } .text_blue { color: #21aee1; } h1 { font-weight: 100; font-size: 30px; height: 81px; clear: both; color: #5f5f5f; margin: 0px; padding: 0px; } h2 { font-weight: 100; font-size: 22px; height: 50px; clear: both; color: #5f5f5f; margin: 0px; padding: 0px; } p.f { margin-top: 0px; padding-top: 0px; } /* oooooooooooooooooooooooooooooooooooooooooooooo TABLES TYPES HERE oooooooooooooooooooooooooooooooooooooooooooooo */ #page_shell { display: block; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #515151; text-align: left; margin: 0 auto; width: 1000px; } #top_bar { display: block; float: left; background: url(background_images/top_underline.jpg) no-repeat bottom; font-size: 11px; color: #d5d5d5; margin-top: 10px; width: 1000px; height: 24px; } #tb_l { display: inline; position: relative; overflow: visible; z-index: 100; float: left; margin-left: 173px; width: 430px; } #tb_m { display: inline; float: left; color: #7f7f7f; margin: -2px 0px 0px 20px; } #tb_r { display: inline; float: right; margin-right: 10px; } #logo_bar { display: block; float: left; height: 81px; width: 1000px; } #logo { display: block; float: left; height: 81px; width: 162px; } #lb_btns { display: block; float: right; height: 81px; width: 838px; } #banner { display: block; float: left; height: 140px; width: 1000px; } #body_shell { display: inline; float: left; margin: 0px 10px; width: 980px; } #body_extra_links { display: block; float: left; font-size: 12px; width: 980px; height: 39px; } #body_main { display: block; float: left; clear: both; overflow: hidden; color: #515151; line-height: 18px; margin-top: 40px; width: 980px; } /* LINE HEIGHT */ #bl_shell { display: block; float: left; font-size: 12px; width: 700px; } #bls_left { display: block; float: left; width: 740px; } /* old was 460 but now its full screen website updated */ #bls_right { display: block; float: right; width: 220px; } div.br_n_shell { display: block; float: right; background: url(background_images/br_n_tile.gif) repeat-y; overflow: hidden; width: 250px; } div.brn_top { display: block; background: url(background_images/br_n_top.gif) no-repeat top; overflow: hidden; width: 250px; } div.brn_btm { display: block; background: url(background_images/br_n_btm.gif) no-repeat bottom; overflow: hidden; width: 250px; } div.brn_pad { display: block; overflow: hidden; padding: 15px; } div.loc_shell { display: block; float: left; overflow: hidden; margin-top: 15px; margin-bottom: 50px; width: 980px; } /* same width as bl_shell - no longer same width as updated for full screen */ div.ls_left { display: block; float: left; width: 690px; } /* used to be 450 before full screen */ div.ls_right { display: block; float: right; width: 230px; } /* front page */ #front_page_flash { display: block; float: left; position: relative; background-color: #c1c1c1; z-index: 1; height: 430px; width: 980px; } #front_page_boxes { display: block; float: left; position: relative; margin-top: 5px; z-index: 2; height: 136px; width: 980px; } /*#front_page_boxes { display: block; float: left; position: relative; top: -50px; z-index: 2; height: 136px; width: 980px; }*/ div.fp_shell { display: inline; float: left; overflow: hidden; background: url(background_images/front_box.gif) no-repeat; height: 136px; width: 323px; } div.fps_news { display: block; background: url(background_images/fp_news_tile.jpg) repeat-x top; line-height: 18px; margin: 1px; padding: 15px 20px; } /* LINE HEIGHT */ /* end front page */ div.pcat_shell { display: block; float: left; text-align: center; overflow: hidden; margin: 0px 0px 30px 30px; width: 300px; } div.pc_first { margin-left: 0px; } div.pc_img { display: block; text-align: center; margin-bottom: 20px; height: 200px; width: 300px; } div.product_shell { display: block; float: left; overflow: hidden; margin: 0px 0px 30px 46px; width: 210px; } div.ps_first { margin-left: 0px; } div.p_img { display: block; text-align: center; margin-bottom: 20px; height: 115px; width: 210px; } div.product_shell p { margin: 0px; padding: 0px; margin-top: 3px; color: #353535; } /* PRICE */ div.prod_img { display: inline; float: left; text-align: right; overflow: hidden; margin: 20px 20px 0px 0px; width: 250px; } div.prod_text { display: inline; float: left; text-align: left; overflow: hidden; font-size: 12px; width: 700px; } /* 10px on width can be added for full width */ div.qa_vid { display: inline; float: left; overflow: hidden; margin: 0px 10px 20px 0px; width: 132px; height: 100px; } div.qav_last { margin-right: 0px; } #footer_shell { display: block; float: left; overflow: hidden; margin: 50px 10px 0px 10px; width: 980px; } #f_top { display: block; float: left; color: #8096a6; margin-bottom: 7px; width: 980px; } #ft_l { display: block; float: left; width: 750px; } #ft_r { display: block; float: right; text-align: right; width: 230px; } #f_btm { display: block; float: left; background: url(background_images/btm_underline.jpg) no-repeat top; color: #748999; width: 980px; } #f_btm div.l { display: block; float: left; margin-top: 7px; width: 880px; } #f_btm div.r { display: block; float: right; text-align: right; margin-top: 7px; width: 100px; } .mt_ten { margin-top: 10px; } div.pagination { display: block; float: left; color: #7f7f7f; margin-top: 10px; } td.driver_table_title { background-color: #c4e3fa; color: #003258; border: 1px #409ade solid; font-weight: bold; } tr.second { background-color: #f2f2f2; } /* ooooo DROP DOWN SLIDER ooooo */ div.slide_shell { display: block; overflow: hidden; margin-bottom: 10px; } /* nothing to do with js.. only styling */ div.slide_top { background-color: #ffffff; border: 1px #eaf5f9 solid; color: #7f7f7f; padding: 5px 10px; cursor: pointer; } div.slide_top_o { background-color: #00bcff; border: 1px #1d8bdf solid; color: #ffffff; padding: 5px 10px; cursor: pointer; } div.slide_info { display: block; padding: 0px 10px; overflow: hidden; line-height: 18px; } span.menufr { display: inline; float: right; } /* ooooo END DROP DOWN SLIDER ooooo */ #newsticker { display: block; position: relative; overflow: hidden; margin: 20px 0px; height: 90px; } #newsticker_shell { display: block; position: absolute; top: 0px; left: 0px; } div.newsticker_news { display: block; position: relative; top: 0px; left: 0px; height: 120px; } div.newsticker_news a:link { color: #6d6d6d; background-color: transparent; } div.newsticker_news a:visited { color: #6d6d6d; background-color: transparent; } div.newsticker_news a:hover { color: #9b9b9b; } a.nt_title { font-size: 12px; } a.nt_title:link, a.nt_more:link { text-decoration: underline; } a.nt_title:visited, a.nt_more:visited { text-decoration: underline; } a.nt_title:hover, a.nt_more:hover { text-decoration: none; } a.nt_body:link { font-size: 10px; text-decoration: none; } a.nt_body:visited { font-size: 10px; text-decoration: none; } a.nt_body:hover { font-size: 10px; text-decoration: none; } /* TOP MENU tnaviefix is for ie5/6 */ ul#tnav { position: relative; list-style: none; list-style-image: none; padding: 0px; margin: 0px; width: 500px; } ul#tnav li { position: relative; float: left; } ul#tnav li.f { padding-left: 0px; } ul#tnav ul { display: none; position: absolute; background: url(background_images/dm_tile.gif) repeat-y; list-style-image: none; padding: 0px; margin: 0px; left: -10px; width: 122px; } ul#tnav ul li { list-style: none; margin: 0px; padding: 0px; width: 122px; } ul#tnav ul li.top { background: url(background_images/dm_top.gif) no-repeat top; padding-top: 5px; } ul#tnav ul li.btm { background: url(background_images/dm_btm.gif) no-repeat bottom; padding-bottom: 5px; } ul#tnav ul li a { display: block; text-decoration: none; color: #9a9a9a; padding: 4px 0px 4px 8px; } ul#tnav li:hover ul, #tnav li.tnaviefix ul { display: block; } ul#tnav li:hover a, ul#tnav a:focus, ul#tnav a:active, #tnav li.tnaviefix a{ color: #22aee0; } ul#tnav li:hover ul a, #tnav li.tnaviefix ul a { color: #9a9a9a; background-color: transparent; text-decoration: none; } ul#tnav li:hover ul a.tldm:link { color: #9a9a9a; background-color: transparent; text-decoration: none; } ul#tnav li:hover ul a.tldm:visited { color: #9a9a9a; background-color: transparent; text-decoration: none; } ul#tnav li:hover ul a.tldm:hover { color: #242424; background-color: transparent; text-decoration: none; } /* END TOP MENU */ /* THIS IS THE CSS NAV MENU ACROSS THE TOP */ ul#nav { background: url(background_images/menu.gif); position: relative; padding: 0px; margin: 0px; width: 667px; height: 81px; top: 0px; } ul#nav li { background-image: none; display: block; position: absolute; list-style-type: none; padding: 0px; margin: 0px; } ul#nav li a { display: block; text-indent: -9999px; } li#nav_solutions a:hover, li#nav_monitors a:hover, li#nav_kiosk a:hover, li#nav_signage a:hover, li#nav_accessories a:hover { background: url(background_images/menu.gif); } li#nav_solutions { left: 0px; top: 0px; width: 122px; height: 81px; } li#nav_solutions a { background-position: 0px 0px; left: 0px; width: 122px; height: 81px; } li#nav_solutions a:hover { background-position: 0px -81px; } li#nav_monitors { left: 122px; top: 0px; width: 134px; height: 81px; } li#nav_monitors a { background-position: -122px 0px; left: 122px; width: 134px; height: 81px; } li#nav_monitors a:hover { background-position: -122px -81px; } li#nav_kiosk { left: 256px; top: 0px; width: 140px; height: 81px; } li#nav_kiosk a { background-position: -256px 0px; left: 256px; width: 140px; height: 81px; } li#nav_kiosk a:hover { background-position: -256px -81px; } li#nav_signage { left: 396px; top: 0px; width: 130px; height: 81px; } li#nav_signage a { background-position: -396px 0px; left: 396px; width: 130px; height: 81px; } li#nav_signage a:hover { background-position: -396px -81px; } li#nav_accessories { left: 526px; top: 0px; width: 141px; height: 81px; } li#nav_accessories a { background-position: -526px 0px; left: 526px; width: 141px; height: 81px; } li#nav_accessories a:hover { background-position: -526px -81px; } /* END CSS NAV MENU ON TOP */ img.img_main { } img.img_front { margin: 1px; border: 0px; } img.img_observer { display: inline; float: right; padding: 12px 15px 0px 0px; border: 0px; } img.img_logo { padding-top: 8px; border: 0px; } img.img_brn_l { display: block; float: left; border: 0px; } img.img_brn_r { float: right; } div.error_box { display: block; background-color: #ffebe8; border: 1px #dd0000 solid; padding: 5px; margin-bottom: 10px; color: #000000; } br.cl { clear: left; } br.cb { clear: both; } div.c_l { display: block; float: left; font-weight: bold; margin-bottom: 15px; width: 115px; } div.c_r { font-weight: 100; width: 200px; } label, input, select, textarea { font-family: Arial, Verdana, Helvetica, sans-serif; display: block; float: left; margin-bottom: 10px; } label { font-weight: bold; width: 100px; margin-right: 15px; } input.submit_box { margin: 5px 0px 0px 115px; } input.input_nm { display: inline; margin: 0px; } .input_no_left { margin-left: 115px; } .search_top { display: inline; float: none; margin: 0px; font-size: 11px; border: 1px solid #a0a0a0; background: #ffffff; color: #333333; vertical-align: middle; padding: 2px; width: 120px; } .search_submit { display: inline; float: none; margin: 0px; font-size: 11px; color: #333333; margin-left: 10px; vertical-align: middle; } .search_submitbtm { display: inline; float: none; margin: 0px; font-size: 12px; border: 1px solid #a0a0a0; background: #e0e0e0; color: #333333; padding: 5px 10px; margin-left: 10px; vertical-align: middle; } form { margin: 0; } .input_box { font-size: 12px; border: 1px solid #a0a0a0; background: #ffffff; color: #333333; padding: 5px; } .submit_box { font-size: 12px; border: 1px solid #a0a0a0; background: #e0e0e0; color: #333333; padding: 10px; }