/*================================================================
=================================================================

	PROJECT: hyph-n.com
	FILE: screen.css
	UPDATE: June 03, 2008

	AUHOR: Jeffrey D. King
	EMAIL: jeff@kingdesk.com
	WEBSITE: http://kingdesk.com

	© 2008 KINGdesk, LLC. All Rights Reserved.

=================================================================
================================================================*/

/*
	Prefered Selector Order:
		1.	positioning styles (with coordinates)
		3.	display/visibility styles
		2.	float/clear styles
		4.	spacing styles (margin, padding, border)
		5.	dimensions styles (width, height)
		6.	typography-related styles (line-height, color, etc.)
		7.	background styles
		8.	miscellaneous styles (list-style, cursors, etc.)


	colors:
		#00090e  main background color
		#001522  background (top-lighter) fade color
		#003350  main logo color
		#001f31  faded "e" in logo
		#00a2ff  main highlight color
		#d5f0ff  main type color
		#a4b8c4  meta type color

*/


/*================================================================
	Reset
================================================================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline: 0;}
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/*================================================================
	General HTML
================================================================*/
html {
	height: 100%;
	width: 100%;
}
body {
	font-size: 15px;
	line-height: 20px;
	font-family: helvetica, arial, sans-serif;
	color: #d5f0ff;
	background: #00090e url('/css/images/bg.png') repeat-x top left;
}
h2 {
	font-size: 20px;
	margin: 0 0 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
p {
	margin: 20px 0;
	text-align: justify;
}
a {
	color: #d5f0ff;
}
a:hover {
	color: #00a2ff;
}
em {
	font-style: italic;
}
code, kbd {
	font-family: "Courier New", Courier, monospace;
	font-variant: normal;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	text-decoration: none;
}
pre code {
	clear: both;
	display: block;
	margin: 20px 0;
	border: 1px solid #00a2ff;
	padding: 19px 1px;
	width: 100%; 
	text-align: left;
	color: #003350;
	overflow: auto; 
	background-color: #d5f0ff;
}
/*	lists
----------------------------------------------------------------*/
ol li{
	list-style: decimal outside none;
	margin-left: 20px;
}
ol ol li{
	list-style-type: lower-alpha;
	margin-left: 40px;
}
ol ol ol li{
	list-style-type: lower-roman;
	margin-left: 60px;
}
ul li{
	list-style: disc outside none;
	margin-left: 20px;
}
ul ul li{
	list-style-type: circle;
	margin-left: 40px;
}
ul ul ul li{
	list-style-type: square;
	margin-left: 60px;
}
dl {
	margin: 20px 0;
}
dt {
	margin-top: 20px;
	font-size: 18px;
	font-style: italic;
}
dd {
	margin: 0 0 0 20px;
}

/*	forms
----------------------------------------------------------------*/
label {
	margin-top: 10px;
}
input {
	color: #003350;
	font-family: "courier new", courier, monospace;
	font-size: 14px;
}
textarea {
	display: block;
	clear: both;
	margin: 0 -1px;
	border: 1px solid #00a2ff;
	width: 100%;
	font-family: "courier new", courier, monospace;
	font-size: 14px;
	color: #003350;
	background-color: #d5f0ff;
}
select, option {
	color: #003350;
}
button {
	font-size: 80%;
	margin: 0 -7px 0 7px;
	border: none;
	height: 40px;
	width: 100px;
	text-indent: -9999px;
}
button:hover {
	cursor: pointer;
}
button:focus {
	outline: none !important;
}


/*================================================================
	Main Sections
================================================================*/

/*	accessibility
----------------------------------------------------------------*/
#accessibility {
	position:absolute;
	top:-5000em;
}

/*	header
----------------------------------------------------------------*/
#header {
	position: relative;
	clear: both;
	width: 925px;
	margin: 45px auto 30px;
}
#siteName {
	height: 53px;
	width: 300px;
	margin: 45px auto 10px;
	padding: 0 60px;
	text-indent: -9999px;
	background: transparent url('/css/images/hyphenLogo.png') no-repeat left top;	
}
#siteName a {
	display: block;
	height: 100%;
}
#siteName a:hover {
	background: transparent url('/css/images/hyphenLogo.png') no-repeat -60px -60px;	
}
ul#menu {	
	height: 22px;
	width: 417px;
	margin: 10px auto 0;
	text-indent: -9999px;
	background: transparent url('/css/images/menu.png') no-repeat left top;	
}
#menu li {
	display: block;
	float: left;
	margin: 0;
	height: 100%;
	list-style: none;
}
#menu li a {
	display: block;
	height: 100%;
}
#menu #homeLink {
	width: 92px;
}
#menu #homeLink a:hover {
	background: transparent url('/css/images/menu.png') no-repeat 0 -25px;	
}
#menu #toolsLink {
	width: 81px;
	margin-left: 29px;
}
#menu #toolsLink a:hover {
	background: transparent url('/css/images/menu.png') no-repeat -121px -25px;	
}
#menu #faqLink {
	width: 55px;
	margin-left: 29px;
}
#menu #faqLink a:hover {
	background: transparent url('/css/images/menu.png') no-repeat -231px -25px;	
}
#menu #aboutLink {
	width: 100px;
	margin-left: 31px;
}
#menu #aboutLink a:hover {
	background: transparent url('/css/images/menu.png') no-repeat -317px -25px;	
}

/*	content
----------------------------------------------------------------*/
#content {
/*	position: relative;
*/	clear: both;
	width: 988px;
	height: 425px;
	margin: 30px auto 30px;
}
#leftbox, #rightbox {
	width: 444px;
	height: 400px;
	border: 3px solid #00a2ff;
	padding: 17px;
	background-color: #00253a; /*003350;*/
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#leftbox {
	float: left;
}
#rightbox {
	position: relative;
	float: right;
	overflow: hidden;
}

/*	footer
----------------------------------------------------------------*/
#footer {
	position: relative;
	clear: both;
	width: 993px;
	margin: 0 auto 0;
	padding: 20px 0 10px;
	text-align: center;
}
#footer p {
	margin: 0;
	text-align: center;
}


/*================================================================
	Sub Sections
================================================================*/


/*	hyphenform
----------------------------------------------------------------*/
#clearRaw {
	display: none;
	float: right;
	margin-top: -20px;
	background: transparent url('/css/images/buttons.png') no-repeat -100px 0;	
}
#hideOptions {
	margin: 0 347px;
	background: transparent url('/css/images/buttons.png') no-repeat -200px 0;	
}
#showOptions {
	display: none;
	float: right;
	background: transparent url('/css/images/buttons.png') no-repeat 0 0;	
}
#submit {
	display: block;
	float: right;
	background: transparent url('/css/images/buttons.png') no-repeat -300px 0;	
}
#clearRaw:hover {
	background-position: -100px -40px;	
}
#clearRaw:active {
	background-position: -100px -80px !important;	
}
#hideOptions:hover {
	background-position: -200px -40px;	
}
#hideOptions:active {
	background-position: -200px -80px !important;	
}
#showOptions:hover {
	background-position: 0 -40px;	
}
#showOptions:active {
	background-position: 0 -80px !important;	
}
#submit:hover {
	background-position: -300px -40px;	
}
#submit:active {
	background-position: -300px -80px !important;	
}
#rawLabel {
	height: 20px;
}
#raw {
	height: 255px;
	white-space: pre-wrap;
}
#outputRadio {
	margin: 20px 0 0;
}
#theOptions {
	display: none;
	position: absolute;
	height: 100%;
	min-height: 660px;
	width: 100%;
	min-width: 925px;
	top: 0;
	left:  0;
	background: url('/css/images/overlay.png') repeat;
	z-index: 10;
}
#theOptionsDialog {
	display: block;
	position: relative;
	top: 125px;
	left: 50%;
	margin-left: -400px;
	border: 3px solid #00a2ff;
	width: 794px;
	background-color: #003350; /*0067a2;*/
	z-index: 11;

	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
	-moz-opacity: 0.85;
	-khtml-opacity:0.85;
	opacity: 0.85;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#leftOptions {
	float: left;
	margin: 0 !important;
	border-right: 1px solid #0067a2;
	width: 397px;
}
#hyphenOptions {
	margin: 0 !important;
	border-right: 1px solid #001522;
	padding: 17px 19px 19px 17px;
}
#rightOptions {
	float: right;
	margin: 0 0 0 -20px !important;
	width: 397px;
}
#urlOptions {
	margin: 0 !important;
	border-bottom: 1px solid #001522;
	padding: 17px 17px 19px 20px;
}
#widowOptions {
	margin: 0 !important;
	border-top: 1px solid #0067a2;
	padding: 19px 17px 0 20px;
}
#bottomOptions {
	clear: both;
	margin: 0 0 0 !important;
	border-top: 1px solid #001522;
}
#saveOptions {
	margin: 0 !important;
	border-top: 1px solid #0067a2;
	padding: 9px 0 7px;
}
#theOptions div {
	margin-top: 10px;
}
#theOptions textarea {
	height: 70px;
}

.submitButtons {
	clear: both;
	margin-top: 10px;
	
}
/*	resutsform
----------------------------------------------------------------*/
#theResults {
	margin: 0 -17px;
	padding: 0 17px 19px;
	border-bottom: 1px solid #00090e;
}
#theOutput {
	clear: both;
	margin: 41px -1px 0;
	border: 1px solid #00a2ff;
	width: 100%;
	height: 255px;
	overflow: auto;
	font-family: "courier new", courier, monospace;
	font-size: 14px;
	color: #003350;
	background-color: #d5f0ff;
	white-space: pre-wrap;
}
div#theOutput {
	padding: 0 1px;	
}
#theOutput * {
	background: none !important;
	border: none !important;
	color: #003350 !important;
	float: none !important;
	width: 100% !important;
}
#theOutput div {
	margin: 0 !important;
	padding: 0 !important;
}
#theOutput a:hover, #theOutput a:hover * {
	color: #00a2ff !important;
}

/*	tools, faq, and about
----------------------------------------------------------------*/
ol#tabs a {
	display: block;
	text-decoration: none;
}
ol#tabs a:hover {
	text-decoration: underline;
}
ol#tabs li.current a {
	font-style: italic;
	font-weight: 700;
}
ol#tabs li.current a:hover {
	text-decoration: none !important;
	color: #d5f0ff;
	cursor: default;
}
#tools #rightbox, #faq #rightbox, #about #rightbox {
	padding-top: 0;
	height: 417px;
}
div.tab {
	height: 440px; /* needs to be taller than #rightbox to hide the next tab */
	padding-top:17px;
}

/*	adsense
----------------------------------------------------------------*/
.adsense {
	display: block;
	overflow: hidden;/**/
	margin: 0 -17px 0 !important;
	border-top: 1px solid #005281;
	padding: 10px 5px 0;
	height: 60px;
	width: 468px;
}
.adsenseCredit {
	text-align: right;
	margin: 5px -12px 0 0;
	padding: 0;
	font-size: 12px;
}
/*	misc
----------------------------------------------------------------*/
#siteCredit {
	position: absolute;
	bottom: 0;
	margin: 0 -17px;
	border-top: 1px solid #00090e;
	width: 100%;
}
#siteCredit p {
	margin: 0;
	border-top: 1px solid #005281;
	padding: 18px 17px 20px;
}
.note {
	font-size: 80%;
	color: #a4b8c4;
}

#tools #leftbox ol a {
	text-decoration: none;
}
.currentli {
	font-style: italic;
	font-weight: 700;
}