/*
-----------------------------------------------
Spry Demos CSS Rules
Version:  12 Apr 2006 (0.2b)
----------------------------------------------- */
body {
	margin: 0 auto; text-align:center;
	padding: 0;
	color: #333333;
	background: #646464; /*url('../images/bg_rule_red.gif') repeat-x; */
	font-family: "Verdana", "Lucida Grande", "Trebuchet MS", sans-serif;
	font-size: x-small; /*for IE5/Win */
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small; /*for compliant browsers */	
	}
html>body { font-size: small; } /* be nice to Opera */

/* Links
----------------------------------------------- */
a img { border-style: none; }

/* Paragraph Headings
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {font-weight: normal; }
h1 { font-size: 165%; text-align: left; color: #71706e; margin-left:70px; line-height: 12pt; }
p { margin:0.375em 0; }

/* Layout Rules
----------------------------------------------- */
#wrap {
	
	width: 700px;
	height:auto;
	background-color:#a1a09d;
	padding-top: 0px; padding-left:0px; padding-bottom:50px; /*padding for top of page - use this to move all gallery elements down*/
	margin: 0 auto; text-align:center; /*margin for right side of page - use this to move all gallery elements to the right*/
	border-top: solid 1px #4b4b4b;
	border-right: solid 1px #4b4b4b;
	border-bottom: solid 1px #4b4b4b;
	border-left: solid 1px #4b4b4b;
	overflow:auto;
}

#codesample #wrap { width: auto; }

#main-menu {
	padding-top: 12px;
	height: 50;
	
}

#header {
	width: 700px;
	height: 150;
	background: #a1a09d;
}

#footer {
	width: 696px;
	height: 10;
	background-color:#4b4b4b;
	padding:3px;
	margin: 0 auto; text-align:center; 
	font-family: Verdana, Arial, Geneva, sans-serif;
	font-size: 7pt;
	line-height: 12pt;
	color: #a8a8a8;
}

.bodytext {
	font-family: Verdana, Arial, Geneva, sans-serif;
	font-size: 8pt;
	line-height: 12pt;
	color: #54524e;
	text-align : center;
}

.smalltext {
	font-family: Verdana, Arial, Geneva, sans-serif;
	font-size: 7pt;
	line-height: 12pt;
	color: #a8a8a8;
	text-align : center;
}

#sidebar {
	width: 240px;
	margin-top: 0;
}
.SpryHiddenRegion {
   visibility: hidden;
}*/

/* Form Elements
----------------------------------------------- */

label, select { 
	font-size: 100%;
	font-family: "Verdana", "Trebuchet MS", sans-serif; color:#fff;
}
select {
	color: #B1B1BC;
	background-color: #333333;
	border: 1px solid #333333;
}



/* Gallery and Playback Controls
----------------------------------------------- */
#gallerySelect { width: 180px; margin-top:20px;} 
#controls {	margin-top: 5px; }
#galleries {	margin:0 auto 0px auto; }
#galleries label { padding-bottom: 2px; }

/* control panel attributes */
#transport {
	margin: 0;
	padding: 0;
	list-style: none;
}
#transport li {
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
}
#transport a {
	text-decoration: none;
	text-transform: none;
	font-size: 85%;
	font-weight: bold;
	letter-spacing: 0.0em; /* default was 0.1em */
	margin: 0 1px 0 0;
	padding: 4px 8px;
	width: 64px;
	float: left;
	display: block;
	-moz-user-select: none;
	-khtml-user-select: none;
}
#transport a:link {
	background: #666 url('../images/bg_grad_gray1.gif') repeat-x;
	color: #fff;
	border-top: solid 1px #999;
	border-right: solid 1px #404040;
	border-bottom: solid 1px #3a3a3a;
	border-left: solid 1px #404040;
}
#transport a:visited {
	background: #666 url('../images/bg_grad_gray1.gif') repeat-x;
	color: #fff;
	border-top: solid 1px #999;
	border-right: solid 1px #404040;
	border-bottom: solid 1px #3a3a3a;
	border-left: solid 1px #404040;
}
#transport a:hover {
	background: #666 url('../images/bg_grad_gray2.gif') repeat-x;
	color: #000;
	border-top: solid 1px #999;
	border-right: solid 1px #404040;
	border-bottom: solid 1px #3a3a3a;
	border-left: solid 1px #404040;
}
#transport a:focus {
	-moz-user-select: none;
	-khtml-user-select: none;
}

#previews {
	border-top: solid 0px #fff;
	border-right: solid 0px #404040;
	border-bottom: solid 0px #fff;
	border-left: solid 0px #404040;
	padding: 0px 0px 0px 0px; /* padding for thumbnails in relation to page - 80px for left margin
	margin-bottom: 5px;
	/*background-image: url('../images/bg.gif');*/
	width: 550px;
	margin: 0 auto;
}
#thumbnails {
	clear: both;
	margin: 0 auto; /* Padding between thumbs and dropdown */
}
#thumbnails div {
	position: relative;
	width: 50px; /* default was 24 */
	height: 50px; /* default was 24 */
	float: left; /* alignment of thumbs */
	margin: 8px;
	padding: 0; /* alignment of thumbs */
	display:inline;
}
#thumbnails img {
	width: 50px; /* default was 24 */
	height: 50px; /* default was 24 */
	position: absolute;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
	border-left: solid 1px #fff;
}
#picture {
	margin: 0 auto; text-align:center;
	padding-top: 0px; padding-left:0px; /* top and left padding for image placement */
	/*width: 600px;*/
	/*float: inherit;*/
}
#mainImageOutline {
	margin: 0 auto;
	padding: 0;
	background-color: #fff; /* IMPORTANT! Color of padding around images */
	border-top: solid 0px #999;
	border-right: solid 0px #404040;
	border-bottom: solid 0px #333;
	border-left: solid 0px #404040;
	padding: .75em; /* IMPORTANT! this is the padding around each image - default was 1em */
	overflow: hidden; 
}
#mainImage {
	width: 100%;
	height: 100%;
}

#picture img {	border: 0px solid #999; } /* Seems like an extra border? */
.selectedThumbnail {  border: solid 3px #c88003 !important; }
.inFocus {  border: solid 1px #fff !important; }