/*
DOT SIM WEBSITE

Blue			#99CCCC
Grey			#B2B2B2

*/

/* RESET */
/* ----------------------------------------- */
* { font-style: normal; margin: 0px; padding: 0px; text-decoration: none; }

/* GENERIC CLEAR FOR FLOATED ELEMENTS
------------------------------------------------------------------------*/
.floatclear{clear: both;}

/* BODY - Font size set to 100% and then calculated in em's thereafter
------------------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	color: #B2B2B2;
	background: #ffffff;
	font-size: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

/* LEFT AND RIGHTS ########################## */
.left { float: left; text-align:left; }
.right { float: right; text-align:left; }

h1 {margin: 15px 0px 3px 0px; font-size: 0.9em;}
p {margin: 15px 0px 0px 0px; font-size: 0.75em;}
.notopmargin {margin: 5px 0px 0px 0px; font-size: 0.75em;}

ul {margin: 15px 0px 0px 20px; font-size: 0.75em;}
ul ul {margin: 5px 0px 5px 20px; font-size: 1em;}

a:link, a:visited { color: #99CCCC; text-decoration: none; }
a:hover, a:active { color: #99CCCC; text-decoration: underline; }


#wrapper {width: 1000px; margin: 50px auto 0px auto; background: url(assets/bgrpt_dotted.gif) repeat-y;}
#wrapper .left {width: 176px;}
#wrapper .right {width: 770px;}


#navigation {margin: 0px; padding: 0px; width: 176px; height: 188px;}

#primarynav {width: 176px; height: 188px; background: url(assets/primary-nav.jpg) no-repeat; margin: 0px; padding: 0px; position: relative;}
#primarynav span {display:none;}
#primarynav li {margin: 0px; padding: 0px; list-style: none; display: block; position: absolute;	}
#primarynav a {display: block; height: 20px; text-decoration: none; border-bottom: none;}

#home 		{left:0px; top:0px; width:176px; height:20px;}
#about 		{left:0px; top:32px; width:176px; height:20px;}
#portfolio 	{left:0px; top:68px; width:176px; height:20px;}
#classes 	{left:0px; top:101px; width:176px; height:20px;}
#news 		{left:0px; top:137px; width:176px; height:20px;}
#contact 	{left:0px; top:168px; width:176px; height:20px;}
#home a, #about a, #portfolio a, #classes a, #news a, #contact a {height:20px;}

#home a:hover, #home .active 			{background:url(assets/primary-nav.jpg) -176px -0px no-repeat; width:176px; height:20px;}
#about a:hover, #about .active 			{background:url(assets/primary-nav.jpg) -176px -32px no-repeat; width:176px; height:20px;}
#portfolio a:hover, #portfolio .active 	{background:url(assets/primary-nav.jpg) -176px -68px no-repeat; width:176px; height:20px;}
#classes a:hover, #classes .active		{background:url(assets/primary-nav.jpg) -176px -101px no-repeat; width:176px; height:20px;}
#news a:hover, #news .active 			{background:url(assets/primary-nav.jpg) -176px -137px no-repeat; width:176px; height:20px;}
#contact a:hover, #contact .active 		{background:url(assets/primary-nav.jpg) -176px -168px no-repeat; width:176px; height:20px;}


#subnavigation {margin: 0px; padding: 0px; width: 176px; height: 156px;}

#subnav {width: 176px; height: 156px; background: url(assets/sub-nav.jpg) no-repeat; margin: 0px; padding: 0px; position: relative;}
#subnav span {display:none;}
#subnav li {margin: 0px; padding: 0px; list-style: none; display: block; position: absolute;	}
#subnav a {display: block; height: 15px; text-decoration: none; border-bottom: none;}

#brooches 	{left:0px; top:43px; width:176px; height:15px;}
#bangles 	{left:0px; top:66px; width:176px; height:15px;}
#earrings 	{left:0px; top:92px; width:176px; height:15px;}
#neckpieces {left:0px; top:117px; width:176px; height:15px;}
#rings 		{left:0px; top:141px; width:176px; height:15px;}

#brooches a, #bangles a, #earrings a, #neckpieces a, #rings a  {height:15px;}

#brooches a:hover, #brooches .active  		{background:url(assets/sub-nav.jpg) -176px -43px no-repeat; width:176px; height:15px;}
#bangles a:hover, #bangles .active			{background:url(assets/sub-nav.jpg) -176px -66px no-repeat; width:176px; height:15px;}
#earrings a:hover, #earrings .active		{background:url(assets/sub-nav.jpg) -176px -92px no-repeat; width:176px; height:15px;}
#neckpieces a:hover, #neckpieces .active	{background:url(assets/sub-nav.jpg) -176px -117px no-repeat; width:176px; height:15px;}
#rings a:hover, #rings .active				{background:url(assets/sub-nav.jpg) -176px -141px no-repeat; width:176px; height:15px;}


.right .textleft { float: left; width: 500px; }
.right .textright { float: right; width: 200px; }

.right .contactleft { float: left; width: 420px; }
.right .contactright { float: right; width: 310px; }

.column1 { float: left; width: 265px;}
.column2 { float: left; width: 265px;}
.column3 { float: left; width: 240px;}

.column1 p, .column2 p { width: 240px;}
.column1 p, .column2 p, .column3 p {margin: 0px 0px 10px 0px;}


#footer {width: 1000px; margin: 30px auto; background: url(assets/bgrpt_footer.jpg) repeat-x top left; color: #99CCCC;}
#footer .left {width: 700px;}
#footer .right {width: 300px; text-align:right;}

#footer p {font-size: 0.7em; margin: 10px 0px 0px 0px;}