﻿/* Only styling rules! Use Position.css for positioning rules.*/

/* Elements */
html{
  overflow-y:scroll;
}

body {
	background: #ebebec url("images/bg.gif") repeat-x;
	font: 10px/13px Verdana, Helvetica, Arial, sans-serif;
	color: #404042;
}

p, td, ul, ol, li, textarea {
	font: 10px/13px Verdana, Helvetica, Arial, sans-serif;
	color: #404042;
}
a:link      { color: #404042; text-decoration: none; }
a:visited   { color: #404042; text-decoration: none; }
a:hover     { color: #5FACCC; text-decoration: underline; cursor:pointer }
a:active    { color: #5FACCC; text-decoration: underline; }

a.logo { background: url(images/company_logo.gif) no-repeat }
h2, h3, h4, h5 { font: normal 14px Verdana, Helvetica, Arial, sans-serif }
h6 {font-size: 11px;}
h3 { font: normal 12px Verdana, Helvetica, Arial, sans-serif }
h4 {
color:#AAAAAA;
font-family:Verdana,Helvetica,Arial,sans-serif;
font-size:12px;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
}

/* Classes */

ul.linklist li { list-style: none; border-left: 1px solid #AAAAB0}
ul.linklist li.first, .linklist li.no-separator {border-left: 0}
ul.linklistbulleted li a { background: url(images/bullet.gif) left center no-repeat }
ul.linklistbulleted a:link    { color: #404042; text-decoration: none; }
ul.linklistbulleted a:visited { color: #404042; text-decoration: none; }
ul.linklistbulleted a:hover   { color: #5FACCC; text-decoration: underline; cursor:pointer }
ul.linklistbulleted a.active  { color: #5FACCC; text-decoration: underline }

ul.navlist { border-top: 1px solid #e0e0e2 }
ul.navlist a {
    background-attachment:scroll;
    background-color: #efeff0;
	background-image: url("images/nav_grad.gif");
	border-bottom: 1px solid #e0e0e2;
	font: bold 10px/20px Verdana, Helvetica, Arial, sans-serif;
}
ul.navlist a:link,ul.navlist a:visited  { color: #404042; text-decoration: none; }
ul.navlist a:hover, ul.navlist a.active {
    background-attachment:scroll;
	background-position: 0 -20px;
	background-color: #fdfdfd;
	text-decoration: none;
	color: #5FACCC;
}

p.pcen a { color: #5FACCC }

a.click {
    color: #5FACCC;
    display: block;
    padding: 0 0 8px 10px;
    margin: 10px 0 0 3px;
    background: url("images/bullet.gif") no-repeat 0 .4em;
}

a.alphabeticalproductlist_link { color: #5FACCC }
a.generalappslist_link { color: #5FACCC }

ul.AtoZList { list-style-type: none; padding-bottom : 20px }
ul.AtoZList li { list-style-type: none }
ul.AtoZList li ul li { list-style-type: circle; list-style-position: inside; padding-left: 20px; font-size: 11px }
ul.AtoZList li h3 { font-size: 14px }
ul.AtoZList li a { color: #5FACCC }

.required {color:#FF0000}
.articletab {color:#BB0000}

.dealerlocator { float:right; background: url(images/dealerlocator_bg.gif) no-repeat; width:216px; height:126px}
.dealerlocator .title {position:relative; left:21px; top:13px;font-weight:bold}
.dealerlocator .zip {position:relative; left:20px; top:25px}

span.stn_button { background: url("images/button_bg.gif") no-repeat right top }
span.stn_button a { background: url("images/button_bg.gif") no-repeat;	font-weight: bold; color: #fff !important;}

/* Named Elements */

h2#title { 
    font: normal 20px/24px "Trebuchet MS", Trebuchet, "Lucida Grande", Lucida, sans-serif;
	border-bottom: 1px solid #8bbaca;
}
h2#title span {	border-bottom: 1px solid #8bbaca }
#navbg { background: url(images/topmenu-base.gif) no-repeat }
#backstagelogo { background: url(images/backstage.gif) no-repeat }
#flag { background: url(images/flag.png) no-repeat }

#footer li {list-style: none; border-left: 1px solid #AAAAB0}
#footer li.first { border: 0}
#footer ul.homelogos li { list-style: none; border-left: none}

/* product list and product details rules */

#ProdInfo h2 { color: #444; font: normal 20px "Trebuchet MS", Trebuchet, "Lucida Grande", Lucida, sans-serif}
#ProdInfo h2 span { font: normal 16px "Trebuchet MS", Trebuchet, "Lucida Grande", Lucida, sans-serif; color: #8bbaca}

#ProdInfo h1 { color: #444; font: normal 20px "Trebuchet MS", Trebuchet, "Lucida Grande", Lucida, sans-serif; 	border-bottom: 0px;}
#ProdInfo h1 span { font: normal 16px "Trebuchet MS", Trebuchet, "Lucida Grande", Lucida, sans-serif; color: #8bbaca}

table.productlist td div { background: url("images/widedots.gif") repeat-y 4px 0 }
table.productlist td div.b_row { background: none }
table.productlist strong a { color: #404042 !important; text-decoration: none }
table.productlist strong a:hover { text-decoration: none }
p.alphabeticbreakdown a {color: #5FACCC;}

dl#specs dt { font-weight: bold; background-color: #EBEBEC }
dl#specs dt.section { background: url("images/spec_group_bg.gif") no-repeat; font-size: 12px; color: #FFF }
dl#specs dt.comment { color: #999; font-size: 10px; font-weight: normal; background-color: #FFF }

#downloads_list dt { font-size: 12px; border-bottom: 1px solid #e0e0e2 }
#downloads_list dt a { color: #5FACCC }

.mandatory {color:#f00;}

.hide {display:none;}

.checkbox label
{
    padding-left: 5px;
    margin-left: 0px;
    width: 250px;
}

.checkbox input
{
    width: 13px;
    height: 13px;
    margin: 0px 0px 4px 0px;
    padding: 0px;
    *overflow: hidden;
}

.radioButtons input
{
    vertical-align: top;
}

.radioButtons label
{
    width:auto;
    display: inline-block;
    padding-bottom: 10px;
}

.articlersslist hr {
	width: 50px;
	color: #5FACCC;
	background-color: #5FACCC;
	height: 1px;
	border:0px;
	text-align: center;
}

#AddThis 
{
    background-image: url(/images/misc/AddThis.gif);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 15px;
}

h1 
{
    font: normal 20px/24px "Trebuchet MS", Trebuchet, "Lucida Grande", Lucida, sans-serif;
	border-bottom: 1px solid #8bbaca;
	margin-bottom: 10px;
}

.articlersslist h2 
{
    font: normal 10px Verdana, Helvetica, Arial, sans-serif;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e0e0e2;
    padding-top: 0pt;
    padding-right: 0pt;
    padding-bottom: 2px;
    padding-left: 0pt;
    margin-top: 0pt;
    margin-right: 0pt;
    margin-bottom: 6px;
    margin-left: 0pt;
}

.articlersslist h2 a 
{
    color: #5faccc;
    font-size: 13px;
}

.bordered{border:1px solid #d5d5d5;}
a img.bordered {border:1px solid #d5d5d5;}
a:hover img.bordered {border: 1px solid #f58220}

.coloured {color: #f58220; font-weight: bold;}


a.info{
    position:relative; /*this is the key*/
    z-index:24;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25;text-decoration:none}

a.info span{display: none;text-decoration:none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:3em; left:2em; width:15em;
    border:1px solid #000;
    text-align: center;
    background: #ffffff;
	font: 10px/13px Verdana, Helvetica, Arial, sans-serif;
	color: #404042;
	padding: 2px;
    text-decoration:none}
	
	
	
fieldset
{
    margin: 10px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    border: 1px solid #ccc;
}

fieldset .note
{
    text-align: right;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset legend
{
    font-size: 14px;
}

fieldset label
{
    text-align:right;
    font-weight: bold;
    vertical-align: top;
}

fieldset input
{
    width: 150px;
    font-family: Verdana;
    font-size: 10px;
    border: 1px solid #ccc;
    padding: 3px;
}

fieldset select
{
    width: 150px;
    font-family: Verdana;
    font-size: 10px;
    border: 1px solid #ccc;
}

fieldset span.checkbox
{
    padding-bottom: 5px;
    display: block;
    float: left;
}

fieldset .checkbox label
{
    padding-left: 5px;
    margin-left: 0px;
    width: 230px;
    text-align: left;
}

fieldset .checkbox input
{
    width: auto;
    border: 0px;
}

fieldset span.checkbox-narrow
{
    padding-bottom: 5px;
    display: block;
    float: left;
}

fieldset .checkbox-narrow label
{
    padding-left: 5px;
    margin-left: 0px;
    width: 100px;
    text-align: left;
}

fieldset .checkbox-narrow input
{
    width: auto;
    border: 0px;
}

fieldset span.checkbox-tandc
{
    padding-bottom: 5px;
    display: block;
    float: left;
}

fieldset .checkbox-tandc label
{
    padding-left: 5px;
    margin-left: 0px;
    width: 460px;
    text-align: left;
    font-weight: normal;
}

fieldset .checkbox-tandc input
{
    width: auto;
    border: 0px;
}

.MyRolandTable 
{
    padding: 4px;
}

.MyRolandTable td
{
    padding: 4px;
    color: Black;
}

.MyRolandLoginTitle
{
    font-weight: bold;
    text-align:center;
    height: 16px;
}

.MyRolandLoginLabel
{
    text-align:right;
    vertical-align:middle;
}

.MyRolandLoginButton
{
    border:0px;
    width: 68px;
    height: 25px;
    background-image: url(Images/MyRoland/login-SMALL.png);
    cursor: pointer;
}

/*.MyRolandLoginTextbox
{
    width: 150px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #797979;
    border: 0px;
    height: 34px;
}*/

.MyRolandLoginTextbox
{
    font-size: 22px;
    color: #242424;
    margin-bottom: 7px;
    width: 220px;
    height: 30px;
    padding: 2px 5px 2px 5px;
    border: 0px;
    background: url(/App_Themes/Blue/Images/MyRoland/Log-inBox.png);
}

.MyRolandLink
{
    font-weight:bold;
    color: #FF256A;
}

.formLabel { display:inline-block; width:180px; font-weight: bold; text-align: right; }

a.MyRolandLargeLogo {background: url(images/MyRoland/LargeLogo.png) no-repeat}

h2#MyRolandTitle { 
    font: normal 28px/32px Arial, "Trebuchet MS", Trebuchet, "Lucida Grande", Lucida, sans-serif;
}

.MyRolandTextbox
{
    border: 1px solid black;
    width: 200px;
}