body {background-color:#CCCCCC; margin-top:0px;}
#wrapper {width:980px; height:100%; background-color:#FFFFFF; margin:auto; overflow: hidden;
 padding:13px;}
 #wrapper-websites {width:980px; height:100%; background-color:#FFFFFF; margin:auto; overflow: hidden;}
 #right-form {width:275px; float:right; margin-right:5px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #FFFFFF;}
 #websites-text{width:680px; height:100%; float:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-left:5px; padding-right:5px; padding-bottom:5px;}
 #footer-websites { width:970px; height:55px; margin:auto; background-color: #000000; padding-top:20px; padding-bottom:20px; padding-left:5px; padding-right:5px; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;}
#logo {width:290px; height:80px; float:left;}
#bbb {width:180px; height:80px; float:right;}
#inc {width:90px; height:80px; float:right;}
#content {width:690px; float:left; padding-top:13px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;}
#content-websites {width:690px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000; background-color: #000000;}
.orange-title {font-family:Arial, Helvetica, sans-serif; font-size:20px; color:#FF9900; font-style:italic; font-weight:bold; margin-right:10px;}
#screenshots-navigation {width:260px; float:right; height:100%; padding-right:30px;}
   #menu-screenshots { 
    width:250; height:100%;/*too wide to hold 3 not wide enough to hold 4*/ 
   } 
   #menu-screenshots li { list-style:none;
    float:left; /*float the individual items*/ 
   } 
   #menu-screenshots li a { 
    width:250px;  
    height: 74px; /*size of my example image*/  
    display:block; /*to make it act as a block*/ 
   } 
   #menu1{ 
    background-image: url(images/demo_button.jpg); 
   } #menu1 a:hover{ 
    background-image: url(images/demo_button_hover.gif); 
   } 
   #menu2 {  
    background-image: url(images/walkin.jpg); 
   } #menu2 a:hover{  
    background-image: url(images/walkin-hover.jpg); 
   } 
   #menu3 { 
    background-image: url(images/salon-spa.jpg);  
   } #menu3 a:hover { 
    background-image: url(images/salonspa-hover.jpg);  
   } 
   #menu4 { 
    background-image: url(images/schools.jpg);  
   } #menu4 a:hover{ 
    background-image: url(images/schools-hover.jpg);  
   } 
   #menu5 { 
    background-image: url(images/retail.jpg);  
   } #menu5 a:hover{ 
    background-image: url(images/retail-hover.jpg);  
   } 
   #menu6 { 
    background-image: url(images/ioffice-button.jpg);  
   }#menu6 a:hover{ 
    background-image: url(images/ioffice-button-hover.jpg);  
   }
    #menu7 { 
    background-image: url(images/features-button.jpg);  
   } #menu7 a:hover{ 
    background-image: url(images/features-button-hover.jpg);  
   }
    #menu8 { 
    background-image: url(images/pos-button.jpg);  
   }
#menu8 a:hover{ 
    background-image: url(images/pos-button-hover.jpg);  
   }
#menu9 { 
    background-image: url(images/merchant-button.jpg);  
   }
#menu9 a:hover{ 
    background-image: url(images/merchant-button-hover.jpg);  
   }
#pane{padding-top:10px; padding-bottom:10px;

}
#service{
	width:390px;
	height:250px;
	float:left;
	border: #5D92A4 solid; border-width:1px;
	background-color:#CBDCDC;
	padding:4px;
}
#service h2{
	display:block;
	padding:0 0 0 13px;
	font:bold 22px/13px Arial, Helvetica, sans-serif;
	color: #FF9900;
	font-style:italic;
	background-color:inherit;
	margin:0 0 17px 0;
	margin-top:10px;
}
#service h3{
	display:block;
	background:url(images/date_bg.gif) 0 0 no-repeat;
	width:327px;
	height:17px;
	padding:0 0 0 11px;
	margin:0 0 13px 0;
	font:bold 11px/17px Arial, Helvetica, sans-serif;
	color:#000000;
	background-color:inherit;
	text-transform:uppercase;
}
#service ul{
	padding:0;
	margin:0;
	display:block;
}
#service ul li{
	display:block;
	height:20px;
	line-height:0;
}
#service ul li a{
	display:block;
	background:url(images/arrow_white.gif) 0 7px no-repeat;
	padding:0 0 0 10px;
	font:normal 12px/20px  "Arial", Helvetica, sans-serif;
	color:#47472D;
	background-color:inherit;
	text-decoration:underline;
	height:20px;
}
#service ul li a:hover{
	color: #34AACA;
	background:url(images/arrow_white_hover.gif) 0 7px no-repeat #DDDDCB;
	text-decoration:none;
}
#testimonials {width:270px; float:right; height:252px; padding-top:5px; border:#5D92A4 solid; border-width:1px; background-image:url(images/testimonial-bg.gif); margin-left:5px;}
#main-text {width:980px; height:100%; font-family: Arial, Helvetica, sans-serif; color:#000000; font-size:12px; float:right; padding-top:20px;}
#box {float: left; width:220px;}
#footer {font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#FFFFFF; width:980px; height:100%; background-color:#5C92A3; margin:auto; padding:13px; border-top: #FF9900 solid; border-top-width:2px; }
#navigation-footer {
   list-style: none;
   margin: auto; padding-left: 77px;
}
#navigation-footer  li {
   float: left;
}
#navigation-footer  li a {
   display: block;
   width: 180px;
   font-family:Arial, Helvetica, sans-serif;
   color:#FFFFFF;
   font-size:13px;
   text-decoration:none
}
#navigation-footer  li a:hover {

   font-family:Arial, Helvetica, sans-serif;
   color: #FF9900;
    font-size:13px;
}
#footer a {font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:12px; font-weight:bold;}
#footer a:hover {font-family:Arial, Helvetica, sans-serif; color:#FF9900; font-size:12px; font-weight:bold;}
.rtextbox{color:#000000; font-family:Arial; background: #E8F3FD; text-align:justify;}
.rtextboxinside {margin-left: 8px; margin-right: 8px; margin-top: 3px; margin-bottom:3px}
.rtop, .rbottom{display:block; background: #E8F3FD}
.rtop span, .rbottom span {display: block; height: 1px; overflow: hidden; background: #E8F3FD}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
span.rtop span.r4, span.rbottom span.r4{margin: 0 1px; height: 2px}
.screenshots {width: 400px; height:100%; padding-top:30px; float:left;}
.content-screenshots {width: 280px; height:100%; padding-top:30px; float:right;}
.light-blue {background-color:#E8F3FD; width:100%; height:100%; padding:4px;}
.light-yellow {background-color:#FCF6D6; width:650px; height:100%; padding:4px; border-color:#5D92A4; border-width:2px; border-style: solid;}
.box {width:220px; height:224px; float:left;}
.link {font-family:Arial, Helvetica, sans-serif; color:#4C86C4;; font-size:13px;}
.link a{font-family:Arial, Helvetica, sans-serif; color:#4C86C4;; font-size:13px; text-decoration:none; font-weight:bold;}
.link a:hover{font-family:Arial, Helvetica, sans-serif; color: #FF9900; font-size:13px; text-decoration:none; font-weight:bold;}
.scf {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000000;}
.save{
   behavior:url(#default#savehistory);}
a.dsphead{
   text-decoration:none;
   margin-left:1.5em; font-family:Arial, Helvetica, sans-serif; color:#4C86C4; font-size:13px;}
   
a.dsphead:hover{
   text-decoration:underline;}
a.dsphead span.dspchar{
   font-family:monospace;
   font-weight:normal;}
.dspcont{
   display:none;
   margin-left:1.5em;
   font-family:Arial, Helvetica, sans-serif; color:#000000; font-size:12px; font-weight:normal; font-style:normal; text-align: justify;}
   .form{background-color:#FCF6D6; width:480px; height:740px; padding:4px; border-color:#5D92A4; border-width:2px; border-style: solid; margin: auto;}
   .form-cards{background-color:#FCF6D6; width:480px; height:870px; padding:4px; border-color:#5D92A4; border-width:2px; border-style: solid; margin: auto;}
   #websites { width:690px; height:390px; margin-bottom:30px; background-image: url(images/websites-computer.jpg);}
   .form-bg{background-color: #FFCC99; font-family:Arial, Helvetica, sans-serif; color: #666666; font-weight:bold;}
      .form-submit{background-color:#33AACA; font-family:Arial, Helvetica, sans-serif; color: #FFFFFF; font-weight:bold;}
#screenshot-buttons{width:980px; height:130px; overflow: inherit;}
#walkin-button {width:127px; height:130px; background-image: url(images/screenshots/walkin-button.jpg); margin-right:13px; float:left}
#walkin-button:hover {width:127px; height:130px; background-image: url(images/screenshots/walkin-button-hover.jpg);}
#spasalon-button {width:127px; height:130px; background-image: url(images/screenshots/salonspa-button.jpg); float:left; margin-right:14px;}
#spasalon-button:hover {width:127px; height:130px; background-image: url(images/screenshots/salonspa-button-hover.jpg);}
#schools-button {width:127px; height:130px; background-image: url(images/screenshots/schools-button.jpg); float:left; margin-right:14px;}
#schools-button:hover {width:127px; height:130px; background-image: url(images/screenshots/schools-button-hover.jpg);}
#retail-button {width:127px; height:130px; background-image: url(images/screenshots/retail-button.jpg); float:left; margin-right:14px;}
#retail-button:hover {width:127px; height:130px; background-image: url(images/screenshots/retail-button-hover.jpg);}
#selfcheck-in-button {width:127px; height:130px; background-image: url(images/screenshots/check-button.jpg); float:left; margin-right:14px;}
#selfcheck-in-button:hover {width:127px; height:130px; background-image: url(images/screenshots/check-button-hover.jpg);}
#ratemyvisit-button{width:127px; height:130px; background-image: url(images/screenshots/ratemyvisit-button.jpg); float:left; margin-right:14px;}
#ratemyvisit-button:hover {width:127px; height:130px; background-image: url(images/screenshots/ratemyvisit-button-hover.jpg);}
#enterprise-button{width:127px; height:130px; background-image: url(images/screenshots/enterprise-button.jpg); float:left; }
#enterprise-button:hover {width:127px; height:130px; background-image: url(images/screenshots/enterprise-button-hover.jpg);}
.screenshotswrapper {width:980px; height:450px; background-color:#FFFFFF; }
.light-yellow-screenshots {width:400px; height:420px; padding:1px; border-color:#5D92A4; margin-top:23px;list-style:circle; color:#000000; margin-right:20px}
.light-yellow-screenshots li { margin-top: 1em; }
div#navbar2 {
    height: 40px;
    width: 100%;
	margin: auto;

}
div#navbar2 ul {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 40px;
    white-space: nowrap;
	
}
div#navbar2 li {
    list-style-type: none;
    display: inline;    background-color: #5C92A3; padding: 7px 8px;
}
div#navbar2 li a {
    text-decoration: none;

    color: #FFF;font-weight: bold;padding: 7px 8px;
}
div#navbar2 li a:link {padding: 7px 8px;
    color: #FFFFFF; 
}
div#navbar2 li a:visited {padding: 7px 8px;
    color: #FFFFFF; 
}
div#navbar2 li a:hover {
    font-weight: bold;
    color: #FFF;
    background-color: #FF9900;
	padding: 7px 8px;
}
#drive-sales {float:right; margin-left:2px;}
#cuts-costs {float:left; }
#actionable {float:left;}
#best {float:left; margin-left:20px;}
#top-navigation{
	background:url(http://www.supersalon.com/images/topnav-bg.gif) repeat-x;
	width:auto;
	height:48px;
	margin:0 auto;
	font-family: Arial, Helvetica, sans-serif; 
	font-size:14px;
	border:0; margin:0; padding:0;
	
}
#top-navigation ul, li{border:0; padding:0; margin:0;}
#navigation{
	background:url(http://www.supersalon.com/images/nav-bg.gif) repeat-x; 
	height:32px; 
	margin:0 auto;
	width:auto; 
		font-family: Arial, Helvetica, sans-serif; 
	font-size:12px;
	border:0; margin:0; padding:0;
	}
	
#navigation ul, li{border:0; padding:0; margin:0; }
	#navigation .right_link{
		float:right;
		font-size:11px;
		line-height:32px;
		margin:0 10px;
	}
	#navigation ul{
	 height:22px;
	 line-height:32px;	
	}
	#navigation ul li{
		display:inline;
	}
	#navigation ul li a,
	#navigation ul li a:visited {
		background:url(http://www.supersalon.com/images/line-a.gif) right no-repeat;
		padding:0 15px;
		display:block;
		text-decoration:none;
		float:left;
		color:#000000;
		font-weight:bold;
	}
	#navigation ul li a:hover{
		color:#FFFFFF;
		background:#5C92A3;
	}	
/* ----------- SUBLINKS ----------- */
#sublinks{
	width:auto;
	margin:0 auto;
	background:#888888 url(http://www.supersalon.com/images/sublink.gif);
	height:30px;
font-family: Arial, Helvetica, sans-serif; 
	font-size:12px;
	border:0; padding:0;
	
}	
#sublinks ul, li{border:0; padding:0; margin:0; }
	#sublinks ul{
	 height:32px;
	 line-height:31px;	
	}
	#sublinks ul li{
		display:inline;
	}
	#sublinks ul li a,
	#sublinks ul li a:visited {
		padding:0 20px;
		display:block;
		text-decoration:none;
		float:left;
		color:#FFFFFF;
		font-size:13px;
	}
	#sublinks ul li a:hover{
		text-decoration:underline;
	}	
#content-shopping {width:900px; height:100%; margin:auto; font-family:Arial, Helvetica, sans-serif; font-size:14px;}
#schools-logo {width:300px; height:100px; float:left; margin-left:70px; margin-bottom:35px;}
.gallery { float:right; width:316px; height:198px; margin:28px 87px 0 0 !important; margin:28px 43px 0 0; }
#slider { margin:0; padding:0; list-style:none; }
#slider ul,
#slider li { margin:0; padding:0; list-style:none; }
/* 
    define width and height of list item (slide)
    entire slider area will adjust according to the parameters provided here
*/
#slider li { width:316px; height:198px; overflow:hidden; }
p#controls { margin:0; position:relative; }
#prevBtn { display:block; margin:0; overflow:hidden; width:59px; height:59px; position:absolute; left:-610px !important; left:-654px; top:-75px; }
#nextBtn { display:block; margin:0; overflow:hidden; width:59px; height:59px; position:absolute; left: 365px; left:321px; top:-75px; }
#prevBtn a { display:block; width:59px; height:59px; background:url(images/l_arrow.gif) no-repeat 0 0; }
#nextBtn a { display:block; width:59px; height:59px; background:url(images/r_arrow.gif) no-repeat 0 0; }
#banner-top{width:300px; height:68px; float:left; margin-left:65px;}
#top-navigation {padding:0px; margin:0px; height:50px;}
.whatisnew {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.whatisnew ul{ list-style:none; padding:4px;}
.whatisnew li{list-style-image:url(images/whatisnewbullets.gif); margin-bottom:2px;}
.whatisnew a:link{color:#5C92A3;}
.whatisnew a:visited{color:#5C92A3;}
.whatisnew a:hover{color: #FF9900;}
#walkin {width:114px; height:58px; background-image: url(../images/screenshotsnav/walkin.jpg); }
#walkin:hover{width:114px; height:58px; background-image: url(../images/screenshotsnav/walkin-hover.jpg)}
#salonspa {width:114px; height:58px; background-image: url(../images/screenshotsnav/salonspa.jpg); }
#salonspa:hover{width:114px; height:58px; background-image: url(../images/screenshotsnav/salonspa-hover.jpg)}
#schools {width:114px; height:58px; background-image: url(../images/screenshotsnav/schools.jpg); }
#schools:hover{width:114px; height:58px; background-image: url(../images/screenshotsnav/schools-hover.jpg)}
#retail {width:114px; height:58px; background-image: url(../images/screenshotsnav/retail.jpg); }
#retail:hover{width:114px; height:58px; background-image: url(../images/screenshotsnav/retail-hover.jpg)}
#ioffice {width:114px; height:58px; background-image: url(../images/screenshotsnav/ioffice.jpg);}
#ioffice:hover{width:114px; height:58px; background-image: url(../images/screenshotsnav/ioffice-hover.jpg);}
#coolstuff {width:114px; height:58px; background-image: url(../images/screenshotsnav/coolstuff.jpg); }
#coolstuff:hover{width:114px; height:58px; background-image: url(../images/screenshotsnav/coolstuff-hover.jpg)}
#demo {width:114px; height:58px; background-image: url(../images/screenshotsnav/demo.jpg); }
#demo:hover{width:114px; height:58px; background-image: url(../images/screenshotsnav/demo-hover.gif)}
#promo {width:96px; height:58px; background-image: url(../images/screenshotsnav/promo.jpg); }
#promo:hover{width:96px; height:58px; background-image: url(../images/screenshotsnav/promo.gif)}
.screenshotsnav ul{padding:0px; margin:0px;}
.screenshotsnav li{list-style:none; float:left;display:inline}
.screenshotsnav li a{width:114px; height:58px; display:block}