/*****************************
 * AlexanderReyna.com
 * General Style Sheet
 * Author:  Grace Pok (gracepok.com)
 * 
 * bg pale blue:   a9c2c9
 * menu pale blue: a8c1c8
 * 
 */


body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: smaller;
	margin: 0;
	padding: 0;
	min-width: 1000px;
	background: #a9c2c9 url('../graphics/bg.jpg') no-repeat scroll top left;
}

body#pg_login, body#pg_join  {
	background: #a9c2c9 url('../graphics/bg_loginpage.jpg') no-repeat scroll top left;
	min-width: 800px;
}

h1, h2, h3, form { margin: 0; padding: 0;}
h1 { font-size: 115%; }
h2 {font-size: 105%; }


a { color: #DF7401;}
a:link {color: #DF7401}     /* unvisited link */
a:visited {color: #ff6600}  /* visited link */
a:hover {color: #FF3300}   /* mouse over link */
a:active {color: #FF3300}   /* selected link */



#topbanner {
	margin-bottom: 40px;
}
#footer {
	text-align: center;
	margin-top: 20px;
	padding: 0 10px;
}
#footer p {
	font-size: 85%;
}

.friendscounter {
	position: absolute;
	top: 4px;
	left: 329px;
	padding-left: 3px;
	padding-top: 3px;
	width: 140px;	height: 36px;  /* dim+pad == bg graphics size*/
	background: transparent url('../graphics/friendsbubble.gif') no-repeat scroll top left;
	font-size: 0px;
}
.friendscounter span {
	display: none;
}
.friendscounter .word_friend {
	padding-left: 2px;
}
div#pgtitle {
	position: absolute;
	z-index: 1;
/*	left: 9px; 	top: 36px;  OLD */
	left: 9px; 	top: 60px;
}

.contentwrap {
	padding-left: 44px;	
}

/* -----------Side Panes ------------------- */
#subnav {
	width: 210px;
	height: 530px;  /*match .content height*/
	background: transparent url('../graphics/sidepane.gif') no-repeat scroll top left;
	float: left;
}


/* ----------- Main Panes ------------------- */
#oneboxmodel { background: transparent url('../graphics/bigpane.gif') no-repeat scroll top left; }
#twoboxmodel { background: transparent url('../graphics/bigpane_2x.gif') no-repeat scroll top left; }

div.content {
	width: 700px;
	height: 530px;
	float: left;
	margin-left: 10px;
}

#twoboxmodel #primary {	/* top pane */
	width: 670px;
	padding: 15px;
	height: 400px;
}
#twoboxmodel #secondary {  /* bottom pane */
	padding: 35px 15px 15px 15px;
	width: 670px;
	height: 50px;
}
#oneboxmodel a.btn_close, #twoboxmodel a.btn_close {
	float: right;
}


/* vertically flexible pane that works on following
 * 	<div class="flexbox">
		<div class="flexbody">
			content
		</div>
	</div>
 */
.flexbox {	
	background: url('../graphics/flexpane_top.gif') no-repeat top left;
	width: 700px; 
	padding-top: 15px;
}
.flexbody {	background: url('../graphics/flexpane_bot_1200h.gif') no-repeat bottom left;
	padding-top: 0; margin-top: 0;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 15px;	
}
.flexbody p {
	margin-top: 0;
}


/* Small Panes (e.g. login box)
 * Maximum v-stretch:  px
 * ----------------------------------------------- */
.smallbox {
	background: transparent url('../graphics/smallpane320_top.gif') no-repeat scroll left top; 
	width: 320px;
	padding-top: 15px;
}
.smallbox .boxbody {
	padding: 0px 10px 10px 10px;
	margin-top: 0;
	background: transparent url('../graphics/smallpane320_tall.gif') no-repeat scroll left bottom; 	
}
.smallbox h2 {
	font-size: small;
	text-align: center;
	margin-bottom: 15px;
}

p.button {
	text-align: center;
	clear: both;
	margin-top: 10px;
}
form input.button {
	background: transparent url('../graphics/button.png') no-repeat top left;
	border: 0;
	color: white;
	text-transform: uppercase;
	text-align: center;
	width: 113px;
	height: 45px;
	font-size: 130%;
}




/* --------------  NAVIGATION --------------- */
.mainnav, .dropdownmenu  { 	list-style-type: none; }
.mainnav {	
	margin: 32px 0 0 0; 
	padding: 0;
}

.mainnav a { float: left; } /* for I5-Mac */
/* Commented Backslash Hack
     hides rule from IE5-Mac \*/
.mainnav a { float: none; }
/* End IE5-Mac hack */

.mainnav li {
	float: left;
	margin: 0;
	height: 33px;
	background: url('../graphics/menubg_rect.gif') no-repeat scroll top left;
}

.mainnav li a {
	display: block;
	padding-left: 8px;
	padding-right: 10px;
	margin-top: 8px;
	border-left: 2px solid #a8c1c8;
	cursor: pointer;

	text-decoration: none;
	text-transform: lowercase;
	font-size: 11px;
	font-weight: bold;
/*	color: #a8c1c8; -- make darker for better contrast in IE  */
	color: #669999;
}
.mainnav li a:link {color: #669999;}     /* unvisited link */
.mainnav li a:visited {color: #669999;}  /* visited link */
.mainnav li a:hover {color: #336666;}   /* mouse over link */
.mainnav li a:active {color: #336666;}   /* selected link */


/* make home page link disappear to show the bg img's text */
.mainnav li.home { width: 394px; background-image: none; }
.mainnav li.home a { width: 350px; 	height: 33px; padding: 0; margin: 0; border: 0; 
	z-index: 3; 	position: relative;		/* required so that page header arrow will not cover up click area */
}
/* rounded end for last item in menu */
.mainnav li.contact { 
	background: url('../graphics/menubg_roundr.gif') no-repeat scroll top right; 
	padding-right: 30px;
}
.mainnav li.login, .mainnav li.logout{
	padding-left: 10px;
	background: url('../graphics/menubg_roundl.gif') no-repeat scroll top left;
}
.mainnav li.login {
	padding-right: 180px;
}
.mainnav li.login a, .mainnav li.logout a {
	border-left: 0;
}
.mainnav li.account {
	padding-right: 80px;
}
#topnav { float: left; }
#utilnav { 	float: right; }




/* replace menu text with images */
.mainnav li a span { visibility: hidden; }
.nav_friends 	{ background: url('../graphics/menu_friends.png') no-repeat scroll 4px 2px;}  /* x, y */
.nav_profile 	{ background: url('../graphics/menu_prof.png') no-repeat scroll 4px 2px;}
.nav_blog 		{ background: url('../graphics/menu_blog.png') no-repeat scroll 4px 2px;}
.nav_contact 	{ background: url('../graphics/menu_contact.png') no-repeat scroll 4px 2px;}
.nav_login 		{ background: url('../graphics/menu_login.png') no-repeat scroll 4px 2px;}
.nav_logout		{ background: url('../graphics/menu_logout.png') no-repeat scroll 4px 2px;}
.nav_account  	{ background: url('../graphics/menu_acct.png') no-repeat scroll 4px 2px; }


/* Dropdown List
 * --------------------------------------------- */
.dropdownmenu  {
	list-style-type: none;
	margin: 8px 0 0 0;
	padding: 5px 0 0 5px; 	
	position: absolute;
	top: 53px; 	left: 461px; /* (x,y) required so the box doesn't get pushed down with text size */
	background: transparent url('../graphics/rollovermenu_90.png') no-repeat scroll left top;
	width: 85px;
	height: 92px;
}

.dropdownmenu li {
	margin: 0px;	padding: 0px;
	height: 20px;	
	float: none;
	background-image: none;
}

.dropdownmenu li a {
	display: block;
	height: 18px;
	border: 0;	margin: 0;	padding: 0;
	color: black;
}
.dropdownmenu li a:link {color: black;}     /* unvisited link */
.dropdownmenu li a:visited {color: black;}  /* visited link */
.dropdownmenu li a:hover {color: white;}   /* mouse over link */
.dropdownmenu li a:active {color: white;}   /* selected link */

li#hovermenu .dropdownmenu  {
	visibility: hidden;
}
li#hovermenu:hover .dropdownmenu, li#hovermenu.hover .dropdownmenu {
	z-index: 34;
	visibility: visible;
}

/* in IE sheet:
li#hovermenu { behavior: url('style/hover.htc'); }
*/



/* Orange Big Popups
 * ----------------------------------------------- */
.popup_box {
	padding-left: 25px; /*match the pointer graphics*/
	background: url('../graphics/popup_point.gif') top left no-repeat;
	width: 270px;  /* match the main graphics width */
}
.popup_box .header {display:none;}
.popup_box .body {
	background: #ff2900 url('../graphics/popup_notitle.gif') top left no-repeat;
	padding: 40px 5px 15px 10px;  /* top should clear the "NEWS!" text */
	font-family:  "gotham book", Verdana, Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: white;
}

#newsdiv .body {background-image: url('../graphics/popup_news.gif'); }



/* Content
 * ----------------------------------------------- */
.oneboxcontent {
	margin: 15px 0;
	padding-left: 15px; /* pad instead of margin b/c of IE6 double-margin bug */
	width: 630px;
	height: 500px;
	font-size: 85%;	
	line-height: 1.4;
}

/* Scrollbar and the content it acts on
 * ----------------------------------------------- */

.scrollcontent {
	float: left;
	overflow: hidden;
}
.scrollwrap, .scrollwrap_short {
	float: left;
	width: 18px;	
}
.scrollwrap 		{	
	height: 490px; 
	background: transparent url('../graphics/scrolltrack.gif') no-repeat scroll top left;
}
.scrollwrap_short	{ 
	height: 440px; 
	background: transparent url('../graphics/scrolltrack_440h.gif') no-repeat scroll top left;
}

.scrolltrack, .scrolltrack_short {
	padding: 5px 3px;
	width: 12px;
	font-size: 0;
}
.scrolltrack { height: 470px; }
.scrolltrack_short {height: 420px; }

.scrollhandle {
	width: 12px;
	height: 140px;
	font-size: 0;  /* prevents handle from shifting down when text size is increased */
}

/* specific instances of scrollbar */
#mainwrap {
	margin-top: 20px;
	margin-left: 20px;
}




/* Bio Layout
 * ----------------------------------------------- */
.bioheader h2 {
	margin-bottom: 5px;
}

.bioheader img {
	float: left;

}
.bioheader p {
	margin: 0;
}

.biobody {
	clear: both;
}
.biobody h3 {
	font-size: 110%;
	margin-bottom: 5px;
}
.biobody p {
	color: #616161;
	margin-top: 5px;
}
/* apply same picture width to all profile pictures */
.bioheader img, .profilepix {
	margin-right: 10px;
	margin-bottom: 10px;
	width: 165px;
}



/* Contact Popup
 * ----------------------------------------------- */
#nav_contact {
		cursor: pointer;
}
#contact_popup{
	position: absolute;
	z-index: 34;
	top: 10px;
	left: 637px;
	width: 325px;
	height: 282px;
	padding-left: 40px;
	padding-top: 10px;
	background: transparent url('../graphics/contact_popup.gif') top left no-repeat;
}

a#btn_contactclose {
	display: block;
	width: 22px;
	height: 22px;
	float: right;
	margin-right: 10px;
	background: transparent url('../graphics/orange_closebtn.gif') top left no-repeat;
	background-position: 0px 0px;
}
a#btn_contactclose:hover {
	background-position: -22px 0px;
}
#contact_popup p {
	margin: 0;
}
#contact_popup p.info {
	font-weight: bold;
	margin-bottom: 4px;
}
#contact_popup a{ color: white;}
#contact_popup textarea {
	width: 300px;
}
#contact_popup .fld_email {
	width: 160px;
}
.btn_white {
	background: transparent url('../graphics/btn_white.png') center center no-repeat;
	border: 0;
	width: 84px;
	height: 37px;
	margin-top: 10px;
	font-weight: bold;
}



/* Blog Page -
 * ------------------------------------- */
/* create 10px room for the date to stick out */
#pg_blog #oneboxmodel {
	width: 710px;
	margin-left: 0;
	background-position: top right;
}
#pg_blog .oneboxcontent {
	width: 640px;
}

.blogitem h3 {
	margin-left: -10px;
	width: 12em;
	background: url('../graphics/blogdate_bg_arrow.png') top right scroll no-repeat;
	padding: 0 23px 0 0;
	color: #666;
	font-size: 100%;
}

.blogitem h3 span {
	display: block;
	background: url('../graphics/blogdate_bg_body.png') top left scroll no-repeat;
	padding-top: 2px;
	padding-bottom: 10px;
	padding-left: 10px;
}
.blogitem p {
	margin: 0 0 1.5em 1em;
}
.archivehead{
		text-align: center;	
	color: #669999;
}


/* Utility
 * ----------------------------------------------- */
.clear{
	padding: 0px;
	margin: 0px;
	border: 0px;
	font-size: 0px;
	display: block;
	clear: both;
	overflow: hidden;
	height: 0px;
}
.caption {
	font-size: 90%;
	margin-top: .4em;
	color: #585858;
	text-align: center;
}

.errormsg {
	color: #FA5858;
}
.actionmsg {
	color: #4B8A08;
}

.errormsg , .actionmsg {
	text-align: center;
	font-weight: bold;
	margin: 0; padding: 0;
	margin-bottom: 5px;
	line-height: 1.3;
}
.errormsg span,  .actionmsg span{
	background-color: white;
	padding: 1px 5px;
}
.welcomemsg {
	font-size: 110%;
}
.readonly {
	color: #666;
	background-color: #DDD;
	border: 1px solid gray;
	padding: 2px;
	font-weight: bold;
}

.btn_close {
	cursor: pointer;
}
.popup_utiltxt {
	text-align: center;
}