/*
FONT SIZES
10px - 77%
11px - 85%
12px - 93% 
13px - 100%
14px - 108% 
15px - 116% 
16px - 123.1% 
17px - 131% 
18px - 138.5% 
19px - 146.5% 
20px - 153.9% 
21px - 161.6% 
22px - 167%
23px - 174%
24px - 182%
25px - 189%
26px - 197% 
 
*/

html{color: #282828; background-color: #ffffff;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6 {color: #036;}
table{border-collapse: collapse;border-spacing: 0;}
fieldset,img{border: 0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style: normal;background-repeat: no-repeat;}
abbr,acronym{border: 0;font-variant: normal;}
sup{vertical-align: text-top;}
sub{vertical-align: text-bottom;}
del,ins{text-decoration: none;}
body{font: 13px/1.231 arial,helvetica,clean,sans-serif;*font-size: small;*font: x-small;}
select,input,button,textarea{font: 99% arial,helvetica,clean,sans-serif;}
table{font-size: inherit;font: 100%;}
pre,code,kbd,samp,tt{font-family: "Lucida Console","Courier New",Courier,monospace;
;*font-size: 108%;line-height: 1.6;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,p,blockquote,th,td,legend{font-family: geneva, Arial, Helvetica, sans-serif; background-repeat: no-repeat;}
a {text-decoration: underline;color: #036;background-repeat: no-repeat; outline:none;}
span, a, strong, caption {background-repeat: no-repeat;}
input,textarea,select{font-family: inherit;font-size: inherit;font-weight: inherit;  color: #282828;*font-size: 100%;}

body{
padding-bottom: 20px;
background-color:#ffffff;
}

#feedback{
	color: #666;
}

/* Some link styles */	


#content a:hover, #content a:focus {
	text-decoration : none;
	color:#0033FF;
}
	.mod a {
	text-decoration: none;
	}

.mod a:hover, .mod a:focus{
	text-decoration : underline;
	}
/*End default link styles*/


/***XXXXXXXXXXXXXX Start the menu system XXXXXXXXXXXXXXX***/
.logo {float: left;}
#nav {
width: 100%;
height: 24px;
line-height:21px;
white-space: nowrap;
font-size: 116%;
clear: both;
}
#nav, .mod h4, .mod h6, #content h2.itemhead {

background-color:#036;
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#0c379c', EndColorStr='#003366'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#0c379c', EndColorStr='#003366')"; /* IE8 */
background-image:-moz-linear-gradient(0% 100% 90deg, #0c379c, #003366);
background-image:-webkit-gradient(linear, 0 100%,0 0,  from(#0c379c), to(#003366));
}

#subbar {
	display: none;
}

#navlist {
list-style: none;
padding: 2px 0;
margin: 0 0 3px 0;
height: 21px;
width: 100%;
}

#navlist li{
display: inline;
border-right:1px dotted #ccc;
padding:0 7px;
position:relative;
}
#navlist li:last-of-type {border:none;}
#navlist a, .mod h4, .mod h6 {
color: #fff;
text-decoration: none;
text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
#navlist a:hover {text-decoration: underline;} 





#dwicon, #cficon, #fwicon, #flicon, #fhicon, #mxicon, #acicon, #sqlicon, #cssicon, #x5icon, #jsicon, #bizicon, #phicon, #psicon {
	position:absolute;
	left:10px;
	top:105px;
	}

/************** Start of left subnavbar ********************/

.subgroup {
position: absolute;
left: 38px;
top: 108px;
}

.subgroup li {
color: #fff;
display: inline;
font-size:11px;
margin: 0 3px;
padding: 4px 0 3px;
}

.subgroup a {
	padding: 2px 5px;
	border: 3px double #ccc;
	background: #dedede;
	text-decoration: none;
	font-weight: bold;
	-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}




#navlist .home-icon a:hover {color: #d6efef;}
#navlist .dw a:hover {color: #94c639;}
#navlist .cf a:hover {color: #106bce;}
#navlist .f a:hover {color: #ef0000;}
#navlist .fw a:hover {color: #ffde4a;}
#navlist .fh a:hover {color: #4aadb5;}
#navlist .mx a:hover {color: #4E94BA;}

#ac a {color: #4E94BA; background: #FFF;}
#dw a {color: #5b0;    background: #fff;} 
#cf a {color: #1A72D9; background: #fff;}
#fl a {color: #C21002; background: #fff;}
#fw a {color: #D8B92E; background: #fff;}
#fh a {color: #00CCCC; background: #fff;}

#css a {color:#003399; background: #FFF;}
#sql a {color:#6633CC;    background: #fff;} 
#x5 a {color:#FF0066; background: #fff;}
#js a {color:#996666; background: #fff;}
#biz a {color:#FF00CC; background: #fff;}
#ph a {color:#FF9900; background: #fff;}
#ps a {color:#660033; background: #fff;}

#ac a:hover, #ac a:focus {color: #000; background: #65BEEE;}
#dw a:hover, #dw a:focus {color: #000; background: #be9;}
#cf a:hover, #cf a:focus {color: #000; background: #7af;} 
#fl a:hover, #fl a:focus {color: #000; background: #f34;} 
#fw a:hover, #fw a:focus {color: #000; background: #fc3;}
#fh a:hover, #fh a:focus {color: #000; background: #0cc;}
#ps a:hover, #ps a:focus {color: #fff; background: #603;}


#css a:hover,#css a:focus {background-color:#003399; color: #000;}
#sql a:hover,#sql  a:focus {background-color:#6633CC; color: #000;} 
#x5 a:hover,#x5  a:focus {background-color:#FF0066; color: #000;}
#js a:hover,#js  a:focus {background-color:#996666; color: #000;}
#biz a:hover,#biz a:focus {background-color:#FF00CC; color: #000;}
#ph a:hover,#ph a:focus {background-color:#FF9900; color: #000;}

/************** End of left subnavbar ********************/

/************** Right subnav **************************/

#gennav { /*** for all IE. ***/
	float: right;
	font-weight: bold;
	padding-right: 20px;
} 


#gennav li {
	display: inline;
	
}

#gennav a {
	color: #036; 
	text-decoration: none;
	margin: 0 0 0 10px;
	padding-left:10px;
	background-image:url(/images/navybox.gif);
	background-position: 0 50%;
	
}

#gennav a:hover, #gennav a:focus {
	color: #000;
	text-decoration: underline;
}

#gennav img {
	width: .5em; 
	height: .5em
	}

#logo{
    display: none;
}
#banner {
	position: absolute;
	right: 15px;
	top: 15px;
	border: 1px solid #036;
	margin-right: -8px;
	z-index: 0;
	}

/***XXXXXXXXXXXXXXXXXX End of menu and header XXXXXXXXXXXXXXXXXXX***/

/***XXXXXXXXXXXXXXXXXX Left column XXXXXXXXXXXXXXXXXXXXXXX***/

#infodiv{
	position: absolute;
	top: 160px;
	left: 7px;
	width: 11em;
	z-index: 1;
	background-color: transparent;
	color: #036;
	
}

html[xmlns] #infodiv li {
	line-height: 1.3em;
} 

#infodiv div{
	clear: left;
}

#infodiv p{
	text-align: center; 
	margin: 0 0 0 -20px; 
	padding: 4px 0 2px;
}

#infodiv img{
	float: left;
	margin: 4px 0 2px 3px;
	clear: left;
	display: block;
}

#infodiv p img{
	float: none; 
	vertical-align: middle;
}

#infodiv ul a{
	display: block; 
	margin-left: 28px;
	position: relative;
}
	
.mod {
	margin-bottom: 15px;
	color: #036;
	background: #E6EAF3;
	border: 1px solid #036;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}	

.mod h5 a{
    margin-left: 0;
    color: #036;
    }
    
.mod h5 a:hover, 
.mod h5 a:focus {
    color: #4C7099;
    text-decoration: underline;
    }


.mod h5 {text-align: center; border-top: 3px double #039;}
.mod li{
	list-style: none;	
	padding: 0 2px 5px 0;
	border-top: 1px solid #036;
	}
.mod h6{
	color: #fff;
	text-align: center;
	padding: 3px;
	font-size: 100%;
}


.mod a {
	margin-left: 5px;
	text-decoration: none;
	}
	
.mod a:hover, .mod a:focus {
	 
	text-decoration: underline; 
	}




	
/***XXXXXXXXXXXXXXXXXXX End left column XXXXXXXXXXXXXXXXXXXXXXXX***/

/***XXXXXXXXXXXXXXXXX Start main column XXXXXXXXXXXXXXXXXXXXXXX***/




#content{
	margin: 5em 12.5em 2em 12.5em;
	
}
body #articlecontent{ margin-left:12.5em;}
#content h1{
	font:normal 1.3em Arial, Helvetica, sans-serif;
	color: #036; 
	margin-top: 0;
	margin-bottom: 0;
}

#content h2{
	font:normal 1em Arial, Helvetica, sans-serif;
	color: #036; 
	margin-top: 10px;
	margin-bottom: 15px;
}



#content h2.itemhead {
	padding: 3px 10px 3px 10px;
	color: #FFF;
	font-size: 1.2em;
}

img.right {
	float: right; 
	margin: 0 0 15px 15px;
}

.dropit{
	padding-bottom:30px;
	margin-bottom: 30px;
}

.articletitles{
	font-weight: bold;
	color: #669900;
}

#content p, #content ul, #articlecontent p, #articlecontent ul {
	margin-bottom: 1em;
}
#content h3{
	color: #333;
	font-size: 1em;
	margin: 20px 6px 0 0;
	padding: 20px 0 0 0;
	border-top: 1px dashed #666; 
}

#content .dotit{
	border-bottom: 1px dashed #666; 
	padding-bottom: 10px;
	margin-top: 7px;
}

#content .line{
	border-bottom: 1px solid #036; 
	padding-bottom: 10px;
	margin-top: 7px;
}

#content h4{
	background-color: transparent;
	color: #036;
	font-style: bold;
	margin: 20px 6px 0 0;
	padding: 20px 0 0 0;
}
#rightcol h4{
	margin: 0;
	padding: 0;
	color: #fff;
}

#content .outerdiv a {
	text-decoration:none;
	}
#content .outerdiv a:hover {
	text-decoration: underline;
	}
	


/***XXXXXXXXXXXXXXXXX Right column XXXXXXXXXXXXXXXXXXXXXXX***/

#rightcol{
	position: absolute;
	right: 15px;
	top: 160px;
	margin-right: -8px;
	width: 11em;
}




.button{
	width: 100px;
	background-color: #EFF2F8;
	border: 1px solid #036; 
	color: #036;
}

#logindiv p{
	color: #036;
	background-color: transparent;
	margin: 3px 0 0;
	padding-left: 10px;
}


.mod form{
	margin: 0;
	padding-bottom: 7px;
	text-align: center;
}

#features li img{
	float: right;
	margin: 5px 2px 0 4px;
}

#rightcol a{
	width: 100%;
	display: block;
}

#signupdiv {display: none;}


	

.mod form input{
	margin: 4px 0 0;
	border: 1px solid #036;
	color: #036;
	width: 8em;
}
#remember {width: auto; border:none;}

.mod form input[type=submit] {
 width: 5em;
}
.mod form input[type=submit]:hover,
.mod form input[type=submit]:focus {
 border: 2px inset;
}
/* RSS SELECTORS */




#rssfeed p {
	margin: 5px 0;
	color: #036;
} 



#menufooter {
	list-style: none;
	text-align: center;
	margin: 2em 12.5em 1em;
	line-height: 1.6;
	
}

#menufooter li {
	display: inline;
	padding:0 5px;
	border-right: 1px dotted #003399;
	white-space:nowrap;
}

#menufooter a {
	text-decoration: underline;
}

#menufooter a:hover, #menufooter a:focus {
	color: #0c379c;
	text-decoration:none;
}

.footer {
	text-align: center;
	color: #666;
}

#favdiv{
	position: static;
	background-color: #fff;
	border-left: 1px solid #036;
	border-right: 1px solid #036;
	border-bottom: 1px solid #036;
	margin-top: 15px;
	}
	
#favdiv h5{
    color: #036;
    text-align: center;
    padding: 1px 0 5px 0;
    background: #036 url(/images/linklg.jpg) repeat-x;
    border-top: 1px solid #036;
}

#favdiv h5 a{
    margin-left: 0;
    color: #036;
    }
    
#favdiv h5 a:hover, #favdiv h5 a:focus {
    color: #4C7099;
    text-decoration: underline;
    }

.mod h4{
	color: #FFF;
	font-size: bold 0.8em;
	padding: 1px 0 5px 0;
	text-align: center;
}



#favdiv p{
	color: #036;
	background-color: transparent;
	font-size:0.8em;
	margin: 3px 0 0;
	padding-left: 10px;
}

#favdiv form input{
	font-family: "Courier New", Courier, monospace;
	font-size: 0.9em;
	margin: 4px 0 0;
	border: 1px solid #036;
	color: #036;
}

#favdiv form{
	margin: 0;
	padding-bottom: 7px;
	text-align: center;
}

#favdiv a {	
	text-decoration: underline;
	}
	
#favdiv a:hover, a:focus {
	background-color: transparent; /*#EFF2F8*/
	}
	
#favdiv li{
	list-style: none;
	font-size: 0.8em;
	background-color: #E6EAF3;
	color: #036;	
	/*padding: 0 2px 0 0;
	margin: 0 0 5px 0;*/
	padding: 0 2px 5px 0;
	
	border-top: 1px solid #036;
	}
	
#favdiv ul{
	 
	
	background-color: #E6EAF3;
}

#favdiv a{
	display: block; 
	margin-left: 5px;
	position: relative;
	text-decoration: none;
}

#favdiv a:hover, #favdiv a:focus {
	color: #69902D; 
	text-decoration: underline; 
	}
	
.mod h6 a{
	color: #fff;
	}
	

	
	
	
	
.floatleft{
	float: left;
	margin-right: 15px;
}
img.iconimage, img.floatleft {
-moz-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
-webkit-transform:rotate(-9deg);
-moz-transform:rotate(-9deg);
-o-transform:rotate(-9deg);
transform:rotate(-9deg);
border:1px solid #CCCCCC;
float:left;
margin-right:20px;
padding:3px 3px 14px;
}
.categories td {text-align:center;}
.categories .floatleft {margin: 37px auto 10px auto; float:none;}
.floatright{  /*new for JoJo*/
    float: right;
    margin-left: 15px;
    }

.bios{
	border-bottom: 1px dashed #666;
	padding-bottom: 20px;
	margin-bottom: 30px;
}


#calendar{
	margin: 2em 2em 2em 2em;
	color: #363636;
	
}

.memberinfo{
	color: #036;
	background-color: transparent;
}

#ads{
	position: absolute;
	top: 13px;
	right: 10px;
}

#flickdiv{
    color: #036;
    padding: 0;
    border: 1px solid #036;
    border-top-width: 0;
    margin-bottom: 15px;
    background: #CEDBED;
}

#flickdiv p{
    color: #036;
    background-color: transparent;
    font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 3px 0 0;
    text-align: center;
}

#flickdiv img{
    margin: 5px 0;
    border: 1px #036 solid;
}

#flickdiv a:hover img, #flickdiv a:focus img {
text-decoration: none;
background: #CEDBED;
}


#flickdiv a {   
    text-decoration: underline;
    }
   
#flickdiv a:hover, #flickdiv a:focus {
    background-color: #EFF2F8;
    }

	
/* One off rules added by Laurie for a tut by Jim */
	
#articlecontent .jim{
	width: 500px;
	margin: 0;
	padding: 0;
} 

#articlecontent .jimbkgd{
	background-image: url(/content/source/AA4BF46FF1DA26F6/main.jpg);
	background-repeat: no-repeat;
	font-weight: bold;
	color: #000066;
}

/*End of one off rules */


/***************** Styles from here down are from authors and handle the main article content area (articlecontent div) *****************/

#articlecontent{
	margin: 5em 2em 2em 12.5em;
	
}
#content,#articlecontent {
	font-size: 108%;
	line-height: 1.4;}
#articlecontent a:hover, #articlecontent a:focus {
	color: #0c379c;
	text-decoration: none;
}

#articlecontent h1{
	font-size: 161.5%;
}

#articlecontent h2{
	font-weight:bold;
}

#articlecontent h3{
	font-weight:bold;
	padding: 20px 0 0 0;
}
#articlecontent h4{
	font-size:100%; 
}
#articlecontent h5{
	margin: 5px 0;
	font-size:normal 0.9em;
	}
#articlecontent ol, #articlecontent ul {padding: 1em;}
#articlecontent .outerdiv h4 {margin-top: 0;}

#articlecontent h2.itemhead {
	padding: 3px 10px 3px 10px;
	color: #FFF;
	font-size: 123%;
	border: solid #036 1px;
	background: #036 url(/images/headlg.jpg) repeat-x;
}

#articlecontent #borderdiv{ 
	height: auto;
	width: auto;
	border: 1px solid #036;
	padding: 20px;
	margin-bottom: 50px;
	margin-top: 50px;
}

#articlecontent caption{
	background-color: #DBE4F2;
 	border: 1px solid #036;
	color: #036;
	font-size:14px;
 	font-weight: bold;
	 width: 95%;
	padding: 3px 0 3px 0;
}

#articlecontent dl{
	background-color: transparent;
	color: #000;
	list-style: outside;
	padding: 5px;
}

#articlecontent dt{
	color: #4C7099;
	list-style: outside;
	padding-bottom: 10px;
	padding-top: 20px;
	background-color: transparent;
}

#articlecontent em{
	font-style: italic;
}

#articlecontent fieldset{
	padding: 10px;
}

#articlecontent legend{
	background-color: transparent;
	color: #036;
	font-weight: bold;
	padding-bottom: 5px;
}

#articlecontent ul#set{
	margin-top:0;
	margin-bottom: 10px;
	}
#articlecontent ul#set li{
	list-style-type: none;
	}
	
#articlecontent li{
	padding-top: 5px;
}

#articlecontent ol li{
	background-color: transparent;
	list-style: decimal outside;
}


#articlecontent ul ul, #articlecontent ul ol, #articlecontent ol ol, #articlecontent ol ul {font-size: 100%;}

#articlecontent ul li{
	background-color: transparent;
	list-style: square outside;
}
#articlecontent .boldtext{
	font-weight: bold;
}
#articlecontent .smalltext{
	background-color: transparent;
	color: #000;
	font-size: 93%;
}

#articlecontent .tableborder{
	border: 1px solid #036;
}

#articlecontent table{
	width: 95%;
	margin-bottom: 5px;
}

#articlecontent .tabulartable{
 border: 1px solid #036;
 border-collapse: collapse;
	border-bottom-width: 0;
}

#articlecontent .tabulartable td{
	border: 1px solid #036;
	border-collapse: collapse;
}


#articlecontent .tabulartable p{
	font-size: 1.0em;
}

#articlecontent td{
	margin: 0 0 10px 0;
	padding: 3px;
}

#articlecontent th{
	background-color: #CEDBED;
    border-bottom: 1px solid #036;
	color: #036;
	font-weight: 500;
	padding: 4px;
}

#articlecontent .tip{
	background-color: #99B5E1;
	border: 1px solid #036;
	color: #000;
	margin-bottom: 10px;
	margin-right: 0;
	padding: 5px;
	width: auto;
}

#articlecontent .warning{
	color: #F00;
	border: 1px solid #F00;
	background-color: #EFF2F8;
	margin-bottom: 10px;
	margin-right: 0;
	padding: 5px;
	width: auto;
}

#articlecontent .inlinewarning {
	color: #F00;
	background-color: #EFF2F8;
}

#articlecontent .code{
	background-color: #FEFCF5;
	border: 1px solid #036;
	letter-spacing: 1px;
	margin: 15px 0 15px 0;
	padding: 15px;
	line-height: 130%;
	width: auto;
}

#articlecontent .impcode{
	background-color: #DBE4F2;
	padding: 2px;
	margin-top: 40px;
	position: relative;
}
#articlecontent .plaincode{
	background-color: #FCF7E2;
	letter-spacing: .1em;
}

#articlecontent .inlineimp {
	color: #036;
	background-color: #DBE4F2;
}

#articlecontent .colth{
	border-right: 1px solid #036;
 width: 18%;
 }


#articlecontent .edging{
	border: 1px solid #333;
}

.editorsuggestions{
	background-color: #ADD8E6;
	color: #036;
	font-weight: bold;
}	

.authorresponse{
	color: #FFF;
	background-color: #036;
	font-weight: bold;
}

/* apply this class to anything that must have a white
background this prevents the item from looking odd as
it scrolls past the watermark on the site.*/

.edging{
	border: 1px solid #333;
}

pre {
	color: #333333;
}

#articlecontent .fixed{
	background-color: transparent;
 }


/********** Ends the author's information *************/