/* Project:				Whoiskarl.com
 * Date:				17th May 2009
 * Author:				Karl Nicoll
 * Description:			Portfolio Website
 * File Description:	CSS Page Layout
 */

/*------------------------------------------------
 * MASTER LAYOUT
 *----------------------------------------------*/

.back{
	position:absolute;
	height:100%;
	width:750px;
	left: 50%;
	margin-left: -370px; /*set to a negative number 1/2 of your width*/

}

/*------------------------------------------------
 * BORDER LAYOUT
 *----------------------------------------------*/

.bdrNW{
	position:relative;
	width:16px;
	height:16px;
	float:left;
	background-image:url('../img/topLeft.jpg');
	overflow: hidden;
}

.bdrNS{
	height:16px;
	overflow: hidden;
}

.bdrNE{
	position:relative;
	width:16px;
	height:16px;
	float:right;
	background-image:url('../img/topRight.jpg');
	overflow: hidden;
}

.bdrSW{
	position:relative;
	width:16px;
	height:16px;
	float:left;
	background-image:url('../img/bottomLeft.jpg');
	overflow: hidden;
}
.bdrSE{
	position:relative;
	width:16px;
	height:16px;
	float:right;
	background-image:url('../img/bottomRight.jpg');
	overflow: hidden;
}

.bdrW{
	width:16px;
	height:100%;
	float:left;
	overflow: hidden;
}
.bdrE{
	width:16px;
	height:100%;
	float:right;
	overflow: hidden;
}



/*------------------------------------------------
 * PAGE HEADER LAYOUT
 *----------------------------------------------*/

#Header{
	margin:0 20px 0 40px;
}

.hdr{
	background-color:white;
}

.hdrContent{
	background-color:#B3D2DF;
	width:450px;
}

.headerImg{
	margin:0;
	border:0;
	padding:0;
}


/*------------------------------------------------
 * NAVIGATION
 *----------------------------------------------*/
.nav{
	background-color:white;
	margin:0 16px 0 16px; 
	border-bottom: 1px #B3D2DF solid;
	border-top: 1px #B3D2DF solid;
}

.nav table{
	margin:0 auto 0 auto;
}

tr td.sep{
	width:2px;
}

tr.navBtns td{
	text-align:center;
	vertical-align:middle;
}

.navBtn{
	display:block;
	padding:10px 0px 10px 0px;	
	background-color:#FFF;
	border:0px;
	width:90px;
}

.navBtn:hover{
	display:block;
	background-color:#EEE;	
	padding:10px 0px 10px 0px;
	border:0px;
	width:90px;
}


/*------------------------------------------------
 * CONTENT LAYOUT
 *----------------------------------------------*/
.body{
	background-color:white;
	line-height:1.5em;

}

.leftWrapImg{
	clear:both;
	float:left;
	margin:5px 5px 5px 0px;
}

.spacer{
	width:10px;
}

.pfItm{
	border-bottom:1px #CCC solid;
}

.prjLnk{
	padding:5px 5px 0 0;
	width:0px;
	text-align:center;
	vertical-align:top;
}

.socnets td{
	width:20%;
}

.msgBox{
	border:1px silver dashed;
	background-color:#FFFFAA;
	padding:5px;
	margin:10px;
}

.menuset{
	float:right;
}

.menu{
	position:absolute;
	background-color:#FFF;
	min-width:200px;
	_width:200px;
	top:0px;
	left:0px;
	padding:5px;
	border:1px silver solid;
}

table.screenshots td{
	padding:5px;
}
table.screenshots img{
	width:200px;
}

/*------------------------------------------------
 * FOOTER
 *----------------------------------------------*/
 .footer{
	text-align:center;
	font-size:small;
}


/*------------------------------------------------
 * FORMS
 *----------------------------------------------*/
 
.pageOverlay{
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	background-color:gray;
	
	/* Opacity */
	opacity: 0.65;					/* Opera */
	-moz-opacity: 0.65;				/* Mozilla-Based */
	filter: alpha(opacity=65);		/* IE < v8.0 */

	
}

.frmBack{
	position:absolute;
	top: 50%;
	left: 50%;
	width:42em;
	height:50em;
	margin-top: -17em; /*set to a negative number 1/2 of your height*/
	margin-left: -20em; /*set to a negative number 1/2 of your width*/

}

.frmNW{
	width:10px;
	height:10px;
	float:left;
	background-image:url('../img/frm/frmNW.gif');
	overflow: hidden;
}

.frmN{
	height:10px;
	background-image:url('../img/frm/frmN.gif');
	background-repeat:repeat-x;
	overflow: hidden;
}

.frmNE{
	width:10px;
	height:10px;
	float:right;
	background-image:url('../img/frm/frmNE.gif');
	overflow: hidden;
}

.frmW{
	width:10px;
	margin:0px 0px 0px 0px;
	float:left;
	background-image:url('../img/frm/frmW.gif');
	background-repeat:repeat-y;
	overflow: hidden;
}

.frmE{
	width:10px;
	min-height:100%;
	float:right;
	background-image:url('../img/frm/frmE.gif');
	background-repeat:repeat-y;
	overflow: hidden;
}


.frmSW{
	width:10px;
	height:10px;
	float:left;
	background-image:url('../img/frm/frmSW.gif');
	overflow: hidden;
}


.frmS{
	height:10px;
	background-image:url('../img/frm/frmS.gif');
	background-repeat:repeat-x;
	overflow: hidden;
}

.frmSE{
	width:10px;
	height:10px;
	float:right;
	background-image:url('../img/frm/frmSE.gif');
	overflow: hidden;
}


/*------------------------------------------------
 * MISCELLANEOUS POSITIONING CLASSES
 *----------------------------------------------*/
.rFloat { float:right; }
.lFloat { float:left; }
.noFloat { clear:both; }
.rAlign { text-align:right; }
.lAlign { text-align:left; }
.cAlign { text-align:center; }
.justified { text-align:justify; }