/* 
################################################################################
# Web Site ID: ...by Graf!, v3.00
# Site Design: George Silberstern, ...by Graf!
# Copyrighted: © 1995-2022
# ------------------------------------------------------------------------------
# Module Name: gallery.css
# Description: This stylesheet encapsulates web site gallery samples.
################################################################################
*/
* {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
/*	outline: 1px solid #FF0000;*/
}

/*
================================================================================
= SEMANTIC HTML ELEMENTS
================================================================================
*/

/* 
================================================================================
= HTML TAGS
================================================================================
*/
a[href="#top"]:before {
	background-image: url(../img/goto-top-128x128.png);
	background-repeat: no-repeat;
	background-size: 12px 12px;
	content:"";
	display: inline-block;
	filter: contrast(40%);
	height: 12px;
	margin: 0px 4px -2px 2px;
	width: 12px;
}

a[target="_blank"]:after {
	background-image: url(../img/external-link-128x128.png);
	background-repeat: no-repeat;
	background-size: 12px 12px;
	content:"";
	display: inline-block;
	filter: brightness(100%) contrast(40%) hue-rotate(145deg);
	height: 12px;
	margin: 0px 1px -1px 4px;
	width: 12px;
}

body { 
	background: #E8E8E8;
	color: #000000;
	clear: both;
	display: block;
}

button {
	border: 2px outset #000000;
	border-radius: 5px;
	cursor: pointer;
	padding: 3px 15px 3px 15px;
	text-decoration: none;
}

p {
	padding: 0px 0px 10px 0px;
}

/*
================================================================================
= HTML CLASSES
================================================================================
*/
.control {
	clear: both;
	display: block;
	padding: 10px 0px 10px 0px;
	margin: 35px 0px 0px 0px;
}

.control-button {
	cursor: pointer;
	display: inline-block;
	margin: 5px 0px 5px 0px;
	position: relative;
	text-align: center;
	text-decoration: none;
}

.separator {
	clear: both;
	border-top: 1px solid;
	padding: 5px 0px 5px 0px;
}

.screenshot {
	background: #101020;
	border: 5px ridge #807060;
	box-shadow: 3px 3px 6px 0px #000000;
	-moz-box-shadow: 3px 3px 6px 0px #000000;
	-webkit-box-shadow: 3px 3px 6px 0px #000000;
	color: #F0F0F0;
	display: block;
	font-family: monospace;
	font-size: 12px;
	margin: 0 auto 20px;
	padding: 10px 10px 10px 10px;
	width: 580px;
}

.signature {
	padding: 10px 0px 0px 0px;
}

/*
================================================================================
= HTML IDs
================================================================================
*/
/* --- Proposed Web Pages --------------------------------------------------- */
#p_content {
	background: #FFFFFF;
	border: 3px inset #805501;
	display: inline-block;
	margin: 0px auto;
	padding: 15px 15px 15px 15px;
	position: relative;
}

#p_design-space {
	clear: both;
	max-width: 740px;
	margin: 0px auto;
	padding: 50px 0px 0px 0px;
	position: relative;
	text-align: center;
}

/* --- How-To Guides -------------------------------------------------------- */

#h_content {
	background: #FFFFFF;
	border: 6px inset #3399FF;
	display: inline-block;
	margin: 0px auto;
	min-width: 640px;
	padding: 15px 15px 15px 15px;
	position: relative;
}

#h_danger {
	background: #FFF6FF;
	border: 6px ridge #D00000; 
	box-shadow: 3px 3px 6px 0px #221000;
	-moz-box-shadow: 3px 3px 6px 0px #221000;
	-webkit-box-shadow: 3px 3px 6px 0px #221000;
	color: #300000;
	margin: 0 auto 20px;
	padding: 8px 8px 8px 8px;
	width: 85%;
}

#h_howto { 
	font-size: 11pt;
	float: left;
	text-align: left;
}

#h_howto-caption {
	font-size: 10px;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	text-align: center;
}

#h_howto-code {
	background: #F0F0F0;
	border: 2px solid #805501; 
	box-shadow: 3px 3px 6px 0px #221000;
	-moz-box-shadow: 3px 3px 6px 0px #221000;
	-webkit-box-shadow: 3px 3px 6px 0px #221000;
	font-family: monospace; 
	font-size: 12px; 
	margin: 0 auto 20px;
	padding: 8px 8px 8px 8px;
	width: 85%;
}

#h_howto-code-inline {
	background: #DFEFFF;
	border: 1px solid #E0E0E0;
	font-family: monospace;
	padding: 0px 3px 0px 3px;
}

#h_howto-head {
	font-weight: bold;
	font-variant: small-caps;
}

#h_howto-line {
	margin: 0 auto;
	overflow: hidden;
	padding: 0px 0px 15px 0px;
	width: 75%;
}

#h_howto-section {
	font-size: 30px;
	font-weight: bold;
	text-align: center;
}

#h_howto-section-sub {
	font-size: 25px;
	font-weight: bold;
}

#h_howto-section-sub-sub {
	font-size: 20px;
	font-weight: bold;
}

#h_howto-section-totop {
	font-size: 12px;
	font-variant: small-caps;
	letter-spacing: 1px;
}

#h_howto-table {
	background-color: #FFF9F6;
	border: 2px solid #805501;
	box-shadow: 3px 3px 6px 0px #221000;
	-moz-box-shadow: 3px 3px 6px 0px #221000;
	-webkit-box-shadow: 3px 3px 6px 0px #221000;
	margin: 5px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
}

#h_howto-table td {
	font-size: 12px;
	padding: 2px 2px 2px 4px;
}

#h_howto-table th {
 	color: #493316;
	font-variant: small-caps;
	padding: 2px 2px 2px 4px;
}

#h_howto-textbox {
	background: #FFF9F6;
	border: 2px solid #805501; 
	box-shadow: 3px 3px 6px 0px #221000;
	-moz-box-shadow: 3px 3px 6px 0px #221000;
	-webkit-box-shadow: 3px 3px 6px 0px #221000;
	margin: 0 auto 20px;
	padding: 8px 8px 8px 8px;
	width: 85%;
}

#h_ol {
	margin: 0px 0px 15px 30px;
}

#h_space {
	clear: both;
	font-family: arial, helvetica, sans-serif;
	max-width: 740px;
	margin: 0px auto;
	padding: 50px 0px 0px 0px;
	position: relative;
	text-align: center;
}

#h_space_banner {
	background: #000099;
	border-bottom: 5px solid #D1DB00;
	color: #D1DB00;
	font-size: 22px;
	font-style: oblique;
	font-variant: small-caps;
	font-weight: bold;
	padding: 5px 0px 5px 0px;
	margin: 5px 0px 15px 0px;
	text-shadow: 2px 2px 2px #000000;
	box-shadow: 0px 9px 8px -3px #000030;
	-moz-box-shadow: 0px 9px 8px -3px #000030;
	-webkit-box-shadow: 0px 9px 8px -3px #000030;
}

#h_space_title {
	padding: 0px 0px 0px 0px;
	margin: 20px 0px 25px 0px;
}

#h_space_title h2 {
	background: #FFFFFF;
	border: 3px inset #FFB620;
	color: #000099;
	font-style: oblique;
	margin: 0 auto;
	padding: 5px 10px 7px 10px;
	text-align: center;
	text-shadow: 2px 2px 2px #909090;
	width: 75%
}

#h_ul {
	margin: 0px 0px 15px 30px;
	list-style: url(../img/bullet_sphere-6x6.gif);
}

/* --- Tutorials ------------------------------------------------------------ */

#t_content {
	background: #FFFFFF;
	border: 6px inset #FFB620;
	display: inline-block;
	margin: 0px auto;
	min-width: 640px;
	padding: 15px 15px 15px 15px;
	position: relative;
}

#t_img-fix { 
	margin-bottom: -3px;
}

#t_lesson { 
	font-size: 11pt;
	float: left;
	text-align: left;
}

#t_lesson-caption {
	font-size: 10px;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	text-align: center;
}

#t_lesson-code {
	background: #F0F0F0;
	border: 2px solid #000060; 
	box-shadow: 3px 3px 6px 0px #000030;
	-moz-box-shadow: 3px 3px 6px 0px #000030;
	-webkit-box-shadow: 3px 3px 6px 0px #000030;
	font-family: monospace; 
	font-size: 12px; 
	font-variant: lowercase;
	margin: 0 auto 20px;
	padding: 8px 8px 8px 8px;
	width: 85%;
}

#t_lesson-code-inline {
	background: #DFEFFF;
	border: 1px solid #E0E0E0;
	font-family: monospace;
	font-variant: small-caps;
	padding: 0px 3px 0px 3px;
}

#t_lesson-code-new {
	font-weight: bold;
}

#t_lesson-head {
	font-weight: bold;
	font-variant: small-caps;
}

#t_lesson-line {
	margin: 0 auto;
	overflow: hidden;
	padding: 0px 0px 15px 0px;
	width: 50%;
}

#t_lesson-notcode {
	font-variant: normal;
}

#t_space {
	clear: both;
	font-family: arial, helvetica, sans-serif;
	max-width: 740px;
	margin: 0px auto;
	padding: 50px 0px 0px 0px;
	position: relative;
	text-align: center;
}

#t_space_banner {
	background: #000099;
	border-bottom: 5px solid #D1DB00;
	color: #D1DB00;
	font-size: 22px;
	font-style: oblique;
	font-variant: small-caps;
	font-weight: bold;
	padding: 5px 0px 5px 0px;
	margin: 5px 0px 15px 0px;
	text-shadow: 2px 2px 2px #000000;
	box-shadow: 0px 9px 8px -3px #000030;
	-moz-box-shadow: 0px 9px 8px -3px #000030;
	-webkit-box-shadow: 0px 9px 8px -3px #000030;
}

#t_lesson-table {
	background-color: #F0F0F0;
	border: 2px solid #000060;
	font-size: 12px;
	margin: 5px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
}

#t_ol {
	margin: 0px 0px 15px 30px;
}

#t_space_title {
	padding: 0px 0px 0px 0px;
	margin: 20px 0px 25px 0px;
}

#t_space_title h2 {
	background: #FFFFFF;
	border: 3px inset #000099;
	color: #FFB620;
	font-style: oblique;
	margin: 0 auto;
	padding: 5px 10px 7px 10px;
	text-align: center;
	text-shadow: 2px 2px 2px #000000;
	width: 50%
}

#t_ul {
	margin: 0px 0px 15px 30px;
	list-style: url(bullet_sphere-6x6.gif);
}

/* --- Web Sites ------------------------------------------------------------ */

#w_content {
	background: #FFFFFF;
	border: 3px inset #3399FF;
	display: inline-block;
	margin: 0px auto;
	padding: 15px 15px 15px 15px;
	position: relative;
}

#w_design-space {
	clear: both;
	max-width: 740px;
	margin: 0px auto;
	padding: 50px 0px 0px 0px;
	position: relative;
	text-align: center;
}

/* -------------------------------------------------------------------------- */