/* CSS Document for Saveandrewgarib.com | By Andrew S. Garib

Updated October 2009
09.10.28 Validated by W3C validation service (opacity errors only for IE compatibility)
09.11.06 Changes to form tag style (grey border-left to help w visibility)
09.11.09 Changes for albumById - solved css problems in opera, IE, etc. cleaned up input styles.
09.11.16 Added webfonts; "Effloresce" now used for h1 and h2; changed h3,h4,h5 to Helvetica; elimiated deprecated ".titleplain" class, fixed font-weight problem in firefox (ff assumed bold for h1, h2)
09.11.17 Cleaned up dropcap styles; cleaned up margins for h1, h2, .caption; cleaned up layout fonts; cleaned up the file itself (indentation, organization, etc)
09.11.19 Removed Felix Titling, Twentieth Century b/c won't be buying the license for them.
09.11.23 Added style info for new CSS menu
09.11.24 Added EOT fonts; cleaned up post/archive view thumbnails (added .thumbcontain class)
09.11.29 Removed redundant background-colors in layout divs; for images in #infoline, set vertical-align to middle
09.12.13 Added 'comments' class; Added 'pulledquote' class; added tentative <h6> tag; added div.clearboth for clear both sides of floats for ruled lines; cleaned up bottom margins for .caption class (first article images)
09.12.16 Elim h6; max-width of p,h3,h4,h5,ul,ol,li, is 500px, max blockquote is 400px, all these centered with margin-left/-right:auto; darkened bg color to RGB #ddd from #eee
09.12.28 Created .loginstatus and associated .top and .bottom. Now fixed login status, floats above w/ translucency. Removed deprecated elements, which were commented out, for (failed) titlegraphic system. Saved in .zip archive. Changed .subtleright and .subtlesmall to .pagefooter and .postfooter.
10.01.09 H6 returns as Helvetica 10pt black for Writing/articles page.
10.01.10 .highlight became an actual highlight (#ffdd00 bg); strong and b became black normal weight
10.01.14 .alsointhispost becomes .relatedarticles; created .relatedarticles_col (one column, for Also In This Post and Also On This Topic)
10.01.15 added .cloaked (green) to .hidden and .unposted; added .floatleft, .floatright for .relatedarticles_col
10.01.19 b tag no longer equivalent to strong tag, but now default bold face
10.01.24 Created .ticker class;
10.01.25 ticker given set height;
10.01.31 set .phototicker height to 150px and centered caption text; img.art max-width:694px;
10.02.02 Writing page block elements created (.writing_block and .writing_block_contain); h6 tweaked for writing pages.
10.02.05 writing page block styles are now writing_contain, writing_title, writing_details, writing_desc + tweaked their styles
10.02.08 Some cleanup & reorganization
10.02.09 .comments now clear:both
10.02.11 ol li set to 12pt Effloresce black, li span.licontent set to normal p content including line-height:1.2; li margin bottom is 0.5em, padding-right 25px
10.02.14 form margin-bottom:1em; .comments margin-top:2em; padding-bottom:0.2em; removed excess indents from this document
10.02.16 .pagefooter and .postfooter now both 8pt #999 and their contained images vertical-align:middle, and .pagefooter no longer italicized; .pagemagnet font-size:9pt;
10.02.20 Created .headertop for top button in headers
10.02.21 Added .phototickercontain and ticker_brvbar; fiddled with @font_face to fix IE
10.02.22 h3,h4,h5 letter-spacing:0.05em; (was too narrow); .ticker now 2.5em height (possible IE ticker anim fix)
10.02.23 .ticker, .tickercontain set to absolute 37px height in attempt to fix IE transition problem
10.02.25 .imgcontain now has overflow:visible (for IE - didn't work);
10.02.26 .postfooter margin-top:0%;
100302 Replaced .caption with .firstimage, but no style changes

*/

					/* LAYOUT */
body{
	background-color: #ddd;
	text-align: center;
	color: #999;
}
#container {
	background-color: transparent;
	width: 970px;
	margin: 0px auto;
	text-align:center;
	padding: 0px;
}
#leftbar {
	width:80px;
	margin:0px;
	padding-top:0px;
	float:left;
}
#mainbox {
	background-color: #fff;
	width: 800px;
	margin:0px;
	padding: 20px 0px;
	border: 2px #999 solid;
	text-align:center;
	float:left;
	min-height: 218px;
}
#maincontent {
	width:700px;
	margin:0px 50px;
	text-align:left;
}
#maincontentskinny	{
	width:495px;
	border:none; 
	margin-left:auto; 
	margin-right:auto; 
	padding:0px;
}
.skinny { /* For other skinny elements */
	max-width:500px;
	margin-left:auto;
	margin-right:auto;
}
#homelfloat {
	width:495px;
	margin:0px 12px 0px 0px;
	float:left;
}
#homerfloat, .sidebar {
	margin:0px;
	padding:0px 0px 0px 12px;
	border-left: solid #999 1px;
	text-align:left;
	float:right;
}
#homerfloat {
	width:179px;
}
.sidebar {
	width:200px;
	margin-left:5px;
	margin-bottom:5px;
	background-color:#fff;
}
#rightbar {
	width:80px;
	margin:0px;
	padding-top: 0px;
	float:left;
}
.column {
	width:242px;
	float:left;
	margin:1px;
	padding:2px;
}
#infoline {
	width:960px;
	margin-top:0px;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:0px;
	padding: 1px 0px;
	float:left;
	text-align: center;
	font-size: 8.5pt;
	color: #666;
}
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
div.clearboth{
	text-align:center;
	margin-top:15px;
	width:698px;
	clear:both;
}



/* Writing page block elements */
.writing_contain{
	width:500px;
	margin-left:auto;
	margin-right:auto;
}
.writing_title,.writing_button,.writing_details{
	float:left;
}
.writing_title,.writing_details{
	width:20px;
	padding-top:0.5em;
	padding-bottom:0.7em;
}
.writing_title{
	width:170px;
}
.writing_details{
	width:300px;
}
.writing_button{
	width:30px;
	padding-top:0.7em;
	text-align:center;
}
.writing_desc{
	display:none;
}

	
				/* 	Text styles 	*/

/*	Webfonts	*/
@font-face {
	font-family: "Teamouse";
	src: url("content/docs/545.ttf") format("TrueType");
}
@font-face {
	font-family: "Dream Orphans";
	src: url("content/docs/546.otf") format("OpenType");
}
@font-face {
	font-family: "Telegrafico";
	src: url("content/docs/543.ttf") format("TrueType");
}

@font-face {
	font-family: 'Effloresce';
	src: url('content/docs/575.eot');/*IE only */
	src: local('Effloresce'), local('Effloresce Regular'), local('Effloresce-Regular'), url('content/docs/547.otf') format('opentype');
}
@font-face {
	font-family: 'Effloresce';
	src: url('content/docs/707.eot');/*IE only */
	src: local('Effloresce Bold'), local('Effloresce-Bold'), url('content/docs/549.otf') format('opentype');
	font-weight: bold;
}
@font-face {
	font-family: 'Effloresce';
	src: url('content/docs/576.eot');/*IE only */
	src: local('Effloresce Italic'), local('Effloresce-Italic'), url('content/docs/548.otf') format('opentype');
	font-style: italic;
}

@font-face {
	font-family: "Shusha";
	src: url(content/docs/551.ttf) format("truetype");
}



/* 	BODY TEXT main tags / HEADERS 	*/
p,body{
	color: #666;
	font-family: "Helvetica","Arial",sans-serif;
	font-size: 10pt;
}
p,h3,blockquote,ul,ol,li,h4,h5,h6{
	max-width:500px;
	margin-left:auto;
	margin-right:auto;
}
h1,h2,.menu{
	font-family: "Effloresce","Times New Roman",Times,serif;
}
h3,h4,h5{
	font-family: "Effloresce","Helvetica","Arial",sans-serif;
	color: #000;
	letter-spacing:0.05em;
}
h1{
	font-size: 24pt;
	margin-top:0%;
	margin-bottom:-2%;
	color: #E1B500;
	text-transform:uppercase;
	font-weight:normal;
	text-align:center;
}
h2{
	font-size: 14pt;
	margin-top:2.3%;
	margin-bottom:-1.5%;
	color: #404040;
	font-weight:normal;
	text-align:center;
} 
h3{
	font-size: 12pt;
	font-weight:normal;
	margin-bottom:0%;
	text-transform:uppercase;
}
h4{
	font-size: 12pt;
	font-weight:normal;
	margin-top:0.8em;
	margin-bottom:-1%;
}
h5{
	font-size: 12pt;
	font-weight:normal;
	font-style:italic;
	margin-top:0%;
	margin-bottom:-2.3%;
}
h6 { /*Really just for the Writing/ pages */
	color: #000;
	font-family: "Helvetica","Arial",sans-serif;
	font-size: 10pt;
	font-weight:normal;
	margin-top:0%;
	margin-bottom:1em;
}
.headertop{
	float:left;
	position:relative;
	top:0.7em;
}
#maincontentskinny span.dropcap, #homelfloat span.dropcap{
	margin-bottom:-5%;
	margin-top:-1.9%;
}
.menu{ /*h2 text menu */
	font-size: 14pt;
	text-align:center;
	color: #000;
	text-decoration:none
}
blockquote{
	background-color:#fff8cb; /*20% saturation of RBG:ffdd00*/
	color: #666;
	max-width:400px;
} 
blockquote p{
	color: #666
}
cite{
	font-variant:small-caps;
	font-weight:normal;
	font-style:normal;
}
ul{
	list-style-image: url("photos/webres/13/239.png");
}
ol li{
	font-size: 12pt;
	font-family: "Effloresce","Times New Roman",Times,serif;
	color: #000;
}
#homelfloat ul, #maincontentskinny ul, #homelfloat, ol, #maincontentskinny ol {
	margin-bottom:0%;
}
li{
	margin-bottom:0.5em;
	padding-right:25px;
}
li span.licontent{
	font-size: 10pt;
	color: #666;
	font-family: "Helvetica","Arial",sans-serif;
	line-height:1.2;
}
hr{
	height:1px;
	color: #999;
	background-color:#999;
	margin-right:auto;
	margin-left:auto;
	border:none;
}
img{
	border: none;
}
#infoline img {
	vertical-align:middle;
}
td.content {
	padding: 0.25cm 0.5cm;
}


/* 	Other text elements 	*/
.dropcap{
	float:left;
	text-transform:uppercase;
	color:#e1b500;
	margin-bottom:-4.2%;
	margin-top:-1.5%;
	margin-right: 4px;
	font-family: "Effloresce","Times New Roman",Times,serif;
	font-size: 46pt;
	letter-spacing:-4px;
}
.brvbar{
	color:#000;
	font-style:normal;
}

.postfooter,.pagefooter{
	font-size:8pt;
	color:#999;
}
.postfooter img,.pagefooter img{
	vertical-align:middle;
}
.postfooter{
	float:right;
	position:relative;
	clear:both;
	margin-top:0%;
	margin-bottom:0%;
}
.pagefooter{
	margin-top:0px;
	text-align:right;
	max-width: 700px;
}

.pulledquote{
	color:#404040;
	font-size:11pt;
}
.pulledquote img{
	float:left;
	margin-right:2.3%;
	height:2.3em;
}


/*	Comments system		*/
.comments{
	width:495px;
	margin-left:auto; 
	margin-right:auto;
	clear:both;
	margin-top:2em;
	padding-bottom:0.2em;
}


/* emPHAsis  */
strong {
	font-weight:normal;
	color:#000;
}
.highlight {
	background:#fd0;
}
.subtle{
	color:#999;
}


/* 	Login info boxes and links, plus some user info styles 		*/
.loginstatus{
	font-size:8pt;
	color:#000;
	text-align:right;
	position:fixed;
	z-index:500;
	right:0px;
	background-color:#ffdd00;
	opacity:0.40; filter:alpha(opacity=40);
}
.top{
	top:0px;
}
.bottom{
	bottom:0px;
}
.unposted{
	color:red;
	font-weight:bold;
}
.hidden{
	color:blue;
	font-weight:bold;
}
.cloaked{
	color:green;
	font-weight:bold;
}


/*	 Page Magnets	 */
.pagemagnet {
	display:block;
	width:243px;
	height:50px;
	overflow:hidden;
	border:1px solid #999;
	margin:1px;
	padding-left:4px;
	font-size:9pt;
}
span.pagemagnet:hover{
	border: 1px solid #fd0;
}
span.pagemagnet img {
	float:right;
	margin-left:4px;
}
.veryskinny {
	width:250px;
}
.floatleft {
	float:left;
}
.floatright {
	float:right;
}
.center {
	margin-left:auto;
	margin-right:auto;
}



/*	 Article Image	 */
.firstimage{
	margin: 1.9% 7px 1.3%;
	position:relative;
	top:4px;
}
.firstimage,.secondimage{
	font-size: 9pt;
	color:#999;
	text-align: center;
	font-style: italic;
	background-color:white;
}
img.art{
	padding:0px;
	border:2px solid #999;
	max-width:694px;
}
#homelfloat div.firstimage, #maincontentskinny div.firstimage{
	margin: 3.3% 7px 0px;
}
.secondimage{ /* secondary images, i.e., post thumbnails and article second images*/
	position:relative;
	margin: 1% 0px 0% 7px;
	float:right;
	clear:both;
}

			/*	 FORM TAGS	 */

form{
	color: #999;
	font-family: "Helvetica","Arial",sans-serif;
	font-size: 10pt;
	margin-bottom:1em;
	}
input{
	font-family: "Helvetica","Arial",sans-serif;
	font-size: 10pt;
	color: #000;
	border-left: 2px solid #999;
	border-top: none;
	background-color: #eee;
	}
input:hover{
	border-left: 2px solid #e1b500;
	}
input:focus{
	border-left: 2px solid #fd0;
	}

input[type="button"]{
	background-color: #e1b500;
	color: #FFFFFF;
	border-left: solid 2px #fd0;
	border-top:  solid 2px #fd0;
	border-right:  solid 2px #9e9e9e;
	border-bottom: solid 2px #9e9e9e;
	}
input[type="submit"]{
	background-color: #e1b500;
	color: #FFFFFF;
	border-left: solid 2px #fd0;
	border-top:  solid 2px #fd0;
	border-right:  solid 2px #9e9e9e;
	border-bottom: solid 2px #9e9e9e;
	}
input[type="checkbox"]{
	color: #999;
	border-top: none;
	}
input[disabled="disabled"]{
	color: #666666;
	background-color: #E1B500;
	}

textarea{
	font-family: "Helvetica","Arial",sans-serif;
	font-size: 10pt;
	vertical-align:text-top;
	background-color: #eee;
	color: #000;
	border-left: 2px solid #999;
	border-top:none;
	}
textarea:hover{
	border-left: 2px solid #e1b500;
	}
textarea:focus{
	border-left: 2px solid #fd0;
	}

select{
	font-family: "Helvetica","Arial",sans-serif;
	font-size: 10pt;
	background-color: #eee;
	color: #000;
	border-left: 2px solid #999;
	border-top: none;
	}
select:hover{
	border-left: 2px solid #e1b500;
	}
select:focus{
	border-left: 2px solid #fd0;
	}

option{
	font-family: "Helvetica","Arial",sans-serif;
	font-size: 10pt;
	color: #000;
	border-left: 2px solid #999;
	}
option:hover{
	border-left: 2px solid #fd0;
	}
option[selected="selected"]{
	color: #FFFFFF;
	background-color: #E1B500;
	border-left: 2px solid #fd0;
	}


				/* LINKS */

a:active{
	color:#000;
	text-decoration:none;
}
a:visited{
	color:#666;
	text-decoration:underline;
}
a:link{
	color:#000;
	text-decoration:none;
}
a:hover{
	color:#e1b500;
	text-decoration:none;
}

/* Primarily for comment count in post/archive template */
a.subtle:active, a.subtle:visited, a.subtle:link, a.subtle:hover{
	text-decoration:none;
}
a.subtle:active{
	color:#767676;
}
a.subtle:visited{
	color:#666666;
}
a.subtle:link{
	color:#767676;
}
a.subtle:hover{
	color:#e1b500;
}

/* Removes text decoration from dropcap w/ link*/
a.dropcap:active,a.dropcap:visited,a.dropcap:link,a.dropcap:hover{
	text-decoration:none;
}

/* Orange links at bottom of articles, edit links */
a.articlelink:active, a.articlelink:visited, a.articlelink:link, a.articlelink:hover{
	font-style:italic;
}
a.articlelink:active{
	color:#E1B500;
	text-decoration:none;
}
a.articlelink:visited{
	color:#606060;
	text-decoration:underline;
}
a.articlelink:link{
	color:#e1b500;
	text-decoration:none;
}
a.articlelink:hover{
	color:#fd0;
	text-decoration:none;
}

/* header links */
a.h1:active, a.h1:visited, a.h1:link, a.h1:hover{
	color: #E1B500;
	text-decoration:none;
}
a.h2:active, a.h2:visited, a.h2:link, a.h2:hover{
	color: #404040;
	text-decoration:none;
}
a.h3:active, a.h3:visited, a.h3:link, a.h3:hover, a.h4:active, a.h4:visited, a.h4:link, a.h4:hover{
	color: #000000;
	text-decoration:none;
}



				/*   GRAPHIC MENU    */
.button{
	position:relative;
	right:0px;
	width:80px;
	display:block;
	z-index:2;
	overflow:auto;
	margin-top:0px;
	margin-bottom:3px;
}
.menuinfo{
	background-image: url("photos/webres/13/515.png");
	text-align:right;
	position:relative;
	float:right;
	z-index:0;
	overflow:hidden;
	width:14px;
	max-width:80px;
	height:50px;
	right:0px;
}
.menuinit{
	position:absolute;
	float:right;
	z-index:1;
	overflow:hidden;
	width:14px;
	height:50px;
	right:0px;
	text-align:center;
	display:block;
}
.button:hover .menuinit{
	display:block;
	background-color:#fd0;
}
.menuinit,.menuinfo{
	font-family:"Effloresce","Times New Roman",Times,serif;
	font-size:16px;
}
div.menuinfo a, div.menuinit a {
	text-transform:uppercase;
	text-decoration:none;
}
div.menuinit a {
	font-size:15px;
	position:relative;
	display:block;
	color: #fd0;
	top:16px;
}
div.menuinfo a {
	position:relative;
	top:15px;
	display:none;
	color: #fd0;
	margin-right:15px;
}
.button:hover div.menuinfo a {
	display:block;
}
div.menuinfo a:hover{
	color:#fff;
}


				/*	 TICKERS 	*/
.tickercontain{
	height:37px;
	overflow:hidden;
}
.phototickercontain{
	height:150px;
	overflow:hidden;
}
.ticker,.phototicker{
	display:none;
}
.ticker{
	height:37px;
}
.phototicker{
	text-align: center;
}
.ticker_brvbar{
	z-index:100;
	position:absolute;
}



				/* 	PHOTO SYSTEM 	 */
/* Photo Gallery */
#gallerycontain {
	overflow:auto;
	width:550px;
	margin-left:auto;
	margin-right:auto;
}
.albumcontain {
	float:left;
	overflow:hidden;
	border: 1px solid #999;
	margin:1px;
	min-height:150px;
}
div.albumcontain:hover {
	border: 1px solid #fd0;
}
.albumthumb{
	float:left;
	width:100px;
	padding:3px;
	overflow:hidden;
}
.albuminfo{
	display:none;
	padding:3px;
	float:left;
	width:434px;
}
.albumthumb img {
	width:90px;
	height:90px; 
	border: solid 2px #fff; 
	margin:3px;
}

/* Photo Album */
.thumbs img {
	width:90px; height:90px; 
	border: solid 2px #fff; 
	margin-right:-4px; margin-bottom:-4px;
}
.thumbsskinny img {
	width:60px; height:60px; 
	border: solid 2px #fff; 
	margin-right:-4px; margin-bottom:-4px;
}
.thumbs img:hover {border: solid 2px #fd0; }

.webres img.art {
	max-width: 696px;
	max-height: 600px;
}
.webresskinny img.art {
	max-width: 490px;
	max-height: 490px;
}
.webres img.art, .webresskinny img.art{
	z-index:100;
}
.webres, .webresskinny, .thumbs, .thumbsskinny {
	display:block;
	margin-left:auto; 
	margin-right:auto;
	overflow:auto;
}
.thumbs, .thumbsskinny {
	margin-top:25px;
	margin-bottom:0px;
	text-align:center;
}
.webres, .webresskinny {
	text-align:center;
	clear:both;
	z-index:10;
}
.webres {  /* These two elements, .webres and .webresskinny, contain the entire album but in different contexts*/
	width:698px;
}
.webresskinny {
	margin-top:2%;
	width:498px;
}

.thumbs { /* These two elements contain the entire thumbnail in different contexts*/
	border: none;
	margin-top:15px;
	margin-bottom:15px;
	width:565px;
	white-space:nowrap;
	min-height:110px;
}
.thumbsskinny {
	border: none;
	margin-top:10px;
	margin-bottom:10px;
	width:384px;
	white-space:nowrap;
	min-height:80px;
}

/*	Image Captions	*/
.imgtitle, .imgcaption {
	font-size: 9pt;
	text-align: center;
	font-style: italic;
}
.imgtitle {
	color:#000;
}
.imgcaption {
	color:#999;
}

/*	Image Container & Tooltips	*/
.imgcontain{  /*This is the block that contains each individual image; by default display is "none"*/
	display:none;
	position:relative;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	overflow:visible;
}
div.imgcontain span.info{
	display:none;
	position:absolute;
	background-color:#fff;
	z-index:200;
	top:2px;
	right:2px;
	color:#666;
	padding:3px;
	text-align:left;
	font-size: 8pt;
}
div.imgcontain:hover span.info{
	display:inline;
	opacity:0.40; filter:alpha(opacity=40);
}
div.imgcontain span.info:hover {
	opacity:0.80; filter:alpha(opacity=80);
}

/* 	Image prev/next buttons 	*/
div.imgcontain span.nextimage, div.imgcontain span.previmage{
	display:none;
}
div.imgcontain:hover span.nextimage, div.imgcontain:hover span.previmage{
	display:block;
	opacity:0.40; filter:alpha(opacity=40);
	position:absolute;
	z-index:200;
	width:50px;
	height:80px;
}
span.nextimage {
	right:2px;
}
span.previmage {
	left:2px;
}
div.imgcontain span.nextimage:hover, div.imgcontain span.previmage:hover {
	opacity:0.8; filter:alpha(opacity=80);
}