/* CSS for DIG252 Assignment 3 Final Website  - Kerridge O'Shea   */



/* Some browsers automatically add small margins and padding to pages. Setting margin and padding to "0" eliminates that risk.  
Choosing a sans-serif font is in keeping with best practice as users prefer sans-serif for online text (Freeman and Freeman,2005, p344) 
and Verdana is preferred(Niles, 2008) */


html {

	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	background-color: rgb(219,204,204);
}

	/* sets the style for HTML5 placeholder links (Kyrnin 2014)*/
	a {
  color: red;
  font-weight: bold;
  text-decoration: none;
}

/* sets the style for HTML5 placeholder links (Kyrnin 2014)*/
a:link {
  color: blue;
  font-weight: normal;
  text-decoration: underline;
}

address {
	clear:both;
	font-size:60%;
	margin-top:20px;
} 
/* Need to tell older browsers to treat HTML5 elements as block elements- otherwise these may be treated as inline and 
look "a mess" ” (MacDonald 2011, 58)  */	

article, aside, figure, figcaption, footer, header, hgroup, nav, section,
summary {
display: block;
}
 /* sets the width of elements for aesthetic purposes and to prevent overlong lines of text. (MacDonald 2011, 48) */
footer{
	width:800px;
	clear: left;
	margin-top: 30px;
	padding-left:20px;
}

header{
	width:800px;
	margin-bottom:0px;
}

/* The site ID is positioned as -alongside the logo- one of the dominant visual features on the page, so it is sized and weighted accordingly   */


#boxes {
	position: relative;
}

#changefont {
	font-size:10px;
}

#changefont a {
	text-decoration:none;
}


#_gsce_0{
	background-color:rgb(219,204,204);
}


/* I have floated the logo left alongside the site id in the header.  The fixing of width is necessary when floating an element
(Freeman and Freeman 2005, p 495)  */

#logo{
	float:left;
	padding: 0px 0px 0px 0px;
	width: 25%;
	}
/* sets desired element width and clearance to provide white space */
#main{
	width:800px;
}

#panelcontainer{
	background-color:rgb(219,204,204);
	width:450px;
	margin-left:200px;
	padding-top:60px;
}

#picture_show {
	padding-left:160px;
	text-align:center;
}
	
#rotary_info {
	float: left;
	width: 17%;
	padding:10px 10px 10px 10px;
	margin:10px 10px 10px 10px;
	border: solid 6px;
	border-color: silver;
}

#recruitment {
	float: left;
	width: 17%;
	padding:10px 10px 10px 10px;
	margin:10px 10px 10px 10px;
	border: solid 6px;
	border-color: silver;
}

#retention {
	float: left;
	width: 17%;
	padding:10px 10px 10px 10px;
	margin:10px 10px 10px 10px;
	border: solid 6px;
	border-color: silver;
}

#search_area {
	float:left;
	padding:0px 0px 0px 0px;
	width: 30%;
	margin-left:130px;
	}
	
#search_box {
	
}

#sidebar {
	float: left;
	width: 220px;
	text-align:left;
	margin-right: 20px;
	padding-top:30px;
	padding-left:20px;
}
	
#signature {
	float: left;
	padding:0px 0px 0px 0px;
	width: 45%;
}	

#signature_otherpages {
	float: left;
	width: 45%;
	padding-left:10px;
}

.text_content {
	text-align: center;
	width:450px;
}

#top_container{
	padding: 0px 0px 160px 0px;
	clear: both; 
}
	
#visioning {
	float: left;
	width: 17%;
	padding:10px 10px 10px 10px;
	margin:10px 10px 10px 10px;
	border: solid 6px;
	border-color: silver;
}

.copyright {
	clear: both;
	font-size:60%;
}

.decreaseFont {
	font-size:80%;
}

.gcse-search{
	background-color:rgb(219,204,204);
}

.paneltext h1{
	text-align:center;
	font-size:18px;
	margin-top:20px;
	margin-bottom:10px;
}

.text_content h2 {
    line-height:24px;
    font-size:14px;
    font-weight:700;
    color:rgb(100,150,200);
    padding-left:24px;
    cursor:pointer;
    background-image:url('../images/plus.jpg');
    background-position:left;
    background-repeat:no-repeat;
}

h2.close {
    background-image:url('../images/minus.jpg');
}

h2.useful_resources {
	text-align:left;
}

h2.other_id {
	font-size:70%;
	padding-left:10px;
}

.homepage_menu {
	clear: both;
	text-align:	center;
	margin-top: 30px;
	margin-bottom: 30px;
	text-decoration: none;
}
.home_title {
	font-size:    	150%;
	color:		black;		
	font-weight:	bold;
	text-align:	center;	
	clear:	both;
	margin-top:20px;
	margin-left:-10px;
}

.hover {
	background-color:yellow;
}

.increaseFont {
	font-size:80%;
}

.information {
	width:400px;
	text-align:left;
	padding-left:10px;
}

.other_page_menu {
	font-size:100%;
	/*clear: both; */
	text-align:	center;
	margin-top: 30px;
	margin-bottom: 30px; 
	
}

.other_page_menu a {
	text-decoration: none;
}

.recruitment{
	text-align: center;
	font-size:  140%;
	font-weight: bold;
}

.recruitment1{
	text-align: center;
}

.recruitment2{
	text-align: center;
	margin-top:30px;
}

.resetFont {
	font-size:80%;
}

.retention {
	text-align: center;
	font-size:  140%;
	font-weight: bold;
}

.retention1 {
	text-align: center;
}

.retention2 {
	text-align: center;
	margin-top:30px;
}

.rotary_info {
	text-align: center;
	font-size:  140%;
	font-weight: bold;
}

.rotary_info1 {
	text-align: center;
}

.rotary_info2 {
	text-align: center;
	margin-top: 30px;
}

.search {
	text-align: right;
	margin-right: 10px;
}

.sidebar1 {
	text-align:left;
	font-size:80%;
	list-style-type: none;
	line-height:120%;
}

.sidebar1 a {
	text-decoration:none;
}

.site_id {
	padding:	15px 25px 0px 0px;
	font-size:    	250%;
	color:		#13346A;			
	font-weight:	bold;
}

/* The tagline is positioned just below the Site ID to reinforce the role of the site (Krug 2006) and the large margin-left is used to achieve this position.
I have used a font-size of 110% to improve the legibility of the tagline. */
.tag {
	font-size:    	110%;				
	color:		#13346A;
	margin:		auto;	
}

.text_content {
	text-align:justify;
}

.useful_resources{
	text-align: left;
	font-weight: bold;
	text-decoration: none;
}

.visioning {
	text-align: center;
	font-size:  140%;
	font-weight: bold;
}

.visioning1 {
	text-align: center;
}

.visioning2 {
	text-align: center;
	margin-top:30px;
}

/* code to style tabbed panels sourced from code examples in tabbed panels tutorial (McFarland 2011, 307) */

.tabs {
	margin: 0;
	padding: 0;	
}
/* code to style tabbed panels sourced from code examples in tabbed panels tutorial (McFarland 2011, 307) */
.tabs li {
	float: left;
	list-style: none;
	padding: 0;
	margin: 0;
}
/* code to style tabbed panels sourced from code examples in tabbed panels tutorial (McFarland 2011, 307) */
.tabs a {
	display: block;
	text-decoration: none;
	padding: 3px 5px;
	background-color: rgb(110,138,195);
	margin-right: 10px;
	border: 1px solid rgb(153,153,153);
	margin-bottom: -1px;
}
/* code to style tabbed panels sourced from code examples in tabbed panels tutorial (McFarland 2011, 307) */
.tabs .active {
	border-bottom: 1px solid white;
	background-color: white;
	color: rgb(51,72,115);
	position: relative;
}
/* code to style tabbed panels sourced from code examples in tabbed panels tutorial (McFarland 2011, 307) */
.panelContainer {
	clear: both;
	margin-bottom: 25px;	
	border: 1px solid rgb(153,153,153);	
	background-color: white;
	padding: 10px;
}
/* code to style tabbed panels sourced from code examples in tabbed panels tutorial (McFarland 2011, 307) */
.panel h2 {
	color: rgb(57,78,121);
	text-shadow: none;		
}

.panel {
	padding-left:30px;
}


/* code to style tabbed panels sourced from code examples in tabbed panels tutorial (McFarland 2011, 307) */
.panel p {
	color: black;	
}