/* -------------------------------------------------

TheInternet Business Stylesheet

Version: 1.1
Author: Carl Brown
Email: carl@theinternet.co.uk
Last modified: 28th July 2009

=== Contents    ================================| Line

  1. Homepage Search Module ______________________(28)
  2. Search form on business homepage ____________(104)
  3. Search form on business results page ________(186)
  4. Search Results ______________________________(227)
  5. Upgraded Business Results ___________________(381)
  6. Business Profile ____________________________(490)
    i.   Video Profile ___________________________(651)
    ii.  Features Tabs ___________________________(748)
    iii. Gallery _________________________________(885)
  7.
  8.
  9.
  10.

--------------------------------------------------*/
   
/* !=== Homepage Search Module    ========================================== */

.businessSearchResults {
  background: url(/images/static/business_icon.png) no-repeat 15px 30px #ffffff;
  border: 1px solid #bcbcbc;
  margin-right:-3px;
  font-size:13px;
  line-height:15px;
  color:#3c3c3c;
  letter-spacing: 0.6px;
}

#businessSearchBox {
  background: url(/images/static/business_icon.png) no-repeat 15px 70px #ffffff;
  border:1px solid #bcbcbc;
  float:right;
  width:499px;
  margin:0 -3px 5px 0;
  color:#3c3c3c;
  letter-spacing: 0.5px;
  height:185px;  
}

div.businessSearchText {
  margin:5px 0 0 10px;
  font-weight:bold;
  color:#3c3c3c;
  letter-spacing:0.5px;
}

div.businessSearchInner {
  padding:10px;
}

#businessSearchForm {
  margin-top:5px;
  width:75%;
  float:right;
}

#businessSearchForm fieldset {
  border:none;
}

#businessSearchForm legend {
  display:none;
}

#businessSearchForm label {
  float:left;
  width:80px;
  position: relative;  
}

#businessSearchForm label em {
  position:absolute;
  left:100px;
  top:19px;
  width:200px;
}

#businessSearchForm input.searchInput {
  border:1px solid #bcbcbc;
  margin-bottom:25px;
  width:245px;
}

#businessSearchForm .blockButton {
  width:auto;
  margin:0;
}

#businessSearchForm #business_location:focus, #businessSearchForm #business_keywords:focus, #businessSearchForm select:focus {
  background-color:#F0F8FF;
}

/* !=== Search form on business homepage (no search results)   ========================================== */

div.businessHomepageWrapper h2 {
  background: none;
  border-bottom: 3px solid #6c447c;
  margin: 10px 0 0 0;
  padding-bottom:10px;
  font-size: 20px;
}

div.businessHomepageWrapper .businessIntro {
  background-color: #fef4b5;
  border: 3px solid #fff19c;
  font-size: 14px;
  padding: 10px;
  margin-top:20px;
}

div.businessHomepageWrapper ul {
  margin-left: 20px;
}

div.businessHomepageWrapper ul li {
  list-style-type: disc;
  padding: 5px 0;
}

div.businessHomepageWrapper #businessSearchForm {
  border: 3px solid #6c447c;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  float:none;
  width:auto;
  margin: 20px 0 0 0;
}

div.businessSearchFormInnerWrapper {
  margin: 40px 0 20px 20px;
  width: 455px;
}

div.businessHomepageWrapper div.fieldWrapper {
  margin: 0 0 30px 0;
}

div.businessHomepageWrapper #businessSearchForm label {
  display: block;
  font-size: 20px;
  float:left;
  line-height: 22px;
  margin: 0 20px 0 0;
  position: relative;
  width: 100px;
}

div.businessHomepageWrapper #businessSearchForm label span {
  background: url(/images/static/businessSearchHelp.png) no-repeat left top;
  display: block;
  font-size: 14px;
  height: 58px;
  left: 440px;
  padding: 20px 0 10px 50px;
  position: absolute;
  top: -30px;
  width: 402px;
}

div.businessHomepageWrapper #businessSearchForm label span.hideInputFieldHelp {
  display: none;
}

div.businessHomepageWrapper #businessSearchForm #business_location, div.businessHomepageWrapper #businessSearchForm #business_keywords {
  border:1px solid #bcbcbc;
  margin: 0;
  padding: 4px 0;
  width: 330px;
}

div.businessHomepageWrapper #businessSearchForm #businessSearchSubmit {
  float: right;
}

/* !=== Search form on business results page    ========================================== */

.businessSearchResults #businessSearchForm {
  float:none;
  width:780px;
  margin-left:120px;
  margin-top:20px;
}

.businessSearchResults #businessSearchForm label {
  float:none;
  width:80px;
  position: relative;
}

.businessSearchResults #businessSearchForm label em {
  position:absolute;
  left:70px;
  top:0px;
  width:200px;
  font-size:11px;
}

.businessSearchResults #businessSearchForm #business_location, .businessSearchResults #businessSearchForm #business_keywords {
  border:1px solid #bcbcbc;
  margin-bottom:0px;
  margin-right:20px;
  width:245px;
}

.businessSearchResults #businessSearchForm .blockButton {
  width:auto;
  margin:0;
}

/* search results table hack */

#searchResultsTable .longRightTh {
  background: url(/images/static/longTableHeaderR.gif) no-repeat right top;
}

/* !=== Search Results    ========================================== */

/* search criteria */

div.searchCriteria {
  background: url(/images/static/business_search_result_features_gradient.png) repeat-x left top #fef4b5;
  border: 1px solid #fff19c;
  overflow: auto;
  padding: 10px 5px;
}

div.searchCriteria .searchCriteriaWhat {
  float: left;
}

div.searchCriteria .searchCriteriaWhat strong {
  color: #013eb0;
}

div.searchCriteria .searchCriteriaWhere {
  float: left;
  margin-left: 10px;
}

div.searchCriteria .numberOfResults {
  float: right;
}

/* number of results per page form */

form#businessResultsPerPage {
  margin: -10px 0 7px 0;
  text-align: right;
}

form#businessResultsPerPage legend {
  display: none;
}

/* Generic and free business listing styles */

div#businessResultsContainer {
  width: 100%;
  float: left;
  margin-right: -200px; /* pull the refinement <div> alongside this. */
}

div#businessResultsContent {
  margin-right: 210px; /* stop the results from overlapping the refinement. */
}

div#refineBusinessResults {
  width: 200px;
  background-color: #fffadb;
  float: right;
}

div.businessResultWrapper {
  border:1px solid #fff;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  margin-bottom: 10px;
}

/* highlight a search result when it's hovered */
div.businessResultWrapper:hover {
  background-color: #f2e9fd;
  border:1px solid #6c447c;
}

div.businessResultWrapper h3 {
  background: url(/images/static/business_search_result_header.png) repeat-x left top #6c447c;
  border: 1px solid #bcbcbc;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  color: #fffadb;
  font-size: 14px;
  padding: 5px 0 5px 10px;
}

div.businessResultWrapper p {
  border: 1px solid #bcbcbc;
  border-width: 0 1px;
  padding: 10px 10px 0 10px;
}

div.businessResultWrapper p.businessResultTelephone {
  padding-bottom: 10px;
}

div.businessResultWrapper p span {
  color: #013eb0;
  display: block;
  float: left;
  width: 100px;
}

div.businessResultFooter {
  background: url(/images/static/business_search_result_features_gradient.png) repeat-x left top #fef4b5;
  border: 1px solid #bcbcbc;
  border-width: 0 1px 1px 1px;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  overflow: auto;
}

div.businessResultFooter ul.businessResultFeatures {
  float: left;
  margin: 5px 0 5px 10px;
  overflow: auto;
}

div.businessResultFooter ul.businessResultFeatures li {
  display: block;
  float: left;
  height: 24px;
  margin-right:2px;
  overflow: hidden;
  text-indent: -5000px;
  width: 24px;
}

div.businessResultFooter ul.businessResultFeatures li.videoProfile {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -456px;
}

div.businessResultFooter ul.businessResultFeatures li.featuredItems {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -432px;
}

div.businessResultFooter ul.businessResultFeatures li.hasVouchers {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -384px;
}

div.businessResultFooter ul.businessResultFeatures li.featuredItemVideos {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -408px;
}

div.businessResultFooter ul.businessResultFeatures li.hasGallery {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -360px;
}

div.businessResultFooter ul.businessResultFeatures li.isRecruiting {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -480px;
}

div.businessResultFooter span {
  display: block;
  float: right;
  padding: 5px 10px 5px 0;
}

/* Ugraded business listing */

div.upgradedBusinessContainer {
  background: url(/images/static/1x1.gif) repeat-y right top;
  float: left;
  /* a liquid width box that will resize when the refining is added */
  width: 100%;
  margin-right: -120px; /* allow for the view profile button */
}

div.upgradedBusinessContainerInner {
  background: url(/images/static/1x1.gif) repeat-y left top;
}

div.upgradedBusinessContent {
  margin-right: 125px; /* move contents away from the profile button, with extra space */
}

div.leftImage {
  float: left;
  margin: 10px 0 0 14px; /* centre the image between the left edge and the main content */
  overflow: hidden;
  text-align: center;
  width: 80px;
  border: 1px solid #bcbcbc;
}

/* make space for image if there is one */
div.upgradedBusinessMain.hasLogo {
  margin-left: 100px;
}

div.viewBusinessProfile {
  background: url(/images/static/1x1.gif) repeat-y right top;
  float: right;
  margin-top: 10px;
  text-align: center;
  width: 120px;
}

div.viewBusinessProfile a {
  background: url(/images/static/button_view_business_profile.png) no-repeat left top;
  color: #3c3c3c;
  display: block;
  font-weight: bold;
  height: 37px;
  line-height: 37px;
  text-decoration: none;
  width: 111px;
}

div.viewBusinessProfile a:hover {
  background-position: left bottom;
  color: #6c447c;
}

div.upgradedBusinessContainer p {
  border: none; /* clear style from non-upgraded business listing */
}

div.upgradedBusinessContainer .businessEmailContact {
  padding-bottom: 10px; /* creates space at bottom of upgraded business listing */
}

div.businessResultFooter.hasFeatures span {
  line-height: 24px; /* centre category text when icons are present */
}

/* Page navigation */

div.businessResultsPagination {
  border-top: 1px solid #bcbcbc;
  height: 22px;
  line-height: 22px;
  margin: 20px 0;
  padding-top: 20px;
  text-align: right;
}

div.businessResultsPagination a, div.businessResultsPagination span {
  padding: 3px 5px;
  border: 1px solid #fff;
}

div.businessResultsPagination a:hover {
  background-color: #397eff;
  color: #fff;
}

div.businessResultsPagination span {
  background-color: #bfd6ff;
}

/* Buysiness advert - add business / upgrade info */

div.businessResultsAdvert {
  background-color:#bfd6ff;
  clear: both; /* so that it is always below results and refinement */
  color: #6c447c;
  padding: 10px;
  text-align: right;
}

div.businessResultsAdvert p {
  float: left;
  width: 300px;
  text-align: left;
}

/* !=== Business Profile    ========================================== */

div#businessDetailsWrapper {
  float: right;
  overflow: auto;
  width: 500px;
}

div.businessDetails {
  background: url(/images/static/business_search_result_features_gradient.png) repeat-x left top #fef4b5;
  border: 3px solid #6c447c;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  overflow: auto;
  padding: 10px;
}

div.businessContactInfo {
  color: #6c447c;
  float: right;
  width: 367px;
}

div.businessContactInfo h2 {
  background: none;
  color: #013eb0;
  font-size: 16px;
}

div.businessContactInfo p {
  padding: 5px 0;
}

div.businessContactInfo p strong {
  font-size: 18px;
}

div.businessContactInfo p.reCaptchaEmail {
  color: #397eff;
}

div.businessContactInfo p.reCaptchaEmail a {
  color: #ec3838;
}

div.businessLogoWrapper {
  border: 2px solid #bcbcbc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: hidden;
  padding: 5px;
  text-align: center; /* force images into the center when in portrait orientation */
  width: 80px;
}

div.businessAddress {
  border: 1px solid #bcbcbc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  float: left;
  padding: 10px;
  width: 296px;
  line-height: 18px;
}

div.businessAddress p {
  margin-bottom: 10px;
}

div.businessFeatures {
  border: 1px solid #bcbcbc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  float: right;
  padding: 10px;
  width: 150px;
}

div.businessFeatures h3 {
  text-align: center;
  font-size: 14px;
}

div.businessFeatures ul {
  margin-top: 10px;
}

div.businessFeatures ul li {
  color: #6c447c;
  display: block;
  height: 24px;
  line-height: 24px;
  margin-bottom: 5px;
  padding-left: 30px; /* allow for background image */
  text-decoration: none;
}

div.businessFeatures ul li a {
  color: #6c447c;
  text-decoration: none;
}

div.businessFeatures ul li.businessHasProfileVideo {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -456px;
}

div.businessFeatures ul li.businessHasFeaturedItems {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -432px;
}

div.businessFeatures ul li.businessHasProductVideos {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -408px;
}

div.businessFeatures ul li.businessIsRecruiting {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -480px;
}

div.businessFeatures ul li.businessHasVouchers {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -384px;
}

div.businessFeatures ul li.businessHasGallery {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -360px;
}

/* If a business has no features, then the class 'hasNoFeatures' is added to the parent <div>
and the following styles are added */

/* If a business has no profile video, then the class 'hasNoProfileVideo' is added to the parent <div>
and the following styles are added */


div#businessDetailsWrapper.hasNoProfileVideo {
  float: left;
  width: 926px;
}

div#businessDetailsWrapper.hasNoProfileVideo div.businessDetails {
  width: 440px;
}

div#businessDetailsWrapper.hasNoProfileVideo div#businessOverview {
  float: left;
  width: 466px;
}

div#businessDetailsWrapper.hasNoProfileVideo div.businessAddress {
  margin-left: 10px;
  width: 245px;
}

div#businessDetailsWrapper.hasNoProfileVideo div.businessFeatures {
  float: left;
  margin-left: 10px;
}

div#businessDetailsWrapper.hasNoProfileVideo div.businessContactInfo {
  width: 326px;
}

/* !=== Video Profile    ========================================== */

div#businessProfileVideoWrapper {
  background-color: #6c447c;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  padding: 10px;
  width: 394px; /* necessary for IE */
}

div.videoProfileIdentifier {
  color: #FEF4B5;
  font-size: 11px;
  line-height: 26px;
  margin-top: 5px;
}

a.businessProfileVideo {
  background-color: #fff;
  display: block;  
  height: 296px;
  position: relative;
  text-align: center;
  width: 394px;
}

a.businessProfileVideo span {
  background: url(/images/static/business-profile-sprite.png) no-repeat left -280px;
  cursor: pointer;
  display: block;
  height: 67px;
  left: 130px;
  position: absolute;
  text-indent: -5000px;
  top: 100px;
  width: 133px;
}

a.businessProfileVideo:hover span {
  background-position: -133px -280px;
}

/* the overlayed element */ 

button.buttonEmbed {
  background-color: transparent;
  border: 1px solid #fff;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  color: #fff;
  cursor: pointer;
  float: right;
  font-size: 11px;
  margin-top: 10px;
  padding: 2px;
}

button.buttonEmbed:hover {
  background-color: #397eff;
}

div.embedOverlay {      
  /* growing background image */ 
  background-image: url(/images/static/business_embed_overlay.png); 
  color: #3c3c3c;
  display: none;
  height: 264px;            
  /* initially overlay is hidden */  
  padding: 55px;
  width: 600px; 
}

div.embedOverlay h3 {
  font-size: 16px;
  font-weight: bold;
  color: #6c477c;
  border-bottom: 1px solid #6c477c;
}

div.embedOverlay textarea {  
  border: 1px solid #6c447c;
  color: #3c3c3c;
  margin: 10px 0;
  width: 600px;
}
 
/* default close button positioned on upper right corner */ 
div.embedOverlay div.close { 
  background-image: url(/images/static/icon_close.png); 
  position: absolute; 
  right: 12px; 
  top: 12px; 
  cursor: pointer; 
  height: 28px; 
  width: 28px; 
} 

/* !=== Features Tabs    ========================================== */

/* container for whole tabs */
div#featuresTabs {
  clear: both;
  padding-top: 20px;
  width: 926px;
  position: relative;
}

/* the tabs */
ul.featuresTabsNavigation {
  border-bottom: 3px solid #6c447c;
  list-style: none;
  height: 30px !important; /* this enables the active tab to sit lower and overlap the bottom border */
}

ul.featuresTabsNavigation li {
  float: left;
}

ul.featuresTabsNavigation a {
  background: url(/images/static/business-profile-sprite.png) no-repeat left -140px;
  color: #397eff;
  display:block;
  float: left;
  font-size: 14px;
  height: 30px; /* same as li */
  line-height: 32px;
  padding: 0 12px; /* create room on right for absolutely positioned <em> */
  position: relative;
  text-decoration:none;  
}

ul.featuresTabsNavigation a:hover {
  color:#013eb0;
}

/* active tab */
ul.featuresTabsNavigation a.selected {
  background: url(/images/static/business-profile-sprite.png) no-repeat left top;
  color:#3c3c3c;
  cursor:default; /* stops the tab from looking clickable */
  margin-top: 3px;
}

ul.featuresTabsNavigation a:focus {
  outline: none;
}

/*
To make the 'sliding doors' technique work, we have to use additional markup (<em>).
We can't use the <li> because there is no way of telling which one is currently active.

we can't float it right as it breaks in IE 6 unless we define a width 
  on its parent element, which we don't want to do as we don't know how 
  wide the anchor text is. Instead, we absolutely position it to the right and
  then gives it's parent element padding to allow for the space
*/
ul.featuresTabsNavigation a em { 
  background: url(/images/static/business-profile-sprite.png) no-repeat right -140px;
  display: block;
  height: 30px;
  width: 12px;
  position: absolute;
  right: 0px;
  text-indent: -5000px;
  top: 0px;
}

ul.featuresTabsNavigation a.selected em, ul.featuresTabsNavigation a.selected:hover em {
  background: url(/images/static/business-profile-sprite.png) no-repeat right top;
}

/* 
container for the panes. 
*/
div.scroll {
  border: 3px solid #6c447c;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-top: none;
  clear: left;
  overflow: auto;
  overflow-x: hidden;
  position: relative;
  width: 920px;
}

/* The actual panes themselves */
div.scrollContainer div.panel {
  padding: 20px;
  width: 880px; /* 926px minus padding and border width */
  overflow-y: auto; /* makes contents scrollable when javascript is off */
  float: left;
  position: relative;
}

div#featuresTabs h3 {
  border-bottom: 3px solid #397eff;
  color: #013eb0;
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  margin:10px 0;
  padding: 5px 0 5px 10px;
}

div.prevNextButtons {
  float: right;
  display: none;
}

span.prevTab, span.nextTab {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -24px -312px;
  cursor: pointer;
  display: block;
  float: left;
  height: 24px;
  margin-left: 2px;
  text-indent: -50000px;
  width: 24px;
}

span.nextTab {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -24px -336px;
}

span.prevTab:hover {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -312px;
}

span.nextTab:hover {
  background: url(/images/static/icon_sprite_vertical_24px.png) no-repeat -49px -336px;
}

/* !=== Gallery    ========================================== */

/* container for gallery. This controls the overall width, if set. */
.business_gallery {
  margin: 20px auto;
  overflow: auto;
  position: relative;
  width: 870px;
}

/* Styles for no Javascript go here */


/* Styles for when the gallery is working, with Javascript turned on, go here */
.gallery_active{width:125px;float:left;}

/* Thumbnail holder */
.gallery_active li {
  width:55px;
  height:70px;
  border: 3px solid #bcbcbc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin: 0 2px 2px 0;
  background: url(/images/static/galleria_loader.gif) no-repeat center center #fff;
}

.gallery_active li.hover{border-color:#397eff;}

.gallery_active li.active{border-style:solid;border-color:#013eb0;}

.galleria { 
  /* Height is specified to ensure navigation buttons are always at the bottom of the gallery,
  and to preserve layout in IE */
  height: 376px;
  list-style:none; 
  width:200px;
}

.galleria li {
  display:block;
  float:left;
  height:80px;
  margin:0 8px 8px 0;
  overflow:hidden;
  width:80px;
}

.galleria li img.thumb {
  cursor:pointer;
  display:block;  
  height:auto;  
  left:auto;
  top:auto;
  width:auto;
}

/* Main image holder */
.galleria_container {
  float:right;
  height: 462px; /* height of internal image plus padding and border */
  margin:0 auto 0 auto;
  overflow: hidden;
  position: relative; /*so we can hide the caption under it */
  width:612px; /* Image width plus padding and borders */
}

.galleria_container .galleria_wrapper {
  border: 1px solid #bcbcbc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  text-align: center;
}

/* Previous and next arrows */
p.nav {
  clear: left;
  display: none; /* so they don't show with no javascript */
  float: left;
  width: 182px;

}

.nav a.galleriaPrev, .nav a.galleriaNext {
  background-color: #f1f1f1;
  border: 3px solid #bcbcbc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  cursor: pointer;
  display: block;
  float: left;
  height: 80px;
  width: 80px;  
}

.nav a.galleriaNext {
  margin-left: 10px;
}

.nav a.galleriaPrev span, .nav a.galleriaNext span {
  background: url(/images/static/recently-viewed-sprite.png) no-repeat 0px -30px;
  display: block;
  height: 27px;
  margin: 26px auto 0 auto;
  width: 34px; 
  text-indent: -5000px;
}

.nav a.galleriaNext span {
  background-position: -34px -30px;
}

.nav a.galleriaPrev:hover, .nav a.galleriaNext:hover {
  background-color: #bfd6ff;
  border-color: #397eff;
}

.nav a.galleriaPrev:hover span {
  background-position: 0px 0px;
}

.nav a.galleriaNext:hover span {
  background-position: -34px 0px;
}

/* Description of main image (same as alt text on thumbnail) */
.caption {
  background-color:#fff;
  border: 1px solid #bcbcbc;
  border-width: 1px 0px;
  color:#3c3c3c;
  left:0px;
  padding:10px 5px;
  position:absolute;
  top:-100px;
  width:603px;
}

.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:590px} /* MSIE bug */

/* Google Map */

div#googleMap {
  background-color: #6c447c;
  float: left;
  height: 450px;
  margin-right: 30px;
  width: 450px;
}