body { margin: 0px; padding: 0px; background-color: #ffffff; font-family: Arial, Helvetica, Verdana; font-size: 11px; color: #000000; }
a { color: #3f87a2; text-decoration: none; }
a:hover, a:active, .active_page { color: #3f87a2; text-decoration: underline; }
table,div { font-family: Arial, Helvetica, Verdana; font-size: 11px; color: #000000; line-height: 16px; }

/* Content Frame Work
---------------------------------------- */
.btn { margin: 3px 0px 3px 0px; cursor: pointer; }
.img_title { margin: 0px 0px 6px 0px; }
.spacer { height: 12px; }
.list { line-height: 25px; }
.percent_field { width: 20px; height: 16px; font-size: 11px; padding: 2px 0px 0px 2px;}
.sml_field { width: 20px; height: 15px; margin: 0px 2px 0px 0px; }

/* Header */
#header { background-color: #5582ab; height: 76px; padding:0px; width: 100%; margin: 0px; top: 0px; left: 0px; z-index: 200; background-image: url("images/gradientblendtool/ogt_logo.jpg"); background-repeat: no-repeat; background-position: 98% 15px; }
#header_title { float: left; padding:0px; margin: 25px 0px 20px 20px; }

/* Content */
#content_left { border-style: solid; border-width: 0px 1px 0px 0px; border-color: #5582ab; width: 425px; vertical-align: top; float: left; margin-top: 5px;}
#content_right { vertical-align: top; margin: 5px 0px 0px 425px; left: 0px; top: 0px; }
#content_left p, #content_right p, #content_left table { margin: 0px 0px 10px 32px; padding: 0px; }
#grout_select { padding: 0px 13px 0px 15px; margin: 0px; }
#blend_select { padding: 0px 13px 0px 15px; margin: 0px; }
.select_left { vertical-align: top; padding: 0px; margin: 0px 0px 0px 25px; }
#generated { margin: 0px 13px 10px 13px; }
#blend_column table { margin: 0px 0px 0px 5px; padding: 0px; }
#blend_area { width: 360px; margin: 0px; padding: 0px; }
#blend_area td { padding: 0px 6px 0px 0px; text-align: center; }
#blend_area td input { margin: 10px 0px 0px 5px; }
#blend_area div { height: 44px; width: 45px; background-repeat: no-repeat; background-color: #e6ecf2 ; border-style: solid; border-color: #5582ab; border-width: 1px; float: left; }
#area0 { background: url(/images/gradientblendtool/blendarea_1.gif); }
#area1 { background: url(/images/gradientblendtool/blendarea_2.gif); }
#area2 { background: url(/images/gradientblendtool/blendarea_3.gif); }
#area3 { background: url(/images/gradientblendtool/blendarea_4.gif); }
#area4 { background: url(/images/gradientblendtool/blendarea_5.gif); }
#area5 { background: url(/images/gradientblendtool/blendarea_6.gif); }
#select_tool { width: 380px; }

.hdr_step { margin: 0px 0px 5px 0px; padding: 10px 0px 0px 9px; width: 95%; clear:left; }
.topline { border-top: 1px solid #cfdce7;}
.fullwidth { width: 100%; }

.head_grad_build { float: left; margin: 40px 0px 0px 15px; }

.grad_top_left { width: 280px; float: left; }
.grad_top_right { border-left: 1px solid #cfdce7; border-bottom: 1px solid #cfdce7; width: 115px; margin: 10px 0px 0px 288px; padding: 0px 0px 10px 0px; }

/* Controls */
body
{
    font-family:Verdana;
    font-size:11px;
}

.result
{
    padding: 10px;
    z-index: 5;
}

#userPercentageMenu
{
    position:absolute;
    left:435px;
    top:400px;
    width: 230px;
    padding: 10px;
    z-index: 10;
    border: 2px solid #5582ab;
    background-color: #e6ecf2;
    filter: alpha(opacity=95);
    opacity: .95;
}

#pctMenuContent
{
    border: 1px solid #5582ab;
    background-color: white;
    padding: 5px;
    padding-bottom: 20px;
    padding-top: 20px;
}

#userPercentageMenu div br
{
    clear: left;
}

.pctLabel
{
    float: left;
    width: 100px;
}

.pctInput
{
    float: left;
    width: 100px;
}

.pct_title
{
	padding: 0px 0px 8px 0px;
}

.pct_title img { margin: 0px auto 0px auto; display: block; }

.secHeader
{
    width: 200px;
    margin-bottom: 2px;
    float: left;
    border-bottom: 1px solid #aaaaaa;
    font-weight: bold;
}

#percentageNote
{
	margin-top: 10px;
	margin-left: 15px;
}

.menuClose
{
	text-align: right;
    cursor: pointer;
    padding: 3px;
    margin-bottom: 5px;
}

.list1
{
    display: inline;
    padding: 0px 1px 0px 1px;
    overflow: hidden;
    float: left;
    margin: 0px;
}

.geologie_title { margin: 10px 0px 0px 0px; }

.tessera_ocean_title { float: left; margin: 10px 0px 5px 41px; }
.tessera_ocean_cats { float: left; margin: 0px 0px 2px 38px; }
.tessera_ocean_cats_2 { float: left; margin: 0px 0px 2px 18px; }
.tessera_ocean_tiles { float: left; margin-left: 30px; }

.tessera_earth_title { float: left; margin: 10px 0px 5px 0px;}
.tessera_earth_cats { float: left; margin: 0px 0px 2px 5px; }
.tessera_earth_cats_2 { float: left; margin: 0px 0px 2px 18px; }
.tessera_earth_tiles { clear: left; }

.tessera_earth_iridonly { position: relative; top: -18px; float: left;}
.tessera_earth_iridonly_cats { margin: 0px 0px 2px 2px;  }

.tessera_ocean_iridonly { position: relative; top: -18px; float: left; margin-left: 186px; }
.tessera_ocean_iridonly_cats { margin: 0px 0px 2px 2px; }

.irid_only_container { clear: left; padding: 0px; margin: 0px; }

.blendarea_title { margin-left: 5px; }
.blendlist1
{
    display: inline;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    float: left;
    margin: 0px;
}

.list2
{
	margin-left: auto;
	margin-right: auto;
    height:360px;
    width:60px;
    padding:0px; 
    background-color: #e6ecf2;
    background-image: url("images/gradientblendtool/back_grad_buildarea.png");
    background-repeat: no-repeat;
    overflow: hidden;
}
.list2 .item {  margin: 22px 16px 33px 18px; }

.item
{
	margin: 2px 0px 1px 0px;
    padding: 0px;
    height: 25px;
    width: 25px;
    cursor: pointer;
}

.blendItemSelected
{
	display: block;
	margin: 9px;
    height: 25px;
    width: 25px;
}

.blendItem
{
	margin: 0px;
    border: 1px solid #ffffff;
    height: 25px;
    width: 25px;
    cursor: pointer;
}

.itemContent
{
	margin: 0px;
    text-align:center;
    height: 23px; 
    width: 25px;
}

.dropCue
{
    border:dashed 1px #aaaaaa;
    margin: 22px 16px 33px 18px;
}

.centered
{
    margin:auto;
}

.templates
{
    visibility:hidden;
}

.gradOptions { margin: 5px 13px 5px 25px; }

.zoomOptions
{
	margin: 5px 13px 5px 25px;
	display: none;
}

#modalBlocker
{
    position: absolute;
    left: 0;
    top: 0;
    background-color: black;
    filter: alpha(opacity=50);
    opacity: .50;
    z-index: 8;            
}

.groutSwatch
{
    padding-right: 30px;
    margin-right: 5px;
}

.groutMenuItemChosen
{
	padding: 5px 15px 7px 15px;
    background-image: url("images/gradientblendtool/dropdown_open_icon.png");
    background-position: 98% center;
    background-repeat: no-repeat;
    height: 20px;
    cursor: pointer;
    border: 1px solid white;
}

.groutMenuItem
{
    padding: 5px 5px 7px 15px;
    height: 15px;
    width: 125px;
    cursor: pointer;
    float: left;
    /*border-top: 1px solid white;*/
}
.groutMenuItem:hover
{
    background-image: url("images/gradientblendtool/dropdown_rollover_icon.png");
    background-position: 3px 8px;
    background-repeat: no-repeat;
}

.groutLabel
{
}

#groutSelected:hover
{
	border: 1px solid #5582ab;
}

#groutSelected
{
    cursor: pointer;
    padding: 4px 2px 2px 4px;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 120px;
	border: 1px solid #e6ecf2;
}

#groutMenu
{
	width: 290px;
	margin-left: 10px;
	margin-top: 25px;
    background-color: white;
    position: absolute;
    padding: 3px;
    border: 1px solid #5582ab;
    filter: alpha(opacity=95);
    opacity: .95;
}

.btnPct
{
	cursor: pointer;
	margin-left: 20px;
}

#btnSendEmail
{
	vertical-align: bottom;
	/*margin-left: 8px;*/
}

#email
{
	vertical-align: bottom;
	margin-bottom: 2px;
}

.pctTotal
{
    color: green;
    font-weight: bold;
}

.pctTotalBad
{
    color: red;
    font-weight: bold;
}

.sizePresetDesc
{
	font-size: x-small;
}

.coolCheck
{
	cursor: pointer;
	margin-left: 10px;
}

.coolCheck:hover
{
    filter: alpha(opacity=70);
    opacity: .70;
}

.pal_break
{
	display: block;
	height: 5px;
}

.pal_colbreak
{
	display: block;
	width: 10px;
	float: left;
}


div.email_div
{
	margin-left: 32px;
	width: 280px;
}

br.email_br
{
	clear: left;
}

div.email_label
{
	float: left;
	width: 70px;
}

div.email_input
{
	width: 186px;
	float: left;
	padding-left: 0px;
}

div.email_input input
{
	width: 180px;
	margin-left: 0px;
}

div.email_input textarea
{
	width: 180px;
	height: 50px; 
	font-family: Arial; 
	font-size: 10px;
	margin-left: 0px;
}

.blendLineDrawing
{
    margin-right: 5px;
    float: left;
}

.blendMenuItem
{
    padding: 5px 5px 7px 15px;
    height: 40px;
    cursor: pointer;
    border-top: 2px solid white;
    float: left;
    width: 300px;
}

.blendMenuItem:hover
{
    background-image: url("images/gradientblendtool/dropdown_rollover_icon.png");
    background-position: 3px center;
    background-repeat: no-repeat;
}

.blendMenuItemChosen
{
    padding: 5px 15px 7px 5px;
    cursor: pointer;
    background-image: url("images/gradientblendtool/dropdown_open_icon.png");
    background-position: 98% center;
    background-repeat: no-repeat;
    height: 40px;
}

.blendTip { color: #5582ab; display: block; font-size: .8em; line-height: 1.2em; }
.blendTipChosen { color: #5582ab; display: block; font-weight: bold; line-height: 1.3em;}
.sheet_size { margin: 20px 0px 0px 9px; }
.dimensions { font-weight: bold; }

.blendLabel
{
	vertical-align: top;
	font-weight: bold;
	font-size: 12px;
}

#blendSelected:hover
{
	border: 1px solid #5582ab;
}

#blendSelected
{
    cursor: pointer;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 340px;
	border: 1px solid #e6ecf2;
}

#blendMenu
{
	width: 645px;
	margin-left: 10px;
    background-color: white;
    position: absolute;
    margin-top: 53px;
    padding: 3px;
    border: 1px solid #5582ab;
    filter: alpha(opacity=97);
    opacity: .97;
    z-index: 200;
}