/*
--------------------------------------------------
Project: Visualizer
Purpose: Screen Master
Author: Katelynn O'Brien
Version: 02/16/06
-------------------------------------------------- */

body
	{
	margin: 0;
	padding: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: small;
	background: #fff url(../images/banner.jpg) no-repeat left top;
	color: #333;
	}
	
		
/* SCROLLER
-------------------------------------------------- */
	
#box
	{
	position: absolute;
	left: 17px;
	top: 95px;
	z-index: 1;
	}
	
body.select_images #box
	{
	top: 115px;
	}
	
#up
	{
	position: absolute;
	left: 162px; 
	top: 95px; 
	z-index: 2; 
	cursor: pointer;
	}
	
body.select_images #up
	{
	top: 115px;
	}
	
#track
	{
	position: absolute; 
	left: 162px; 
	top: 114px; 
	z-index: 3;
	}
	
body.select_images #track
	{
	top: 134px;
	}
	
#down
	{
	position: absolute;
	left: 162px;
	top: 514px;
	z-index: 5;
	cursor: pointer;
	}
	
body.select_images #down
	{
	top: 534px;
	}
	
#contentMask
	{
	position: absolute;
	left: 25px;
	top: 96px;
	width: 130px;
	height: 434px;
	clip: rect(1px,130px,438px,0);
	overflow: hidden;
	z-index: 6;
	}
	
body.select_images #contentMask
	{
	top: 116px;
	}
	
#content
	{
	position: absolute;
	left: 0;
	top: 0;
	width: 128px;
	padding-bottom: 25px;
	}
	
#left #content p
	{
	margin: 0;
	padding: 15px 0 5px 0;
	}
	
#left #IMG1Content p, #left #IMG2Content p, #left #IMG3Content p, #left #IMG4Content p
	{
	margin: 0;
	padding: 0 0 15px 0;
	}
	
#left #IMG1Content p input, #left #IMG2Content p input, #left #IMG3Content p input, #left #IMG4Content p input
	{
	float: left;
	}
	
#left #IMG1Content p label
	{
	display: block;
	margin-left: 23px;
	}

	
/* TIMELINE
-------------------------------------------------- */

#timeline
	{
	width: 780px;
	margin-top: 67px;
	border-top: 1px solid #999;
	background: #ececec url(../images/timeline_bg.gif) repeat-x left bottom;
	}

#timeline ol
	{
	list-style: none;
	margin: 0;
	padding: 6px 0 33px 0;
	font-size: 75%;
	text-transform: uppercase;
	text-align: center;
	}

#timeline ol li
	{
	display: inline;
	padding: 0 7px 33px 7px;
	color: #555;
	}

#timeline ol li.num1
	{
	background: url(../images/num1.gif) no-repeat center bottom;
	}

#timeline ol li.num1down
	{
	background: url(../images/num1down.gif) no-repeat center bottom;
	color: #000;
	}

#timeline ol li.num2
	{
	background: url(../images/num2.gif) no-repeat center bottom;
	}

#timeline ol li.num2down
	{
	background: url(../images/num2down.gif) no-repeat center bottom;
	color: #000;
	}

#timeline ol li.num3
	{
	background: url(../images/num3.gif) no-repeat center bottom;
	}

#timeline ol li.num3down
	{
	background: url(../images/num3down.gif) no-repeat center bottom;
	color: #000;
	}

#timeline ol li.num4
	{
	background: url(../images/num4.gif) no-repeat center bottom;
	}

#timeline ol li.num4down
	{
	background: url(../images/num4down.gif) no-repeat center bottom;
	color: #000;
	}

#timeline ol li.num5
	{
	background: url(../images/num5.gif) no-repeat center bottom;
	}

#timeline ol li.num5down
	{
	background: url(../images/num5down.gif) no-repeat center bottom;
	color: #000;
	}

#timeline ol li.num6
	{
	background: url(../images/num6.gif) no-repeat center bottom;
	}

#timeline ol li.num6down
	{
	background: url(../images/num6down.gif) no-repeat center bottom;
	color: #000;
	}
	
	
/* SHARED LAYERS
-------------------------------------------------- */

#left
	{
	position: absolute;
	left: 0;
	padding: 70px 20px 20px 20px;
	width: 150px;
	font-size: 85%;
	}
	
/*body.select_design #left, body.select_color #left, body.select_images #left
	{
	position: relative;
	top: auto;
	left: auto;
	padding: auto;
	}*/
	
#right
	{
	position: absolute;
	left: 210px;
	width: 565px;
	font-size: 85%;
	}
	
/*body.select_nav #right
	{
	margin-top: 40px;
	}*/
	
body.more_info #right
	{
	position: relative;
	margin-top: 90px;
	}
	
body.save #right
	{
	width: 400px;
	margin-top: 80px;
	}

#left p
	{
	margin: 0;
	padding: 18px 0 0  0;
	}
	
#submit
	{
	position: absolute;
	top: 138px;
	left: 210px;
	}
	
#submit2
	{
	margin-top: 25px;
	margin-left: 210px;
	}

p.buttons
	{
	position: absolute;
	top: 138px;
	left: 210px;
	margin: 0;
	padding: 0;
	}
	
#navhelp
	{
	padding: 80px 15px 15px 20px;
	font-size: 90%;
	}
	
	
	
/* SELECT COLOR
-------------------------------------------------- */

body.select_color #left p
	{
	clear: both;
	}

body.select_color div.swatch_container
	{
	padding: 5px 0 0 24px;
	}

body.select_color div.swatch
	{
	float: left;
	width: 30px;
	height: 40px;
	border-right: 1px solid #fff;
	}	
	


/* TEMPLATE 1 - IMAGE POSITIONING
-------------------------------------------------- */

#template1 /* displays as default template */
	{
	display: block;
	}

#template1 img#color_t1
	{
	position: absolute;
	top: 75px;
	left: 0;
	z-index: 7;
	border: 1px solid #666;
	}

#template1 img#image1_t1
	{
	position: absolute;
	top: 79px;
	left: 1px;
	z-index: 8;
	}

#template1 img#image2_t1
	{
	position: absolute;
	top: 242px;
	left: 228px;
	z-index: 9;
	}

#template1 img#image3_t1
	{
	position: absolute;
	top: 242px;
	left: 338px;
	z-index: 10;
	}

#template1 img#image4_t1
	{
	position: absolute;
	top: 242px;
	left: 448px;
	z-index: 11;
	}
	
#menu1_t1
	{
	position: absolute;
	top: 74px;
	left: 395px;
	width: 160px;
	height: 18px;
	border: 2px solid #000;
	z-index: 100;
	display: none;
	}
	
#menu2_t1
	{
	position: absolute;
	top: 138px;
	left: 218px;
	width: 337px;
	height: 22px;
	border: 2px solid #000;
	z-index: 101;
	display: none;
	}
	
#menu1_t1 span, #menu2_t1 span, #menu1_t2 span, #menu2_t2 span, #menu1_t3 span, #menu2_t3 span, #menu1_t4 span, #menu1_t5 span, #menu2_t5 span
	{
	position: absolute;
	top: -15px;
	font-weight: bold;
	color: #000;	
	}
	
#left a, #left a:visited, #left a:focus, #left a:hover, #left a:active
	{
	color: #009;
	}
	
#left a.teal, #left a.teal:visited, #left a.teal:focus, #left a.teal:hover, #left a.teal:active
	{
	color: #399;
	}
	


/* TEMPLATE 2 - IMAGE POSITIONING
-------------------------------------------------- */

#template2
	{
	display: none;
	}
	
#template2 img#color_t2
	{
	position: absolute;
	top: 75px;
	left: 0;
	z-index: 12;
	border: 1px solid #666;
	}
	
#template2 img#image1_t2
	{
	position: absolute;
	top: 76px;
	left: 150px;
	z-index: 13;
	}

#template2 img#image2_t2
	{
	position: absolute;
	top: 92px;
	left: 430px;
	z-index: 14;
	}
	
#template2 img#image3_t2
	{
	position: absolute;
	top: 317px;
	left: 158px;
	z-index: 15;
	border: 1px solid #666;
	}

#template2 img#image4_t2
	{
	position: absolute;
	top: 403px;
	left: 158px;
	z-index: 16;
	border: 1px solid #666;
	}
	
#menu1_t2
	{
	display: none;
	position: absolute;
	top: 152px;
	left: 5px;
	width: 140px;
	height: 108px;
	border: 2px solid #000;
	z-index: 102;
	}

#menu2_t2
	{
	display: none;
	position: absolute;
	top: 315px;
	left: 5px;
	width: 140px;
	height: 64px;
	border: 2px solid #000;
	z-index: 103;
	}

	
/* TEMPLATE 3 - IMAGE POSITIONING
-------------------------------------------------- */

#template3
	{
	display: none;
	}
	
#template3 img#color_t3
	{
	position: absolute;
	top: 75px;
	left: 0;
	z-index: 17;
	border: 1px solid #666;
	}

#template3 img#image1_t3
    {
    position: absolute;
    top: 76px;
    left: 259px;
    z-index: 18;
    }

#template3 img#image2_t3
    {
    position: absolute;
    top: 318px;
    left: 180px;
    z-index: 19;
    }

#template3 img#image3_t3
    {
    position: absolute;
    top: 490px;
    left: 186px;
    z-index: 20;
    border: 1px solid #999;
    }

#template3 img#image4_t3
	{
	position: absolute;
	top: 490px;
	left: 340px;
	z-index: 21;
	border: 1px solid #999;
	}
	
#menu1_t3
	{
	position: absolute;
	top: 206px;
	left: 248px;
	width: 307px;
	height: 22px;
	border: 2px solid #000;
	z-index: 104;
	display: none;
	}
	
#menu2_t3
	{
	position: absolute;
	top: 326px;
	left: 34px;
	width: 125px;
	height: 67px;
	border: 2px solid #000;
	z-index: 105;
	display: none;
	}
	
#menu1_t3 span
	{
	left: 30px;
	}


/* TEMPLATE 4 - IMAGE POSITIONING
-------------------------------------------------- */

#template4
	{
	display: none;
	}
	
#template4 img#color_t4
	{
	position: absolute;
	top: 75px;
	left: 0;
	z-index: 22;
	border: 1px solid #666;
	}
	
#template4 img#image1_t4
	{
	position: absolute;
	top: 108px;
	left: 265px;
	z-index: 23;
	}
	
#template4 img#image2_t4
	{
	position: absolute;
	top: 279px;
	left: 150px;
	z-index: 24;
	border: 1px solid #444;
	}
		
#template4 img#image3_t4
	{
	position: absolute;
	top: 279px;
	left: 357px;
	z-index: 25;
	border: 1px solid #444;
	}
	
#menu1_t4
	{
	position: absolute;
	top: 219px;
	left: 8px;
	width: 125px;
	height: 137px;
	border: 2px solid #000;
	z-index: 104;
	display: none;
	}


/* TEMPLATE 5 - IMAGE POSITIONING
-------------------------------------------------- */

#template5
	{
	display: none;
	}

#template5 img#color_t5
	{
	position: absolute;
	top: 75px;
	left: 0;
	z-index: 26;
	border: 1px solid #666;
	}

#template5 img#image1_t5
	{
	position: absolute;
	top: 116px;
	left: 173px;
	z-index: 27;
	}

#template5 img#image2_t5
	{
	position: absolute;
	top: 370px;
	left: 11px;
	z-index: 28;
	border: 1px solid #999;
	}

#template5 img#image3_t5
	{
	position: absolute;
	top: 369px;
	left: 219px;
	z-index: 29;
	border: 1px solid #999;
	}
	
#menu1_t5
	{
	position: absolute;
	top: 98px;
	left: 324px;
	width: 232px;
	height: 23px;
	border: 2px solid #000;
	z-index: 106;
	display: none;
	}
	
#menu2_t5
	{
	position: absolute;
	top: 140px;
	left: 415px;
	width: 141px;
	height: 176px;
	border: 2px solid #000;
	z-index: 104;
	display: none;
	}


/* IMAGES
-------------------------------------------------- */

img.thumb
	{
	margin-top: 5px;
	border: 1px solid #666;
	}

	
/* HEADINGS
-------------------------------------------------- */

#left h1
	{
	font-size: 100%;
	color: #000;
	}
	
#navhelp h1
	{
	font-size: 100%;
	}
	
	
/* TABLES
-------------------------------------------------- */

table
	{
	margin-top: 28px;
	padding: 0;
	}

/* Win/IE Only */
/* Hide from Mac/IE5 \*/
* html table
	{
	margin-top: 45px;
	margin-bottom: -20px;
	}
/* End Hack */
	
table.thumbnails
	{
	margin: 0;
	padding-top: 6px;
	}
	
tr, th, td
	{
	vertical-align: top;
	padding-right: 20px;
	padding-bottom: 15px;
	}

	
/* FORMS
-------------------------------------------------- */

select
	{
	font-size: 100%;
	line-height: 1.4em;
	width: 100px;
	}
	
input.text
	{
	width: 170px;
	margin-bottom: 5px;
	font-size: 110%;
	}
	
input.button
	{
	padding: 3px;
	font-size: 90%;
	background-color: #fff;
	color: #333;
	border: 1px solid #999;
	}
	
a.button
	{
	padding: 1px 5px;
	font-size: 90%;
	color: #333;
	text-decoration: none;
	border: 1px solid #333;
	}