body {
 font: 0.9em Arial, Helvetica, sans-serif;
}
#options {
 float: left;
 width: 300px;
}
#preview {
 margin: 0; float: right;
text-align: center; position: relative;
 width: 270px;
}
.previewboxdogshirt { height: 418px; }
.previewboxhumanshirt { height: 290px; }
.previewboxbandana { height: 263px; }
.previewboxdinnermat { height: 248px; }
.previewboxmousemat { height: 248px; }
.previewboxsunscreen { height: 300px; }
.previewboxwallet { height: 230px; }
.previewboxrucksack { height: 392px; }
.previewboxcanvasbag { height: 328px; }
.previewboxbowl { height: 230px; }
.previewboxtowel { height: 240px; }
.previewboxlead { height: 196px; }
.previewboxcollar { height: 254px; }
.previewboxcookie { height: 210px; }
.previewboxtreatjar { height: 362px; }
.previewboxleatherlead { height: 196px; }
.previewboxleathercollar { height: 196px; }
.previewboxfishtailcollar { height: 196px; }
.previewboxhoody { height: 320px; }
.previewboxchristmas-bandana { height: 278px; }
.previewboxchristmas-hoody { height: 366px; }
.previewboxtoybox { height: 260px; }
.previewboxteddy { height: 276px; }
.previewboxraincoat { height: 344px; }
.previewboxbiscuit { height: 194px; }
.previewboxstocking { height: 360px; }
.previewboxreflectivevest { height: 250px; }

#examples {
 clear: right; margin: 0; float: right; width: 272px; }
 
h5 { font-size: 12px; margin: 0 0 1px; text-align: left;}
.hrule { 
clear: both; border-bottom: 1px solid #825A39; font-size: 2px;
height: 8px; margin: 0 0 8px; padding: 0; line-height: 1px; }
.garment {
border: 1px solid #825A39; border-right: 0px; text-align: left;
position: absolute; left: 0; top: 25px;
margin: 0; padding: 0;
z-index: 0; }
.text {
width: 272px;
text-align: center;
position: absolute; left: 0; top: 15px;
margin: 0; padding: 0;
z-index: 100; }
.previewButton { float: right; position: relative; top: -2px; }
#preview h5 { height: 22px; padding-top: 6px; width: 100px; float: left; }

img.previewdogshirt { margin: 100px auto 0; }
img.previewhumanshirt { margin: 60px auto 0; }
img.previewmousemat { margin: 11px auto 0; }
img.previewdinnermat { margin: 11px auto 0; }
img.previewbandana { margin: 30px auto 0; }
img.previewsunscreen { margin: 50px auto 0; }
img.previewwallet { margin: 52px auto 0; }
img.previewrucksack { margin: 88px auto 0; }
img.previewcanvasbag { margin: 124px auto 0; }
img.previewbowl { margin: 65px auto 0; }
img.previewtowel { margin: 118px auto 0; }
img.previewlead { margin: 82px 100px 0 4px; }
img.previewcollar { margin: 192px auto 0; }
img.previewcookie { margin: 11px auto 0; }
img.previewtreatjar { margin: 146px 49px 0 40px; }
img.previewleatherlead { margin: 82px 100px 0 4px; }
img.previewleathercollar { margin: 78px auto 0; }
img.previewfishtailcollar { margin: 78px auto 0; }
img.previewhoody { margin: 158px auto 0; }
img.previewchristmas-bandana { margin: 96px auto 0; }
img.previewchristmas-hoody { margin: 182px auto 0; }
img.previewtoybox { margin: 44px auto 0; }
img.previewteddy { margin: 89px auto 0; }
img.previewraincoat { margin: 167px auto 0; }
img.previewbiscuit { margin: 11px auto 0; }
img.previewstocking { margin: 107px 67px 0 83px; }
img.previewreflectivevest { margin: 67px auto 0; }

.dyocontainer {
 margin: 0px; padding: 0px;
 width: 586px;
}
.motifouter { height: 160px; z-index:0; background: url(dyo/loading.gif) no-repeat 134px 64px; margin-top: 3px; }
.motifselect {
width: 298px; height: 132px;
border: 1px solid #999;
overflow: auto;
margin:3px 0 0; padding: 0; z-index: 0;}
.motificon {
width: 54px; float: left; margin: 0 0 4px; text-align: center; padding: 0; }
.motificon label {
width: 54px; height: 45px;}
.motifradio {
margin: 2px; padding: 0; }

.texttable td { font-size: 13px; padding-right: 8px; }
.textinput { width: 160px; border: 1px solid #825A39;
font-size: 12px; margin: 2px 0 0; padding: 1px; }
.notes { font-size: 11px; margin: 3px 0; }
.colouricon { float: left; margin: 2px 0 2px 0; padding: 0; width: 60px; }
.colouricon img { border: 1px solid #444; }
.colouricon input { margin: 0 2px 6px 0; padding: 0; }

.fontselect { width:120px; float:left; margin:0; padding:0; }

.othersicon { width: 99px; float: left; margin: 8px 0 0; padding: 0; text-align: center; }
.othersicon img { margin: 0 0 5px; }
.othersicon p { margin: 0; padding: 0; }
.othersicon a:hover { color: #825A39; }

a.sizechart { text-decoration: underline; font-size: 11px; }
a.sizechart2 { text-decoration: underline;  font-weight: bold; }
a:hover.sizechart, a:hover.sizechart2 { color: #825A39; }

.examplesicon { width: 90px; float: left; margin: 0 0 2px; padding: 0; text-align: center; }
.examplesicon a:hover { color: #825A39; }

.dyoinfo { clear: left; background: #FDFAE8; padding: 5px 7px 1px; margin: 0 0 12px;}
.dyoinfo p { margin: 0 0 6px; }


/* ----- TABS ------ */

.tabberlive .tabbertabhide { display:none; }

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber { display:none; }
.motifselect .tabber { display:inline; }
.tabberlive { margin-top:0em; background: #fff; }

ul.tabbernav { margin:0; padding: 0; height: 14px; border-bottom: 1px solid #AAA; font-size: 12px; }

ul.tabbernav li { list-style: none; margin: 0; padding: 0; height: 17px; display: inline; border: none; }

ul.tabbernav li a {
 padding: 3px 0.5em 2px; margin: 0 0 0 3px; border: 1px solid #AAA;
 border-bottom: none; background: #eee; text-decoration: none;
}

ul.tabbernav li a:link { color: #624125; }
ul.tabbernav li a:visited { color: #624125; }

ul.tabbernav li a:hover {
 color: #000; background: #F0CB21; border-color: #AAA;
}

ul.tabbernav li.tabberactive a {
 background-color: #fff; border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover {
 color: #000; background: white; border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding: 3px 1px; border:1px solid #aaa; border-top:0; 
 height:132px; margin: 0; overflow:auto;
}

.tabbertab h2, .tabbertab h3 { clear: left; margin: 0 5px; padding: 2px 0 1px; border-bottom: 1px solid #CCC; }
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 { display:none;}
.tabberlive .tabbertab h3 { display:none;}

.tabberlive#tab2 .tabbertab {
 height:200px; overflow:auto;}