/*
Theme name: foreign-correspondence TwoPointThree
Theme URI: http://www.foreign-correspondence.com
Description: foreign-correspondence TwoPointThree
Version: 2.3
Author: Katie L-S
Author URI: http://www.foreign-correspondence.com

This theme is being designed and built by Katie L-S.
You can find my website at http://www.foreign-correspondence.com

CSS and XHTML released under GPL:
http://www.opensource.org/licenses/gpl-3.0.html

*/

/* Begin structure */

body {
	background-color: #333333; }

#page
	{width: 96%;
	margin-left: 1.5%;
	margin-right: 1.5%;
	margin-top: 8px;
	margin-bottom: 1%; 
	background: #ffffff;
	}


/* border: 3px solid; 
	border-color: #000066 #000033 #000033 #000066;  */

/* header and footer images */

#header { font-family: "garamond", "cambria", "times new roman";
	font-size: 42pt;
	letter-spacing: 2px;
	color: #660033;
	font-weight: 700;
	text-align: right;
	margin-top: 5px;
	margin-right: 1%;
	padding-bottom: 10px;
	
	}

#headerporta
	{ font-family: "cambria", "times new roman";
	font-size: 16pt;
	color: #333333;
	font-weight: 600;
	text-align: left;
	margin-top: 5px;
	margin-left: 0;
	padding-bottom: 0;
		}

#headerportb
	{ font-family: "cambria", "times new roman";
	font-size: 20pt;
	color: #666666;
	font-weight: 600;
	text-align: left;
	margin-top: 5px;
	margin-left: 0;
	padding-bottom: 10px;
		}


#footer {
	font-family: "garamond", "cambria", "times new roman";
	clear: both;
	float: bottom;
	padding-bottom: 2%;
	padding-top: 2%;
	height: 35px; }


/* This is to make the navigation menu one right-aligned horizontal menu across the top */

#navmenu
	{ text-align: right;
	margin-right: 1%;
	margin-top: 8px;
	margin-left: 1%;
	padding-top: 8px;
	border-bottom: 4px solid #999999;}


#navmenu ul 
	{display: inline;
	list-style-type: none;
	list-style-image: none;
	font-size: 16pt;
	font-family: "cambria", "times new roman", "garamond", "courier";
	}

#navmenu li {display: inline; 
	padding: 3px;
	}

#navmenu ul li a {
	text-decoration:none;  
	color: #666666;
	}

#navmenu ul li a:hover
	{border-bottom: 8px solid #666666;
	color: #333333;}


/* This is to make the portfolio menu one right-aligned horizontal menu with dropdown across the top */

#navmenu ul li ul 
	{visibility:hidden; position:absolute; top:7%; right:4%; }

#navmenu ul li:hover ul,
#navmenu ul li a:hover ul 
	{visibility:visible; background:#999999; height: 30px; position:absolute; right:4%; top:7%;}
	
#navmenu ul li:hover ul li ul,
#navmenu ul li a:hover ul li a ul {visibility:hidden; display:inline; position:absolute; right:4%; top:7%;} 

#navmenu ul li:hover ul li a,
#navmenu ul li a:hover ul li a {display:inline; color:#333333; font-size:11pt; font-weight:600; }

#navmenu ul li:hover ul li:hover, #navmenu ul li:hover ul li a:hover, 
#navmenu ul li a:hover ul li a:hover {visibility:visible; color:#ffffff; text-decoration:none; border-bottom: 2px solid #666666; }
	

/* this sets up the section menu on the right hand side */


#sectionmenu
	{ float: right;
	width: 14%;	
	margin-right: 1%;
	margin-top: 1%;
	}

#headlines
	{
	background: #999999;
	margin-bottom: 5%;
	}
	
ul.sectionmenu a
	{text-decoration: none;}

#sectionmenu ul 
	{display: inline;
	list-style-type: none;
	height:auto;
	padding-bottom: 5%;
	font-family: "cambria", "times new roman", "garamond", "courier";
	}

#sectionmenu ul li.recent 
	{display: block; 
	height: auto;
	margin-top: 2px; 
	text-align: center;
	font-size: 16pt;
	font-weight: heavy;
	}

#sectionmenu ul li.recent a:hover
	{
	color: #ffffff;
	border-bottom: 4px solid #ffffff;}
	
	
#sectionmenu ul li.recent, #sectionmenu ul li.headlines, #sectionmenu ul li.recent a, #sectionmenu ul li.headlines a  
	{
	text-decoration: none;  
	color: #000000;	
	}

#sectionmenu ul li.headlines
	{
	list-style-type: none;
	display:block;
	padding-left: 5px;
	margin-top: 5px;
	font-size: 10pt;
	font-family: 'tahoma', 'verdana';
	font-weight: normal;
	color: #000000;
	text-align: left;
	text-decoration:none;
	}

.sectionmenu a:hover, #sectionmenu ul li.headlines a:hover
	{text-decoration: underline;
	color: #ffffff;
	border: 0px;}




/* this is to style the columns */

.leftcolumn
	{float: left;
	margin-left: 1%;
	width: 38%;
	text-align: justify;
	padding: 1%;
	}

.rightcolumn
	{float: left;
	padding-left: 1%;
	width: 38%;
	text-align: justify;
	margin-left: 1%;
	}

.narrowcolumn
	{float: left;
	padding: 0 2% 2% 3%;
	margin-top: 2%;
	margin-bottom: 2%;
	width: 45%;
	text-align: justify;
	border-left: 1px solid #cccccc;
	}

.profcolumn
	{float: left;
	padding: 1% 1% 1% 0;
	margin-top: 30px;
	width: 18%;
	margin-left: 1%;
	text-align: left;
	font-family: "arial", "tahoma";
	font-size: 10pt;
	spacing: 3px;
	color: #666666;
	}

.profcolumn a
	{color: #666666;	
	}
	
.profcolumn a:hover
	{color: #333333;}

.profcolumn a:visited
	{color: #999999;
	background: #ffffff;}

.photocolumn
	{
	float: left;
	padding-left: 1%;
	margin-top: 2%;
	margin-bottom: 4%;
	width: 62%;
	border-left: 1px solid #cccccc;}	



.centrecolumn
	{float: left;
	background: #ffffff;
	margin-left: 18%;
	padding: 2%;
	border-left: 1px solid #cccccc;
	width: 40%;}


.portcolumn
	{float: left;
	background: #ffffff;
	margin-left: 10%;
	padding-left: 5%;
	padding-top: 2%;
	padding-bottom: 2%;
	padding-right: 2%;
	border-left: 2px solid #cccccc;
	width: 450px;}

.portpix
	{float: left;
	background:url(mix3.JPG) repeat top left;
	margin-left: 1%;
	padding: 0;
	width: 147px;
	height: 3000px;
	border-left: 10px solid #333333;
	border-right: 10px solid #333333;}


/* 
 This is to style the body type: font, size and colour */

.entrytext, .entry
	{font-family: "georgia", "courier";
	font-size: 11pt;

	font-weight: 550;
	color: #333333;
	}

.entrytext a, .entry a
	{color: #660033;
	text-decoration: none;
	font-weight:700;}

.entrytext a:visited, .entry a:visited
	{color: #666666;}

.entrytext a:hover, .entry a:hover
	{color: #000;}

.dateline
	{font-family: "arial", "helvetica";
	font-size: 10pt;
	font-weight: bold;
	border-bottom: 1px solid;}

.postmetadata
	{font-family: "arial", "helvetica";
	font-size: 10pt;	font-weight: 450; }

.postmetadata a
	{color: #330000;
	text-decoration: none;}

.navigation a
	{
	font-size: smaller;
	color: #999999;}


.alignright
	{text-align: right;}

.alignleft
	{text-align: left;}

.footer
	{ display: block;
	text-align: center;
	font-face: "cambria", "garamond", "times new roman"
	font-size: smaller;	
	color: #666666;
	}

.footer a
	{color: #333333;}

.centrecolumn ul li
	{
	list-style-type: none;
	list-style-image: none; 
	line-spacing: 1000%;}

.centrecolumn ul li a
	{text-decoration: none;
	color: #660033;
	}

.centrecolumn ul li a:hover
	{text-decoration: underline;}

.centrecolumn ul li a:visited
	{color: #999999;}
	
.toppost
	{border: 3px solid #330000;
	padding: 5px;
	color: #333333;
	font-family: cambria, garamond, "times new roman";
	font-size: 14pt;
	margin-bottom: 3px;
	}

.toppost a
	{color: #333333;
	text-decoration: none;}

.toppost a:hover
	{color: #000000;
	border-bottom: 2px solid;}

.porttext, .entry
	{font-family: "calibri", "cambria", "arial";
	font-size: 11pt;

	font-weight: 550;
	color: #333333;
	}

.porttext a, .entry a
	{color: #330000;
	text-decoration: none;
	font-size: 13pt;
	font-weight:700;}

.porttext a:visited, .entry a:visited
	{color: #666666;}

.porttext a:hover, .entry a:hover
	{color: #333333;}



/* images in posts */

.rightcolumn img 
	{ width: 70%;
	border: 3px solid #333333;
	margin: 5px; }

.portcolumn img.normal
	{width: 448px;
	height: 128px;
	border: 1px solid #333333;
	margin-top: 2px;
	margin-bottom: 2px;
	}


.portcolumn img.cover
	{width: 220px;
	height: 300px;
	border: 1px solid #333333;
	margin-top: 2px;
	margin-bottom: 2px;
	display: inline;
	}


/* images: styling for display pic with rollover caption */

.displaypic 
	{display:inline; 
	float:left; 
	text-decoration:none; 
	margin:0; 	
	width: 100%;
	} 


/* 	border: 4px solid black; */

.displaypic em {font-style:normal;}

.displaypic em.txt, .displaypic b, .displaypic em.intro 
	{display:none;}

.displaypic .head {display:block; width:100%; height:65px;}

.displaypic .color1 {background:#333333;}

.displaypic img {border:0; display:block; width: 100%;}

.displaypic em.mh2 
	{padding:5px; 
	color:#fff; 
	font-weight:bold; 
	font-family: cambria, garamond, serif; 
	font-size:28px;}


.displaypic em.mh3 
	{padding-left:5px; 
	margin:0; 
	color:#fff; 
	font-weight:normal; 
	font-family: verdana, arial, sans-serif; 
	font-size:16px;}


.displaypic em.mh3:hover, .displaypic em.mh2:hover
	{text-decoration: none;}

.displaypic:hover {background:#fff; position:relative;cursor:pointer; text-decoration: none;}

.displaypic:hover b    /* hover background */

	{display:block; 
	position:absolute; 
	top:65px; left:0; 	
	width: 100%; 
	background:#6699ff; 
	height:70px; 
	opacity:0.7;}

.displaypic:hover .color1 b {background:#333333;}

.displaypic:hover em.intro
	{display:block; 
	position:absolute; 
	top:65px; 
	left:8px; 
	right:8px;
	height:50px; 
	color:#fff; 
	margin:0; 
	line-height:1.5em;
	font-family: "verdana", "arial", "sans-serif";
	font-size: 13px;
	text-align: left;
	text-decoration: none;}


.displaypic:focus em.intro, .displaypic:active em.intro 	
	{display: none;}


.displaypic:focus:hover em.txt   /* caption text shown on hover */
	{display:block; 
	position:absolute; 
	top:65px; 
	left:8px; 
	right:8px;
	height:50px; 
	color:#fff; 
	margin:0; 
	line-height:1.5em;
	font-family: "verdana", "arial", "sans-serif";
	font-size: 13px;
	text-align: left;
	text-decoration: none;}
	
.photocolumn .displaypic
	{display: none; }

/*
.photocolumn .displaypic
	{width: 48%;
	float: left;
	margin: 1%;
	}

.photocolumn .displaypic:active, .photocolumn .displaypic:focus
	{width: 70%;
	position: absolute;
	top: 100px;
	left:15%;
	border:4px solid #000;
	} */

#gallery {width:620px; height:800px; padding:10px; border:1px solid #333; background: #888; position:relative; }
#gallery b.default {position:absolute; left:10px; top:127px; width:610px; height:auto; text-align:center;}
#gallery b.default img {display:block; margin:0 auto 10px auto; width:610px; height:auto; border:3px solid #000; }
#gallery b.default span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:620px; margin:0 auto;}

#gallery ul {list-style:none; padding:0; margin:0; width:620px; position:relative; float:left; background: #888;}
#gallery ul li {display:inline; width:92px; height:92px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:92px; height:92px; text-decoration:none; }
#gallery ul li a span {display:none;}
#gallery ul li a img.land {display:block; width:92px; height:auto; border: 2px solid #888;}
#gallery ul li a img.port {display:block; width:auto; height:92px; border: 2px solid #888;}


#gallery ul li a:hover {white-space:normal;  background:#777;}
#gallery ul li a:hover b {position:absolute; left:0px; top:105px; width:620px; height:600px; text-align:center; background:#888; z-index:20;}
#gallery ul li a:hover span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:620px; height: 80px; margin:0 auto; background: #888;}
#gallery ul li a:hover img.land {margin:0 auto 10px auto; width:620px; height:auto; border:3px solid #000; background: #888;}
#gallery ul li a:hover img.port {margin:0 auto 10px auto; width:auto; height:550px; border:3px solid #000; background: #888;}

#gallery ul li a:active, #gallery ul li a:focus {white-space:normal; border-color:#555 #ddd #eee #333; background:#888;}
#gallery ul li a:active b, #gallery ul li a:focus b {position:absolute; left:0px; top:105px; width:620; height:600px; text-align:center; background:#888; z-index:19;}
#gallery ul li a:active span, #gallery ul li a:focus span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:620px; height: 80px; background: #888; margin:0 auto;}
#gallery ul li a:active img.land, #gallery ul li a:focus img.land {margin:0 auto 10px auto; width:620px; height:auto; border:3px solid #000; background: #888;}
#gallery ul li a:active img.port, #gallery ul li a:focus img.port {margin:0 auto 10px auto; width:auto; height:550px; border:3px solid #000; background: #888;}

/* header fonts and colors */

h3, h3 a
	{color: #666666; 
	text-decoration: none; }

h2, h2 a
	{color: #660033; 
	text-decoration: none;
	font-size: 26pt; 
	text-align: left;}

h2 a:hover
	{color: #330033;
	text-decoration: underline;}

h4, h4 a
	{font-size: 18pt;
	color: #666666;
	text-decoration: none;
	padding-top: 20px;}

h4 a:hover
	{
	color: #333333;}

h5, h5 a
	{color: #660033;
	font-size: 20pt;}

.porttext h6, .porttext h6 a	/* print, online */
	{font-family: "Cambria", "Times New Roman";
	color: #333333;
	font-size: 16pt;
	padding-top: 15px;
	text-decoration: none;
	border-bottom: 2px solid #333333;}
	

.porttext h5, .porttext h5 a 	/* subjects */
	{font-family: "Cambria", "Times New Roman";
	color: #666666;
	font-size: 14pt;
	font-weight: 600;
	padding-top: 5px;
	padding-bottom: 0;
	text-decoration: none;}	


.porttext h4, .porttext h4 a	/* headline */
	{font-family: "calibri", "arial", "courier";
	color: #666666;
	font-size: 11pt;
	padding-top: 5px;
	padding-bottom: 0;
	text-decoration: none;}	



/* styling the comments */


div#comments
	{
	float: bottom;
	clear: both;
	padding: 4%;
	font-family: "verdana", "garamond";
	font-size: 10pt;
	color:#666666;}



ol.commentlist
	{
	font-family: "verdana", "garamond";
	font-size: 10pt;
	color: #333333;
	padding: 20px;
	width: 80%;
	}
	
.commentmetadata a
	{color: #999999;
	font-face: "courier";
	}

textarea
	{border: 1px solid;
	border-color: #333333;
	width: 100%;
	background: #ffffff;}