/* ============================================================================================================= */
/*                                BEEZ20                                                                         */
/* ============================================================================================================= */

/*
Before you start:
=================
To really get to grips with BEEZ20, the best thing to do is to start from a completely fresh j2.5 installation 
and use it as the default template.  Then create a number of HTML modules that all similar to:

     Position 10
     (Lorem Ipsum) Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
     vel illum dolore eu feugiat nulla facilisis.
Make sure the title is appropriate, so you can see which positions do not display their titles. 

Just change the position number for each one, so that when they are displayed you know which one is which.  
Put them in positions 0-14.  Also create an article for the home page with 4 paragraphs of Lorem Ipsem.  
Print it and study it carefully, especially the effects in positions 4 and 5.  I couldn't find Position 13.

Now read the excellent article by Angie Radtke, the author of the template, at http://cocoate.com/j17/beez  

Favico.ico:
===========
The favicon.ico file should be renamed, and then the standard method of using favicon.ico in the site root 
directory can be used.  Don't ask why the obvious didn't work…
*/


/*
MyCustomCSS
===========
It is best to put changes to CSS in a mycustomcss.css file in templates/css.  To utilize it, there is 
probably a file somewhere that lists all the css files, but until I find it, go to 
templates/beez_20/index.php and add this line at the end of the opening php section, just above 
the ?> statement circa line 60, thus:

$doc->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/mycustomcss.css');
?>
*/



/*
Font Size Adjuster:
====================
This is up above Position 0, and can be deleted by changing the name of 
templates/beez_20/javascript/md_stylechanger.js to ….. .js.old Crude, but it works!
*/


/* to give the body a background and an image
==============================================
which overrides Personal.css circa line 18
Change the colour and/or image file name to suit.  If the image is shorter than 
the page contents, then the colour takes over, which is nice for a graded image.
*/
body {background:  #cccccc url(../images/personal/bg_bluish.jpg) ; }


/* to specify font colour and type
==================================
which overrides Personal.css circa line 20
*/
body {color: #333; font-family: lucida sans unicode, arial, helvetica, sans-serif;}


/* to change overall font size 
==============================
which overrides Layout.css circa line 50
*/
#all{font-size: 0.9em;}


/* to give BEEZ20 footer a different colour and text colour 
===========================================================
which overrides Personal.css circa line 1316 and Layout.css circa line 1466
*/
#footer {background:#EEEEEE; // url(../images/personal/tabs_back.png) repeat-x;
	color:#fff;
	border-top:solid 0px #ccc;
}
#footer a{color:#f00; font-size:1.2em;}

/* BEEZ20 header image 
======================
which overrides Personal.css circa line 95
In this instance, 'sitelogo.png' is the name of the header image.  If higher than 
200 px the top is trimmed off.  To control the height, change the minimum height 
given in personal.css circa line 95 (can do it in the same statement as below).  
The width should be 1030px unless you want smaller, in which case more CSS 
alterations will be needed.
The header is made up of three other parts:
-	The Logo (in this case, the Joomla icon)
-	The Site title (Joomla!)
-	The Site Description (Open Source Content Management)
Clear all of these in the BEEZ20 backend
*/
.logoheader {background:  #ffffff  URL(../images/personal/sitelogo2.gif) no-repeat bottom right ;}


/* Space between Header image and the menu
==========================================
override Personal.css circa line 106
*/
h1#logo {margin:0 0 20px 0;}


/* to make BEEZ20 menu stay below the header image 
==================================================
which overrides Layout.css circa line 82:
*/
#header ul{position:static;}

/* to change padding at top of BEEZ20 
====================================
which overrides Personal.css circa line 92
*/
#all #header {padding-top:1.0em ;}

/* to change background colour of BEEZ20 content area 
=====================================================
which overrides Personal.css circa line 300
This is the main content as well as the left and right columns, but excludes 
Positions 9, 10 & 11.  To be exact it covers Positions 1, 2, 3, 4, 5, 6, 7, 8 and 12, 
but some of them need further tailoring depending on the design.

try #f00 as a blatant red, that really shows what has been changed … of course you would want 
something more subtle, like #ccc.
*/
#contentarea, #contentarea2 { background:#eeeeee }

/* to change font size in Breadcrumbs (Position 2) 
==================================================
which overrides Layout.css circa line 184
*/
#breadcrumbs{font-size:80%;}

/* to change size of BEEZ20 left column 
=======================================
which overrides Position.css circa line 133
Use with care, as I suspect this fouls up the display of the right column ...
*/
.leftbigger{width:15%}

.left1 {
    float: left;
    margin: 10px 3% 10px 0;
    padding: 0;
    position: relative;
    width: 15%;
}


/* to change size of BEEZ20 main contents 
=======================================
which overrides Position.css circa line 81
Use with care, as I suspect this fouls up the display of the right column ...
*/
#wrapper2 .item-page{max-width:95%;}
/* override Position.css line 65 */
#wrapper {width:60%;} // was 35px

/* to change position and size of BEEZ20 right column 
=====================================================
which overrides Position.css circa line 92
Use with care, as I suspect this fouls up the display of the right column ...
*/
#right{float:right; margin:40px 0px 10px 2%;}
/* override Position.css line 65 */
#right{width:15%;} // was 35px

#right {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 0 solid #E6E6E6;
}


/* to change background colour of BEEZ20 right column 
=====================================================
/* which overrides Personal.css circa line 841 */
#right{background:transparent;}


/* to get rid of the OPEN or CLOSE button above the right hand column
=====================================================================
which overrides Position.css circa line 249.  Crude, but effective!
*/
#close {display:none;}

/* to indent the text for the breadcrumb
========================================
This does not override any existing CSS. 
*/ 
 .showHere {margin: 0 0 50px 50px;}
 
/* to put a separator between the Header and the content 
============================================================
which overrides Position.css circa line 54
*/
 
#contentarea, #contentarea2 {padding:0px 20px !important; margin: 10px 0 0 0;}


/* to allow RokTabs more space 
==============================
*/

#wrapper2 {
    float: left;
    padding-bottom: 20px;
    position: relative;
    width: 82%;
}


/* To get rid of the Powered By Joomla:
=======================================
No choice but to alter templates/beez_20/index.php:  Circa line 240 comment out the references thus:
	<div id="footer">
	<jdoc:include type="modules" name="position-14" />
    <!--
	<p>
	<?php echo JText::_('TPL_BEEZ2_POWERED_BY');?> <a href="http://www.joomla.org/">Joomla!&#174;</a>
    </p>
    -->
    </div><!-- end footer -->
*/

/* Move Position 12 to below the main content:
==============================================
No choice but to alter templates/beez_20/index.php:

Change the order of the entries circa lines 166 – 178 thus:
   <div id="main">

  <jdoc:include type="message" />
  <jdoc:include type="component" />
  
  <?php if ($this->countModules('position-12')): ?>
     <div id="top"><jdoc:include type="modules" name="position-12" />
     </div>
  <?php endif; ?>

   </div><!-- end main -->

The php stuff was originally above the jdocs stuff..
*/



/* ============================================================================================================= */
/*                                BEEZ20 and Maximenu Compatibility                                              */
/* ============================================================================================================= */
/* BEEZ20 has issues with Maximenu, and this can be proved by changing the template to (say) Gantry,
 and the problems go away!
 */
 
 
/* To get rid of double text shadow
===================================
which overrides Personal.css circa line 187 
*/
#header ul li.active a:link,
#header ul li.active a:visited
{text-shadow: 0px 0px 0px #000;}

/* to change the link colour
============================
which overrides Personal.css circa line 140 
*/
a:link,
a:visited
{color:#AA40AA;} // Purple

/* to change the link background, which otherwise is fouled up:
===============================================================
which overrides Personal.css circa line 627 
*/
#main a:hover,
#main a:active,
#main a:focus
{background:#AA40AA;color:#ccc;}


/* ================================================================================= */
/*                                BEEZ20 and KUNENA Compatibility                    */
/* ================================================================================= */


/* ========== Read http://docs.kunena.org/index.php/Kunena_Configuration =========== */

/* To change background of KUNENA menus
=======================================
which overrides Personal.css circa line 446 
*/
ul.menu {background:transparent;}


/* To set width of Kunena Forum
===============================
*/
#Kunena{min-width:700px !important; width:750px;}

/* To centre of Kunena Forum
===============================
*/
#Kunena{margin-left:auto; margin-right:auto;}

/* To hide collapse options 
===========================
*/
#Kunena a.close{display:none;}


/* To change font properties 
============================
*/
/* General font size */
#Kunena table tr th, #Kunena table tr td, #Kunena div, #Kunena p, #Kunena span, #Kunena ul li, #Kunena ul li a {font-size: 1.0em;}

/* main forum header */
#Kunena .kheader h2, #Kunena .kheader h2 a {font-size: 105%;}

/* Category titles */
#Kunena div.kthead-title a{font-size: 95%;}

/* Category descriptions */
#Kunena .km{font-size: 100%;} 

/* Topics numbers and replies */
#Kunena span.kcat-topics-number, #Kunena span.kcat-replies-number{font-size: 90%;}
#Kunena span.kcat-topics, #Kunena span.kcat-replies {font-size: 90%;}

/* Last Post details */
#Kunena .ks {font-size: 90%;}

/* to Change appearance of Main forum title */
#Kunena div.ktitle-desc { 
	margin-top: -3px; 
	margin-bottom: 10px; 
	padding: 0px 0px 6px 10px; 
	background-color: #f2f1ee; 
	color:#333333;
	font-size:80%;
	}	
/* Number of replies in Category table */
#Kunena tr.krow1 td {font-size:80%;} 
#Kunena tr.krow2 td {font-size:80%;} 
#Kunena td.kcol-ktopicreplies strong {font-size:120%;}
#Kunena span.ktopic-views-number {font-size:120%;}

/* to Change word "Category" to "Group" in front end,
====================================================
modify:
components/com_kunena/language/en-GB/en-GB.com_kunena.tpl_blue_eagle.ini -- Line 21, 'Group Header'
components/com_kunena/language/en-GB/en-GB.com_kunena.views.ini -- also line 21, 'Topics in Group'
*/


/* =========================================================================== */
/*                            Classes for Civic Cookie Control                 */
/* =========================================================================== */

/* Make changes in 
cookieControl-5.1.min.js as documented therein
*/

/* =========================================================================== */
/*                         For ACY Mailing                                     */
/* =========================================================================== */

table.acymailing_form {
    border: 0 none !important;
    margin-left: 75px !important;
}


input.button, button.button, button.validate {
    /* background: url("../images/nature/arrow1.gif") no-repeat scroll left top #FFFFFF; */
    background: none repeat scroll 0 0 #eeeeee;

}

/* for the Header */
#right h3 span.backh3 {
    background: none repeat scroll 0 0 #eeeeee !important;
    font-size: 100%;
    font-weight: normal;
    margin: 5px 0 0;
    padding-left: 0px;
    text-align: center;
    width: 130px;
    color: #50A020;
}



/* =========================================================================== */
/*                                     typography                              */
/* =========================================================================== */
#main h1	{
	font-size:150%;
	color: #AA40AA;
	font-weight: 550;
	letter-spacing: 0px;
	}
	
h1	{
	font-size:150%;
	color: #AA40AA;
	font-weight: 550;
	letter-spacing: 0px;
	}
	
h2	{
	font-size:125%;
	color: #12397e;
	font-weight: 550;
	letter-spacing: 0px;
	}

#right h3 {
    background: none repeat scroll 0 0 #EEEEEE !important;
    font-size: 120%;
    font-weight: normal;
    margin: 5px 0 0;
    padding-left: 75px;
    text-align: center;
    width: 130px;
}
#right p {
    background: none repeat scroll 0 0 #EEEEEE !important;
    font-size: 100%;
    font-weight: normal;
    margin: 5px 0 0;
    padding-left: 75px;
    width: 130px;
}


/* this for the bottom strapline on 'About Us' */	
h6	{text-align:right;
	color: #99cc00;
	font-style:italic;
	font-size:125%;
	}
	
		
h6.h6left	{text-align:left;
	color: #99cc00;
	font-style:italic;
	font-size:120%;
	}	
	
/* This for the Additional Strapline */	
h5 {
    font-size: 200%;
    font-style: italic;
    text-align: right;
	/* font-family: Lucida Console, Monaco, monospace; */
	color: #aa40aa; 
	background: none repeat scroll 0% 0% #eeeeee; 
	margin-bottom: -10px;
}
	
h4.cpa	{
	letter-spacing: -1px;
	line-height: 1em;
	font-size: 175%;
	margin: 15px 0;
	}
/* === links === ... but see above under Maximenu for 'visited ==== */
a:hover, a:active, a:focus {background:transparent; color:#FFF; }
#main a:hover, #main a:active, #main a:focus {background: transparent; color:#50A020;}  // green


p.wo-p {
	text-align:right;
	padding:0px 120px 0px 0px;
	/* max-width: 580px; */
	}
p.wo_title {
	font-weight:bold; 
	text-align:left;
	color:#AA40AA;
	padding:10px 60px 0px 0px;
	}
p.wo-day {
	font-weight:bold; 
	color:#AA40AA; 
	font-size:120%;
	/* border-top:solid 1px #FF0000; */
	}

/* ====== for Home page ========= */
/* for colours see 
	www.johncfish.com/bggallery/otherchart/index.htm 
	or
	www.w3schools.com/tags/ref_colormixer.asp  */
/* for web safe fonts see
	www.w3schools.com/cssref/css_websafe_fonts.asp  */

span.home1 {
	font-family:"Comic Sans MS", cursive, sans-serif;
	color: #ff0000; /* red */
	font-size:180%;
	}
span.home2 {
	font-family:"Lucida Console", Monaco, monospace;
	color:#1010dd; /*blue */
	font-size:150%;
	}
span.home3 {
	font-family:"Arial Black", Gadget, sans-serif;
	color:#b0b0b0; /* black / grey */
	font-size:160%;
	font-style:italic;
	}
span.home4 {
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color:#aa40aa; /* site purple */
	font-size:200%;
	}
span.home5 {
	font-family:Georgia, serif;
	color:#99cc00; /* light green */
	font-size:240%;
	}
span.home6 {
	font-family:"Arial Black", Gadget, sans-serif;
	color:#ff9933; /* orange */
	font-size:220%;
	}
span.home7 {
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color:#330099; /* dark blue */
	font-size:170%;
	font-weight:bold;
	font-style:oblique;
	}
span.home8 {
	font-family:Georgia, serif;
	color:#006666; /* Green */
	font-size:240%;
	}


/*CSS FOR CALENDAR ... 4 COLUMNS */

tr.rowtop td {
	background-color: #CC9999; color: black;
}
tr.rowone td {
	background-color: #9999CC; color: black;
}
tr.rowtwo td {
	background-color: #99CC99; color: black;
}
td.nocolor {
	background-color: #c9c9c9 !important; color: black;
}



/*for the Slidehow on the Facilities pages */
.facilities-slideshow {
	margin-left: -175px !important;
}

div.modns {
	float:right;
}
.CPAfloatright{float:right;}