*
{
  margin:0px;
  padding:0px;	
}
h1,h2,h3,h4,h5,h6{font-size:100%;}

/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	background: #ffffff;
	color: #000000;
}
ol, ul {
	list-style: none;
}
.round5
{
	 -webkit-border-radius: 5px;
      border-radius: 5px; 
}

.round7
{
	 -webkit-border-radius: 7px;
      border-radius: 7px; 
}
/* tables still need cellspacing="0" in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}

a {
	text-decoration: none;
}



#wrapper {
   
    width: 770px;
    margin: 10px auto 0px auto;
}


#content {
 
    width: 770px;
    height:440px;
	margin:auto;
}



#bottom-side {
    clear: both;
    padding-top: 10px;
}

#color-strip {
    margin: 0 auto;
    width: 603px;
    height: 50px;
    background:url(../images/color_strip.png)  left top no-repeat;
}

#color-bar {
    margin: 0 auto;
    width: 598px;
    height: 60px;
}


#color-bar li {
    float: left;
    margin-top: 7px;
    height: 27px;
    width: 101px;
    cursor: pointer;
}

#color-bar li.selected {
     margin-top: 7px;
    height: 27px;
    width: 101px;
    border: 2px ridge #8d8d8d;
	
}


#btn_left {
    margin-left: 12px;
    margin-right: 2px;
    margin-top: 8px !important;
    height: 33px !important;
    width: 29px !important;
}

#btn_right {
    margin-left: 6px;
    margin-top: 8px !important;
    height: 33px !important;
    width: 30px !important;
}

/* Carousel */

#spacer {
    height: 45px;
}

#left-arrow-bg {
    float: left;
    width: 80px;
	height:435px;
	background:url(../images/arrow_bg.jpg) repeat-x left top;
	-webkit-box-shadow:  0px 0px 3px 0px #999; 
      box-shadow:  0px 0px 3px 0px #999;
	  
	
}

#mycarousel-prev {
    display: block;
    
	 margin:188px auto;
    cursor: pointer;
	width:25px;
	height:53px;
	

}

#mycarousel-next {
    display: block;
    margin:188px auto;
    cursor: pointer;
	width:25px;
	height:53px;
}


#right-arrow-bg {
    float: left;
      width: 80px;
	height:435px;
	background:url(../images/arrow_bg.jpg) repeat-x left top;
	-webkit-box-shadow:  0px 0px 3px 0px #999; 
      box-shadow:  0px 0px 3px 0px #999;
	  position:relative;
	  z-index:1000;
}

.jcarousel-skin-tango {
    float: left;
    width: 610px;
}

#mycarousel li {
    
    width: 120px;
    height: 440px;
    margin-right: 40px;
}

#mycarousel li span {
    clear: both;
    display: inline-block;
    width: 105px;
    height: 25px;
    margin-bottom: 4px;
    margin-left: 5px;
    background-color: #ffffff;
    font-size: 12px;
    color: #000000;
    text-align: left;
    padding-top: 20px;
    padding-left: 3px;
    cursor: pointer;
	padding-bottom:2px;
}

#mycarousel li.fourstack span {
    height: 25px !important;
    
}

#mycarousel li span em {
    display: block;
    float: left;
    width: 90px;
    font-size: 12px;
    color: #000000;
	
}

#mycarousel li span strong {
    display: block;
    float: left;
    font-size: 10px;
    color: #000000;
    width: 10px;
    font-weight: bold;
}


#mycarousel li span.selected {
    width: 101px;
    height: 21px;
    border: 2px ridge #8d8d8d;
}

#search_box {
     margin:0px 30px 0px 27px;
	 width:318px;
	 height:20px;
	 padding:5px 20px;
	 line-height:20px;
	 background:url(../images/option_bg.jpg) repeat-x left top;
	 -webkit-box-shadow:  0px 0px 3px 0px #999; 
      box-shadow:  0px 0px 3px 0px #999;
	  float:left;
	  
	

}
#logo {
     margin:0px 20px 0px 5px;
	 width:100px;
	
	
	  float:left;
	  
	

}
#search_box label
{

	float: left;
	margin-right:5px;
}

 #search_box input[type="text"]
{
	width:200px;
	border:#CCCCCC ridge 1px;
	float: left;
	height:20px;
	margin-right:10px;
}

/*#search_box  #search_field
{
	width:200px;
	border:#CCCCCC ridge 1px;
	float: left;
	height:20px;
	margin-right:10px;
}*/
#multi_options {
     margin:auto;
	 float:left;
	 width:170px;
	 height:20px;
	 padding:5px 20px;
	 line-height:20px;
	 background:url(../images/option_bg.jpg) repeat-x left top;
	 -webkit-box-shadow:  0px 0px 3px 0px #999; 
      box-shadow:  0px 0px 3px 0px #999;
	  
	

}

#multi_options .op-item
{
	float:left;
	width:70px;
	margin-left:14px;
	
}


#color_option {
   margin:10px auto;
   width:730px;
   padding:10px 20px;
   background:url(../images/color_bg.jpg) repeat-x left top;
   clear:both;
   -webkit-box-shadow:  0px 0px 3px 0px #999; 
    box-shadow:  0px 0px 3px 0px #999;
	overflow:hidden;
   
}

#radio_option {
   margin:10px auto;
   width:730px;
   padding:10px 20px;
   background:url(../images/color_bg.jpg) repeat-x left top;
   clear:both;
   -webkit-box-shadow:  0px 0px 3px 0px #999; 
    box-shadow:  0px 0px 3px 0px #999;
	overflow:hidden;
   
}

div.color-op,
div.op-item {
  
    overflow: hidden;
    font-size: 12px;
    color: #666666;
	float:left;
	width:144px;
}

div.color-op .color-box {
    width:14px;
	height:14px;
	display:block;
	float:left;
	margin-top: 2px;
	margin-right:10px;
}
div.color-op .color-box.red {
	background:#c00911;
}
div.color-op .color-box.Grey {
	background:#666666;
}
div.color-op .color-box.oranges {
	background:#d67502;
}
div.color-op .color-box.yellows {
	background:#fef252;
}
div.color-op .color-box.greens {
	background:#358302;
}
div.color-op .color-box.blues{
	background:#1088ab;
}
div.color-op .color-box.purples{
	background:#e11fec;
}

div.color-op input[type=radio],
div.op-item input[type=radio]
{

    cursor: pointer;
	float:left;
	margin:2px 5px 0px 0px;
}

div.color-op span,div.op-item span {
	
    cursor: pointer;
	float:left;
}

div.color-op span.selected,
div.op-item span.selected {
    font-weight: bold;
}



#color_switcher {
    background:url(../images/choosen_color_bg.jpg) repeat-x left top;
    width: 586px;
    height: 134px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
	 -webkit-box-shadow:  0px 0px 3px 0px #999; 
      box-shadow:  0px 0px 3px 0px #999;
	  margin:10px auto 0px auto;
 
  
}

#choosen_sample_color {
    height: 80px;
    margin-bottom: 10px;
}

#choosen_sample_name,
#choosen_sample_code {
    font-size: 12px;
    font-weight: normal;
    color: #000000;
    text-align: left;
}


#color-buttons
{
	width:250px;
	margin:auto;
	padding-top:10px;
	
}
#color-buttons .button
{
	background:url(../images/button_bg.jpg) repeat-x left top;
	border:none;
	color:#FFFFFF;
	cursor:pointer;
	padding:3px;
	min-width:100px;
	text-align:center;
	-webkit-border-radius: 5px;
      border-radius: 5px;
	
}
#btn_search {
    cursor: pointer;
}
/* Generic styles  */
sup {
    vertical-align: baseline;
    font-size: 0.8em;
    position: relative;
    top: -0.4em;
}

sub {
    vertical-align: baseline;
    font-size: 0.8em;
    position: relative;
    top: -0.4em;
}


.ui-autocomplete {
        max-height: 200px;
        width: 150px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
}
/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
        height: 200px;
}



.clear {clear: both; }
.hide {display: none; }
.show {display: inline; }

#color-cont
{
	width:100%;
	height:300px;
	-webkit-print-color-adjust: exact;
}

#logo-cont
{
	text-align:center;
	width:100%;
}


.toolbox{
position:relative;
top:-50px;
width:800px;
}
 .toolimg{
 background:url(../images/taggle.png) no-repeat;
 width:230px;
 height:89px;
 border:none;
 padding:2px 5px 0px 5px;
  font-size:13px;
  text-align:center;

 }
 .tooltxt{
  padding:10px;
 font-size:13px;
 color:#666666;
 padding:10px;
 }
 .greycolor{
 position:absolute;
 top:-33px;
 left:60px;
 z-index:999;
}

.yellowcolor{
 position:absolute;
 top:-33px;
 left:180px;
 z-index:999;
}

.redcolor{
 position:absolute;
 top:-33px;
 left:300px;
 z-index:999;
}

.bluecolor{
 position:absolute;
 top:-33px;
 left:400px;
 z-index:999;
}
.greencolor{
 position:absolute;
 top:-33px;
 left:460px;
 z-index:999;
}

#srch_group {
    margin-top: 78px;
}

#kraft-color {
    margin-left: 100px;
}

#srch_radio {
    margin-top: 13px;
    margin-left: 36px;
}

div.search-item,
div.option-item {
    height: 20px;
    overflow: hidden;
    font-size: 10px;
    color: #666666;
}

div.search-item img {
    margin-top: 4px;
    cursor: pointer;
}

div.search-item input[type=radio],
div.search-item span,
div.option-item input[type=radio],
div.option-item span {
    font-size: 11px;
    line-height: 16px;
    color: #666666;
    cursor: pointer;
}

div.search-item span.selected,
div.option-item span.selected {
    font-weight: bold;
}

#display_options {
    margin-top: 40px;
    margin-left: 113px;
}

div.radio-op,
div.radio-item {
  
    overflow: hidden;
    font-size: 12px;
    color: #666666;
	float:left;
	width:144px;
}

div.radio-op .radio-box {
    width:14px;
	height:14px;
	display:block;
	float:left;
	margin-top: 2px;
	margin-right:10px;
}
div.radio-op .radio-box.red {
	background:#c00911;
}
div.radio-op .radio-box.Grey {
	background:#666666;
}
div.radio-op .radio-box.oranges {
	background:#d67502;
}
div.radio-op .radio-box.yellows {
	background:#fef252;
}
div.radio-op .radio-box.greens {
	background:#358302;
}
div.radio-op .radio-box.blues{
	background:#1088ab;
}
div.radio-op .radio-box.purples{
	background:#e11fec;
}

div.radio-op input[type=radio],
div.radio-item input[type=radio]
{

    cursor: pointer;
	float:left;
	margin:2px 5px 0px 0px;
}

div.radio-op span,div.radio-item span {
	
    cursor: pointer;
	float:left;
}

div.radio-op span.selected,
div.radio-item span.selected {
    font-weight: bold;
}

div.radio-op img {
    margin-top: 4px;
    cursor: pointer;
}

div.radio-op input[type=radio],
div.radio-op span,
div.radio-op input[type=radio],
div.oradio-op span {
    font-size: 11px;
    line-height: 16px;
    color: #666666;
    cursor: pointer;
}

div.radio-op span.selected,
div.radio-op span.selected {
    font-weight: bold;
}

#display_radio {
    margin-top: 40px;
    margin-left: 113px;
}

@media print{
#color-cont
{
	width:100%;
	height:400px;
	-webkit-print-color-adjust: exact;
}

}