/* Colors: 
FCFFF5	D1DBBD	91AA9D	3E606F	193441
FFF0A3	B8CC6E	4B6000	E4F8FF	004460

*/

html,body{margin:0;padding:0}
body{font: 76% "Lucida Grande",tahoma,arial,sans-serif;}
p{margin:0 0 4px;}
a{color: #004460;padding:1px;}
a img {border:none;}
img { border:1px solid #ddd;}
h1, h2, h3, h4 {margin: 2px 0; padding:0;}
h2, h3 {color:#4B6000;  }
div#header{position:relative; background-color: #fff; padding:5px; border-bottom: 1px solid #ccc; }
div#header a { color: #004460; }
div#header a.message { margin-left: 100px; font-size: 1.2em; padding: 2px;}
h1, div#header {color: #004460}
div#content p{line-height:1.4}
div#navigation {}
div#extra{}
div#footer{background: #fff;color: #999;	}
div#footer p{margin:0;padding:10px 10px; text-align: center;}
div#footer a{display:inline;padding:0;color: #999; }
ul { margin: 0;}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

div#wrapper{float:left;width:100%;margin-left:-120px;}
div#content{margin-left:120px; padding:0 4px;}
div#navigation{float:right;width:110px;margin-right:5px;margin-top:5px;}
div#extra{float:right;clear:right;width:110px}
div#footer{clear:both;width:100%}

div#container.main {width:780px;margin:0 auto}
div#container.main div#wrapper {margin-left:0;}
div#container.main div#wrapper div#content {margin-left:0;}

div#photo { margin:5px; float: left; width: 600px; text-align: center;}

div.feature { float:left; width: 43%; padding: 0 5px;}
div.feature_image { float:left; width: 55%; margin: 5px 0;}
div.feature_list { clear:both; padding-top: 1px; }

div.feature_list ul.photos { padding-left: 6px; }
div.feature_list ul.photos li { height: 90px; }

ul.features { margin: 0 10px; padding:5px 10px;}
ul.features li {margin:0; padding: 2px 0; list-style: square;}

ul.photos, ul#albums, ul#backgrounds, ul#events, ul#screens { list-style: none; padding:0; margin:0;}
ul.photos li { float:left; margin:0; width:105px; height:105px; text-align:center; padding: 1px;}
ul.photos li img { border:1px solid #ddd; }

ul#albums li, ul#events li { float:left; width:250px; height:130px; margin: 0 4px;}
ul#albums li a, ul#events li a { padding:5px; display:block; width:100px;}

ul#screens { margin-top: 8px; margin-left:5px; }
ul#screens li { float:left; margin: 0 5px; text-align: center; width: 175px; }

ul#backgrounds li { float:left; height: 100px; width: 100px; padding:5px; margin: 2px; border:1px solid #ddd;}

#topnav { position: absolute; right: 20px; top: 15px;}

#navigation ul { list-style-type: none; margin:0; padding:2px; background: url(/images/background_green.png); border: 1px solid #ddd;}
#navigation ul li { padding: 2px 0; }

div#topnav ul { margin: 0; padding: 0; list-style:none; }
div#topnav ul li { float: left; padding: 0 5px;}

#footer ul { margin: 10px 0 0; padding: 5px 0; list-style:none; }
#footer ul li { display: inline; padding-left:5px; border-left: 1px solid #ddd;}
#footer ul li.first {border-left:none;}
 
ul.links { list-style-type: none; margin: 4px 1px; padding: 0;}
ul.links li { float:left; margin-right: 10px; padding: 2px 0;}

ul.actions { list-style-type: none; margin: 5px 0 10px; padding: 0;}
ul.actions li { margin: 5px 0;}

ul.details { list-style-type: none; margin: 20px 0 10px; padding: 0; font-size:smaller; color:#999;}
ul.details li { margin: 4px 0;}

a.folder { background: url(/images/icons/folder.gif) no-repeat; padding-left: 20px;}
a.calendar { background: url(/images/icons/calendar.gif) no-repeat; padding-left: 20px;}
a.camera { background: url(/images/icons/camera.gif) no-repeat; padding-left: 20px;}
a.copy_paste { background: url(/images/icons/copy_paste.gif) no-repeat; padding-left: 20px;}
a.download { background: url(/images/icons/download.gif) no-repeat; padding-left: 20px;}
a.edit { background: url(/images/icons/edit.gif) no-repeat; padding-left: 20px;}
a.new { background: url(/images/icons/new.gif) no-repeat; padding-left: 20px;}
a.upload { background: url(/images/icons/upload.gif) no-repeat; padding-left: 20px;}
a.trash { background: url(/images/icons/trash.gif) no-repeat; padding-left: 20px;}
a.bookmark { background: url(/images/icons/bookmark.gif) no-repeat; padding-left: 20px;}
a.user { background: url(/images/icons/user.gif) no-repeat; padding-left: 20px;}
a.arrow_left { background: url(/images/icons/arrow_left.gif) no-repeat; padding-left: 20px;}
a.arrow_right { background: url(/images/icons/arrow_right.gif) no-repeat; padding-left: 20px;}
a.arrow_up { background: url(/images/icons/arrow_up.gif) no-repeat; padding-left: 20px;}
a.shopping_cart { background: url(/images/icons/shopping_cart.gif) no-repeat; padding-left: 20px;}
a.favorite { background: url(/images/icons/favorite.gif) no-repeat; padding-left: 20px;}
a.email { background: url(/images/icons/email.gif) no-repeat; padding-left: 20px;}
a.new_window { background: url(/images/icons/new_window.gif) no-repeat; padding-left: 20px;}

a.large { background-position: 0 3px; font-size: 14px; font-weight: bold;}

a.try_it, a.learn_more { margin:10px auto 0px; display:block;}
a.try_it { width: 110px; }
a.learn_more { width: 72px; }

.handle { cursor: move; }

form {margin:5px;}
form dl {background-image: url(/images/background_blue.png); margin: 0 0 5px; padding: 5px; width: 425px; border:1px solid #c0e2f0;}
form dd {margin:2px 0 5px;}
form dd span, form dt span { color: #999; padding: 0 5px; font-style: italic;}

form dl#login {width: 175px;}

div.box { background-color: #E4F8FF; border: 1px solid #d5e8dd; margin:5px auto; padding: 2px; font-size:1.1em; }

div.left { float:left; width: 450px; }
div.right { float:left; width: 400px; }

div#screens_container { background-color: #e3f1f6; border: 1px solid #ddd; padding: 5px; margin-top: 11px; }

ol li { margin: 2px; }

p.note, p.note a { font-size:.8em; color: #999;}
#errorExplanation { width: 400px; border: 2px solid #900; background-color: #f5e5e5; color: #333;padding: 7px; padding-bottom: 12px; margin-bottom: 20px; margin-left:5px;} 
#errorExplanation h2 { text-align: left; font-weight: bold; padding: 5px 5px 5px 15px; font-size: 12px; margin: -7px; background-color: #c00; color: #fff; } 
#errorExplanation p { color: #333; margin-bottom: 0; padding: 5px; } 
#errorExplanation ul li { font-size: 12px; list-style: square; padding-left: 12px;}
div.fieldWithErrors input { border: 2px solid #900;}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


div.pagination {
	padding: 3px;
	margin: 3px;
}

div.pagination a {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #999;
	
	text-decoration: none; /* no underline */
	color: #004460;
}
div.pagination a:hover, div.pagination a:active {
	border: 1px solid #004460;

	color: #000;
}
div.pagination span.current {
	padding: 2px 5px 2px 5px;
	margin: 2px;
		border: 1px solid #004460;
		
		font-weight: bold;
		background-color: #004460;
		color: #FFF;
	}
	div.pagination span.disabled {
		padding: 2px 5px 2px 5px;
		margin: 2px;
		border: 1px solid #ccc;
	
		color: #bbb;
	}


	/* Old fashion html for messages */
	.error {
	  color: #560109;

	}

	.notice {
	  color: #23571D;

	}
	/* Transparent form message (error and notice) for static form*/
	.transparent_message {
	  width: 95%;
	  text-align: center;
	  font-size: 18px;
	  opacity:  0.8;
	  position: absolute;
	  top: 20px;
	  -moz-border-radius:10px;

	}

	.transparent_error {
	  background: #FFA3A9;
	  border: 1px solid #750004;
	}

	.transparent_error p {
	  color: #560109;
	}

	.transparent_notice {
	  background: #9BFFA3;
	  border-top: 1px solid #23571D;
	  border-bottom: 1px solid #23571D;  
	}

	.transparent_notice p {
	  color: #23571D;
	}

	/* Saving message for static form */
	#info_message {
	  position: absolute;
	  background: #FFF;
	  opacity:  0.7;
	  z-index:  10000;
	}

	#info_message p {
	  padding-top: 200px;
	  font-size: 30px;
	  color: #000;
	  text-align:  center;
	}

	/* Transparent form message (error and notice) for ajax form */
	.transparent_ajax_message {
	  width: 100%;
	  text-align: center;
	  font-size: 20px;
	  position: absolute;
	  opacity:  0.8;
	}

	.transparent_ajax_error p {
	  color: #560109;
	  background: #FFA3A9;

	  border-left: 1px solid #750004;
	  border-right: 1px solid #750004;
	  border-bottom: 1px solid #750004;  
	  margin: 0px 20px 0px 20px;
	  padding-top: 20px;
	  padding-bottom: 20px;
	  -moz-border-radius-bottomleft: 10px;
	  -moz-border-radius-bottomright: 10px;
	}

	.transparent_ajax_notice p {
	  color: #23571D;
	  background: #9BFFA3;

	  border-left: 1px solid #23571D;
	  border-right: 1px solid #23571D;
	  border-bottom: 1px solid #23571D;  
	  margin: 0px 20px 0px 20px;
	  padding-top: 20px;
	  padding-bottom: 20px;
	  -moz-border-radius-bottomleft: 10px;
	  -moz-border-radius-bottomright: 10px;
	}


/* Saving message for ajax form */
#ajax_info_message {
  position: absolute;
  background: #FFF;
  opacity:  0.7;
}

#ajax_info_message p {
  padding-top: 0px;
  font-size: 30px;
  color: #B1A861;
  text-align:  center;
}

/* set the image to use and establish the lower-right position */ 
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h3, .cssbox_head p { background: transparent url(/images/corners_gray.png) no-repeat bottom right} 
.cssbox{ 
/* intended total box width - padding-right(next) */
/* the gap on the right edge of the image (not content padding) */ 
padding-right:5px; /* use to position the box */ 
margin:5px auto} /* set the top-right image */ 
.cssbox_head{background-position:top right; 
	/* pull the right image over on top of border */ 
margin-right:-5px; 
/* right-image-gap + right-inside padding */ 
padding-right:40px} 
/* set the top-left image */ 
.cssbox_head h3 { background-position:top left; margin:0; /* reset main site styles*/ 
border:0; /* ditto */ 
/* padding-left = image gap + interior padding ... no padding-right */ 
padding:2px 4px;} /* IE Holly Hack */ 
/* set the lower-left corner image */ 
.cssbox_body{ background-position:bottom left; /* interior-padding right */ padding:4px} /* mirror .cssbox_head right/left */	

/* PLUGIN */

#plugin { BACKGROUND: #0d0d0d; COLOR: #AAA; CURSOR: move; DISPLAY: block; FONT-FAMILY: arial; FONT-SIZE: 11px; PADDING: 7px 10px 11px 10px; _PADDING-RIGHT: 0; Z-INDEX: 1; TOP: 0; LEFT: 0; POSITION: absolute; WIDTH: 199px; _width: 210px; _padding-right: 0px; }
#plugin br { CLEAR: both; MARGIN: 0; PADDING: 0;  }
#plugin select { BORDER: 1px solid #333; BACKGROUND: #FFF; POSITION: relative; TOP: 4px; }

#plugHEX { FLOAT: left; position: relative; top: -1px; }
#plugCLOSE { FLOAT: right; cursor: pointer; MARGIN: 0 8px 3px; _MARGIN-RIGHT: 10px; COLOR: #FFF; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#plugHEX:hover,#plugCLOSE:hover { COLOR: #FFD000;  }

#plugCUR { float: left; width: 10px; height: 10px; background: #FFF; margin-right: 3px; }

#SV { background: #FF0000 url('/images/SatVal.png'); _BACKGROUND: #FF0000; POSITION: relative; CURSOR: crosshair; FLOAT: left; HEIGHT: 166px; WIDTH: 167px; _WIDTH: 165px; MARGIN-RIGHT: 10px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/SatVal.png', sizingMethod='scale'); -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#SVslide { BACKGROUND: url('/images/slide.gif'); HEIGHT: 9px; WIDTH: 9px; POSITION: absolute; _font-size: 1px; line-height: 1px; }

#H { BORDER: 1px solid #000; CURSOR: crosshair; FLOAT: left; HEIGHT: 154px; POSITION: relative; WIDTH: 19px; PADDING: 0; TOP: 4px; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#Hslide { BACKGROUND: url('/images/slideHue.gif'); HEIGHT: 5px; WIDTH: 33px; POSITION: absolute; _font-size: 1px; line-height: 1px; }
#Hmodel { POSITION: relative; TOP: -5px; }
#Hmodel div { HEIGHT: 1px; WIDTH: 19px; font-size: 1px; line-height: 1px; MARGIN: 0; PADDING: 0; }