/* CSS Document */ * {margin:0; padding:0;} body {font-family:Arial, Helvetica, sans-serif;background-color:#E3E6E7;} p {font-size:11px; color:#605C5C; font-family:Arial, Helvetica, sans-serif;} div#headwrap {width:100%;border-bottom:2px solid #000; background-color:#fff} div#contentwrap {width:810px; background-color:#E3E6E7; margin:0 auto; position:relative } div#leftcol {width:610px; float:left; } div#rightcol {width:200px; float:left; text-align:center; margin-top:5px;} div#rightcol div {margin-left:auto; margin-right:auto} * html div#rightcol { position: absolute; left:610px; } /*Header CSS*/ div#headercontainer {width:810px; margin:0 auto; background-color:#fff; min-height:155px; } div#headerTop { width:810px; background-color:#fff} div#headerTop img { width:165px; float:left; margin-right:5px; border:none;} div#headerTop h3 {font-size:17px;} div#headerTop div h3{text-align:left} div#headerTop div ul {font-size:13px;} div#headerTop div ul li {list-style:none; margin:2px 0;} div#headerTop div ul li:before { content: "- ";} div#headerTop div ul li a:link {font-weight:bold; color:#605C5C; text-decoration:none;} div#headerTop div ul li a:visited {font-weight:bold; color:#605C5C;text-decoration:none;} div#headerTop div ul li a:hover {font-weight:bold; color:#605C5C;text-decoration:underline;} div#headerTop div ul li a:active {font-weight:bold; color:#605C5C;text-decoration:underline;} div#HDMetroShed { width:127px; float:left;background-color:#fff} div#HDMetroShed h3 a{color:#02A3F7;} div#HDMetroCabin { width:127px; float:left;background-color:#fff} div#HDMetroCabin h3 a{color:#E90606;} div#HDMetroShip { width:127px; float:left;background-color:#fff} div#HDMetroShip h3 a{ color:#15C526;} div#HDMetroSofa { width:127px; float:left;background-color:#fff} div#HDMetroSofa h3 a {color:#E90606} div#HDMetroArtwork { width:127px; float:left;background-color:#fff} div#HDMetroArtwork h3 a{color:#FF5900} div#headerBottom {width:810px; color:#605C5C; clear:both; background-color:#fff} div#HBText { width:165px; float:left; background-color:#fff} div#HBText p {font-size:11px;} div#HBText p span {font-size:13px;} div#HBScroller {font-size:13px; width:645px; float:left; background-color:#fff} div#ScrollTop { background-image:url(../imgs/util/scroller-bg.jpg); background-repeat:no-repeat; background-position:center; height:40px;} #pscroller1{ left:45px; top:10px; width: 555px; height: 14px; /*border: 1px solid black*/; padding: 3px; color:#000; } #pscroller1 a{ text-decoration: none; color:#605C5C; } .someclass{ //class to apply to your scroller(s) if desired } div#pscroller1 {color:#fff;} div#pscroller1 p { font-size:11px; background-color:#FFFFFF; height: 20px; color:#000; } div#pscroller1 p a:link {color:#605C5C; font-weight:bold; text-decoration:none;} div#pscroller1 p a:visited {color:#605C5C; font-weight:bold; font-size:105%;text-decoration:none; margin:auto 8px; } div#pscroller1 p a:hover {text-decoration:underline;} div#ScrollBottom {text-align:right;background-color:#fff} div#ScrollBottom p a:link {color:#605C5C; font-weight:bold; font-size:105%; text-decoration:none; margin:auto 8px;} div#ScrollBottom p a:visited {color:#605C5C; font-weight:bold; font-size:105%;text-decoration:none; margin:auto 8px; } div#ScrollBottom p a:hover {text-decoration:underline;} div#ScrollBottom p span {color:#E90606; text-align:left; position:relative; left:-140px; font-size:13px; font-weight:bold;} /*End Header CSS*/ div#footerwrap {width:100%; border-top:2px solid #000; background-color:#fff} div#footer {color:#847F7F; width:810px; margin:5px auto; clear:both; background-color:#fff;font-size:11px;} div#footer p {padding:10px 0; font-size:12px;} div#footer ul { padding:5px 0;} div#footer ul li { display:inline; padding-right:5px;} div#footer ul li:after { content: "|"; padding-left:5px;} div#footer ul li a {color:#847f7f;} div#footer span {float:right;} /*index only*/ div#indexconttop { margin-top:8px;} div#indexconttop p {width:48%; float:left; text-align:center; font-weight:bold; font-size:14px;} div#CustomSizes {width:283px; float:left; margin-right:25px; margin-top:10px;} div#CustomSizesTop {background-image:url(../imgs/util/index-custom-sizes-17-top.jpg); background-position:top; background-repeat:no-repeat;} div#CustomSizesTop h2 {color:#fff; font-size:14px; font-weight:bold; text-align:center;} div#CustomSizesContent {background-color:#FFFFFF; } div#CustomSizesContent p {padding:4px;} div#CustomSizesBottom {background-image:url(../imgs/util/index-custom-sizes-55-bottom.jpg); background-position:bottom; background-repeat:no-repeat; height:55px;} div#CustomSizesBottom p {padding:4px; color:#fff; font-weight:bold;} /*box 2*/ div#EasyInstall {width:283px; float:left; margin-right:10px; margin-top:10px;} div#EasyInstallTop {background-image:url(../imgs/util/index-easy-install-17-top.jpg); background-position:top; background-repeat:no-repeat;} div#EasyInstallTop h2 {color:#fff; font-size:14px; font-weight:bold; text-align:center;} div#EasyInstallContent {background-color:#FFFFFF; height:169px;} div#EasyInstallContent p {padding:4px;} div#EasyInstallBottom {background-image:url(../imgs/util/index-easy-install-55-bottom.jpg); background-position:bottom; background-repeat:no-repeat; } div#EasyInstallBottom p {padding:4px; color:#fff; font-weight:bold;} /*index only row 2 begin left col (3 boxes)*/ /*General CSS classes for Top & Bottom Divs in each Tall container*/ .SmRow2Index {width:186px; background-color:#FFFFFF; float:left; margin-top:10px;} .SmRow2IndexTop { height:130px;} .SmRow2IndexTop img {margin-top:19px;} .SmRow2IndexBottom {padding-left:5px;} .SmRow2IndexBottom h3 a {color:#fff; text-align:left; text-decoration:none} .SmRow2IndexBottom p {color:#fff; padding-left:5px;text-align:left; padding-bottom:5px;} /*##################*/ div#CabinSmRow2Index { clear:left} div#CabinSmRow2IndexTop {background:#fff url(../imgs/util/red-sm-box-top.jpg) no-repeat top left;} div#CabinSmRow2IndexBottom {background:#fff url(../imgs/util/red-sm-box-bottom.jpg) no-repeat bottom;} /*##########################*/ div#ShipSmRow2Index {} div#ShipSmRow2IndexTop {background:#fff url(../imgs/util/green-sm-box-top.jpg) no-repeat top left;} div#ShipSmRow2IndexBottom {background:#fff url(../imgs/util/green-sm-box-bottom.jpg) no-repeat bottom;} /*##########################*/ div#SofaSmRow2Index {} div#SofaSmRow2IndexTop {background:#fff url(../imgs/util/red-sm-box-top.jpg) no-repeat top left;} div#SofaSmRow2IndexBottom {background:#fff url(../imgs/util/red-sm-box-bottom.jpg) no-repeat bottom;} /*##########################*/ div#ArtworkSmRow2Index {} div#ArtworkSmRow2IndexTop {background:#fff url(../imgs/util/orange-sm-box-top.jpg) no-repeat top left;} div#ArtworkSmRow2IndexBottom {background:#fff url(../imgs/util/orange-sm-box-bottom.jpg) no-repeat bottom;} /*Row 3 index only 3 boxes*/ /*class apply to 4 tall boxes on front to make uniform in size and appearance except BG images*/ /*general css for each container div*/ .TallRow3Index {width:186px; background-color:#FFFFFF; margin-top:10px; float:left;} /*General CSS classes for Top & Bottom Divs in each Tall container*/ .TallRow3IndexTop { min-height:335px; height:auto !important; height:335px;} .TallRow3IndexTop h3 {padding-top:19px; width:55% } .TallRow3IndexTop span {width:33%; padding-top:22px; padding-right:2px; text-align:right; float:right; color:#02A2f6; font-weight:bold; cursor:pointer;} .TallRow3IndexTop p {margin:3px 2px} .TallRow3IndexTop ul {width:49%; float:left; text-align:left; font-size:11px; list-style:none; margin-bottom:5px; padding-left:1px;} .TallRow3IndexTop ul li a {color:#605C5C;} .TallRow3IndexTop select {display:block; clear:left; width:163px; margin:5px auto;} .TallRow3IndexBottom {min-height:40px; height:auto !important; height:40px;} /*Cabin Tall Box Starts here*/ div#CabinTallRow3Index {} div#CabinTallRow3IndexTop {background: #fff url(../imgs/util/red-sm-box-top.jpg) no-repeat left top;} div#CabinTallRow3IndexBottom {background: #fff url(../imgs/util/red-sm-box-bottom.jpg) no-repeat bottom;} /*################*/ div#ShipTallRow3Index {} div#ShipTallRow3IndexTop {background: #fff url(../imgs/util/green-sm-box-top.jpg) no-repeat left top; } div#ShipTallRow3IndexBottom {background:#fff url(../imgs/util/green-sm-box-bottom.jpg) no-repeat bottom;} /*################*/ div#SofaTallRow3Index {} div#SofaTallRow3IndexTop {background: #fff url(../imgs/util/red-sm-box-top.jpg) no-repeat left top; } div#SofaTallRow3IndexBottom {background: #fff url(../imgs/util/red-sm-box-bottom.jpg) no-repeat bottom;} /*#################*/ div#ArtworkTallRow3Index {} div#ArtworkTallRow3IndexTop {background: #fff url(../imgs/util/orange-sm-box-top.jpg) no-repeat left top; } div#ArtworkTallRow3IndexBottom {background: #fff url(../imgs/util/orange-sm-box-bottom.jpg) no-repeat bottom;} .left {float:left} .center {float:none; margin-left:20px; margin-right:20px;} .textright a {text-align:right; color:#ff6600; font-weight:bold; padding-right:10px; font-size:115%; position:relative; top:-20px; text-decoration:none} .textleft {text-align:left; font-weight:bold;} /*####################*/ div#pressrightcol {width:200px; height:86px; background-image:url(../imgs/util/press-box-bg.jpg); background-repeat:no-repeat; background-position:center; text-align:center;} div#pressrightcol img { margin-top:4px; border:none } /*#######Form CSS for downloads right column*/ div#formwrap {width:200px; background-color:#E3E6E7; color:#fff; margin-top:5px;} div#formtop { background-image:url(../imgs/util/form-top-bg.jpg); background-position:top; background-repeat:no-repeat; } div#formtop p { font-size:13px; padding:4px 8px 8px 0px; color:#fff;} div#formtop p span { font-size:16px; font-weight:bold;} div#formdownload { background-color:#FF6600; text-align:center; width:186px; margin:0 auto;} div#formdownload input {border:solid 0 #fff; color:#847F7F; background:transparent; background-image:url(../imgs/util/form-input-bg.jpg); background-repeat:no-repeat; text-align:left; margin:5px auto; height:17px; padding-left:5px;} .inputwidth {width:158px;} div#formdownload .btn { width:66px; height:20px; position:relative; left:32px; top:0px } div#formdownload fieldset {border:none} div#formbottom { background-image:url(../imgs/util/form-bottom-bg.jpg); background-position:bottom; background-repeat:no-repeat; height:10px;} /* Form for Press Access to images only*/ div#formPRwrap {width:200px; background-color:#FFF; color:#fff; margin-top:5px; float:right;} div#formPRtop { background-image:url(../imgs/util/form-top-bg.jpg); background-position:top; background-repeat:no-repeat; margin-bottom:-15px;} div#formPRtop p { font-size:13px; padding:4px 8px 8px 0px; color:#fff;} div#formPRtop p span { font-size:16px; font-weight:bold;} div#formPress { background-color:#FF6600; text-align:center; width:186px; margin:0 auto;} div#formPress input {border:solid 0 #fff; color:#847F7F; background:transparent; background-image:url(../imgs/util/form-input-bg.jpg); background-repeat:no-repeat; text-align:left; margin:5px auto; height:17px; padding-left:5px;} .inputwidth {width:158px;} div#formPress .btn { width:66px; height:20px; position:relative; left:32px; top:0px } div#formPress fieldset {border:none} div#formPRbottom { background-image:url(../imgs/util/form-bottom-bg.jpg); background-position:bottom; background-repeat:no-repeat; height:10px;} /*###########################*/ .left {float:left} .center {float:none; margin-left:20px; margin-right:20px;} .textright {text-align:right; color:#ff6600; font-weight:bold;} .clearleft {clear:left} /*#################### OLD METROSHED CSS STUFF*/ div#content { margin: 10px; color:#605C5C; min-height:606px; height:auto !important; height:606px; padding-bottom:40px} /*used for different color content backgrounds (TOP - BOTTOM) */ .contentTopred {background:#fff url(../imgs/util/red-content-top-590-40.jpg) no-repeat left top;} .contentTopgreen {background:#fff url(../imgs/util/green-content-top-590-40.jpg) no-repeat left top;} .contentToporange {background:#fff url(../imgs/util/orange-content-top-590-40.jpg) no-repeat left top;} .contentBotred {background:#fff url(../imgs/util/red-content-bottom-590-40.jpg) no-repeat left bottom;} .contentBotgreen {background:#fff url(../imgs/util/green-content-bottom-590-40.jpg) no-repeat left bottom;} .contentBotorange {background:#fff url(../imgs/util/orange-content-bottom-590-40.jpg) no-repeat left bottom;} div#contentbottom {height:40px; width:590px; position:absolute; bottom:0} div#content h2 {padding-left:10px; padding-top:5px; color:#fff;} div#content h3,h4,h5,h6 {padding:5px 10px;} div#content img {border:none; margin:12px;} div#content ul, ol {margin:10px 40px;} div#content li{font-size:.8em;} /* div#content ol, ul{ padding:10px 20px;}*/ div#content ol li{margin-bottom:15px;} div#content p{font-size:.8em; margin:15px;} /*set p tags for content area only*/ /*div#content h1, h2, h3, h4, h5, h6 { margin:15px;}*/ div#content h5 {margin-bottom:10px;}/*add space under smallbox(index.html) headings*/ div#content h3 {padding:10px;} div#scpthold { width:565px; float:right;} div#scpthold .imaggrabber { text-align:right; float:right; border:0;} /*use on index only for IE get bottom of right col to match. Moves bottom far right boxes up*/ * html div#indexrtcolmoveright {margin-top:-8px;} /*use these classes to float images left or right(text wraps around image as result) except for index.html page*/ .imageright {float:right; margin:8px 0 8px 8px; clear:both } .imageleft {float:left; margin:0 8px 0 8px;} /*bring fontsize down on press release titles*/ .pressrelease{ font-size:.9em;} /*small letters in press releases will raise letter slightly*/ .smletters {font-size:.7em; position:relative; top:-.4em;} .smlettersform {font-size:.8em; color:#000;}/*used on main form for req opt etc*/ /*format the main data forms */ div#mnformTop { background-image:url(../imgs/util/mnform-bg-top.jpg); background-position:bottom; background-repeat:no-repeat; height:30px;} div#mnformBottom { background-image:url(../imgs/util/mnform-bg-bottom.jpg); background-position:bottom; background-repeat:no-repeat; height:30px;} div#mnformTop h3 {padding-left:15px; padding-top:3px; color:#fff} div#mnform { width:400px; margin:20px auto; }/*center the form*/ div#mnform form{ /*add bottom border to form element to repeat div.clearfix divider line*/ /*border-bottom:1px solid #ebebeb;*/ background-color:#FF6701} div#mnform div.clearfix { /*border-top:1px solid #ebebeb;*/ /*adds line above each section in main forms*/ padding:10px 0; vertical-align:top;} div#mnform label { /*style labels on main forms and position them next to input boxes*/ width:120px; float:left; font-size:.75em; margin:0 10px; color:#fff; font-weight:bold;} div#mnform input {border:solid 0 #fff; color:#847F7F; background:transparent; background-image:url(../imgs/util/mnform-input-bg.jpg); background-repeat:no-repeat; text-align:left; margin:5px auto; height:17px; } .padleft {padding-left:8px;} div#mnform textarea {border:solid 0 #fff; color:#847F7F; background:transparent; background-image:url(../imgs/util/mnform-textarea-bg.jpg); background-repeat:no-repeat; text-align:left; margin:5px auto; height:90px; padding-left:8px; } /*fixes the textarea in IE so that scrollbars don't show and text does scroll.*/ * html div#mnform textarea { background:url(../imgs/util/mnform-textarea-bg.jpg) fixed; height:86px;overflow-y:hidden; width:235px} fieldset {border:none;}/*kill fieldset border in form*/ .btn {background-image:none; width:75px; padding-left:0; position:relative; left:-20px;} Div#indexpress { /*holds links under index.html grabber image and above small content boxes*/ float:right; /*IE 6 will push content area under left column if this is not floated right*/ margin-top:5px; padding-top:14px; width:565px; height:30px; font-size:.8em; font-weight:bold; text-align:center;}/*for index page press, etc,*/ div#indexpress a {padding:8px;} /*adds space between links*/ .gallery {margin:2px 12px; padding:0; float:left; width:160px;} /*style the gallery pictues*/ .gallery img {padding:0} .gallery span a {display:block; margin-top:-13px; text-align:center} .metshedrtcolsmalllinks { /*class for link box (gallery) between pics on metroshed.html*/ text-transform:capitalize; list-style:none; font-size:.8em; text-align:right; float:right; margin-top:80px; margin-right:10px; padding:25px 10px; border:1px solid #ebebeb;} .quotes { /*put a border around quotes on testimonials.html*/ border:1px solid #ebebeb; padding:15px; margin:10px; width:345px;} .quotes2 { /*used to put a border around quote on metroshed.html*/ border:1px solid #ebebeb; padding:3px; margin:0 5px; width:225px;} div#magborder { /*used only on the testimonial and quotes page to float mag pics along edge*/ width:160px;float:right;} div#magborder img {margin-bottom:1px;} /*needed for IE 5-6*/ .colorrust{ background-color:#ED564D;}/*style link backgrounds*/ .coloryellow{ background-color:#FCE55D;} .colorgreen { background-color:#61BF1A;} .colorblue { background-color:#40B1ED;} .colororange { background-color:#EC761C;} .greennew{color:#61BF1A;} div#customuses { /*for metroshed.html uses chart in Custom Design Section*/ margin-left:12px; width:256px; height:126px; border-top:1px #000 solid; text-align:center; margin-bottom:20px; margin-top:0px; margin-right:24px; } div#customuses li{ padding:2px 0; list-style:none; border-right:1px #000 solid; border-bottom:1px #000 solid; } div#customusescol1{ width:84px; float:left; border-left:1px #000 solid; } div#customusescol2{ width:85px; float:left; } div#customusescol3{ width:86px; float:left; } .banner div{ width:570px;} .banner img{ margin-left:45px; margin-bottom:10px;} .wrapgroup {margin:10px; border:1px solid #777777; background-color:#fff;} .wrapgroup h4 {padding-left:10px; padding-top:4px; width:50%} .wrapgroup h4 a:link { color:#605C5C; text-decoration:none;} .wrapgroup h4 a:visited {color:#605C5C; text-decoration:none;} .wrapgroup h4 a:hover {color:#605C5C; text-decoration:underline;} .wrapgroup h4 a:active {color:#605C5C; text-decoration:underline;} .wrapgroup li {display:inline; list-style-type:none; padding:4px;} /*add any additional divs or classes in this area and not below the alsett clearing method*/ /* and the Alsett clearing method code must go here*/ /* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */ /* simply add the clearfix class to any containter that must enclose floated elements */ /* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */ .clearfix:after { content: "."; /* the period is placed on the page as the last thing before the div closes */ display: block; /* inline elements don't respond to the clear property */ height: 0; /* ensure the period is not visible */ clear: both; /* make the container clear the period */ visibility: hidden; /* further ensures the period is not visible */ } .clearfix {display: inline-block;} /* a fix for IE Mac */ /* next a fix for the dreaded Guillotine bug in IE6 */ /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* end of "no-extra-markup" clearing method */