/* South Coast Office Supply CSS Document */
/* Copyright 2009. All Rights Reserved. */
/* Created by Spirelike Interactive */
/* Lead Designer: Jeff Barram */

/* South Coast Office Supply CSS Document */
/* Copyright 2009. All Rights Reserved. */
/* Created by Spirelike Interactive */
/* Lead Designer: Jeff Barram */


/* LAYOUT STYLES ---------------------------------------------------------- */

/* Global Styles */
#fullheight
{
height:100%;
overflow:hidden;
}

img {
vertical-align: bottom;
border:0px;
}

.hidden {
display: none;
}

.error {
font-family: Tahoma;
font-size: 8pt;
color: red;
margin-left: 50px;
display:none;
}

#clear {

clear: both;
margin: 0;              
padding: 0;
height: 0;
overflow: hidden;
}

:root{
overflow-y:scroll;
}

div.hr 
{
height: 1px;
color:#CCCCCC;
background-color:#CCCCCC;
border:none;
}

div.hr hr
{
display:none;
}

/* Main Page Layout ---------------------------------------------------------- */

html, body {
background:url("images/bg.jpg") repeat-x;
background-position:top;
background-color:#F4F2DF;
margin:0;
padding:0;
}

#body-container
{
width:958px;
height:100%;
margin:auto;
}

#top-container
{
width:958px;
margin:auto;
float:left;
}

#logo a
{
width:341px;
height:158px;
margin:auto;
background:url("images/logo.jpg") no-repeat;
float:left;
}

#nav-container
{
width:617px;
height:158px;
float:left;
background:url("images/tag_bg.jpg") no-repeat;
}

#nav
{
float:right;
margin: 34px 3px 0 0;
*margin: 48px 3px 0 0;
}

#nav ul
{
list-style: none;
}

#nav li
{
float:left;
background: #F4ECD0 url("images/lt.jpg") no-repeat left top;
margin:0;
padding:0 0 0 3px;
border-bottom: 1px solid #CCCCCC;
}

#nav a
{
float:left;
display:block;
background:url("images/rt.jpg") no-repeat right top;
color:#18322F;
font-size:12px;
padding: 3px 13px 3px 13px;
text-decoration:none;
}

#nav a:hover
{
color:#3E8279;
}

#tag
{
width:617px;
margin:auto;
float:right;
text-align:right;
}

#tag-text
{
float:right;
margin: 25px 25px;
_margin: 25px 10px;
text-align:right;
}

#page-top
{
width:958px;
height:283px;
margin:auto;
background:url("images/page_top.jpg") no-repeat;
background-position:top;
float:left;
}

#page-mid
{
width:958px;
padding: 10px 0 20px 0;
background:url("images/page_mid.jpg") repeat-y;
float:left;
}

#pic
{
float:left;
margin: 4px 0px 0 8px;
_margin: 4px 0px 0 0px;
_padding: 0 8px 0 8px;
}

#flash {
width:685px;
height:272px;
float:left;
margin: 4px 5px 0 8px;
_margin: 4px 5px 0 4px;
}

#shop
{
width:250px;
height:272px;
background:url("images/shop_bg.jpg") no-repeat;
float:left;
margin: 4px 0 0 0;
}

#shop-contents
{
margin:auto;
text-align:center;
padding:10px;
}

#shop-top
{
height:100px;
text-align:center;
}

#shop-mid a
{
display:block;
width:200px;
height:40px;
background:url("images/shop.png") no-repeat;
background-position: 0 0;
margin: auto;
}

#shop-mid a:hover
{
background-position: -200px 0;
}

#shop-txt
{
font-size:12px;
color:#EAE5C2;
margin: 25px 0 0 0;
}

#shop-btm
{
font-size:11px;
font-weight:700;
font-style:italic;
color:#EAE5C2;
margin: 15px 0 0 0;
}

/* ------------------ HOME PAGE ------------------ */

#bullets-container
{
width:525px;
margin:15px;
border-right: 3px dotted #CCCCCC;
float:left;
}

table#bullets
{
border-collapse: collapse;
border:hidden;
}

table#bullets td.bullet
{
width:25px;
padding: 10px 10px 10px;
}

table#bullets td.text
{
width:225px;
font-size:16px;
color:#2F6259;
font-weight:600;
}

#bullet
{
width:20px;
height:20px;
background:url("images/bullet.jpg");
}

#promo-container, #specials-container
{
width:325px;
margin: 0 15px 15px 30px;
float:left;
}

#specials-container
{
margin-top:10px;
}

#promo a
{
width:88px;
height:88px;
background:url("images/promo.jpg");
float:left;
margin-right:20px;
}

#specials a
{
width:88px;
height:88px;
background:url("images/specials.jpg");
float:left;
margin-right:20px;
}

#promo-text
{
margin-top:25px;
}

#specials-text
{
margin-top:30px;
}


#promo-text a, #specials-text a
{
font-size:14px;
color:#2F6259;
font-weight:600;
text-decoration:none;
}

#promo-text a:hover, #specials-text a:hover
{
text-decoration:underline;
}




/* ------------------ ABOUT PAGE ------------------ */

#about-pic
{
width:200px;
height:250px;
background:url("images/about.jpg");
float:left;
margin: 10px 20px 0 20px;
border:4px solid #2F6259;
}

#about-txt
{
width:650px;
margin:10px;
float:left;
}

#about-txt1
{
width:300px;
float:left;
}

#showroom
{
width:475px;
height:350px;
background:url("images/showroom.jpg");
float:left;
margin: 10px 0 0 0;
border:1px solid #CCCCCC;
}

/* ------------------ FURNITURE PAGE ------------------ */

#furniture-pic
{
width:325px;
height:275px;
background:url("images/furniture3.jpg");
float:left;
margin: 25px 20px 0 20px;
}

#furniture-txt
{
width:550px;
margin:10px;
float:left;
}

#shop1 a
{
display:block;
width:266px;
height:66px;
background:url("images/shop1.jpg") no-repeat;
background-position: 0 0;
maring-top:10px;
}

#shop1 a:hover
{
background-position: -266px 0;
}

/* ------------------ SUPPLIES PAGE ------------------ */

#supplies-pic
{
width:329px;
height:250px;
background:url("images/catalog.jpg");
float:right;
margin: 25px 25px 0 0px;
}

#supplies-txt
{
width:540px;
margin: 10px 25px 0 35px;
float:left;
}

#showroom1
{
width:300px;
height:225px;
background:url("images/supplies.jpg");
float:left;
margin: 10px 0 0 0;
border:1px solid #CCCCCC;
}

/* ------------------ COPIERS PAGE ------------------ */

#copiers-pic
{
width:240px;
height:230px;
background:url("images/copiers.jpg");
float:left;
margin: 25px 20px 0 20px;
}

#copiers-txt
{
width:625px;
margin:10px;
float:left;
}

#copiers1
{
width:335px;
height:244px;
background:url("images/copiers1.jpg");
float:left;
margin: 10px 0 0 0;
border:1px solid #CCCCCC;
}

/* ------------------ STAMPS/FORMS PAGE ------------------ */

#stamps_forms-pic
{
width:300px;
height:300px;
background:url("images/stamps_forms.jpg");
float:left;
margin: 25px 20px 0 20px;
}

#stamps_forms-txt
{
width:550px;
margin:10px;
float:left;
}

/* ------------------ PROMO/DRAWINGS PAGE ------------------ */

#promo-pic
{
width:200px;
height:250px;
float:left;
margin: 10px 20px 0 20px;
}

/* ------------------ CONTACT PAGE ------------------ */

#contact-pic
{
width:300px;
height:300px;
background:url("images/map.jpg");
float:left;
margin: 25px 20px 0 20px;
}

#contact-txt
{
width:550px;
margin:10px;
float:left;
}

#directions a
{
display:block;
width:266px;
height:66px;
background:url("images/directions.jpg") no-repeat;
background-position: 0 0;
margin: 10px 0 10px 0;
}

#directions a:hover
{
background-position: -266px 0;
}


/* ------------------ BOTTOM OF MAIN PAGE LAYOUT ------------------ */

#page-btm
{
width:958px;
height:10px;
margin:auto;
background:url("images/page_btm.jpg") no-repeat;
background-position:top;
float:left;
}

#footer
{
width:958px;
text-align:center;
float:left;
padding: 10px 0 10px 0;
}


/* ------------------ CONTACT FORM LAYOUT ------------------ */

#contact-area {
	width: 500px;
	margin-top: 25px;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 471px;
	font-family: Helvetica, sans-serif;
	font-size: 1.4em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #333333;
}

#contact-area input.submit-button {
	width: 100px;
	float: right;
	margin-right:15px;
}

label {
	text-align: left;
	width: 100px;
	padding-top: 5px;
	font-size: 1em;
}


/* Type STYLES ---------------------------------------------------------- */

body {font-family:Verdana, Arial, Helvetica, sans-serif;}

h1 {font-size:18px; color:#2F6259; font-weight:700;}
h2 {font-size:14px; color:#006443;}
h3 {font-size:12px; color:#2F6259;}

.tag1 {font-size:14px; font-weight:600; color:#2F6259; text-align:right;}
.tag2 {font-size:10px; font-weight:0; color:#2F6259; text-align:right;}

p, ul, .text {font-size:14px; color:#1B1B1B;  text-decoration:none; line-height:1.5em;}
p a, ul a, .text a {color:#1B1B1B; text-decoration:underline;}
p a:hover, ul a:hover, .text a:hover {color:#666666; border-bottom:none; text-decoration:none;}

#footer ul { list-style:none; display:inline;}
#footer ul li {display:inline; padding: 0 5px 0 5px;}
#footer ul, #footer ul a, #footer ul a:visited {font-size:10px; color:#666666; border-bottom:none; text-decoration:none; line-height:3em;}
#footer ul a:hover {text-decoration:underline;}

.copyright, .copyright a, .copyright a:visited {font-size:9px; color:#999999; border-bottom:none; text-decoration:none;}
.copyright a:hover {text-decoration:underline;}