/*********************************************************** CSS Document ***************************************************************/ /****************************** Made by : Frederik Van Zande - copyright : 2006 Mio Technology Europe ****************************/ /************************************************** date: 31-08-06 *********************************************************/ body { margin:0; padding:0; text-align: center; width: 100%; height: 100%; } /* container centers the whole website */ #container { margin:0 auto; padding:148px 0 0; width:920px; position:relative; text-align:left; } /**************************************** TOP PART ************************************/ /* top part is absolute position so that it can be placed at the bottom of the code, so it's taken out of the document flow */ /* top div */ #top { width:920px; height:130px; position:absolute; top:0px; left:0px; } /* logo , top left, a with img in it */ #Mio_logo { position:absolute; top:22px; left:15px; width:177px; height:64px; display:block; } #Mio_logo img { border:none; } /* top right navigation, ul (max width = same as headnav) */ #top_right_nav { position:absolute; top:9px; right:0px; list-style:none; width:710px; height:24px; margin:0; padding:0; } /* you have three kinds of list items here : 1. language selection (difference = padding & margin + world icon) 2. normal list item (has the stripe on the left (splitter graphic) 3. last list item (list has a float right, so last item is most left item), hast no stripe on the left)*/ /* normal list, case 2. , case 1 & 3 will inherit functions of this style */ #top_right_nav li { float:right; display:inline; margin:0; padding:0 0 0 1px; background:transparent url(../images/top-right-nav-stripe.gif) top left no-repeat; } /* case 3. no need for thet vertical stripe */ #top_right_nav li.last { padding:0; background:none; } /* case 1, need world icon + other things */ #top_right_nav li.language_selection { padding:0; background:none; width:230px; height:24px; position:relative; padding-left:40px;} /* link inside list element, is completely selectable as block */ #top_right_nav li a, #top_right_nav li label { display:block; font:normal 10px/24px Arial, Helvetica, sans-serif; color:#737373; margin:0; padding:0 11px; } #top_right_nav li a.log_out { color:#f60; } #top_right_nav li span.logged-in { display:block; font:normal 10px/24px Arial, Helvetica, sans-serif; color:#6C8B95; margin:0; padding:0 11px; } #top_right_nav li a:link, #top_right_nav li a:visited { text-decoration:none; } #top_right_nav li a:hover, #top_right_nav li a:active { text-decoration:underline; } #top_right_nav li label { float:left; margin:0 0 0 3px; padding:0 5px 0 0;} #top_right_nav li select { float:left; border: 1px solid #cecece; width:149px; height:18px; margin:2px 0 2px 0; padding:0 0 0 5px; font:normal 10px/18px Arial, Helvetica, sans-serif; color:#737373; position:absolute; top:0; right:0; } #top_right_nav li optgroup { font: normal bold 10px/18px Arial, Helvetica, sans-serif; color:#959595; padding:0 0 0 5px; background-color:#fff; } #top_right_nav li option { font:normal 10px/18px Arial, Helvetica, sans-serif; color:#737373; } #flash_global { width:120px; height:32px; padding:0; margin:0; position:absolute; top:-5px; left:0;} #flash_global a img { border:none; } /* head_nav (ul) contains nested ul */ #head_nav { position:absolute; top:45px; right:0px; width:702px; height:35px; list-style:none; margin:0; padding:3px 0 0 8px; background:#f37021 url(../images/head-nav-background.gif) top left no-repeat;} /* 2 scenario's possible for the li's 1. list has a right separation stripe. 2. last list item has no separation stripe. */ /* case 1 & general list, other inherit functions of this one */ #head_nav li { position:relative; float:left; display:inline; margin:0; padding:0 1px 0 0; background:transparent url(../images/head-nav-stripe.gif) top right no-repeat; line-height:35px; } /* case 2 */ #head_nav li.last { padding:0; background:none; } /* the navigation links - level 0 */ #head_nav li a { display:block; margin:0; padding:0 3px 0 11px; height:35px; font:normal normal 13px/35px Arial, Helvetica, sans-serif; text-decoration:none; cursor:pointer; font-weight:normal; } #head_nav li a span { display:block; padding:0 10px 0 2px; height:35px; text-align: center; cursor:pointer; } #head_nav li a:link, #head_nav li a:visited { color:#fff; background:none; } #head_nav li.on a:link, #head_nav li.on a:visited, #head_nav li.on a:hover, #head_nav li.on a:active, #head_nav li a:hover, #head_nav li a:active { color:#f37021; background:transparent url(../images/head-nav-item-a-on.gif) top left no-repeat; } #head_nav li a:link span, #head_nav li a:visited span { background:none } #head_nav li.on a:link span, #head_nav li.on a:visited span, #head_nav li.on a:hover span, #head_nav li.on a:active span, #head_nav li a:hover span, #head_nav li a:active span { background:transparent url(../images/head-nav-item-span-on.gif) top right no-repeat; } /* head_nav subnav ul */ #head_nav ul { display:none; position:absolute; top:35px; list-style:none; height:21px; width:530px; } #head_nav li.on ul { display:inline; } /* standard viewable if you're inside the page, on-status */ /* the navigation links - level 1 */ /* 2 scenarios possible : */ /* 1. link with a separation stripe (normal link) */ /* 2. link with no separation stripe (last linke) */ #head_nav ul li { float:left; display:inline; margin:0; padding:0 1px 0 0; background:transparent url(../images/head-nav-sub-stripe.gif) top right no-repeat; line-height:21px; } /* scenario 1 */ #head_nav ul li.last { padding:0; background:none; } #head_nav ul li a { display:block; padding:0 11px; text-align:left; height:auto; font:normal 11px/21px Arial, Helvetica, sans-serif; } #head_nav ul li a:link, #head_nav ul li a:visited, #head_nav li.on ul li a:link, #head_nav li.on ul li a:visited { text-decoration:none; background:none; color:#737373;} #head_nav ul li a:hover, #head_nav ul li a:active, #head_nav li.on ul li a:hover, #head_nav li.on ul li a:active, #head_nav ul li a.on:hover, #head_nav ul li a.on:active, #head_nav li.on ul li a.on:hover, #head_nav li.on ul li a.on:active, #head_nav ul li a.on:link, #head_nav ul li a.on:visited, #head_nav li.on ul li a.on:link, #head_nav li.on ul li a.on:visited { text-decoration:underline; background:none; color:#737373; } /* search block , elements in a div for easy position */ #search_block { width:186px; height:18px; position:absolute; top:106px; right:0px; } #search_block form { margin:0; padding:0; } #search_block form div { position:relative; } #search_block label { font:normal 11px/18px Arial, Helvetica, sans-serif; margin:0; padding:0; color:#b4b4b4; position: absolute; top:0px; right: 141px; } #search_block input { height:16px; width:113px; border:1px solid #b4b4b4; position:absolute; top:0px; right:20px; } #search_block a { position:absolute; top:0px; right:0px; } #search_block a img { border:none; } /*************************************** MIDDLE PART ********************************/ /* middle part is placed vertical by the container padding, middle part contains two headsections named : left_nav & content. Middle part should always be first in-the-document-flow div */ #middle { width:920px; position:relative; background:transparent url(../images/middle-stripe.gif) top left repeat-y; background-position:211px 0; padding:0 0 20px; } /************************* CONTENT *****************************/ /* Content is in the document flow, while left nav isn't. This means that the content part should always have more height then the left_nav, in order to position the footer (in document flow) beneath the middle part, otherwise overlapping is possible if it's not, please give the content div a height (inline css) so that it is manually made higher then the left nav div */ #content { width: 656px; margin:0 0 0 264px; position:relative; } /************************** DEVICE NAV **************************************/ /* device navigation (ul) is tabbed navigation */ #product_nav { width:656px; height: 30px; border-bottom:1px solid #dbdbdb; margin:0; padding:0; position: relative; } #product_nav ul{ list-style:none; padding:0; width: 656px; height:31px; position: absolute; top:0px; left:0px; margin: 0; } #product_nav li { margin: 0; padding: 0; float: left; } #product_nav li a { display:block; padding: 0 12px 0 0; background: #f5f5f5 url(../images/device-nav-right.gif) top right no-repeat; background-position:right -62px; font: normal 12px/31px Arial, Helvetica, sans-serif; text-decoration: none;} #product_nav li.on a { background: #f5f5f5 url(../images/device-nav-right.gif) top right no-repeat; font-weight:bold; } #product_nav li.before_on a { background: #f5f5f5 url(../images/device-nav-right.gif) top right no-repeat; background-position:right -124px; } #product_nav li a.last { background: #f5f5f5 url(../images/device-nav-right.gif) top right no-repeat; background-position:right -93px; padding-right:15px; } #product_nav li a.first { margin-top:0; } #product_nav li.on a.last { background: #f5f5f5 url(../images/device-nav-right.gif) top right no-repeat; background-position:right -31px; padding-right:15px; } #product_nav li a span { display: block; text-decoration:none; padding: 0 0 0 12px; background: transparent url(../images/device-nav-left.gif) top left no-repeat; background-position:0 -62px; cursor: pointer;} #product_nav li.on a span { background: transparent url(../images/device-nav-left.gif) top left no-repeat; background-position:0 0px; } #product_nav li a.first span { background: transparent url(../images/device-nav-left.gif) top left no-repeat; background-position:0 -93px; } #product_nav li.on a.first span { background: transparent url(../images/device-nav-left.gif) top left no-repeat; background-position:0 -31px; } #product_nav li a:link span, #product_nav li a:visited span { color:#648189; } #product_nav li a:hover span, #product_nav li a:active span { color:#f37021; } #product_nav li.on a:link span, #product_nav li.on a:visited span, #product_nav li.on a:hover span, #product_nav li.on a:active span { color:#f60; } /************************ LEFT NAV ******************************/ /* left nav positioned absolute, out of document flow, */ #left_nav { width:210px; position:absolute; top:0px; left:0px; } /* left nav main ul, the lists are built in 3 levels, we control each level with the class for finetuning, rough work gets doen direct on the tag */ /* rough work , keep every list margin to 0, let the anchors take the complete width it (totally selectable, better usability) */ #left_nav ul { list-style: none; margin:0; padding:0; width:210px; } #left_nav li { margin:0; padding:0; float:left; clear:left; } #left_nav ul a { display:block; text-decoration:none; } /*detailed styling work */ /*level 0 */ #left_nav ul.leftnav_L-0 a { font:14px/20px Arial, Helvetica, sans-serif; font-weight:bold; padding:0 0 0 31px; height:20px; width:179px; background:transparent url(../images/leftnav-L0.gif) top left no-repeat; } #left_nav ul.leftnav_L-0 a:link, #left_nav ul.leftnav_L-0 a:visited { color:#535252; background-position:16px 0px; } #left_nav ul.leftnav_L-0 a:hover, #left_nav ul.leftnav_L-0 a:active { color:#9d9d9d; background-position:16px -20px; } #left_nav ul.leftnav_L-0 li.on a:link, #left_nav ul.leftnav_L-0 li.on a:visited, #left_nav ul.leftnav_L-0 li.on a:hover, #left_nav ul.leftnav_L-0 li.on a:active { color:#f60; background-position:16px -40px; } /* level 1 */ #left_nav ul.leftnav_L-1 a { font:13px/19px Arial, Helvetica, sans-serif; padding:0 0 0 34px; height:19px; width:176px; background:transparent url(../images/leftnav-L1.gif) top left no-repeat; } #left_nav ul.leftnav_L-0 ul.leftnav_L-1 a:link, #left_nav ul.leftnav_L-0 ul.leftnav_L-1 a:visited { color:#648189; background-position:22px 0px; } #left_nav ul.leftnav_L-0 ul.leftnav_L-1 a:hover, #left_nav ul.leftnav_L-0 ul.leftnav_L-1 a:active { color:#4d646a; background-position:22px -19px; } #left_nav ul.leftnav_L-1 li.on a:link, #left_nav ul.leftnav_L-1 li.on a:visited { background-position:22px -38px; color:#f60; } #left_nav ul.leftnav_L-1 li.on a:hover, #left_nav ul.leftnav_L-1 li.on a:active { background-position:22px -57px; color:#f60; } /* level 2 */ #left_nav ul.leftnav_L-2 a { font:12px/17px Arial, Helvetica, sans-serif; padding:0 0 0 33px; margin:0 0 1px; height:17px; width:173px; background:none; } #left_nav ul.leftnav_L-1 li.on ul.leftnav_L-2 a:link, #left_nav ul.leftnav_L-1 li.on ul.leftnav_L-2 a:visited { color:#595959; border-left:4px solid #d7dbdb; background-color:#fff; } #left_nav ul.leftnav_L-1 li.on ul.leftnav_L-2 a:hover, #left_nav ul.leftnav_L-1 li.on ul.leftnav_L-2 a:active { color:#595959; border-left:4px solid #a0a3a3; background-color:#e6eaea; } #left_nav #left_nav_java ul.leftnav_L-2 li.on a:link, #left_nav #left_nav_java ul.leftnav_L-2 li.on a:visited, #left_nav #left_nav_java ul.leftnav_L-2 li.on a:hover, #left_nav #left_nav_java ul.leftnav_L-2 li.on a:active { color:#595959; border-left:4px solid #f25822; background-color:#fde9e2; font-weight:bold; } /* detailed collaps status */ /*level 0 */ #left_nav li ul.leftnav_L-0 { display:none; } #left_nav li.on ul.leftnav_L-0 { display:inline; } /* level 1 */ #left_nav li ul.leftnav_L-1 { display:none; } #left_nav li.on ul.leftnav_L-1 { display:inline; } /* level 2 */ #left_nav li ul.leftnav_L-2, #left_nav li.on ul.leftnav_L-1 ul.leftnav_L-2 { display:none; } #left_nav li.on ul.leftnav_L-1 li.on ul.leftnav_L-2 { display:inline; } /*************************************** Footer PART ********************************/ /* Footer is always at the bottom, is always in document flow so it positions itself at the bottom (div) */ #footer { width:920px; position:relative; margin:0; height:24px; border-top:1px solid #cdcdcd; border-bottom:4px solid #cdcdcd; position: relative; } /* small navigation list left bottom */ #footer ul { list-style:none; margin:0; padding:0; height:24px; width:450px; position:absolute; top:0px; left:3px; } #footer ul li { margin:0 1px 0 0; background:transparent url(../images/top-right-nav-stripe.gif) top right no-repeat; padding:0; float:left; display:inline; } #footer ul li.last { background:none; margin:0; } #footer ul li a { color:#9a9a9a; font:normal 10px/24px Arial, Helvetica, sans-serif; display:block; padding:0 11px; } #footer ul li a:link, #footer ul li a:visited { text-decoration:none; } #footer ul li a:hover, #footer ul li a:active { text-decoration:underline; } /* privacy policy text span*/ #copyright { position:absolute; top:0; right:0; height:24px; width:350px; text-align:right; color:#9a9a9a; font:normal 10px/24px Arial, Helvetica, sans-serif; } /****************************************************************************************************************************************************/ /*************************************** *****************************************************************/ /*************************************** WARNING - LANGUAGE DEPENDENT CONTENT *****************************************************************/ /*************************************** *****************************************************************/ /****************************************************************************************************************************************************/ /* This must be generated for each language !!!! */ /************* HEAD NAVIGATION ITEMS ************************************************************************************************************/ /* head nav PRODUCTS width, head nav PRODUCTS width - 12px */ #head_nav li a#head_nav_1 { width:84px } #head_nav li a#head_nav_1 span { width:72px } /* head nav SUPPORT width, head nav SUPPORT width - 12px */ #head_nav li a#head_nav_2 { width:73px } #head_nav li a#head_nav_2 span { width:61px } /* head nav MEDIA width, head nav MEDIA width - 12px */ #head_nav li a#head_nav_3 { width:59px } #head_nav li a#head_nav_3 span { width:47px } /* head nav WHERE TO BUY width, head nav WHERE TO BUY width - 12px */ #head_nav li a#head_nav_4 { width:117px } #head_nav li a#head_nav_4 span { width:105px } /* head nav ABOUT MIO width, head nav ABOUT MIO width - 12px */ #head_nav li a#head_nav_5 { width:87px } #head_nav li a#head_nav_5 span { width:75px } /* head nav MIO CLUB width,* head nav MIO CLUB width - 12px */ #head_nav li a#head_nav_6 { width:77px } #head_nav li a#head_nav_6 span { width:65px } /******************** General Content CSS ************************************************/ #content h1 { margin:0 0 15px; padding:0 0 0 21px; color:#f60; font:normal 17px/17px Arial, Helvetica, sans-serif; background:transparent url(../images/header-dots.gif) top left no-repeat; background-position:0 4px; } #content h2 { margin:0 13px; padding:0; color:#676767; font:bold 13px/31px Arial, Helvetica, sans-serif; } .clear_div { height:1px; font:1px/1px Arial, Helvetica, sans-serif; clear:both; } /*********************************************** standard button css ******************************************/ a.button { display:block; margin:0; padding: 0 0 0 21px; font: 12px/23px Arial, Helvetica, sans-serif; text-decoration: none; cursor:pointer; } a.button span { display:block; margin:0; padding: 0 14px 3px 5px; font: bold 12px/20px Arial, Helvetica, sans-serif; cursor:pointer; } a.button:link, a.button:visited { background: transparent url(../images/button-left.gif) top left no-repeat; color:#ff8331; } a.button:link span, a.button:visited span { background: transparent url(../images/button-right.gif) top right no-repeat; color:#ff8331; } a.button:hover, a.button:active { background: transparent url(../images/button-left.gif) 0 -23px no-repeat; color:#f60; } a.button:hover span, a.button:active span { background: transparent url(../images/button-right.gif) right -23px no-repeat; color:#f60; } a.button.grey:link, a.button.grey:visited { background-image:url(../images/button-left-grey.gif); } a.button.grey:link span, a.button.grey:visited span { background-image:url(../images/button-right-grey.gif); } a.button.grey:hover, a.button.grey:active { background-image:url(../images/button-left-grey.gif); } a.button.grey:hover span, a.button.grey:active span { background-image:url(../images/button-right-grey.gif); } /*********************************************** shiny button css *********************************************/ a.button_shiny { display:block; margin:0; padding:0 0 0 22px; height:24px; color:#595959; font:normal 10px/24px Arial, Helvetica, sans-serif; text-decoration:none; cursor:pointer; background:transparent url(../images/shiny-button-pdf.gif) top left no-repeat; overflow:hidden; } a.button_shiny span { display:block; margin:0; padding:0 0 0 14px; font:normal 10px/24px Arial, Helvetica, sans-serif; text-decoration:none; cursor:pointer; background:transparent url(../images/shiny-button-right.gif) right top no-repeat; } a.button_shiny:link, a.button_shiny:visited { background-position:0 0; } a.button_shiny:link span, a.button_shiny:visited span { background-position:right top; } a.button_shiny:hover, a.button_shiny:active { background-position:0 -24px; } a.button_shiny:hover span, a.button_shiny:active span { background-position:right -24px; } a.button_shiny.faq_button { background-image:url(../images/shiny-button-faq.gif); } /******************** Support Overview page ************************************************/ #content #search_faqs { width:656px; height:68px; background:#f1f1f1 url(../images/search-block.gif) top left no-repeat; margin:2px 0 21px; position:relative; } #content #search_faqs form { padding:0; margin:0; position:relative; width:656px; } #content #search_faqs label { color:#5a747c; font:normal 12px/12px Arial, Helvetica, sans-serivf; position:absolute; top:4px; } #content #search_faqs input, #content #search_faqs select { height:18px; border:1px solid #b4b4b4; color:#5a747c; font:normal 12px/18px Arial, Helvetica, sans-serif; padding:0 3px;} #content #search_faqs select { padding:0; width:153px; position:absolute; top:1px; right:111px; } #content #search_faqs input { width:218px; position:absolute; top:1px; left:82px; } #content #search_faqs .button { position:absolute; top:1px; right:10px; } #faq_search_line { position:absolute; width:656px; height:25px; left:0; top:3px; } #label_search_in { left:328px; } #label_keywords { left:18px; } #content #search_faqs_small { width:320px; height:101px; background:#f1f1f1 url(../images/search-block-small.gif) top left no-repeat; margin:2px 0 20px; position:relative; float:left; } #content #search_faqs_small form { padding:0; margin:0; position:relative; width:320px; } #content #search_faqs_small label { color:#5a747c; font:normal 12px/12px Arial, Helvetica, sans-serivf; position:absolute; left:18px; } #content #search_faqs_small input, #content #search_faqs_small select { height:18px; border:1px solid #b4b4b4; color:#5a747c; font:normal 12px/18px Arial, Helvetica, sans-serif; padding:0 3px;} #content #search_faqs_small select { padding:0; width:132px; position:absolute; top:33px; left:82px; } #content #search_faqs_small input { width:218px; position:absolute; top:1px; left:82px; } #content #search_faqs_small .button { position:absolute; top:33px; right:10px; } #search_faqs_small #faq_search_line { position:absolute; width:320px; height:101px; left:0; top:3px; } #search_faqs_small #label_search_in { top:36px; left:18px; } #search_faqs_small #label_keywords { top:4px; } #content #rma_checker_small { width:320px; height:101px; background:#f1f1f1 url(../images/search-block-small.gif) top left no-repeat; margin:2px 0 20px 16px; position:relative; float:left; } #content #rma_form_rma, #content #rma_form_sn { padding:0; margin:0; width:320px; position:absolute; left:0; top:32px; } #content #rma_form_sn { top:64px; } #content #rma_checker_small label { color:#5a747c; font:normal 12px/12px Arial, Helvetica, sans-serif; position:absolute; left:18px; top: 4px; } #content #rma_checker_small input { height:18px; border:1px solid #b4b4b4; color:#5a747c; font:normal 12px/18px Arial, Helvetica, sans-serif; padding:0 3px; width:160px; position:absolute; top:1px; left:75px;} #content #rma_checker_small .button { position:absolute; top:1px; right:10px; } #rma_checker_small #faq_search_line { position:absolute; width:320px; height:101px; left:0; top:3px; } #content .rma_item h3 { color:#6c8b95;} #content #rma_wide { width:600px; height:68px; background:#f1f1f1 url(../images/rma-check-background-wide.gif) top left no-repeat; margin:2px 0 21px 28px; position:relative; } #content #rma_wide h4, #rma_check_results h4 { margin:0 13px; padding:0; color:#676767; font:bold 13px/31px Arial, Helvetica, sans-serif; width:568px; } #content #rma_check_results h4 strong { color:#f60; } #rma_check_results { padding:0;} #content #rma_wide #rma_form_rma, #content #rma_wide #rma_form_sn { padding:0; margin:0; width:276px; position:absolute; left:16; top:32px; } #content #rma_wide #rma_form_sn { left:308px; } #content #rma_wide label { color:#5a747c; font:normal 12px/12px Arial, Helvetica, sans-serif; position:absolute; left:18px; top: 4px; } #content #rma_wide input { height:18px; border:1px solid #b4b4b4; color:#5a747c; font:normal 12px/18px Arial, Helvetica, sans-serif; padding:0 3px; width:124px; position:absolute; top:1px; left:75px;} #content #rma_wide .button { position:absolute; top:0px; right:0; } #rma_wide #faq_search_line { position:absolute; width:320px; height:101px; left:0; top:3px; } #rma_check_results p { margin:0 16px; padding:0; color:#6c8b95; } #content #rma_check_results p strong { color:#6c8b95; } #content #rma_check_results .repair_status_message { color:#F60; font:bold 11px/16px Arial, Helvetica, sans-serif; } /* rma notes ul */ .rma_notes { list-style:none; padding:0; margin:0 0 16px 28px; float:left; display:inline; clear:left; width:600px; } .rma_notes li { width:584px; margin:0; padding:0 0 2px 16px; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; float:left; clear:left; display:inline; background: transparent url(../images/list-style-1.gif) 0 0 no-repeat; } .rma_notes li li { width:568px; background-image:url(../images/list-style-2.gif); margin:0 0 2px; } .rma_notes ul, .rma_notes ul { width: 584px; margin:0 0 16px; padding:0; list-style:none; } .rma_item { border-left:1px solid #c8c8c8; border-right:1px solid #c8c8c8; width:654px; margin:0; padding:13px 0 6px; position:relative; } #content .rma_item strong { color:#707070; } #content .rma_item h3 { margin:0 28px; } .rma_item p { color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; padding:0; margin:0 28px 16px; } #content .support_group { position: relative; } #content .support_group .extra_support_info { position:absolute; top:11px; right:0px; font:11px/11px Arial, Helvetica, sans-serif; color:#7597a0; width:330px; height:11px; text-align:right; } #content .support_group ul { list-style:none; margin:5px 0 5px 5px; padding:0; width:651px; position:relative; } #content .support_group ul li { float:left; display:inline; width:116px; height:100px; margin:0 0 14px 14px; } #content .support_group ul li a { display:block; text-decoration:none; width:116px; height:100px; background:transparent url(../images/device-block.gif) top left no-repeat; position:relative; } #content .support_group ul li a:link, #content .support_group ul li a:visited { color:#648189; background-position:0 0; } #content .support_group ul li a:hover, #content .support_group ul li a:active { color:#4f666d; background-position:0 -100px; } #content .support_group ul li a span { display:block; position:absolute; top:5px; left:9px; width:98px; height:20px; font:bold 14px/20px Arial, Helvetica, sans-serif; } #content .support_group ul li a img { border:none; position:absolute; right:8px; bottom:8px; } #breadcrumbs { position:absolute; top:5px; right:5px; width:651px; height:16px; margin:0; padding:0; } #breadcrumbs li { float:right; display:inline; margin:0 5px 0 0; padding:0 0 0 10px; background:transparent url(../images/arrow.gif) 0px 3px no-repeat; color:#595959; font:11px/16px Arial, Helvetica, sans-serif; } #breadcrumbs li a { display:block; margin:0; padding:0 5px; font:11px/16px Arial, Helvetica, sans-serif; color:#000; } #breadcrumbs li a:link, #breadcrumbs li a:visited { text-decoration:none; } #breadcrumbs li a:hover, #breadcrumbs li a:active { text-decoration:underline; } /******************** Device Support Overview page ************************************************/ /* top block, image needs to stay above, faq section on the right, manual & download button on top bottom, same with search field */ /* top_block is a div, everything in this div to keep the position ok for the bottom (download, manual & faq search) */ #top_block { width:415px; padding:6px 0 0 241px; margin:18px 0 0; position:relative; background:transparent url(../images/blok-header-title.gif) -1059px top no-repeat; } #top_block h2 { width:415px; margin:0; padding:0; font:bold 14px/21px Arial, Helvetica, sans-serif; color:#fff; } #top_block h2 a { color:#fff; display:block; width:391px; margin:0; padding:0 0 0 24px; font:bold 14px/21px Arial, Helvetica, sans-serif; } #top_block h2 a:link, #top_block h2 a:visited { text-decoration:none; } #top_block h2 a:hover, #top_block h2 a:active { text-decoration:underline; } /* top 10 faq list div, ul inside */ #faq_short_overview { width:413px; margin:0; padding:15px 0 10px; border-left:1px solid #c8c8c8; border-right:1px solid #c8c8c8; background:transparent url(../images/faq-icon.gif) 18px 11px no-repeat; } #faq_short_overview p.question_answer { padding:0 0 6px; margin:0 11px 0 97px; width:305px; color:#f60; font:bold 12px/16px Arial, Helvetica, sans-serif; } #faq_short_overview ul { list-style:none; width:305px; margin:0 11px 0 97px; padding:0; border-top:1px solid #e5e5e5; } #faq_short_overview li { width:305px; margin:0; padding:0; border-bottom:1px solid #e5e5e5; float:left; display:inline; } #faq_short_overview li a { display:block; width:305px; margin:0; padding:5px 0; font:normal 11px/15px Arial, Helvetica, sans-serif; } #faq_short_overview li a:link, #faq_short_overview li a:visited { text-decoration:none; color:#787878; background-color:transparent; } #faq_short_overview li a:hover, #faq_short_overview li a:active { text-decoration:underline; color:#383838; background-color:#f8f8f8; } /* clear the floating faq list so that borders keep till the bottom */ #clear_top_faq { height:5px; width:415px; padding:0; margin:0; font:1px/1px Arial, Helvetica, sans-serif; clear:both; background:transparent url(../images/device-overview-faq-bottom.gif) top right no-repeat; } #faq_short_overview #all_faq_button { margin:10px 0 5px 97px; } /* device image positioned absolute */ #device_image { position:absolute; top:10px; left:40px; } /* small faq search left top, form element containing div */ #small-faq-search { margin:0; padding:0; position:absolute; bottom:65px; left:0px; height:58px; width:221px; background:#f2f2f2 url(../images/small-search-faq-back.gif) top left no-repeat; } #small-faq-search form { padding:0; margin:0; } #small-faq-search form div { width:221px; height:58px; position:relative; } #small-faq-search form div h3 { position:absolute; top:10px; left:9px; font:bold 14px/14px Arial, Helvetica, sans-serif; color:#a3a3a3; padding:0; margin:0; } #small-faq-search form div input { position:absolute; top:30px; left:8px; width:180px; height:18px; border:1px solid #a3a3a3; font:bold 12px/18px Arial, Helvetica, sans-serif; color:#a3a3a3; padding:0 3px; margin:0; } #small-faq-search form div a { position:absolute; bottom:10px; right:8px; display:block; color:#a3a3a3; padding:0; margin:0; width:14px; height:15px; background:transparent url(../images/search-faq-small-submit.gif) top left no-repeat; } #small-faq-search form div a span { display:none; } a.button_shiny.manuals_button { position:absolute; bottom:31px; left:0px; } a.button_shiny.download_button { position:absolute; bottom:0px; left:0px; background-image:url(../images/shiny-button-download.gif); } /* styling for a page for a device that has no downloads, the php adds an extra class to the top_block, called .device_no_downloads */ .device_no_downloads #small-faq-search { bottom:34px; } .device_no_downloads a.button_shiny.manuals_button { bottom:0px; } /* general classes for a wider block */ .wide_block { margin:26px 0 0; padding:0 0 5px; width:656px; background:transparent url(../images/device-overview-wide-bottom.gif) bottom left no-repeat; } /* added content, because an h2 with #content above is stronger */ #content .wide_block h2 { margin:0; padding:7px 0 0 24px; width:632px; height:21px; font:bold 14px/21px Arial, Helvetica, sans-serif; color:#fff; background:#a3a3a3 url(../images/blok-header-title.gif) top left no-repeat; } #content .wide_block.warning_tool h2 { background:#a3a3a3 url(../images/blok-header-title-warning.gif) top left no-repeat; } #content .wide_block h2 a { font:bold 14px/21px Arial, Helvetica, sans-serif; color:#fff; display:block; width:638px; height:21px; margin:0; padding:0; cursor:pointer;} #content .wide_block h2 a:link, .wide_block h2 a:visited { text-decoration:none; } #content .wide_block h2 a:hover, .wide_block h2 a:active { text-decoration:underline; } /* the div with content that provide the left & right borders */ .support_news_item, .support_instructional_item, #email_support, #telephone_support, #club_icon_support { border-left:1px solid #c8c8c8; border-right:1px solid #c8c8c8; width:546px; margin:0; padding:13px 11px 0 97px; } .support_news_item { background:transparent url(../images/news-icon.gif) 18px 11px no-repeat; color:#585858; } .support_news_item strong { color:#707070; } .support_instructional_item { background:transparent url(../images/top-tips-club-icon.gif) 18px 11px no-repeat; color:#585858; } #email_support { background:transparent url(../images/mail-icon.gif) 18px 19px no-repeat; width:547px; margin:0; padding:13px 10px 0 97px; } #telephone_support { background:transparent url(../images/phone-icon.gif) 18px 19px no-repeat; padding-top:23px; } #club_icon_support { background:transparent url(../images/mio-club-icon.gif) 16px 35px no-repeat; width:547px; margin:0; padding:13px 10px 0 97px; } .wide_block h3 { color:#f60; font:bold 16px/32px Arial, Helvetica, sans-serif; margin:0; padding:0; } .date_support_news { color:#9a9a9a; font:bold 11px/16px Arial, Helvetica, sans-serif; } .support_news_item p { color:#424242; font:11px/16px Arial, Helvetica, sans-serif; margin:0; padding:8px 0; } .required { font:normal 11px/16px Arial, Helvetica, sans-serif; color:#f60; } /* instruction videos */ .instruction_videos { width:371px; margin:0; padding:0 0 0 175px; list-style:none; background:transparent url(../images/instruction-lady.gif) top left no-repeat; } .instruction_videos li { width:371px; height:24px; margin:5px 0; padding:0; } a.instruction_button { padding:0 0 0 23px; position:relative; bottom:0px; left:0px; background-image:url(../images/shiny-button-instructions.gif); } a.instruction_button span { font-size:11px; font-weight:bold } a.instruction_button span em { font-weight:normal; font-size:10px; font-style:normal; } /* HECC calender : purchase date */ /* the div that holds the date picker calendar */ .dpDiv { } /* the table (within the div) that holds the date picker calendar */ .dpTable { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; color: #505050; background-color: #ece9d8; border: 1px solid #AAAAAA; } /* a table row that holds date numbers (either blank or 1-31) */ .dpTR { } /* the top table row that holds the month, year, and forward/backward buttons */ .dpTitleTR { } /* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */ .dpDayTR { } /* the bottom table row, that has the "This Month" and "Close" buttons */ .dpTodayButtonTR { } /* a table cell that holds a date number (either blank or 1-31) */ .dpTD { border: 1px solid #ece9d8; } /* a table cell that holds a highlighted day (usually either today's date or the current date field value) */ .dpDayHighlightTD { background-color: #CCCCCC; border: 1px solid #AAAAAA; } /* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */ .dpTDHover { background-color: #aca998; border: 1px solid #888888; cursor: pointer; color: red; } /* the table cell that holds the name of the month and the year */ .dpTitleTD { } /* a table cell that holds one of the forward/backward buttons */ .dpButtonTD { } /* the table cell that holds the "This Month" or "Close" button at the bottom */ .dpTodayButtonTD { } /* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */ .dpDayTD { background-color: #CCCCCC; border: 1px solid #AAAAAA; color: white; } /* additional style information for the text that indicates the month and year */ .dpTitleText { font-size: 12px; color: gray; font-weight: bold; } /* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ .dpDayHighlight { color: 4060ff; font-weight: bold; } /* the forward/backward buttons at the top */ .dpButton { font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; color: gray; background: #d8e8ff; font-weight: bold; padding: 0px; } /* the "This Month" and "Close" buttons at the bottom */ .dpTodayButton { font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; color: gray; background: #d8e8ff; font-weight: bold; } /* telephone support */ #select_country_phone { width:547px; height:35px; position:relative; margin:10px 0 0; padding:0; } #select_country_phone select { position:absolute; top:1px; left:0px; height:17px; border:1px solid #ccc; color:#2b2b2b; padding:0 0 0 3px; font:normal 12px/17px Arial, Helvetica, sans-serif; } #select_country_phone .button { position:absolute; left:165px; top:0px; } /* telephone numbers by country */ #telephone_support .contact-result { width:547px; height:90px; margin:5px 0 0; padding:0; position:relative; } .contact-result h4 { color:#9a9a9a; font:bold 14px/14px Arial, Helvetica, sans-serif; padding:2px 6px 5px; margin:0; height:14px; background:transparent url(../images/phone-support-dots.gif) bottom left repeat-x; } .contact-result .telephone_details { position: absolute; top:30px; left:0px; width:190px; height:50px; } .contact-result .opening_hours { position: absolute; top:30px; left:200px; width:345px; height:60px; } .telephone_details h5 { display: block; width:184px; padding:0 0 0 6px; margin:0; height:16px; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#9a9a9a; text-transform:uppercase; } .telephone_details .dial_this { display: block; width:184px; padding:0 0 0 6px; height:16px; font:normal 11px/16px Arial, Helvetica, sans-serif; color:#2b2b2b; } .telephone_details .dial_number { font:normal 11px/16px Arial, Helvetica, sans-serif; color:#f60; margin-left:6px; } .telephone_details .dial_rate { font: normal 11px/16px Arial, Helvetica, sans-serif; color:#999; margin-left:6px; } .opening_hours h5 { display: block; width:339px; padding:0 0 0 6px; margin:0; height:16px; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#9a9a9a; text-transform:uppercase; } .opening_hours_info { display: block; width:339px; padding:0 0 0 6px; font:normal 11px/16px Arial, Helvetica, sans-serif; color:#2b2b2b; } /******************** faq overview page ************************************************/ /* for big search block, use same css code as support overview page, but extra class to give extra top margin */ #content #search_faqs.faq_search { margin-top:20px; } /* general class for icon on the left & padding & border */ .faq_anything { border-left:1px solid #c8c8c8; border-right:1px solid #c8c8c8; width:546px; margin:0; padding:13px 11px 10px 97px; background:transparent url(../images/faq-icon.gif) 18px 20px no-repeat; } .faq_anything p.question_answer { padding:0 0 6px; width:546px; margin:0; color:#f60; font:bold 11px/16px Arial, Helvetica, sans-serif; } .faq_anything ul { list-style:none; width:546px; margin:0; padding:0; border-top:1px solid #e5e5e5; } .faq_anything li { width:546px; margin:0; padding:0; border-bottom:1px solid #e5e5e5; float:left; display:inline; } .faq_anything li a { display:block; width:546px; margin:0; padding:5px 0; font:normal 11px/15px Arial, Helvetica, sans-serif; } .faq_anything li a:link, .faq_anything li a:visited { text-decoration:none; color:#787878; background-color:transparent; } .faq_anything li a:hover, .faq_anything li a:active { text-decoration:underline; color:#383838; background-color:#f8f8f8; } .faq_anything li a .date_faq { font:normal 10px/15px Arial, Helvetica, sans-serif; padding:0 0 0 20px; float:right; } .faq_anything li a:link .date_faq, .faq_anything li a:visited .date_faq { text-decoration:none; color:#989898; background-color:#fff; } .faq_anything li a:hover .date_faq, .faq_anything li a:active .date_faq { text-decoration:none; color:#585858; background-color:#f8f8f8; } /* specific styling for ordered lists, colors of the links stay the same, this is for testing only, not operational at the moment */ .faq_anything ol { width:546px; margin:0; padding:0; border-top:1px solid #e5e5e5; } .faq_anything ol li { width:546px; margin:0; padding:0; border-bottom:1px solid #e5e5e5; float:left; display:inline; } .faq_anything ol li a { display:block; width:546px; margin:0; padding:5px 0; font:normal 11px/15px Arial, Helvetica, sans-serif; } .faq_anything ol li a .date_faq { font:normal 10px/15px Arial, Helvetica, sans-serif; padding:0 0 0 20px; float:right; } .faq_anything h3 a { font:32px/32px Arial, Helvetica, sans-serif; padding:0 0 0 20px; position:relative; height:32px; width:30px; float:right; display:inline; } .faq_anything h3 a img { border:none; position:absolute; top:5px; left:20px;} /* shows the amount of search result, shown once on top of the search results */ .faq_anything .amount_search_results { font:bold 12px/16px Arial, Helvetica, sans-serif; color:#6c8b95; margin:0 0 16px; padding:0; } /* shows the category of the search result in the search results */ .faq_anything .search_result_list li a .search_result_devision { font: bold 11px/16px Arial, Helvetica, sans-serif; color:#7ca0ab; text-decoration:none; display:block; padding:0 0 0 3px; } .faq_anything .search_result_list li a:link .search_result_devision, .faq_anything .search_result_list li a:visited .search_result_devision { color:#f60; } .faq_anything .search_result_list li a:hover .search_result_devision, .faq_anything .search_result_list li a:active .search_result_devision { color:#f60; } /* undo the underlining of the anchor, so that only the two child's (span & strong) are underlined*/ .faq_anything .search_result_list li a, .faq_anything .search_result_list li a:link, .faq_anything .search_result_list li a:visited, .faq_anything .search_result_list li a:hover, .faq_anything .search_result_list li a:active { text-decoration:none; } /* underlining the span in the anchor */ .faq_anything .search_result_list li a .search_result_question { padding:0 0 0 3px; font-weight:bold; display:block; } .faq_anything .search_result_list li a:link .search_result_question, .faq_anything .search_result_list li a:visited .search_result_question { text-decoration:none; color:#585858; } .faq_anything .search_result_list li a:hover .search_result_question, .faq_anything .search_result_list li a:active .search_result_question { text-decoration:underline; color:#282828; } /* styling for the answers in the anchor search results */ .faq_anything .search_result_list li a .search_result_answer { display:block; padding:0 0 0 10px; text-decoration:none; font:11px/16px Arial, Helvetica, sans-serif; } .faq_anything .search_result_list li a:link .search_result_answer, .faq_anything .search_result_list li a:visited .search_result_answer { color:#585858; } .faq_anything .search_result_list li a:hover .search_result_answer, .faq_anything .search_result_list li a:active .search_result_answer { color:#383838; } /* styling of the highlighted results */ #content .wide_block .faq_anything .search_result_list li a .highlight { text-decoration:underline; } #content .wide_block .faq_anything .search_result_list li a:link .highlight, #content .wide_block .faq_anything .search_result_list li a:visited .highlight { color:#383838; } #content .wide_block .faq_anything .search_result_list li a:hover .highlight, #content .wide_block .faq_anything .search_result_list li a:active .highlight { color:#181818; } /* styling of the next and previous button */ .faq_anything .next_previous { padding:0; margin:8px 0 8px; width:546px; height:16px; position:relative; text-align:center; } .faq_anything .next_previous a { display:block; position:absolute; top:0; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#f60; background:transparent url(../images/previous_next_buttons.gif) top left no-repeat; } .faq_anything .next_previous a:link, .faq_anything .next_previous a:visited { text-decoration:none; } .faq_anything .next_previous a:hover, .faq_anything .next_previous a:active { text-decoration:underline; } .faq_anything .next_previous a.previous_button { left:0; padding:0 5px 0 15px; } .faq_anything .next_previous a.next_button { right:0; padding:0 15px 0 5px; } .faq_anything .next_previous a:link.previous_button, .faq_anything .next_previous a:visited.previous_button { background-position:left top; } .faq_anything .next_previous a:hover.previous_button, .faq_anything .next_previous a:active.previous_button { background-position:left -16px; } .faq_anything .next_previous a:link.next_button, .faq_anything .next_previous a:visited.next_button { background-position:right -32px; } .faq_anything .next_previous a:hover.next_button, .faq_anything .next_previous a:active.next_button { background-position:right -48px; } .faq_anything .next_previous strong { color:#6c8b95; font:bold 12px/16px Arial, Helvetica, sans-serif; } /* styling of the page links beneath */ .faq_anything .next_previous.with_page_numbers { text-align:left; } .faq_anything .next_previous .page_links { width:366px; margin:0 0 0 90px; display:block; text-align:center; font:bold 11px/16px Arial, Helvetica, sans-serif; color:#6c8b95; } .faq_anything .next_previous .page_links a { position:relative; top:auto; background-image:none; width:auto; display:inline; margin:0; padding:0 2px; } .faq_anything .next_previous .page_links strong { padding:0 2px; text-decoration:none; } /* shows the question in the search results */ .search_result_list li a .search_result_question { font:normal 11px/15px Arial, Helvetica, sans-serif; } /* breadcrumbs div */ .faq_breadcrumbs { margin:0 0 -16px; padding:3px 0 3px 40px; font:bold 12px/22px Arial, Helvetica, sans-serif; color:#6c8b95; width:616px; height:22px; background:#f8f8f8 url(../images/faq-nav-background.gif) top left no-repeat; } .faq_breadcrumbs a { padding:0 5px; margin:0; font:bold 12px/22px Arial, Helvetica, sans-serif; } .faq_breadcrumbs a:link, .faq_breadcrumbs a:visited { color:#6c8b95; text-decoration:none; } .faq_breadcrumbs a:hover, .faq_breadcrumbs a:active { color:#676767; text-decoration:underline;} /* faq listing */ /* div that holds the ul */ .faq_categories { border-left:1px solid #c8c8c8; border-right:1px solid #c8c8c8; width:632px; margin:0; padding:13px 11px 10px; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif;} .faq_categories a, .faq_categories a span { font:normal 11px/26px Arial, Helvetica, sans-serif; } .faq_categories li li a, .faq_categories li li a span { font:normal 11px/24px Arial, Helvetica, sans-serif; } .faq_categories li li li a, .faq_categories li li li a span { font:normal 11px/18px Arial, Helvetica, sans-serif; } .faq_categories a span { padding:0 0 0 16px; } .faq_categories a:link, .faq_categories a:visited { text-decoration:none; color:#585858; } .faq_categories a:hover, .faq_categories a:active { text-decoration:underline; color:#282828; } .faq_categories a:link span, .faq_categories a:visited span { text-decoration:none; color:#787878; } .faq_categories a:hover span, .faq_categories a:active span { text-decoration:underline; color:#484848; } .faq_categories ul {margin:0 ; padding:0; width:632px; list-style:none; } .faq_categories li { margin:0; padding:0 0 2px 40px; width:592px; float:left; display:inline; background: transparent url(../images/list-style-cat1.gif) 0 0 no-repeat; } .faq_categories ul ul { width:592px; } .faq_categories li li { width:557px; background-image:url(../images/list-style-cat2.gif); padding:0 0 2px 35px; } .faq_categories ul ul ul { width:557px; } .faq_categories li li li { width:527px; background-image:url(../images/list-style-cat3.gif); padding:0 0 2px 30px; } /******************** faq item apge ************************************************************/ .faq_item { border-left:1px solid #c8c8c8; border-right:1px solid #c8c8c8; width:492px; margin:0; padding:13px 11px 6px 151px; position:relative; } .faq_item p { color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; margin:0; padding:8px 0; float:left; clear:left; display:inline; } .faq_item a { color:#f60; text-decoration:underline; } .wide_block .faq_item h3 { font:bold 14px/16px Arial, Helvetica, sans-serif; float:left; clear:left; display:inline;} #rating_area { width:492px; height:106px; margin:24px 0 0; padding:0; background:#f2f2f2 url(../images/faq-vote-back.gif) top left no-repeat; position: relative; } #rating_area form { margin:0; padding:0; position:relative; width:492px; height:106px;} #rating_area #rating_area_within { margin:0; padding:0; position:relative; width:492px; height:106px;} #rating_area h4 { font:bold 13px/16px Arial, Helvetica, sans-serif; color:#676767; position:absolute; top:8px; left:14px; width:160px; height:16px; margin:0; padding:0; } #rating_area .average_rating { display:block; position:absolute; width:270px; height:15px; text-align:right; top:8px; right:14px; margin:0; padding:1px; font:normal 11px/15px Arial, Helvetica, sans-serif; } #rating_area .average_rating strong { color:#6c8b95; } #rating_area #vote_area { position:absolute; top:40px; left:0px; width:492px; height:20px; } #vote_area .useless { position:absolute; top:0px; left:22px; font:normal 12px/20px Arial, Helvetica, sans-serif; color:#5a747c; } #vote_area .usefull { position:absolute; top:0px; right:22px; font:normal 12px/20px Arial, Helvetica, sans-serif; color:#5a747c; } #vote_area input { position:absolute; top:0; } #vote_area label { position: absolute; top:0; font:bold 12px/20px Arial, Helvetica, sans-serif; color:#5a747c; } #vote_area p { margin:0; padding:0; text-align:center; } #vote_1 { left:169px; } #label_vote_1 { left:188px;} #vote_2 { left:205px; } #label_vote_2 { left:224px;} #vote_3 { left:241px; } #label_vote_3 { left:260px;} #vote_4 { left:277px; } #label_vote_4 { left:296px;} #vote_5 { left:313px; } #label_vote_5 { left:332px;} #vote_button_area { text-align:center; position:absolute; top:70px; left:0; width:492px; height:30px; } #vote_button_area #vote_submit { position:relative; margin:0 auto; } #print_button { position:absolute; top:0; left:0; background-image:url(../images/shiny-button-print.gif); } #pdf_button { position:absolute; top:31px; left:0; } .faq_anything #all_faq_button { margin:20px 0 10px; } .wide_block .faq_item h4 { font:bold 13px/16px Arial, Helvetica, sans-serif; margin:16px 0 0; color:#6c8b95; float:left; clear:left; display:inline; } .wide_block .faq_item h5 { font:bold 12px/16px Arial, Helvetica, sans-serif; margin:16px 0 0; color:#6c8b95; float:left; clear:left; display:inline; } .wide_block .faq_item h5 { font:bold 11px/16px Arial, Helvetica, sans-serif; margin:16px 0 0; color:#6c8b95; float:left; clear:left; display:inline; } .faq_item ul, .faq_item ol { margin:8px 0; padding:0; float:left; clear:left; display:inline; list-style:none; } .faq_item li { margin:2px 0; padding:0 0 0 16px; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; float:left; clear:left; display:inline; background: transparent url(../images/list-style-1.gif) 0 0 no-repeat; } .faq_item li li { background-image:url(../images/list-style-2.gif); margin:0 0 4px; } .wide_block .faq_item li h4, .wide_block .faq_item li h5, .wide_block .faq_item li h6 { margin:0; } .faq_item p, .faq_item ul, .faq_item ol, .faq_item h3, .faq_item h4, .faq_item h5, .faq_item h6 { width:466px; } .faq_item li p, .faq_item li ul, .faq_item li ol, .faq_item li h3, .faq_item li h4, .faq_item li h5, .faq_item li h6, .faq_item li { width:450px; } .faq_item li li p, .faq_item li li ul, .faq_item li li ol, .faq_item li li h3, .faq_item li li h4, .faq_item li li h5, .faq_item li li h6, .faq_item li li { width:434px; } #content .wide_block .faq_item li h3, #content .wide_block .faq_item li h4, #content .wide_block .faq_item li h5, #content .wide_block .faq_item li h6 {margin:0 0 2px;} .faq_item .highlight { background-color:transparent;} .faq_item li p.first { padding-top: 0;} .button_div_article { position:absolute; top:43px; left:12px; width:135px; height:70px; } .faq_item .warning {color:#f60; font:bold 11px/16px Arial, Helvetica, sans-serif;} .faq_item .warning strong { color:#f60; font-size:12px; } /* faq download div , used for explanations on how to install the download */ .faq_item .faq_download { float:left; display:inline; width:470px; height:67px; margin:8px 0; padding:0; position:relative; background:transparent url(../images/faq-download-div.gif) top left no-repeat; } .wide_block .faq_item .faq_download h5 { margin:0; padding:0; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#6c8b95; position:absolute; top:8px; left:12px; width:442px; } .wide_block .faq_item .download_size, .wide_block .faq_item .download_update { font:11px/16px Arial, Helvetica, sans-serif; color:#585858; display:block; } .wide_block .faq_item .download_size strong, .wide_block .faq_item .download_update strong { font:bold 12px/16px Arial, Helvetica, sans-serif; color:#707070; } .wide_block .faq_item .download_size { position:absolute; top:32px; left:12px; width:140px; height:16px; } .wide_block .faq_item .download_update { position:absolute; top:32px; left:142px; width:180px; height:16px; } .wide_block .faq_item a.button_shiny.download_button { position:absolute; top:28px; right:16px; left:auto; bottom:auto; color:#595959; font:normal 10px/24px Arial, Helvetica, sans-serif; text-decoration:none; } .faq_item .faq_download .highlight { background:transparent; } /* faq download div long , used for explanations on how to install the multiple downloads */ .faq_item .faq_download.more_downloads { float:left; display:inline; width:470px; margin:12px 0 0; padding:8px 0 0; position:relative; background:transparent url(../images/faq-download-div-top.gif) top left no-repeat; height:auto; } .faq_item .faq_download.more_downloads ul { list-style:none; width:470px; margin:0; padding:0; float:left; clear:none; height:auto; } .faq_item .faq_download.more_downloads ul li { float:left; display:inline; width:470px; height:50px; position:relative; margin:0; padding:0; background:none; } .wide_block .faq_item .faq_download.more_downloads h5 {top:0; left:12px; } .wide_block .faq_item .more_downloads .download_size { top:24px; left:12px; } .wide_block .faq_item .more_downloads .download_update { top:24px; left:142px; } .wide_block .faq_item .more_downloads a.button_shiny.download_button {top:20px; right:16px; } .after_many_downloads { float:left; height:14px; margin:0 0 8px; padding:0; width:470px; font:1px/14px Arial, Helvetica, sans-serif; display:inline; background:transparent url(../images/faq-download-div-bottom.gif) top left no-repeat; } /* center an image in the faq */ .center_image { margin:1px 0 16px; text-align:center; text-align:center; } .center_image img { margin:0 auto; } /* styling of faq tables */ .wide_block .faq_item table { width:474px; margin:0 0 16px; padding:0; clear:both; font:normal 11px/24px Arial, Helvetica, sans-serif; border-collapse:collapse; color:#585858; } .wide_block .faq_item table tr.first { border-bottom:2px solid #bfbfbf; -moz-border-radius: 0; } .wide_block .faq_item table tr, .wide_block .faq_item table th { height:24px; } .wide_block .faq_item td, .wide_block .faq_item td, .wide_block .faq_item th, .wide_block .faq_item th { border-right: 1px solid #d8d8d8; -moz-border-radius: 0; } .wide_block .faq_item th, .wide_block .faq_item td { text-align:left; padding:0 0 0 5px; width:152px; } .wide_block .faq_item tr.grey_row { background-color:#f1f1f1; } .wide_block .faq_item .center_table th, .wide_block .faq_item .center_table td { text-align:center; padding:0 3px 0 2px; } /* bluetooth compability list */ ul.devices { } #content ul.devices li { background:none; padding:0; width:140px; height:156px; margin:0 15px 16px 0; float:left; display:inline; clear:none; background:transparent url(../images/background-bluetooth.gif) top left no-repeat; } #content ul.devices li h5 { width:140px; padding:0 0 0; height:26px;} #content ul.devices li h5 a { width:140px; height:16px; display:block; padding:7px 0 3px; text-align:center; color:#6C8B95; text-decoration:none; } ul.devices li a { display:block; width:120px; height:120px; padding:0 10px 10px; margin:0; } ul.devices li a img { border:none; } #content ul.devices.nolinks li h5 { width:140px; padding:7px 0 3px; height:16px; text-align:center; color:#6C8B95; text-decoration:none; margin:0; } ul.devices.nolinks li img { width:120px; height:120px; margin:0 10px 10px; padding:0; } /******************** manuals overview page ************************************************/ .manual_item { border-left:1px solid #c8c8c8; border-right:1px solid #c8c8c8; width:525px; margin:0; padding:13px 11px 6px 118px; position:relative; background:transparent url(../images/manual-dots.gif) 11px bottom no-repeat; } .manual_item.last { background:none; } /*manual styling div, positions it absolute, & gives that glow around the thumb, no need to generate everythime a thumb with glow -- this will go faster ;) */ .manual_styling { width:85px; position:absolute; top:13px; left:17px; padding:0; margin:0; background:transparent url(../images/manual-picture-bottom.gif) bottom left no-repeat; } .manual_styling img { padding:5px 5px 0; margin:0; background:transparent url(../images/manual-picture-bottom.gif) bottom left no-repeat; background:transparent url(../images/manual-picture-top.gif) top left no-repeat; } /* h3 allready got it's styling from wide_block, now make the span inside it (extra comments) to the right font, otherwise inherited) */ .wide_block h3 span.manual_extra_info { color:#f60; font:normal 12px/20px Arial, Helvetica, sans-serif; } .wide_block h3 span.manual_extra_info a:link, .wide_block h3 span.manual_extra_info a:visited { color:#f60; } .wide_block h3 span.manual_extra_info a:hover, .wide_block h3 span.manual_extra_info a:active { color:#d75100; } .manual_item p { color:#585858; font:normal 12px/16px Arial, Helvetica, sans-serif; padding:0; margin:0; } /* div manual version, put into div for easier alignment (postions absolute) */ .manual_versions { position:relative; margin:16px 0 0; height:60px; width:525px; padding:0; } .manual_versions h4 { color:#585858; font:normal 12px/16px Arial, Helvetica, sans-serif; padding:0; margin:0; } .manual_versions select { position:absolute; top:22px; left:0; height:19px; width:114px; border:1px solid #ccc; font:12px/19px Arial, Helvetica, sans-serif; color:#585858; } /* two spans with additional info */ .manual_versions .update_manual, .manual_versions .size_manual { display:block; height:21px; width:140px; position:absolute; top:22px; font:12px/21px Arial, Helvetica, sans-serif; color:#585858; } .manual_versions .update_manual { width:140px; left:141px; } .manual_versions .size_manual { width:90px; left:295px; } .manual_versions a.button_shiny.manuals_button { position:absolute; top:20px; right:12px; left:auto; border:none; } /* styling for the manuals for the people who don't have javascript enabled */ .manual_versions_remove_me, .manual_versions_alone { position:relative; margin:16px 0 0; width:525px; padding:0; } .manual_versions_remove_me h4, .manual_versions_alone h4 { color:#585858; font:normal 12px/16px Arial, Helvetica, sans-serif; padding:0; margin:0; } .manual_versions_remove_me ul, .manual_versions_alone ul { width:525px; list-style:none; margin:6px 0 0; padding:0; } .manual_versions_remove_me ul li, .manual_versions_alone ul li { height:24px; width:525px; margin:0 0 4px; padding:0; position:relative; } .manual_versions_remove_me .language_name, .manual_versions_alone .language_name { position:absolute; top:2px; left:0; height:19px; font:12px/19px Arial, Helvetica, sans-serif; color:#585858; } /* two spans with additional info */ .manual_versions_remove_me .update_manual, .manual_versions_remove_me .size_manual, .manual_versions_alone .update_manual, .manual_versions_alone .size_manual { display:block; height:21px; width:140px; position:absolute; top:2px; font:12px/21px Arial, Helvetica, sans-serif; color:#585858; } .manual_versions_remove_me .update_manual, .manual_versions_alone .update_manual { width:140px; left:141px; } .manual_versions_remove_me .size_manual, .manual_versions_alone .size_manual { width:90px; left:295px; } .manual_versions_remove_me a.button_shiny.manuals_button, .manual_versions_alone a.button_shiny.manuals_button { position:absolute; top:0; right:12px; left:auto; border:none; } /******************** downloads overview page ************************************************/ .download_item { border-left:1px solid #c8c8c8; border-right:1px solid #c8c8c8; width:625px; margin:0; padding:13px 11px 6px 18px; position:relative; background:transparent url(../images/manual-dots.gif) 11px bottom no-repeat; } .download_item.last { background:none; } /*manual styling div, positions it absolute, & gives that glow around the thumb, no need to generate everythime a thumb with glow -- this will go faster ;) */ .downloads_details { width:150px; position:absolute; top:45px; left:34px; padding:0; margin:0; } span.update_downloads, span.size_downloads { font:11px/16px Arial, Helvetica, sans-serif; color:#585858; display:block; } span.update_downloads strong, span.size_downloads strong { font:bold 12px/16px Arial, Helvetica, sans-serif; color:#707070; } .downloads_details a.button_shiny.download_button { position:absolute; top:45px; left:0px; background-image:url(../images/shiny-button-download.gif); } /* styling of download area with dropdown */ .downloads_details.dropdown_download { width:150px; position:absolute; top:45px; left:34px; padding:0; margin:0; } .dropdown_download select { width:130px; height:16px; border:1px solid #ccc; padding:0 0 0 5px; font:normal 11px/16px Arial, Helvetica, sans-serif; color:#585858; margin:0 0 14px; } .downloads_details.dropdown_download a.button_shiny.download_button { position:absolute; top:75px; left:0px; background-image:url(../images/shiny-button-download.gif); } /* h3 allready got it's styling from wide_block, now make the span inside it (extra comments) to the right font, otherwise inherited) */ .download_item h4 { color: #898989; font:bold 12px/16px Arial, Helvetica, sans-serif; margin:0 0 16px 186px; padding:0; } .download_item p { color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; padding:0; margin:0 0 16px 186px; } .download_item a.faqlink { color:#f60; font:11px/16px Arial, Helvetica, sans-serif; } .download_item ul, .download_item ol { list-style:none; padding:0; margin:0 0 16px 186px; float:left; display:inline; clear:left; } .download_item ul ul, .download_item ol ul, .download_item ul ol, .download_item ol ol { margin:0 0 16px 0; } .download_item li { margin:0; padding:0 0 0 16px; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; float:left; clear:left; display:inline; background: transparent url(../images/list-style-1.gif) 0 0 no-repeat; } .download_item li li { background-image:url(../images/list-style-2.gif); margin:0 0 4px; } .download_item ul, .download_item ol { width: 420px;} .download_item ul ul, .download_item ol ul, .download_item ul ol, .download_item ol ol { width: 404px; } .download_item li { width: 404px; } .download_item li li { width: 388px; } /* extra markup for the rom version update to let your mio run miomap v3 on 168/268/268/269+/268+ */ #snForm { margin:0; padding:0; position:relative; width:150px; height:32px; } .download_serial_label { font: 12px/16px Arial, Helvetica, sans-serif; color:#5A747C; margin:0; padding:0; display:block; } #serialnumber_field { border:1px solid #ccc; padding:0 0 0 5px; width:83px; height:16px; font:11px/16px Arial, Helvetica, sans-serif; color:#585858; } #arrow_button { margin:0; padding:0; float:none; position:absolute; bottom:-4px; left:105px; display:block; width:18px; height:20px; } #arrow_button img { border:0; width:18px; height:20px; } #downloadDiv { position:absolute; top: 48px; left:0; width:150px; height:48px; } /***************** support news page ********************************/ .support_news_all .support_news_item { padding:13px 11px 32px 97px; } #content .support_news_all h3 { font:bold 16px/32px Arial, Helvetica, sans-serif; } .support_news_item ul, .support_news_item ol { list-style:none; padding:0; margin:0 0 16px; float:left; display:inline; clear:left; } .support_news_item li { margin:0; padding:0 0 2px 16px; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; float:left; clear:left; display:inline; background: transparent url(../images/list-style-1.gif) 0 0 no-repeat; } .support_news_item li li { background-image:url(../images/list-style-2.gif); margin:0 0 2px; } .support_news_item ul, .support_news_item ol { width: 546px;} .support_news_item ul ul, .download_item ul ol { width: 530px; } .support_news_item li { width: 530px; } .support_news_item li li { width: 514px; } .support_news_item h4 { font:bold 13px/16px Arial, Helvetica, sans-serif; margin:16px 0; color:#6c8b95; } /********************** MIo Club ************************************/ .wide_block.mio-club { margin-bottom:16px; margin-top:16px; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; } .wide_block.mio-club.first { margin-top:26px; } .wide_block.mio-club.last { margin-bottom:0;} .wide_block.mio-club h3 { color:#6c8b95; font:bold 14px/16px Arial, Helvetica, sans-serif; margin:0 28px; padding:16px 0; } .wide_block.mio-club h4 { color:#6c8b95; font:bold 13px/16px Arial, Helvetica, sans-serif; margin:0 28px; padding:16px 0; } .wide_block.mio-club p { margin:0 28px 16px; padding:0; } .mio-club .inside_mio-club { border-left:1px solid #c8c8c8; border-right:1px solid #c8c8c8; width:654px; margin:0; padding:0; } /* the list with backgrounds */ #middle #content .backgrounds_list { width:654px; } #middle #content .backgrounds_list, #middle #content .backgrounds_list .background_choise_remove_me ul { list-style:none; margin:0; padding:0; } #middle #content .backgrounds_list li { float:left; display:inline; margin:0 28px 28px; padding:0; width:162px; background:none; clear:none; } #middle #content .backgrounds_list li.last_of_the_row { margin:0 0 28px 28px;; } #middle #content .backgrounds_list .background_choise_remove_me li { margin:0; clear:left;} #middle #content .backgrounds_list h4 { color:#7f7f7f; font:bold 12px/16px Arial, Helvetica, sans-serif; margin:0; padding:0 0 2px; } /* the list with fotoshoots */ #middle #content .photo_list { width:654px; } #middle #content .photo_list { list-style:none; margin:0; padding:0; } #middle #content .photo_list li { float:left; display:inline; margin:0 28px 28px; padding:0; width:162px; background:none; clear:none; } #middle #content .photo_list li a img { border:none;} #middle #content .photo_list li.last_of_the_row { margin:0 0 28px 28px;; } #middle #content .photo_list h4 { color:#7f7f7f; font:bold 12px/16px Arial, Helvetica, sans-serif; margin:0; padding:0 0 2px; } .inside_mio-club ul, .inside_mio-club ol { margin:0 28px; padding:0; list-style:none; } .inside_mio-club li { margin:2px 0; padding:0 0 0 16px; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; float:left; clear:left; display:inline; background: transparent url(../images/list-style-1.gif) 0 0 no-repeat; float:left; display:inline; } .inside_mio-club li li { background-image:url(../images/list-style-2.gif); margin:0 0 4px; } .inside_mio-club ul, .inside_mio-club ol { width:598px; } .inside_mio-club li ul, .inside_mio-club li ol, .inside_mio-club li { width:582px; } .inside_mio-club li li ul, .inside_mio-club li li ol, .inside_mio-club li li { width:566px; } .background_choise { position:relative; width:162px; height:23px; margin:5px 0 0; } .background_choise select { position:absolute; top:2px; left:0; border:1px solid #ccc; width:77px; padding:0 0 0 0; height:16px; font:11px/16px Arial, Helvetica, sans-serif; color:#737373; } #content .background_choise_remove_me ul, #content .background_choise_remove_me ol { margin:0; padding:0; list-style:none; width:162px; } #content .background_choise_remove_me li { height:23px; position:relative; margin:2px 0; font:11px/23px Arial, Helvetica, sans-serif; } a.button.small_download { padding: 0 0 0 15px; width:60px; position:absolute; top:0; right:0; } a.button.small_download span { padding: 0 9px 3px 1px; font-size:10px; } a.button.small_download:link, a.button.small_download:visited { background: transparent url(../images/button-download-left.gif) top left no-repeat; color:#ff8331; } a.button.small_download:hover, a.button.small_download:active { background: transparent url(../images/button-download-left.gif) 0 -23px no-repeat; color:#f60; } /* themes download size span */ .themes_download { font:11px/23px Arial, Helvetica, sans-serif; } /* twee kleine blokken naast elkaar, middle houdt de twee aflijningen gelijk */ .two_small_blocks { width:656px; background:transparent url(../images/small-divs-middle.gif) top left repeat-y; margin:0 0 16px; } .two_small_blocks.last { margin-bottom:0;} .two_small_blocks.first { margin-top:26px; } /* small block */ .small_block { width:320px; margin:0; padding:0; float:left; display:inline; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; } .small_block.left_block { margin-left:16px; } #content .small_block h2 { margin:0; padding:7px 0 0 24px; width:296px; height:21px; font:bold 14px/21px Arial, Helvetica, sans-serif; color:#fff; background:#a3a3a3 url(../images/small-div-top.gif) top left no-repeat; } #content .small_block h3 { color:#6c8b95; font:bold 14px/16px Arial, Helvetica, sans-serif; margin:0 28px; padding:16px 0; } #content .small_block p { margin:0 28px 16px; padding:0; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; } .icon_small_block { margin:0; padding:0 0 0 80px; width:240px; text-align:left; } #content .small_block .icon_small_block p, #content .small_block .icon_small_block h3 { margin-left:0; margin-right:24px; } /* styling of the mio club small blocks on frontpage */ .smaller_club_block { width:319px; padding:0; margin:0; float:left; } .right_smaller_club_block { margin-left:16px; } .form_login div { width:266px; height:32px; } .form_login label { width:70px; height:16px; margin:0 0 0 16px; padding:0; font:bold 11px/16px Arial, Helvetica, sans-serif; float:left; display:inline; } .form_login input { width:160px; height:14px; margin:0 16px 0 0; border:1px solid #999; color:#707070; padding:0 0 0 2px; font:bold 11px/16px Arial, Helvetica, sans-serif; font:normal 11px/14px Arial, Helvetica, sans-serif; float:left; display:inline; } .form_login div.login_remember { position:relative; height:16px;} .form_login .login_remember label { width:100px; position:absolute; left:16px; top:0; margin:0; padding:0; } .form_login .login_remember input { position:absolute; left:116px; top:2px; width:auto; height:auto; padding:0; border:none; height:14px; width:14px;} .form_login .login_remember .button { position:absolute; top:-2px; right:16px; } .two_small_blocks strong { color:#707070; } /* styling of the mio club wide login */ .highlight_block.wide_login { width:266px; background:#ebebeb url(../images/grey-div-small-top.gif) top left no-repeat; margin:0 0 15px 28px; padding:16px 0 0; position:relative; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif;; } .form_login div { width:266px; height:32px; position:relative; } .form_login label { width:70px; height:16px; margin:0 0 0 16px; padding:0; font:bold 11px/16px Arial, Helvetica, sans-serif; float:left; display:inline; } .form_login input { width:160px; height:14px; margin:0 16px 0 0; border:1px solid #999; color:#707070; padding:0 0 0 2px; font:bold 11px/16px Arial, Helvetica, sans-serif; font:normal 11px/14px Arial, Helvetica, sans-serif; float:left; display:inline; } .form_login div.login_remember { position:relative; height:16px;} .form_login .login_remember label { width:100px; position:absolute; left:16px; top:0; margin:0; padding:0; } .form_login .login_remember input { position:absolute; left:116px; top:2px; width:auto; height:auto; padding:0; border:none; height:14px; width:14px;} .form_login .login_remember .button { position:absolute; top:-2px; right:14px; } .highlight_block { width:266px; background:#ebebeb url(../images/grey-div-small-top.gif) top left no-repeat; margin:0 0 15px 28px; padding:16px 0 0; position:relative; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif;; } .clear_div.end_highlight_block { height:16px; padding:0; margin:0; background:transparent url(../images/grey-div-small-bottom.gif) bottom left no-repeat; } .small_block a { color:#f60; } .highlight_block h4 { width:234px; margin:16px 16px 0; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#707070; } .highlight_block ul { } /* styling of hightlight block on mio club homepage */ .icon_small_block .highlight_block { width:224px; background:#ebebeb url(../images/club-small-grey-top.gif) top left no-repeat; margin:0; padding:16px 0 0; position:relative; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif;; } .icon_small_block .clear_div.end_highlight_block { height:16px; padding:0; margin:0; background:transparent url(../images/club-small-grey-bottom.gif) bottom left no-repeat; } .icon_small_block span.status_status { width:204px; } .icon_small_block span.status_status_OFF { width:204px; } .icon_small_block span.status_status_OFF strong { color:#f60; } .icon_small_block span.status_status { width:204px; } .icon_small_block span.status_account { width:154px; } .device_support_links { margin:0 28px; padding:0; height:16px; position:relative; height:32px; } #content .device_support_links .clear_div {height:32px; } .device_support_links select { height:16px; width:85px; padding:0 0 0 5px; position:absolute; top:15px; left:16px; border:1px solid #ccc; color:#777; font:bold 11px/16px Arial, Helvetica, sans-serif; } .device_support_links .button { position:absolute; right:14px; top:14px; } /*styling of the mio club front page goodies wide block*/ #content .wide_block .icon_wide_block { margin:0; padding:0 0 0 80px; width:574px; text-align:left; } #content .wide_block .inside_mio-club.icon_wide_block h3 { margin:0 28px 0 0; } #content .wide_block .inside_mio-club.icon_wide_block p { margin:0 28px 16px 0; } #content .wide_block.mio-club { background:transparent url(../images/device-overview-wide-bottom.gif) bottom left no-repeat; } /* styling of the mio-club frontpage buttons */ .mio-club-button { width:230px; height:32px; padding:0 0 5px; margin:8px 0; background:transparent url(../images/mio-club-button.gif) top left no-repeat; display:block; cursor:pointer; color:#f60; font:bold 12px/32px Arial, Helvetica, sans-serif; text-decoration:none; text-align:center; } .mio-club-button:link, .mio-club-button:visited { background-position:0px 0px; } .mio-club-button:hover, .mio-club-button:active { background-position:0px -37px; } #middle #content .before_club_button { margin-bottom:24px; } /* highlighted block (zo ne afgeronde grijze in de mio club */ .highlight_block { width:266px; background:#ebebeb url(../images/grey-div-small-top.gif) top left no-repeat; margin:0 0 15px 28px; padding:16px 0 0; position:relative; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif;; } .clear_div.end_highlight_block { height:16px; padding:0; margin:0; background:transparent url(../images/grey-div-small-bottom.gif) bottom left no-repeat; } .small_block a { color:#f60; } .highlight_block h4 { width:234px; margin:16px 16px 0; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#707070; } /* styling van de login from */ .form_login { margin:0; padding:0; } #middle #content .highlight_block p { margin-left:16px; margin-right:16px; } p.login_message { color:#f60; font-weight:bold; } /* eerste highligt van de speedcams page, account status */ .highlight_block.status_highlight { position:relative; } span.status_status { position:relative; left:12px; display:block; height:32px; width:242px; padding:0; } span.status_status_OFF { position:relative; left:12px; display:block; height:16px; width:242px; padding:0; color:#f60; } span.status_status_OFF strong { color:#f60; } span.status_status { position:relative; left:12px; display:block; height:32px; width:242px; padding:0; } span.status_account { height:32px; padding:0 0 0 2px; display:block; width:192px; position:absolute; top:0; left:50px; } span.status_account strong { display:block; height:16px; } span.status_account span { display:block; height:16px; } span.status_account span strong { display:inline; height:auto; } /* forget password in highlight block */ .forgot_password { color:#f60; font:bold 11px/16px Arial, Helvetica, sans-serif; margin:0 28px; } .create_account { color:#f60; font:bold 11px/16px Arial, Helvetica, sans-serif; margin:0 28px 16px; display:block; width:200px; height:16px; } /* styling lists in highlight block */ .highlight_block ul { list-style:none; padding:0; margin:0 16px; width:234px; } .highlight_block ul li { margin:0; float:left; clear:left; padding:0; width:234px; background-image:none; } .highlight_block ul.small_icon_list { height:48px; position:relative; } /* styling van de miosync highlight block */ .download_icon { position:absolute; top:0; right:0; text-align:right; width:54px; height:47px; } #content .small_block p.center_me { height:24px; width:202px; float:none; clear:both; text-align:center; margin:0; padding:13px 16px 0; } #content .small_block p.center_me .button_shiny.download_button { margin:0 auto; position:relative; top:0; left:0; bottom:auto; color:#595959; background-image:url(../images/shiny-button-download-grey.gif); } #content .small_block p.center_me .button_shiny.download_button span { background-image:url(../images/shiny-button-right-grey.gif); } /* adoptation for Mio Update tool */ #content .smaller_club_block p.center_me { height:24px; width:202px; float:none; clear:both; text-align:center; margin:0; padding:13px 16px 0; } #content .smaller_club_block p.center_me .button_shiny.download_button { margin:0 auto; position:relative; top:0; left:0; bottom:auto; color:#595959; background-image:url(../images/shiny-button-download-grey.gif); } #content .smaller_club_block p.center_me .button_shiny.download_button span { background-image:url(../images/shiny-button-right-grey.gif); } .wide_block.mio-club .highlight_block h4 { width:234px; margin:16px 16px 0; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#707070; padding:0;} .wide_block.mio-club a { color:#f60; } /* new css for device dropdown in speedcam updae tool */ #speedcamDownloadForm { padding:0; clear:both; margin:16px 16px 0; width:234px; height:32px; position:relative; } #speedcamDownloadForm select { height:16px; width:105px; margin:0; padding:0 0 0 5px; border:1px solid #ccc; font:11px/16px Arial, Helvetica, sans-serif; color:#858585; width: } #speedcamDownloadForm a { height:20px; width:18px; margin-left:16px; position:absolute; top:0; left:101px; } #speedcamDownloadForm a img { border:0; } /* styling of wider block & table */ .wide_block .inside_mio-club h3 { color:#6c8b95; font:bold 14px/16px Arial, Helvetica, sans-serif; margin:0 28px; padding:16px 0; } .mio_colored_table { width:598px; margin:0 28px 16px; padding:0; font:normal 11px/24px Arial, Helvetica, sans-serif; border-collapse:collapse; } .mio_colored_table tr.first { border-bottom:2px solid #bfbfbf; -moz-border-radius: 0; } .mio_colored_table tr, .mio_colored_table th { height:24px; } td.country_table, td.latest_table, th.country_table, th.latest_table { border-right: 1px solid #d8d8d8; -moz-border-radius: 0; } th.country_table, td.country_table { text-align:left; width:140px; padding:0 0 0 5px; } th.latest_table, td.latest_table { text-align:center; width:270px; } th.total_table, td.total_table { text-align:center; width:178px; } tr.grey_row { background-color:#f1f1f1; } /* mio homepage logged in navigation top tips styling */ #content .icon_small_block ul.functions_list { width:216px; margin:0 24px 0 0; padding:0; list-style:none; } #content .icon_small_block ul.functions_list li { width:200px; height:auto; background-repeat:no-repeat; padding:0 0 0 16px; margin:0 0 16px; } #content .icon_small_block ul.functions_list li a { color: #707070; font-weight:normal; } #content .icon_small_block ul.functions_list li a:link, #content .icon_small_block ul.functions_list li a:visited { text-decoration:none; } #content .icon_small_block ul.functions_list li a:hover, #content .icon_small_block ul.functions_list li a:active { text-decoration:underline; } /* mio account styling */ ul.registered_devices { width:234px; } ul.registered_devices li { width:218px; } ul.registered_devices strong { font:bold 12px/16px Arial, Helvetica, sans-serif; color:#f60; margin:0 5px 0 0; } ul.registered_devices span { font:11px/16px Arial, Helvetica, sans-serif; } ul.registered_devices span.small { font:10px/16px Arial, Helvetica, sans-serif; } ul.registered_devices span strong { font:bold 11px/16px Arial, Helvetica, sans-serif; color:#707070; letter-spacing:1px; margin:0; } #content ul.functions_list{ width:263px; } #content ul.functions_list li { background-image:url(../images/list-style-2.gif); background-position:0 1px; width:247px; margin:0; height:16px; } ul.functions_list a { font:bold 11px/16px Arial, Helvetica, sans-serif; color:#f60; } .newsletter_subscription span { width:234px; margin:0 16px; display:block; font: 11px/16px Arial, Helvetica, sans-serif; } #content .account_settings label { width:100px; } #content .account_settings input { width: 130px; font:11px/16px Arial, Helvetica, sans-serif; color:#707070; } #content .account_settings select { width: 134px; height:16px; border:1px solid #999; position: absolute; top:-1px; right:16px; font:11px/16px Arial, Helvetica, sans-serif; color:#707070; } #content .account_settings.password label { width:130px; } #content .account_settings.password input { width: 100px; } #content .account_settings.newsletter_language select { width:149px; } #content .account_settings.newsletter_language input { width: 85px; } #content .account_settings.newsletter_language.subscribe select { width: 119px; } #content .account_settings.email_field label { width:50px; } #content .account_settings.email_field input { width: 180px; } /* mio create account styling */ .wide_highlight { width:600px; background:#ebebeb url(../images/grey-div-wide-top.gif) top left no-repeat; margin:0 0 15px 28px; padding:16px 0 0; position:relative; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; } #content .clear_div.end_highlight_block_wide { width:600px; height:16px; padding:0; margin:0; background:#EBEBEB url(../images/grey-div-wide-bottom.gif) bottom left no-repeat; } .wide_highlight h4 { width:234px; margin:16px 16px 0; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#707070; } .wide_highlight .form_login { background-color:#EBEBEB; } .wide_highlight .form_login div { width:568px; margin:0 16px; height:32px; position:relative; float:left; clear:left; display:inline; } .wide_highlight .form_login label { width:200px; text-align:right; height:16px; margin:0 16px 0 0; padding:0; font:bold 11px/16px Arial, Helvetica, sans-serif; float:left; display:inline; } .wide_highlight .form_login input { width:200px; height:14px; margin:0; border:1px solid #999; color:#707070; padding:0 0 0 2px; font:normal 11px/14px Arial, Helvetica, sans-serif; float:left; display:inline; } .wide_highlight .form_login select { width:206px; height:16px; margin:0; position:absolute; top:-1px; left:216px; border:1px solid #999; color:#707070; padding:0 0 0 2px; font:normal 11px/16px Arial, Helvetica, sans-serif; font:normal 11px/14px Arial, Helvetica, sans-serif; float:left; display:inline; } .wide_highlight .form_login div.login_remember { position:relative; height:16px; margin:0 16px; padding:0;} .wide_highlight .form_login .login_remember label { width:100px; position:absolute; left:16px; top:0; margin:0; padding:0; } .wide_highlight .form_login .login_remember input { position:absolute; left:116px; top:2px; width:auto; height:auto; padding:0; border:none; height:14px; width:14px;} .wide_highlight .form_login .login_remember .button { position:absolute; top:-2px; left:215px; right:auto; } .wide_highlight .form_login div.radio_buttons { width:440px; margin-left:144px;} .wide_highlight .form_login div.radio_buttons input { width:auto; height:auto; margin:0; border:none; color:#707070; font:bold 11px/16px Arial, Helvetica, sans-serif; float:left; display:inline; } .wide_highlight .form_login div.radio_buttons label { width:72px; text-align:right; height:16px; margin:0 16px 0 0; padding:0; font:bold 11px/16px Arial, Helvetica, sans-serif; float:left; display:inline; } .wide_highlight .form_login div.radio_buttons span { width:200px; text-align:right; height:16px; margin:0 16px 0 0; padding:0; font:bold 11px/16px Arial, Helvetica, sans-serif; float:left; display:inline; display:block; } .wide_highlight .form_login { margin:0; padding:0; } /* navigation top tips listing page styling */ #middle #content .top_tips_listing { list-style:none; width:600px; } #middle #content .top_tips_listing li { background:none; padding:16px 0 17px 100px; width:500px; margin:0; background:transparent url(../images/manual-dots.gif) bottom left no-repeat; } #middle #content .top_tips_listing li.last { background:none; padding:16px 0 16px 100px; } /* styling for not logged in, span before the read more link (limited) */ .limited_link { font:bold 11px/16px Arial, Helvetica, sans-serif; color:#6C8B95; } #middle #content .top_tips_listing li h3 { padding-bottom:0; padding-top:0; margin:0 28px 0 0; } /* date & image in one div, only div with a real hight, desired for absolute positioning, damn you IE, damn you ... */ .date_image_top_tip { width:500px; position:relative; height:16px; } .date_image_top_tip span { color:#6c8b95; font:11px/16px Arial, Helvetica, sans-serif; } .date_image_top_tip a { position:absolute; top:-16px; left:-100px; } .date_image_top_tip a img { border:none; } #middle #content .top_tips_listing p { padding:0; margin:0 28px 0 0; } #middle #content .top_tips_listing a { color:#f60; font:bold 11px/16px Arial, Helvetica, sans-serif; } /* navigation toptip styling */ .left_image { float:left; margin:2px 16px 0 28px; } .right_image { float:right; margin:2px 28px 0 16px; } li .right_image { margin:2px 0 0 16px; } li .left_image { margin:2px 16px 0 0; } .inside_mio-club strong { color:#707070; } #content .inside_mio-club ul li h4, #content .inside_mio-club ol li h4 { color:#6c8b95; font:bold 11px/16px Arial, Helvetica, sans-serif; margin:0; padding:0;} #content .inside_mio-club ul li h3, #content .inside_mio-club ol li h3 { margin:0; padding:0 0 16px;} .inside_mio-club ul li ol, .inside_mio-club ul li ul, .inside_mio-club ol li ul, .inside_mio-club ol li ol { margin:0; } #content .inside_mio-club ul li p, #content .inside_mio-club ol li p { margin-left:0; } .captivate_movie { text-align:center; margin:0 28px 16px; padding:0; border:1px solid #878787; padding:16px; } .captivate_movie div { margin:0 auto; } /*styling what why */ .what_why { list-style:none; margin:0 28px; padding:0; } #content .what_why li { margin:0 0 16px; padding:0; width:598px; background:none;} #content .what_why li .what { background:#fafafa url(../images/top-tips/what.gif) top left no-repeat; padding:16px 18px 16px 16px; font:bold 11px/12px Arial, Helvetica, sans-serif; color:#707070} #content .what_why li .what div { background:transparent url(../images/top-tips/what-question.gif) 0 -2px no-repeat; padding:0 0 0 72px; margin:0; } #content .what_why li .why { background:#fafafa url(../images/top-tips/why.gif) bottom left no-repeat; padding:0 18px 16px 16px; } #content .what_why li .why div { background:transparent url(../images/top-tips/why-question.gif) 0 -2px no-repeat; padding:0 0 0 72px; margin:0; } #content .what_why li li { margin:2px 0; padding:0 0 0 16px; width:598px; background: transparent url(../images/list-style-2.gif) 0 0 no-repeat; width:478px;} #content .what_why li ul, #content .what_why li ol { margin:0 0 16px; width:494px; } #content .off_eachother li { margin:0 0 16px; } #content .center_image { text-align:center; } #content .center_image img { margin:0 auto; } #content ul.picture_next_to_me { width:420px; margin-left:0; float:left; display:inline; } #content ul.picture_next_to_me li { width:404px; } .inside_mio-club li li li ul, .inside_mio-club li li li ol, .inside_mio-club li li li { width:550px; } .inside_mio-club ul ul, .inside_mio-club ol ol, #content .inside_mio-club ol p, #content .inside_mio-club ul p { margin-left:0; margin-right:0;} /* einde van de twee blokken */ .clear_div.end_two_small_blocks { height:8px; width:656px; margin:0; padding:0; background:transparent url(../images/small-divs-bottom.gif) bottom left no-repeat; } /* styling van de div met info over te bekijken content voor club leden (als je niet ingelogd bent) */ .only_with_mio_account { list-style:none; margin:0 28px; padding:0; background:transparent url(../images/top-tips/what.gif) top left no-repeat } #content .only_with_mio_account li li { margin:2px 0; padding:0 0 0 16px; width:598px; background: transparent url(../images/list-style-2.gif) 0 0 no-repeat; width:478px;} #content .only_with_mio_account li ul, #content .only_with_mio_account li ol { margin:0 0 16px; width:494px; } .only_with_mio_account .clear_div { height:16px; background:transparent url(../images/top-tips/why.gif) bottom left no-repeat; } #content .only_with_mio_account h3 { color:#f60; } .only_with_mio_account a { display:block; margin:0 28px; font:bold 11px/16px Arial, Helvetica, sans-serif; color:#f60; float:left; display:inline } /* mio goodies big buttons style */ .mio-club-big-button { width:269px; height:132px; display:block; position:relative; margin:16px 28px 16px 23px; padding:0; text-decoration:none; background:transparent url(../images/mio-club-big-button.gif) top left no-repeat; } .mio-club-big-button:link, .mio-club-big-button:visited { background-position: 0px 0px; } .mio-club-big-button:hover, .mio-club-big-button:active { background-position: 0px -132px;} .mio-club-big-button span { display:block; font:bold 12px/16px Arial, Helvetica, sans-serif; width:130px; padding:0; margin:0; cursor:pointer; position:absolute; top:16px; left:16px; } .mio-club-big-button img { position:absolute; right:6px; bottom:16px; border:none; } /* mio club newsletters */ .inside_mio-club.newsletter_inside { background:transparent url(../images/newsletters/newsletter-middle.jpg) 585px 360px no-repeat;} #middle #content div#newsletter { margin: 0 27px 16px; width:596px; border:1px solid #ddd; background:transparent url(../images/newsletters/newsletter-header.jpg) top left no-repeat; font:11px/16px Arial, Helvetica, sans-serif; color:#707070;} #content #newsletter ul.newsletter_header { width:337px; margin:60px 40px 60px 219px; } #content #newsletter ul.newsletter_header li { width:323px; margin:2px 0; padding-left:16px;} #content #newsletter a { font:11px/16px Arial, Helvetica, sans-serif; color:#f60; } #content #newsletter ul.newsletter_content { margin:0; padding:0 40px; width:516px; list-style:none; } #content #newsletter ul.newsletter_content li { float:left; display:inline; clear:left; width:516px; background:transparent url(../images/manual-dots.gif) bottom left no-repeat; list-style:none; padding:0 0 1px; margin:16px 0 0; } #content #newsletter h3 { font:normal 18px/32px Arial, Helvetica, sans-serif; color:#ff613c; padding:0; margin:0 0 16px; } #content #newsletter ul.newsletter_content li a.list_image { width:100px; height:100px; padding:0; margin:0; display:block; float:left; } #content #newsletter ul.newsletter_content li a.list_image img { width:100px; height:100px; border:none; } #content #newsletter ul.newsletter_content li .right_align { margin:0 0 0 16px; width:400px; float:left; display:inline; } #content #newsletter ul.newsletter_content li .right_align ol { margin:0; padding:0; width:400px; } #content #newsletter ul.newsletter_content li .right_align ol li { margin:0 0 16px; padding:0; width:400px; position:relative; background:none; } #content #newsletter ul.newsletter_content li .right_align ol li strong { color:#f60; position:absolute; top:0; left:0; width:40px; } #content #newsletter ul.newsletter_content li .right_align ol li strong { color:#f60; position:absolute; top:0; left:0; width:40px; } #content #newsletter ul.newsletter_content li .right_align ol li span { margin:0 0 0 40px; padding:0; display:block; } #content #newsletter ul.newsletter_content li .right_align ol li a { margin:0 0 0 40px; padding:0; display:block; width:140px; height:16px; } .newsletter_link { text-align:right; } .footer_newsletter { width:596px; height:267px; margin:0 0; background:transparent url(../images/newsletters/mio-flower-left.gif) 0px 45px no-repeat; position:relative; } .footer_newsletter a.footer_image { display:block; width:318px; height:108px; position:absolute; bottom:0; right:0; } .footer_newsletter a.footer_image img { border:0; height:108px; width:318px; } #content #newsletter ul.newsletter_content li ul.desktop_themes, #content #newsletter ul.newsletter_content li ul.four_backgrounds { margin:0; padding:0; width:516px; } #content #newsletter ul.newsletter_content li ul.desktop_themes li { margin:0 108px 0 0; padding:0; width:516px; width:100px; float:left; display:inline; clear:none; background:none; } #content #newsletter ul.newsletter_content li ul.desktop_themes li.last, #content #newsletter ul.newsletter_content li ul.four_backgrounds li.last { margin:0; } #content #newsletter ul.newsletter_content li ul.desktop_themes li a img, #content #newsletter ul.newsletter_content li ul.four_backgrounds li a img { border:0; } #content #newsletter ul.newsletter_content li ul.four_backgrounds li { margin:0 38px 0 0; padding:0; width:100px; float:left; display:inline; clear:none; background:none; } #content #newsletter ul.newsletter_content li ul.four_backgrounds li strong { display:block; width:100px; text-align:center; } /* newsletter listing ul */ .newsletter_listing li { background-image:url(../images/list-style-2.gif) } .newsletter_listing li a { font:bold 11px/16px Arial, Helvetica, sans-serif; color:#909090; text-decoration:none; } .newsletter_listing li a strong { font:bold 12px/16px Arial, Helvetica, sans-serif; color:#f60; text-decoration:underline; } /* poll */ .poll_item { margin:0; float:left; clear:left; width:546px; padding:0 28px; } .wide_highlight h5 { font:bold 12px/16px Arial, Helvetica, sans-serif; color:707070; margin:16px 0 0; } .wide_highlight .percentage_poll { margin:0 0 0 25px; } /****************************************************** WHERE TO BUY ****************************************************/ .wide_highlight form { margin:0; padding:0; position:relative; width:600px; height:48px; } .where_to_buy_block { margin:0; padding:0; width:142px; height:48px; position:absolute; top:0; } .where_to_buy_block label { display:block; width:142px; margin:0; padding:0; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#6C8B95; } .where_to_buy_block select { border: 1px solid #999; width:142px; height:22px; margin-top:6px; font:normal 12px/16px Arial, Helvetica, sans-serif; color:#585858; } .preloader_wtb { position:absolute; top:28px; } #country_block { left:28px; } #country_block .preloader_wtb { right:-18px; } #region_block { left:193px;} #region_block .preloader_wtb { right:-18px; } #city_block { right:100px; } #go_dealers { margin:0; padding:0; width:51px; height:18px; position:absolute; top:22px; right:28px; } #go_dealers a img { border:none; } #content .dealer_list { margin:0; width:654px; } #content .dealer_list li { float:left; display:inline; clear:none; width:149px; height:122px; padding:8px 16px 0; margin:0 0 16px 28px; background:transparent url(../images/dealer-background.gif) top left no-repeat; } #content .dealer_list li.big{ float:left; display:inline; clear:none; width:149px; height:263px; padding:8px 16px 0; margin:0 0 16px 28px; background:transparent url(../images/dealer-background-long.gif) top left no-repeat; } #content .dealer_list li.big img { display:block; margin:0 0 16px; padding:0; } #content .dealer_list li h5 { margin:0; padding:0; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#f60; } #content .dealer_list li adress { font:normal 11px/px Arial, Helvetica, sans-serif; color:#585858; } #content .dealer_list li span { font: normal 11px/px Arial, Helvetica, sans-serif; color:#585858; display:block; width:149px; } .smaller_retailers { width:285px; padding:0; margin:0 0 0 28px; float:left; display:inline; } #content .smaller_retailers h4 { width:267px; font:bold 13px/16px Arial, Helvetica, sans-serif; color:#6c8b95; padding:0 0 16px; margin:0; } .smaller_retailers ul { width:267px; margin:0 16px; padding:0; list-style:none; } .smaller_retailers ul li { width:251px; margin:0 0 2px; padding:0 0 0 16px; height:16px; float:left; display:inline; background:transparent url(../images/list-style-1.gif) top left no-repeat; } .smaller_retailers ul li a { font:bold 12px/16px Arial, Helvetica, sans-serif; color:#f60; } /*********************************************************ERROR CODE ****************************************************/ .errorLabel { padding-left: 16px; } .fixedLabel{ padding-left: 6px; } #errorwarning{ display:none; width:600px; height:16px; margin:16px 0 16px 28px; text-align:center; font:bold 11px/16px Arial, Helvetica, sans-serif; color:#eb703b; } #errorwarning span { text-align:center; display:block; width:568px; position:absolute; font:bold 11px/16px Arial, Helvetica, sans-serif; color:#eb703b; top:16px; left:0; } .error_fault{ width:600px; height:16px; margin:16px 0 16px 28px; text-align:center; font:bold 11px/16px Arial, Helvetica, sans-serif; color:#eb703b; } #genderLm { color: #eb703b; display:none; font: bold 11px/16px Arial, Helvetica, sans-serif; margin:0 0 0 -16px; display:block; width:100px; height:16px; float:right; } .errortxt{ color: #eb703b; display:none; font: bold 11px/16px Arial, Helvetica, sans-serif; margin:0 0 0 10px; display:block; width:130px; height:16px; float:left; } .requiredcontainer{ color:#999999; text-align:right; float:right; width:75px; } #email_form .errortxt { width:60px; } #email_form #first_namem, #email_form #last_namem, #email_form #emailm, #email_form #shop_countrym, #email_form #modelm, #email_form #serial_numm, #email_form #subjectm, #email_form #commentm, #email_form #country_errors .errortxt, #email_form #device_errors .errortxt { position:absolute; top:9px; line-height:19px;} #email_form #first_namem { left:35px; } #email_form #last_namem { left:35px; } #email_form #emailm { left:23px; } #email_form #serial_numm { left:19px; } #email_form #subjectm { left:52px; } #email_form #commentm { top:25px; left:94px; } #email_form #country_errors .errortxt { top:2px; left:1px;} #email_form #device_errors .errortxt { top:2px; left:18px;} #email_formclub, #email_form { width:547px; background:#f6f6f6 url(../images/email-form-top.gif) top left no-repeat; padding:8px 0 0; margin:5px 0 0; } #email_formclub form, #email_form form { margin:0; padding:0; } #email_formclub .field_line, #email_formclub #submit_or_reset { width:547px; height:25px; position:relative; margin:0; padding:0; } #email_formclub .field_line.textarea_line, #email_form .field_line.textarea_line { height: 108px;} #email_formclub .label_error, #email_form .label_error { position:absolute; left:0px; top:7px; width:162px; text-align:right; height:19px; } #email_formclub .label_error label, #email_form .label_error label { display:inline; color:#2b2b2b; font:11px/19px Arial, Helvetica, sans-serif; clear:none; } #email_formclub .label_error span.error_msg, #email_form .label_error span.error_msg { display:inline; clear:none; color:#f60; font:bold 11px/19px Arial, Helvetica, sans-serif; } #email_formclub input, #email_formclub select, #email_formclub textarea, #email_formclub #gender, #email_form input, #email_form select, #email_form textarea, #email_form #gender, #email_form #model { position: absolute; top:7px; left:167px; height:17px; border:1px solid #ccc; color:#2b2b2b; padding:0 0 0 3px; font:normal 12px/17px Arial, Helvetica, sans-serif; } #email_formclub select, #email_form select { margin:0; top:0px;} #email_formclub .short_field, #email_form .short_field { width:153px; } #email_formclub select.short_field, #select_country_phone select.short_field, #email_form select.short_field, #select_country_phone select.short_field{ width:158px; } #email_formclub .long_field, #email_form .long_field { width:308px; } #email_formclub textarea, #email_form textarea { height:92px; } #email_formclub #submit_or_reset { height:38px; background:transparent url(../images/email-form-bottom.gif) bottom left no-repeat; } #email_submit, #email_reset { position:absolute; top:3px; } #email_submit { left:167px; } #email_reset { left:257px;} #email_formclub .errortxt { width:60px; } #email_formclub #first_namem, #email_formclub #last_namem, #email_formclub #emailm, #email_formclub #shop_countrym, #email_formclub #modelm, #email_formclub #serial_numm, #email_formclub #subjectm, #email_formclub #commentm, #email_formclub #country_errors .errortxt, #email_formclub #device_errors .errortxt { position:absolute; top:9px; line-height:19px;} #email_formclub #first_namem { left:35px; } #email_formclub #last_namem { left:35px; } #email_formclub #emailm { left:23px; } #email_formclub #serial_numm { left:19px; } #email_formclub #subjectm { left:52px; } #email_formclub #commentm { top:25px; left:94px; } #email_formclub #country_errors .errortxt { top:2px; left:1px;} #email_formclub #device_errors .errortxt { top:2px; left:18px;} /************************************************** taal Light Box *****************/ #welkomShader { position: absolute; left:0; top:0; width: 100%; height: 100%; display: block; background-color:#000; opacity:0.4; filter:alpha(opacity=40); -khtml-opacity: 0.4; -moz-opacity: 0.4; z-index: 90; } /*********************************************hecc support ***************************************************/ #email_status, #club_status { width:531px; padding:16px 0 0; margin:16px 0 0; background:#f6f6f6 url(../images/email-status-top.gif) top left no-repeat; position:relative; } #email_status p, #club_status p { float:left; display:inline; margin:0 16px 0 88px; font:normal 11px/16px Arial, Helvetica, sans-serif; color:#585858; width:427px; } #email_status strong, #club_status strong { font:bold 11px/16px Arial, Helvetica, sans-serif; color:#707070; } #email_status img { position:absolute; top:16px; left:16px; } #club_status img { position:absolute; top:16px; left:10px; } #email_status_clear { width:531px; height:16px; background:#f6f6f6 url(../images/email-status-bottom.gif) bottom left no-repeat; clear:both; } #email_form #language { top:7px; } .two_col_support_icon { width:531px; padding:0; margin:16px 0 0; } .left_col_support_icon { width:257px; float:left; display:inline; font:normal 11px/16px Arial, Helvetica, sans-serif; color:#585858; margin:0; padding:0; } .left_col_support_icon strong { font:bold 11px/16px Arial, Helvetica, sans-serif; color:#707070; } #button_mio_club_benefits { width:225px; float:left; margin:0 0 0 16px; display:block; padding:16px; background:#f60 url(../images/mio-club-benefit-button.gif) top left no-repeat; cursor:pointer; color:#fff; font:bold 11px/16px Arial, Helvetica, sans-serif; text-align:center; } /* hecc - create club account from support contact form */ #email_formclub, #email_form { width:531px; background:#f6f6f6 url(../images/email-status-top.gif) top left no-repeat; padding:8px 0 0; margin:5px 16px 0 0; } #email_formclub form { margin:0; padding:0; } #email_formclub .field_line, #email_formclub #submit_or_reset, #email_form .field_line, #email_form #submit_or_reset { width:531px; height:25px; position:relative; margin:0; padding:0; } #email_formclub .field_line.textarea_line { height: 108px;} #email_formclub .label_error, #club_registrationK .label_error { position:absolute; left:0px; top:7px; width:257px; text-align:right; height:19px; } #email_formclub .label_error label, #email_form .label_error label { display:inline; color:#2b2b2b; font:bold 11px/19px Arial, Helvetica, sans-serif; clear:none; } #email_formclub .label_error span.error_msg { display:inline; clear:none; color:#f60; font:bold 11px/19px Arial, Helvetica, sans-serif; } #email_formclub input, #email_formclub select, #email_formclub textarea, #email_formclub #gender, #club_registrationK input, #club_registrationK select, #club_registrationK textarea, #club_registrationK #gender{ position: absolute; top:7px; left:273px; height:17px; border:1px solid #ccc; color:#2b2b2b; padding:0 0 0 3px; font:normal 12px/17px Arial, Helvetica, sans-serif; } #email_formclub input, #email_formclub select, #email_formclub textarea, #email_formclub #gender, #club_registrationK input, #club_registrationK select, #club_registrationK textarea, #club_registrationK #gender{ position: absolute; top:7px; left:273px; height:17px; border:1px solid #ccc; color:#2b2b2b; padding:0 0 0 3px; font:normal 12px/17px Arial, Helvetica, sans-serif; } #email_formclub #shop_country { margin:0; top:0px;} #email_formclub .short_field { width:153px; } #email_formclub select.short_field { width:158px; } #email_formclub textarea { height:92px; } #email_formclub #submit_or_reset, #email_form #submit_or_reset { height:48px; background:transparent url(../images/email-status-bottom.gif) bottom left no-repeat; margin: } #email_formclub #email_submit, #email_formclub #email_reset { position:absolute; top:3px; } #email_formclub #email_submit { left:273px; } #email_formclub #email_reset { left:257px;} #email_formclub #no, #email_form #nok { position:absolute; top:7px; left:290px; } #email_formclub #yes, #email_form #yesk { position:absolute; top:7px; left:365px; } #yes_label, #no_label { position:absolute; display:inline; color:#707070; font:bold 11px/19px Arial, Helvetica, sans-serif; top:7px; } #no_label { left:273px; } #yes_label { left: 343px; } #yes_label, #no_label { position:absolute; display:inline; color:#707070; font:bold 11px/19px Arial, Helvetica, sans-serif; top:7px; } #no_label { left:273px; } #yes_label { left: 343px; } #editable_details { background:#c2c2c2 url(../images/dots-editable-block.gif) top left repeat; padding:2px; margin:34px 17px 0 16px; width:494px; position:relative; } #inside_editable_details { background:#f6f6f6; width:494px; padding:0; margin:0; position:relative; } #details_edit_info { position:absolute; top:-16px; left:255px; color:#989898; font:normal 10px/16px Arial, Helvetica, sans-serif; width:244px; height:16px; } #edit_details_list { margin:0; padding:12px 0 0; list-style:none; width:494px; } #edit_details_list li { float:left; display:inline; height:16px; width:494px; font:normal 11px/16px Arial, Helvetica, sans-serif; color:#585858; } #edit_details_list li.two_lines { height:32px; } #edit_details_list li strong { width:239px; height:16px; display:block; float:left; display:inline; text-align:right; font:bold 11px/16px Arial, Helvetica, sans-serif; } #edit_details_list li span { width:239px; height:16px; display:block; float:left; display:inline; text-align:left; margin:0 0 0 16px; } #edit_details_list li span.line_two { padding:0 0 0 255px; margin:0; width:236px; } #change_profile_button { width:494px; clear:both; position:relative; height:46px; } #button_edit { position:absolute; top:13px; left:255px; } #form_cancel { position:absolute; right:274px; top:12px; } #form_submit { position:absolute; left:273px; top:12px; } #email_formclub #editable_details .field_line, #email_formclub #editable_details #submit_or_reset { width:494px; } #email_formclub #editable_details .label_error { width:239px; } #email_formclub #editable_details input, #email_formclub #editable_details select, #email_formclub #editable_details textarea, #email_formclub #editable_details #gender { left:255px; } #show_club_benefits { background:#fff; margin:20px auto 0; text-align:left; padding:20px; width:656px; } #club_benefits { padding:0 0 5px; width:656px; background:transparent url(../images/device-overview-wide-bottom.gif) bottom right no-repeat; margin:0; } #club_benefits h2 { margin:0; padding:7px 0 0 24px; width:632px; height:21px; font:bold 14px/21px Arial, Helvetica, sans-serif; color:#fff; background:#a3a3a3 url(../images/blok-header-title.gif) top left no-repeat; } #inside_club_benefits { width:654px; border:1px solid #c8c8c8; border-bottom:none; border-top:none; } #benefit_updater, #benefit_speedcam, #benefit_toptips, #benefit_newsletter, #benefit_support, #benefit_goodies { background:transparent url(../images/mail-icon.gif) 18px 31px no-repeat; width:547px; margin:0; padding:13px 10px 0 97px; } #club_benefits h3 { color:#f60; font:bold 16px/16px Arial, Helvetica, sans-serif; margin:0; padding:16px 0; } #club_benefits p { color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; margin:0; padding:0 0 16px;} #club_benefits strong { color:#707070; font:bold 11px/16px Arial, Helvetica, sans-serif; } #benefit_updater { background-image: url(../images/update-club-icon.gif); } #benefit_speedcam { background-image: url(../images/speedcams-club-icon.gif); } #benefit_toptips { background-image: url(../images/top-tips-club-icon.gif); } #benefit_newsletter { background-image: url(../images/newsletters-club-icon.gif); } #benefit_support { } #benefit_goodies { background-image: url(../images/goodies-club-icon.gif); } .close_lightbox { width:100%; height:18px; margin:14px 0 0; } .close_lightbox a { font:bold 14px/16px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase; float:right; background:transparent url(../images/close-lightbox.gif) right 0px no-repeat; height:18px; padding-right:20px; } .close_lightbox a:link, .close_lightbox a:visited { background-position:right 0px; color:#000; } .close_lightbox a:hover, .close_lightbox a:active { background-position:right -18px; color:#f60; } /* big grey email from */ .required { font:normal 11px/16px Arial, Helvetica, sans-serif; color:#f60; margin-left:23px; } #email_submit, #email_reset { position:absolute; top:3px; } #email_submit { left:167px; } #email_reset { left:257px;} #send_request_status { width:547px; padding:0 0 8px; background:transparent url(../images/email-form-bottom.gif) bottom left no-repeat; height:16px; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#f60; text-align:center; } .wrong_right_field { position:absolute; left: 331px; top:10px; width:15px; height:13px;} #email_formclub .wrong_right_field { left: 446px;} #email_formclub #inside_editable_details .wrong_right_field { left: 426px;} #club_registrationK .wrong_right_field { left: 446px;} .date_line .wrong_right_field { position:absolute; left: 361px; top:10px; width:15px; height:13px;} #email_formclub .date_line .wrong_right_field { left: 480px;} #email_formclub #inside_editable_details .date_line .wrong_right_field { left: 460px;} #club_registrationK .date_line .wrong_right_field { left:480px; } .textarea_line .wrong_right_field { left:487px; } #country_errors .wrong_right_field, #publication_errors .wrong_right_field, #date_errors .wrong_right_field { top:2px; } #calendar-icon { position:absolute; top:7px; left:331px; } #email_formclub #calendar-icon, #club_registrationK #calendar-icon { left:446px; } #email_formclub #inside_editable_details #calendar-icon { left:426px; } .contact_support_first h3 { color:#ff6600;} .contact_support_first { border-left:1px solid #c8c8c8; border-right:1px solid #c8c8c8; width:654px; margin:0; padding:13px 0 6px; position:relative; } #content .contact_support_first strong { color:#707070; } #content .contact_support_first h3 { margin:0 28px; } .contact_support_first p { color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; padding:0; margin:0 28px 16px; } .contact_support_first p a { text-decoration:underline; font:bold 11px/16px Arial, Helvetica, sans-serif; } .contact_support_first p a:link, .contact_support_first p a:visited { color:#ff6600; } .contact_support_first p a:hover, .contact_support_first p a:active { color:#6C8B95; } .two_buttons_support { width:654px; height:80px; } a.email_button, a.phone_button { float:left; width:241px; height:32px; display:block; display:inline; margin:0 4px 0 28px; padding:24px; text-decoration:none; background-color:#f2f2f2 no-repeat; overflow:hidden; font:bold 14px/16px Arial, Helvetica, sans-serif; } a.email_button:link, a.phone_button:link, a.email_button:visited, a.phone_button:visited { color:#707070; background-position: 0px 0px; } a.email_button:hover, a.phone_button:hover , a.email_button:active, a.phone_button:active { color:#585858; background-position:0px -80px; } a.email_button.italian, a.phone_button.italian, a.email_button.french, a.phone_button.french { height:50px; padding:15px 24px; font:bold 14px/16px Arial, Helvetica, sans-serif; } a.email_button { background-image:url(../../images/email-support-button.gif); } a.phone_button { background-image:url(../../images/telephone-support-button.gif); } .errormessage {color: #f60;} .dpTable { background: #fff; } .dpDayTD { background: #ed680f; border: 1px #ed680f solid; color: #fff; font-size:9px; width:4px; } .dpButton { background: #ed680f; color: #fff; border: 1px #ed680f solid; } .dpTodayButton { background: #ed680f; color: #fff; border: 1px #ed680f solid; } .dpTD:hover { background: #ed680f; border: 1px #ed680f solid; color: #fff; } .dpTDHover { background: #ed680f; border: 1px #ed680f solid; color: #fff; } /* mio popup styling */ #passwordWrapper { } .popup_lightbox { width:458px; margin:0 auto; padding:10px; background-color:#fff; text-align:left; } .popup_lightbox h2 { margin:0; padding:7px 0 0 24px; width:434px; height:21px; font:bold 14px/21px Arial, Helvetica, sans-serif; color:#fff; background:#a3a3a3 url(../images/popup-h2.gif) top left no-repeat; } .popup_lightbox h3 { color:#6c8b95; font:bold 14px/16px Arial, Helvetica, sans-serif; padding:16px 0; margin:0; } .popup_lightbox p { margin:0 0 16px; padding:0; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; } .popup_lightbox strong { color:#707070; font:bold 11px/16px Arial, Helvetica, sans-serif; } .email_login { color:#6c8b95; font:bold 11px/16px Arial, Helvetica, sans-serif; } .inside_popup { width:333px; border:1px solid #C8C8C8; border-top:none; border-bottom:none; padding:0 28px 0 95px; margin:0; } /* specific popup styling */ #password_club_popup { background:transparent url(../images/club-icon-white.gif) 16px 16px no-repeat; margin:0; padding:0 28px 0 95px;} .grey_popup_block { width:328px; height:72px; background:#ebebeb url(../images/grey-password-popup-top.jpg) top left no-repeat; margin:0; padding:10px 0 0; } .grey_popup_block_end { width:328px; height:10px; background:#ebebeb url(../images/grey-password-popup-bottom.jpg) bottom left no-repeat; margin:0; padding:0; line-height:10px; clear:both; } #password_lock_icon { } #password_lock_icon { position:relative; width:328px; height:62px; background:transparent url(../images/grey-password-lock.jpg) 11px 1px no-repeat; } #password_lock_icon #password { position:absolute; right:16px; top:4px; border:1px solid #999999; width:161px; height:14px; height:17px; color:#2b2b2b; padding:0 0 0 3px; font:normal 12px/17px Arial, Helvetica, sans-serif; } #password_lock_icon #passwordL { position:absolute; top:5px; left:16px; width:122px; height:16px; color:#2b2b2b; font:bold 11px/19px Arial, Helvetica, sans-serif; text-align:right; } /* lightbox styling */ #lightbox { position: absolute; display: none; top:200px; left:0; text-align:left; background:#fff url(http://dev.mio-tech.be/images/newsletter-change-box.gif) top left no-repeat; width:437px; height:246px;} #lightbox h1 { margin:0; padding:7px 0 0 24px; width:296px; height:21px; font:bold 14px/21px Arial, Helvetica, sans-serif; color:#fff; background:none; } #lightbox h2 { color:#6c8b95; font:bold 14px/16px Arial, Helvetica, sans-serif; margin:0; padding:16px 16px 16px 80px; } #lightbox h2 strong { color:#f60;} #lightbox p { margin:0 0 16px; padding:0 16px 0 80px; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; } #lightbox p strong { color:#707070; font-weight:bold;} .newsletter_form_div { position:relative; height:16px; margin:0; padding:16px 16px 0 80px; width:341px;} .newsletter_form_div label { color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; } .newsletter_form_div .button { position:absolute; } #change_language { height:16px; width:144px; padding:0 0 0 5px; position:absolute; top:15px; right:16px; border:1px solid #ccc; color:#777; font:bold 11px/16px Arial, Helvetica, sans-serif; } #cancel_popup_password { position:absolute; top:33px; right:13px;} #login_popup_password { position:absolute; top:33px; left:146px; } #password_club_popup .forgot_password { font:bold 11px/16px Arial, Helvetica, sans-serif; color:#f60; padding:16px 0; margin:0; } #password_club_popup .forgot_password a { color:#f60; text-decoration:underline; } .end_popup { width:458px; height:12px; margin:0; padding:0; background:transparent url(../images/popup-small-button.jpg) bottom left no-repeat; line-height:1px; clear:both; } /* #passwordWrapper { position: absolute; display: none; top:200px; left:0; background-color: none; text-align:left; background: url(../../images/password-lightbox.gif) top left no-repeat; width:437px; height:153px;} #passwordWrapper h1 { margin:0; padding:7px 0 0 24px; width:296px; height:21px; font:bold 14px/21px Arial, Helvetica, sans-serif; color:#fff; background:none; } #passwordWrapper h2 { color:#6c8b95; font:bold 14px/16px Arial, Helvetica, sans-serif; margin:0; padding:16px 16px 16px 80px; } #passwordWrapper h2 strong { color:#f60;} #passwordWrapper p { margin:0 0 16px; padding:0 16px 0 80px; color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; } #passwordWrapper p strong { color:#707070; font-weight:bold;} .newsletter_form_div { position:relative; height:16px; margin:0; padding:16px 16px 0 80px; width:341px;} .newsletter_form_div label { color:#585858; font:normal 11px/16px Arial, Helvetica, sans-serif; } .newsletter_form_div .button { position:absolute; } #password { border:1px solid #CCCCCC; color:#2B2B2B; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; height:17px; left:167px; line-height:17px; padding:0pt 0pt 0pt 3px; } */ #container .three_colums_devices li { width:182px; clear:none; } .club_toptip_download { width:470px; height:67px; margin:8px auto; text-align:left; padding:0; position:relative; background:transparent url(../images/faq-download-div.gif) top left no-repeat; } .club_toptip_download h5 { margin:0; padding:0; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#6c8b95; position:absolute; top:8px; left:12px; width:442px; } .club_toptip_download .download_size, .club_toptip_download .download_update { font:11px/16px Arial, Helvetica, sans-serif; color:#585858; display:block; } .club_toptip_download .download_size strong, .club_toptip_download .download_update strong { font:bold 12px/16px Arial, Helvetica, sans-serif; color:#707070; } .club_toptip_download .download_size { position:absolute; top:32px; left:12px; width:140px; height:16px; } .club_toptip_download .download_update { position:absolute; top:32px; left:142px; width:180px; height:16px; } .club_toptip_download a.button_shiny.download_button { position:absolute; top:28px; right:16px; left:auto; bottom:auto; color:#595959; font:normal 10px/24px Arial, Helvetica, sans-serif; text-decoration:none; } .wide_block.mio-club h5 { color#585858; font:bold 12px/16px Arial, Helvetica, sans-serif; margin:0 28px; padding:16px 0; }