/*
TITLE  : MANDARINORANGETRADING.COM - SCREEN MEDIA
AUTHOR : JACOB ROSENFELD
UPDATED: 20090528
*/


/* --[GENERIC PAGE Structure]---------- */
html {
height: 100%;
}

body {
height: 100%;
margin: 0;
padding: 0;
background: #f1e8d3 url(images/head_bkg.png) repeat-x;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size: 84%;
color: #000;
}

#wrapper {
position: relative;
min-height: 100%;
width: 900px;
margin-left: auto;
margin-right: auto;
overflow: auto;
}

#content {
padding: 0;
margin: 0 0 100px 0;
}

* html #wrapper {
height: 100%;
}



#head-left {
margin: 0 0 0 30px;
width: 380px;
float: left;
}

#head-left img {
border: none;
}

#head-right {
width: 200px;
margin: 95px 0 0 650px;
text-align: right;
}


#video {
margin: 15px 30px 5px 30px;
float: right;
}

#video2 {
margin: 15px 0px 5px 0px;
float: left;
}

#foot {
position: relative;
margin: -55px auto 0 auto;
padding: 0;
width: 100%;
height: 55px;
background: url(images/foot_bkg.png) repeat-x;
}

/* CSS hack applies only to IE -- specifies a different height for the footer */
* html #foot {
margin-top: -55px;
}



#headcomp {
margin: 25px 0 0 28px;
}




/* --[NAV Control]---------- */

#nav{
width: 100%;
height: 50px;
line-height: 35px;
clear: both;
}

#nav ul{
padding: 0;
margin: 0 0 0 30px;
height: 50px;
float: left;
}

#nav ul li{
margin: 9px 0 0 0;
padding: 0;
float: left;
display: inline;
color: #000;
line-height: 1.0em;
background-color: #47361F;
}

#nav ul li a{
font-size: 112%;
color: #660000;
text-decoration: none;
display: block;
display: inline-block; /* IE 6 hack */
margin: 0;
padding: 0 15px 0 15px;
border-right: 1px solid #131313;
border-bottom: 0;
background: #47361F url(images/tab_bg.gif) repeat-x;
height:  38px;
line-height: 38px;
}

#nav ul li a:hover{
color: #FFF;
background-color: #49381e;
}

body.home a#welcometab,
body.porcelain a#porcelaintab,
body.glass a#glasstab,
body.specials a#specialtab,
body.contact a#contacttab,
body.newcol a#newcollectionstab  {
color: #481400;
background: #fff url(images/tab_bg_on.gif) repeat-x;
border: 0;
border-bottom: 1px solid #f1e8d3;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
font-weight: bold;
}

/* --[GALLERY STRUCTURE Control]---------- */

#family-wrap {
margin: 30px 0 100px 30px;
padding: 0;
overflow: auto;
}



.family {
margin: 0 45px 45px 0;
padding: 0;
width: 235px;
height: 236px;
background: #f1e8d3 url(images/family_slide.gif) no-repeat;
float: left;
}

.family-end {
margin: 0;
padding: 0;
width: 235px;
height: 236px;
background: #f1e8d3 url(images/family_slide.gif) no-repeat;
float: left;
}


.fam-slide {
margin: 10px 0 0 9px;
padding: 0;
}

img.fam-slide {
border: none;	
}


/* --[FAMILY DETAIL STRUCTURE || HEADER Control]---------- */

#p-details-head {
margin: 20px 0 25px 30px;
padding: 0;
}

#p-details-head-cap {
height: 7px;
background: #f1e8d3 url(images/p_fam_detail_head_cap.png) no-repeat;
overflow: hidden;
}

#p-details-head-mid {
background: #f1e8d3 url(images/p_fam_detail_head_mid.png) repeat-y;
overflow: auto;
}

#p-details-head-base {
height: 21px;
background: #f1e8d3 url(images/p_fam_detail_head_base.png) no-repeat;
}

#p-details-head-cap, 
#p-details-head-mid,
#p-details-head-base {
margin: 0;
padding: 0;
width: 800px;
}

/*
#p-details-head-mid p {
margin: 0;
padding: 15px;
}
*/

#collection-pic {
float: left;
margin: 8px 0 0 15px;
}

#collection-pic img {
border: 5px solid #ad9d79;
width: 212px;
height: 175px;
}

#collection-pic a:hover img {
border: 5px solid #481400;
}

#collection-detail {
margin: 7px 0 0 260px;
}

#collection-detail ul {
margin: 0 0 0 20px;
padding: 0;
width: 400px;
}

#collection-detail ul li {
color: #481400;
float: left;
width: 50%;
line-height: 180%;
}

#collection-detail ul li a{
text-decoration: none;
border-bottom: 1px dotted #481400;
color: #481400;
}

#collection-detail ul li a:hover {
border-bottom: 2px solid #481400;
font-weight: bold;
}






























/* --[FAMILY DETAIL STRUCTURE || ITEM Control]---------- */

.p-details-item-shorty,
.p-details-item-last {
margin: 20px 0 100px 30px;
padding: 0;
}

.p-details-item {
margin: 20px 0 25px 30px;
padding: 0;
}

.p-details-item-cap {
height: 7px;
background: #f1e8d3 url(images/p_fam_detail_item_cap.png) no-repeat;
overflow: hidden;
}

.p-details-item-mid {
background: #f1e8d3 url(images/p_fam_detail_item_mid.png) repeat-y;
overflow: auto;
}

.p-details-item-base {
height: 25px;
background: #f1e8d3 url(images/p_fam_detail_item_base.png) no-repeat;
}

.p-details-item-cap, 
.p-details-item-mid,
.p-details-item-base {
margin: 0;
padding: 0;
width: 800px;
}

.item-pic {
float: left;
margin: 8px 0 0 15px;
}
.item-pic img {
border: 2px solid #ad9d79;
width: 50px;
height: 50px;
}

.item-pic a:hover img {
border: 2px solid #481400;
}

.item-pic-blk {
float: left;
margin: 8px 0 0 15px;
}
.item-pic-blk img {
border: 2px solid #ad9d79;
width: 50px;
height: 50px;
}

.item-pic-blk a:hover img {
border: 2px solid #f90;
}

.item-detail {
margin: 7px 0 0 90px;
}


/* --[FAMILY DETAIL STRUCTURE || TABLES Control]---------- */

.item-detail-title {
height: 54px;
width: 700px;
border-bottom: solid 2px #d1c3a6;
margin: 0;
padding: 0;
}

table.t-header {
color: #481400;
margin: 0;
padding: 0;
}

td.col1 {
width: 100px;
text-align: left;
}

td.col2 {
width: 250px;
text-align: left;
}

td.col3 {
width: 50px;
text-align: right;
}

table.t-info {
color: #481400;
margin-top: 5px;
margin-left: 0;
padding: 0;
}

td.col4 {
width: 100px;
text-align: left;
}

td.col5 {
width: 240px;
text-align: left;
}

td.col6 {
width: 50px;
text-align: right;
}



/* --[CONTACT PAGE Forms Control]---------- */

#contact-left {
margin: 40px 0 25px 20px;
padding-left: 10px;
float: left;
}

#contact-left ul {
margin: 0;
padding: 0;	
}

#contact-left ul li {
color: #481400;
text-align: left;
list-style-type: none;
line-height: 130%;
}

#contact-left ul li.important {
color: #481400;
font-size: 120%;
line-height: 20px;
font-weight: bold;
}

#contact-right {
margin: 40px 0 100px 425px;
padding: 0;
}

label {
display: block;
font-size: 120%;
font-weight: bold;
color: #481400;
padding-bottom: 5px;
}

input,textarea,select {
margin-bottom: 0px;
padding: 5px;
font: 14px "Courier New", Courier, mono;
color: #481400;
background: #e7dbc1;
border: 2px solid #ad9d79;
overflow: auto;
}

.button {
margin-top: 10px;
padding: 7px;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
color: #481400;
background: #e7dbc1;
border: 2px solid #ad9d79;
cursor: pointer;
}

.button:hover {
border: 2px solid #481400;
}







a.text:link {
font-weight: bold;
color: #481400;
text-decoration: none;
border-bottom: dotted #481400 1px;
}

a.text:visited {
font-weight: bold;
color: #481400;
text-decoration: none;
border-bottom: dotted #481400 1px;
}

a.text:hover {
font-weight: bold;
color: #481400;
text-decoration: none;
border-bottom: solid #481400 2px;
}

















/* --[FONT Control]---------- */
p {
font-size: 110%;
color: #481400;
line-height: 150%;
padding: 0;
margin: 15px 50px 0 30px;
}

p.last {
font-size: 110%;
color: #481400;
line-height: 150%;
padding: 0;
margin: 15px 50px 100px 30px;
}

p.units {
margin: 5px 0 0 0;
padding: 0;
font-size: 80%;
color: #481400;
}

p.form {
color: #481400;
}


h1 {
font-size: 210%;
color: #481400;
margin: 25px 0 0 29px;
}

h2 {
font-size: 200%;
color: #481400;
margin: 0;
}

h3 {
font-size: 110%;
color: #481400;
font-weight: bold;
margin: 0;
}

h4 {
font-size: 130%;
color: #481400;
}

.family h4, .family-end h4 {
margin: 6px 0 0 15px;
}


#head-right p {
margin: 0;
padding: 0;
color: #fba80d;
font: 14px/1.25 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

#foot p {
margin: 0;
padding: 17px 0 0 0;
color: #d8cbad;
font: 14px/1.50 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: center;
}

#foot-alt p {
margin: 0;
padding: 17px 0 0 0;
color: #d8cbad;
font: 14px/1.50 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: center;
}

/* --[SPAN Classes]---------- */

.new {
font-size: 75%;
color: #993300;
padding-left: 10px;
}

.strong {
font-weight: bold;
font-size: 110%;
border-bottom: 2px solid #fff;
}

.superbold {
font-weight: bold;
font-size: 115%;
}

.soon {
color: #F00;
}


/* --[TEXT LINKS Classes]---------- */
p.units a:link {
color: #481400;
text-decoration: none;
border-bottom: 1px dotted #481400;
}
p.units a:hover {
font-weight: bold;
border-bottom: 1px solid #481400;
}
p.units a:visited {
color: #481400;
text-decoration: none;
border-bottom: 1px dotted #481400;
}