body  {

font-family:           verdana, arial, helvetics, "sans serif";
font-size:             10px;
line-height: 		   2em;
background-image:      url(images/purple-sofa-bg-logo.jpg);
background-position:   top left;
background-repeat:     repeat-x;
background-attachment: fixed;
width:     			   auto;
}

h1  {
font-size:  			180%;                    /*Large heading gray lettering*/
color:                 #707070;
}

h2  {
color:                 #9c2c86;                   /*if purple 9c2c86 main headings*/
font-size:  		   120%;
}


h3  {
font-size:      		80%;
font-weight:   			bold;
color:                  #707070;                  /*gray lettering*/
}

h4   {
font-size:      		90%;                      
}

h5   {
font-size:      		130%;                             
color:         			#ffffff;                  /*white lettering to overlay on images*/
}

h6   {
font-size:      		130%;
font-weight:    		bold;
color:          		#495794;                  /*gray/blue lettering Soundbuster*/
margin:					0px;
}          


#header   {
width:					auto;
margin:    	    		-7px 0px 0px 0px
}


.bubplastic.horizontal {                         /*start menu navigation buttons*/
	width: 1076px;
	height: 30px;
	margin-left: 0px;
	margin-top: -7px;
	padding: 0px 0px 0px 25px;
	background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;
}
.bubplastic.horizontal ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bubplastic.horizontal ul li {
	float: left;
	margin: 0;
	padding: 0;
	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}

.bubplastic.horizontal ul li a {
	display: block;
	height: 27px;
	padding-left: 20px;
	float: left;
	text-transform: uppercase;
	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
	font-size: 100%;
	color: #FFFFFF;
	text-decoration: none;
}

.bubplastic.horizontal ul li a span.menu_ar {
	display: block;
	float: left;
	height: 22px;
	padding-top: 3px;
	padding-right: 40px;
	background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
	cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */

/* PINK HOVER */
.bubplastic.pink ul li a:hover,
.bubplastic.pink ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-pink.gif) top left no-repeat;
}
.bubplastic.pink ul li a:hover span.menu_ar,
.bubplastic.pink ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-pink.gif) top right no-repeat;
}      /*end navigation buttons*/
  

#prodbar {
/*Products on left side*/             /*sets style width,font size,type,color,border width etc for prodbar*/
font-size: 			110%;
font-weight:  		bold;
color:    			#707070;
border-width: 		1px;
border-style: 		solid;
border-color: 		#007e7e;
padding: 			30px 20px 20px 20px;					/* sets 20px padding all round side bar*/                     
margin-bottom: 		10px;                    /* sets a left margin of 45px with 10px on bottom*/

text-align: 		center;                  /*text aligned to the center*/
background-color:	#e5e6e8;               /*sets background color grey*/
float:              left;                  /* floats sidebar to the left*/
width:				15%;                   /* sidebar width 150px*/
display:            inline;

}	



#main {

width:  		    52%;                   /*sets width of main too 635px*/
line-height:	    2.0em;                 /*sets lineheight of main at 2.0em*/
height:             auto;
padding: 		    4px 20px 10px 20px;    /*sets padding main*/
color:    			#707070;               /*sets font color charcoal for main body*/
font-size:			120%;                  /*sets font size 120% of body font*/
margin-left:  	    3%;                 /*changed to allow prodbar to float over*/
border:             solid;
border-width:		2px;
text-align:         center;
background-color:   #ffffff;               /*background main white*/
float: 				left;
}

#prodpage  {
width:  		    52%;                   /*sets width of main too 635px*/
line-height:	    2.0em;                 /*sets lineheight of main at 2.0em*/
height:             auto;
padding: 		    4px 20px 10px 20px;    /*sets padding main*/
color:    			#707070;               /*sets font color charcoal for main body*/
font-size:			120%;                  /*sets font size 120% of body font*/
margin-left:  	    3%;                 /*changed to allow prodbar to float over*/
border:             solid;
border-width:		2px;
text-align:         center;
background-color:   #e5e6e8;               /*background main white*/
float: 				left;
}


#linkbar {
font-size: 			110%;                /* tells browser font size is 115% of body font size*/
font-weight:		bold; 
color:    			#707070;              /*sets style for normal font*/ 
border-width: 		1px;                 /*sets style for nav border width changed from thin*/ 
border-style: 		solid;               /*sets style for nav bar solid border*/ 
border-color: 		#007e7e;             /*sets style for nav bar border green*/ 
padding: 			20px 12px 21px 10px; /*changed this from 15px to correct for Safari*/
margin-left: 		3%;            	   /*aligns right side bar with top of main and prodbar*/
margin-bottom:      2%;
width:  			15%;               /*sets width of linkbar at 150px*/
text-align: 		center;              /*aligns text centre on sidebar*/
background-color:	#e5e6e8;             /*sets color grey for side bar background*/
float:	   			left;               /*floats the side bar to the right*/

}


#photodiscs  {
margin:    0px 0px 0px 50px;              /*to position discs*/
}
	
	
#list { 
width:  		    300px; 
text-align:         right;
float:              left;
font-size:			80%;
font-style:			italic;
line-height:	    1.7em;
padding: 		    0px;
color:    			#707070;
background-color:   #ffffff;
}

ul {
list-style-type:    none;

}


#artistalbums {
width:  		    550px; 
line-height:	    2.0em;
padding: 		    20px;
color:    			#707070;
background-color:   #ffffff;
font-size:			110%;
margin:  			0px 0px 0px 0px;
      
}

#image     {                     /*mayhistorytour*/
background-image:    url(images/imagesofa.jpg);    /*sofa image now a background image to allow text overlay*/
background-repeat:   no-repeat;
color:               #FFFFFF;
height:				450px;
width:				100%;
}



#image2   {                       /*Johns hitlist*/
background-image:    url(images/jh-SSL-console.jpg);   /*john at desk image now a background image to allow text overlay*/
background-repeat:   no-repeat;
color:               #FFFFFF;
height:				 450px;
width:				 100%;
margin:              40px 0px 0px 0px;
}


#text1     {                      
font-family:    Arial, Verdana, san-serif;    /*superimpose text over the main image*/
font-size:  	80%;
font-style:		italic;
font-weight:	bold;
line-height:	1.35em;
color:			#ffffff;
height: 		auto;
width:  		auto;
margin-top:     -20px;
margin-right:   20px;
text-align:     left;
padding-left:   10px;                        /*horizontal text position adjustment over image*/
float: 		    left;               
}


#text2   {
font-family:    Arial, Verdana, san-serif;    /* superimpose any text over the main image*/
font-size:  	80%;
font-style:		italic;
font-weight:	bold;
line-height:	1.35em;
color:			#ffffff;
height: 		auto;
width:  		180px;
margin-top:     -20px;
margin-left:    40px;
text-align:     right;
padding-right:  10px;                         /*vertical text position adjustment over image*/
float:          right;
}


a:link {
  color:            #0469b3;             /*sets text color for link to beige
  text-decoration:  none;
  border-bottom:    thin dotted #b76666; /*sets thin dotted border and color red*/    
}
  
a:hover {
	color:			#74269d;            /*visited text purple*/
	background:     #9c2c86;            /*hover background coral pink f88396*/
}

#hitscontainer {                           /*this is on hitlist-hitlist1970*/
width:				100%;
border:          	2px double gray;
background:         #ffffff;
margin-left:        8px;
height:            1430px;
}

#hitscontainer2000 {
width:				100%;
border:          	2px double gray;
background:         #ffffff;
margin-left:        8px;
height:             2960px;
}

#hitscontainer1990 {
width:				100%;
border:          	2px double gray;
background:         #ffffff;
margin-left:        8px;
height:             2960px;
}
 
#hitscontainer1980 {
width:				100%;
border:          	2px double gray;
background:         #ffffff;
margin-left:        8px;
height:             1360px;
}

#hitscontainer1970 {
width:				100%;
border:          	2px double gray;
background:         #ffffff;
margin-left:        8px;
height:             1950px;
}


#hitsongs     {                               /*this is on hitlist-hitlist1970*/ 
font-family:    Arial, Verdana, san-serif;    
font-size:  	90%;
font-style:		italic;
font-weight:	bold;
line-height:	2.3em;
color:			#959595;
background:     #FFFFFF;
height: 		auto;
width:  		235px;                       
margin-left:    50px;
text-align:     right;
padding-right:  5px;                        /*horizontal text position adjustment over logo*/
float: 		    left;


}


#hitartists   {                               /*this is on hitlist-hitlist1970*/
font-family:    Arial, Verdana, san-serif;    /*NEW COMMENT now able to superimpose any text over the main image*/
font-size:  	90%;
font-style:		italic;
font-weight:	bold;
line-height:	2.3em;
color:			#959595;
background:     #FFFFFF;
height: 		auto;
width:  		215px;
margin-right:   50px;
text-align:     left;
padding-left:   10px;                         /*NEW COMMENT vertical text position adjustment over logo*/
float:          right;
}


#hitheading  {                            /*this is on hitlist-hitlist1970*/
width:  		    100%;                 /*sets width of heading*/
line-height:	    1em;                 /*sets lineheight 2.0em*/
height:             auto;
padding: 		    20px 0px 10px 0px;      /*sets padding*/
margin-left:        8px;
color:    			#ffffff;               /*sets font color white for main body*/
font-size:			110%;                  /*sets font size 120% of body font*/
font-weight:	    bold;
border:             solid;
border-width:		2px;
text-align:         center;
background-color:   #a85c99;
}

#book      {
text-align:          center;
padding-left:        20px;
padding-right:       20px;
}  


#allcontent  {
width:               1130px;
height:              auto;              
margin-left:         auto;
margin-right:        auto;
}

em {
font-weight:         bold;
}

#formbody  {
background-color:     #cccccc;

}

#verify    {
background-color:    #E4F8E4; 
text-align:          left;

}

#formbase  {
background-color:    #cccccc;

}

#footer {
font-size:           80%;
color:              #ffffff;
line-height:         1.6em;
background-color:   #9c2c86;
text-align:          center;
height:              70px;
clear:				 both;

}

#textgrey{
color:             #959595;
font-style:        bold;
}

p.picleft{
float:			left;
width:          250px;
}

p.buyright{
float:	        left;
text-align:     left;

}

p.left{
text-align:     left;
}

p.gurucolor{
color:      #959595;

}

p.photolist  {
width:175px;
height:250px;
margin:30px 40px 0 40px;
background-color:  #e5e6e8;
display:inline-block;
vertical-align:   middle;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
box-shadow:  5px 5px 10px #373737;
 
}


p.photolist {

margin:				0  10px 10px 10px;          /*COMMENT sets margins for image in travel tips*/
float: 		left;

}

photolist2  {                              
margin:				0  10px 10px 10px;          /*COMMENT sets margins for image in travel tips*/
float: 				left;                        /*NEW COMMENT sets float left for image in travel tips*/

}


#colorbkd {

background-color:	#e9ebdd;             /*NEW COMMENT sets background color to beige*/
width:				500px;               /*NEW COMMENT sets width of travel tips to same as main*/
color:   			#007e7e;             /*NEW COMMENT sets text color to green*/ 
text-align: 		left;              /*NEW COMMENT sets text alignment to centre*/
padding: 			10px 10px 10px 10px;    /*NEW COMMENT changed to 20px right hand padding to align with main*/
margin: 		   10px 10px 0px 50px;  /*NEW COMMENT changed to 130px left hand margin to align with main, and -40px top margin to make thumbtack div partially overlap this div at the top*/
}

#colorbkd2 {

background-color:	#e9ebdd;             /*NEW COMMENT sets background color to beige*/
width:				500px;               /*NEW COMMENT sets width of travel tips to same as main*/
color:   			#007e7e;             /*NEW COMMENT sets text color to green*/ 
text-align: 		left;              /*NEW COMMENT sets text alignment to centre*/
padding: 			10px 10px 10px 10px;    /*NEW COMMENT changed to 20px right hand padding to align with main*/
margin: 		   10px 10px 0px 50px;  /*NEW COMMENT changed to 130px left hand margin to align with main, and -40px top margin to make thumbtack div partially overlap this div at the top*/
}

p.first {       
background-color:  #e9ebdd;      /*added color to first paragraph of each destination page for visual hierarchy improvement*/
width:              500px;
margin-left:        0px;
padding:             15px;
}

#narrow {

width:				600px;               /*NEW COMMENT sets width of travel tips to same as main*/
color:   			#007e7e;             /*NEW COMMENT sets text color to green*/ 
text-align: 		left;              /*NEW COMMENT sets text alignment to centre*/
padding: 			0px 10px 0px 20px;    /*NEW COMMENT changed to 20px right hand padding to align with main*/
margin: 		   10px 10px 0px 45px;  /*NEW COMMENT changed to 130px left hand margin to align with main, and -40px top margin to make thumbtack div partially overlap this div at the top*/
}


#button {
float:            center;
background-color:   purple;
height:				30px;
margin:           0px 250px 0px 250px;
}


#more    {
display:      none;
}

      
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
@media (min-width: 481px) {
  /* smartphones, Android phones, landscape iPhone */
}
@media (min-width: 600px) {
  /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
}
@media (min-width: 801px) {
  /* tablet, landscape iPad, lo-res laptops ands desktops */
}