/* John Preston CSS */

/* CSS Reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

fieldset,img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,label,ul,ol,dl,fieldset,address {margin:1em 0em;}
q:before,q:after{content:'';}
abbr,acronym {border:0;}

/* Structure -Home Page*/

#hp_wrapper {
  padding-top: 85px;
}

body.hp {
  background-image: url(images/hp_background_gradient.gif);
  background-position: top;
  background-repeat: repeat-x;
}

#hp_content_wrapper {
  background-color: #000;
  background:url(images/hp_john_preston_logo_pic.jpg) no-repeat;
  text-align: center;
  width: 665px;
  height:400px;
  margin: 0 auto 35px auto;
  border: 1px solid #2f2f2f;
}

/*#center_container {
  background-color: transparent;
  margin-right: 10px;
  width: 370px;
}*/

#hp_top_container {
  width: 100%;
  height: 300px;
  text-align: left;
  margin-left:10px;
}

.hp_middle_container {
  margin-top:140px;
  width: 250px;
  height: 60px;
  text-align: center;
  margin-left:45px;
}


#hp_buttons_container {
  width: 100%;
  height: 50px;
  text-align: center;
}

#hp_buttons_container .hp_spacer {
  margin-right: 30px;
}

#hp_navigation_container {
  width: 100%;
  margin-bottom: 30px;
  height: 40px;
  text-align: center;
  font-size: 62.5%;
}

/* Structure -Ecommerce Page*/

body.ec {
  background-image: url(images/hp_background_gradient.gif);
  background-position: top;
  background-repeat: repeat-x;
}

#ec_wrapper {
  padding-top: 15px;
}

body.ec {
  background-image: url(images/hp_background_gradient.gif);
  background-position: top;
  background-repeat: repeat-x;
}

#ec_content_wrapper {
  background-color: #000;
  background:url(images/hp_john_preston_logo_pic.jpg) no-repeat;
  text-align: center;
  width: 665px;
  margin: 0 auto 5px auto;
  border: 1px solid #2f2f2f;
}

/*#center_container {
  background-color: transparent;
  margin-right: 10px;
  width: 370px;
}*/

#ec_top_container {
  width: 100%;
  height: 245px;
  text-align: left;
  margin-left:0px;
}

.ec_middle_container {
  margin: 0px auto 15px auto;
  width: 100%;
  background:#000000;
  text-align: left;
  overflow: visible;
  border-top: 1px solid #2f2f2f;
}

.ec_menu {
  width: 100%;
  height: 20px;
  padding:0px;
  background:#ffffff;
  text-align: left;
  overflow:auto;
  border-top: 1px solid #2f2f2f;
}

#ec_buttons_container {
  width: 100%;
  height: 30px;
  text-align: center;
  float:right;
}

#ec_buttons_container .hp_spacer {
  margin-right: 100px;
}

#ec_navigation_container {
  width: 100%;
  margin-bottom: 0px;
  height: 40px;
  float:right;
  text-align: center;
  font-size: 62.5%;
}

#menu {
	width: 100%;
	height: 20px;
	text-align: center;
	background-color: #666666;
	margin: 0 auto 0 auto;
}

#menu ul {
	margin-left: 55px;
	padding: 0;
	list-style: none;
	
}

#menu li {
	color:#FFFFFF;
	padding: 0;
	display: inline;
	background: none;
}

#menu a {
	color:#FFFFFF;
	display: block;
	float: left;
	height: 20px;
	font-size: 50%;
	font-weight: bold;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	text-decoration:none;
}

#menu a:hover {
	text-decoration: none;
	color: #000000;
	background-color: #FFFFFF;
}

.catbar {
	margin-bottom: 1px;
	font-size:11px;
	text-decoration: none;
}

.catbar ul {
	margin: 0;
	padding: 0;
	list-style: none;
	
}

.catbar li {
	display: inline;
}

.catbar a {
	display: block;
	height: 23px;
	padding: 7px 0 0 21px;
	font-weight: bold;
	background: #666666 ;
	border-bottom: 1px solid #000000;
	color:#FFFFFF;
}

.catbar a:hover {
	background: #FFFFFF;
	color: #000000;
}

#LeftBar {
	padding-top:20px;
	width:150px;
	float:left;
}

#MainBar {
	padding-top:20px;
	width:660px;
	overflow:auto;
}

#MainBarFull {
	padding-top:20px;
	width:100%;
	float:right;
	overflow:auto;
}

/* Structure */

#wrapper {
  background-image: url(images/background_gradient.gif);
  background-position: bottom;
  background-repeat: repeat-x;
  padding-bottom: 20px;
}

#content_wrapper {
  background-color: transparent;
  margin: 0 auto;
  text-align: center;
  width: 780px;
  padding: 0 10px;
  font-size: 62.5%;
  height: auto !important; /* for modern browsers */
  height: 500px; /* for IE5.x and IE6 */
  min-height: 500px; /* for modern browsers */
}

#content_wrapper_gallery {
  background-color: transparent;
  margin: 0 auto;
  text-align: center;
  width: 870px;
  padding: 0 10px;
  font-size: 62.5%;
  height: auto !important; /* for modern browsers */
  height: 500px; /* for IE5.x and IE6 */
  min-height: 500px; /* for modern browsers */
}

#left_container {
  background-color: transparent;
  float: left;
  margin-right: 10px;
  width: 370px;
}

#right_container {
  background-color: transparent;
  float: right;
  margin-left: 10px;
  width: 370px;
}

#right_container_gallery {
  background-color: transparent;
  float: right;
  margin-left: 10px;
  width: 460px;
}

#footer_container {
  text-align: center;
  margin: 10px auto;
  padding: 0 10px;
  width: 780px;
  font-size: 62.5%;
}

#shopfooter_container {
  text-align: center;
  margin: 0px auto;
  padding: 0 10px;
  width: 100%;
  font-size: 62.5%;
  float:right;
}

#logo_john_preston {
  margin: 30px 0 40px 0;
  text-align: center;
}

#orchid {
  margin-top: 80px;
  margin-bottom: 30px;
}

#rhc_images_container {
  margin-top: 35px;
}

.boxout {
  width: 150px;
  display: block;
  float: left;
  margin: 0px 10px 170px 0;
  padding: 5px 0 5px 0px;
}

.boxout p {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  line-height: 1.4em;
  text-align: center;
  margin: 5px 0 4px 0;
}

.boxout .quote {
  font-size: 0.9em;
  font-style: italic;
}

.clear {clear: both;}

/* Theme */
body {
  background-color: #000;
  color: #F2F2F2;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 100.01%;
  line-height: 1.1em;
}

a {color: #F2F2F2;}

a:link, a:visited {
  text-decoration: underline;
}

a:hover, a:active {
  text-decoration: none;
}

h1 {
  color: #F2F2F2;
  font-size: 2.0em;
  font-weight: bold;
  text-align: left;
  text-transform: uppercase;
  margin: 0.5em 0 -0.2em 0;
}

h2 {
  color: #F2F2F2;
  font-size: 1.8em;
  font-weight: bold;
  text-align: left;
  text-transform: uppercase;
  margin: 1em 0 -0.5em 0;
}

img {border: 0;}

p {
  text-align: justify;
  font-size: 1.2em;
}

.form_text {
  text-align: left;
  font-size: 1.2em;
}

p.copyright {
  color: #888;
  font-size: 1.0em;
  text-align: center;
}

p.testimonial_boxout {
  width: 310px;
  margin: 20px 25px 25px 20px;
  padding-left: 10px;
  border-left: 1px solid #F2F2F2;
}

p.contact_details {
  margin-top: 40px;
}

p.event_types {
  font-size: 1.5em;
}


a.tradeweb {color: #888;}

ul {
  margin: 0 0 0 1.5em;
  padding: 0 0 0 1.5em;
}

li {
  list-style-type: square;
  text-align: left;
  font-size: 1.2em;
}

ul#links_list {
 margin: 0 0 0 0.5em;
 padding: 0 0 0 0.5em;
}

ul#links_list li{
  background-image: url(images/link_arrow.gif);
  background-repeat: no-repeat;
  background-position: 0 7px;
  padding: 3px 0 3px 20px;
  margin: .4em 0 1em 0;
  list-style-type: none;
}

ul#footer_nav {
  margin: 0 0 0.5em 0;
  padding: 0;
}

ul#footer_nav li {
  color: #888;
  display: inline;
  font-size: 1.3em;
  font-weight: bold;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul#footer_nav li a {
  color: #888;
  text-decoration: none;
}

ul#footer_nav li a:hover {
  text-decoration: underline;
}

body#home ul#footer_nav li.home a,
body#about_us ul#footer_nav li.about_us a,
body#flower_sch ul#footer_nav li.flower_sch a,
body#events ul#footer_nav li.events a,
body#corporate ul#footer_nav li.corporate a,
body#weddings ul#footer_nav li.weddings a,
body#parties ul#footer_nav li.parties a,
body#shop ul#footer_nav li.shop a,
body#hire ul#footer_nav li.hire a,
body#testimonials ul#footer_nav li.testimonials a,
body#links ul#footer_nav li.links a,
body#contact_us ul#footer_nav li.contact_us a {
  color: #FFF;
}

.submit_but {color: #000; border: solid 1px #FFF; background-color: #FFF; cursor: pointer;}

.thumbnail{
position: relative;
z-index: 0;
width:400px;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
overflow:visible;
border:0px;
}

.thumbnail span{ /*CSS for enlarged image*/
overflow:visible;
position: absolute;
background-color: #000000;
padding: 0px;
left: 10px;
border: 1px dashed gray;
font-size: 10px;
visibility: hidden;
text-align:justify;
color: #666;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
width:300px;
overflow:visible;
padding:10px;
top: -40px;
left: 120px; /*position where enlarged image should offset horizontally */
}