/* Formatting for links */
A { text-decoration:none;}
A:link	{color:blue;}
A:visited{color: purple;}
A:hover	{text-decoration:underline}

/* Setup the body, background, colours etc */
body 
{ 
	background-color:#e3f3cb; 
	background-image: url(bg.png); 
	text-align:center; 
	font-family: Calibri, sans-serif; 
	padding:0px;	
}

/* Setup the formatting, outline etc for our divs */
body div 
{ 
	border:5px solid black;
	background-color:#FFFFFF;
	-moz-border-radius: 16px;-webkit-border-radius: 16px; 
	border-radius: 16px 16px 16px 16px; 
	margin-left:auto;margin-right:auto; 
	-moz-box-shadow: 8px 5px 5px grey;
	-webkit-box-shadow: 8px 5px 5px grey;
	box-shadow: 8px 5px 5px grey;
}


/*indent headings a little */
h4 {padding-left:20px;}
h1 {padding-left:30px;}
h2 {padding-left:30px;}
/* Formatting for the header */
body div#header {text-align:center; }
/* Dont want a border on the header image
body div#header img {border:0px;-moz-border-radius: 0px;-webkit-border-radius: 0px; padding: 0px; border-radius: 0x 0x 0px 0px; }

/* Remove padding and margin from the header menu */
body div#header ul 
{
	padding: 0px;
	margin:0px
}
/* and each menu entry - this will be the seclected one */
body div#header ul li 
{
	margin: 0px;
	padding-left: 6px;
	padding-right: 6px;
	display: inline;
	font-weight: bold;
}
/* and the non selected one */
body div#header ul li a  {
	font-weight: normal;
}

/* Formatting for the footer */
body div#footer {text-align: right; margin-bottom: 0px;}
body div#footer p { margin-top :0px; margin-bottom :0px; margin-right:20px;}

/* Formatting for the content */

/* we want text on the left */
body div#content
{
  text-align:left; 
  overflow:auto;
}

/* setup the border for any content images */
body div#content img 
{ 
	border:3px solid; 
	border-color:#111;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px; 
	border-radius: 16px 16px 16px 16px;
	float: right; 
	margin :20px; 
	max-width: 50%; 
/*	width: 448px; */
/*	height: 299px;*/
	-moz-box-shadow: 8px 5px 5px grey;
	-webkit-box-shadow: 8px 5px 5px grey;
	box-shadow: 8px 5px 5px grey;
}


/* nice chunk margin for paragraphs of text */
body div#content p { margin :20px }

/* scale the header with the page, but keep some spacing at the side for now */
body div#header img 
{ 
	max-width: 80%; width: 750px; 
	/*height: 166px;*/
}
body div#header hr 
{ 
	max-width: 85%; width: 800px;
}

/* nice chunky margins on large screens */
body div { margin-bottom:20px; margin-top:20px; width: 90%; }

/* no border images, basically just the kennel club logo at the moment */
body div#content img.noborder {
	border:0px;-moz-border-radius: 0px;-webkit-border-radius: 0px; padding: 0px; border-radius: 0px 0px 0px 0px; 
	float:none; 
	margin-left:0px;
	margin-right:0px;
	width: 400px; 
	/*height: 166px;*/
	max-width: 90%;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* dont float gallery images */
body div#content ul.gallery li img  { float: none; }


/* make sure each gallery item has a small amount of padding */
body div#content ul.gallery li  
{  
	float: none; 
	margin: 0px;
	padding-left: 6px;
	padding-right: 6px;
	display: inline;
}
/* we dont want a border around the rainbow bridge div itself */
.RainbowBridge {
	border:0px;-moz-border-radius: 0px;-webkit-border-radius: 0px; 
	padding: 0px; 
	border-radius: 0px 0px 0px 0px; 
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* the header on the rainbow bridge page gets some special formatting */
.RainbowBridge p:first-child { color: #006600; font-weight:bold; font-size: 1.4em;}
/* and the last line, the author line is italic and right justified */
.RainbowBridge p:last-child { font-style: italic; text-align:right; }



/* Handle large screen */
@media all and (min-width: 1024px) 
{ 
	/* make out menu font slightly larger */
	body div#header ul li 
	{ 
		font-size: 1.2em; 
	}
}

@media all and (min-width: 500px) and (max-width: 1023px) 
{ 
	/* shrink our margins on small screens so they can see more in the page */
	body div { width: 99%; margin-bottom:10px; margin-top:10px }	
}

@media all and (max-width: 499px)
{ 

	/* shrink our margins on small screens so they can see more in the page */
	body div { width: 99%; margin-bottom:10px }
	
	/* page at its smallest so make header larger relative to page (dont want it too small */
	body div#header  img { max-width: 90%;}
	body div#header   hr { max-width: 95%; }

	body div#content ul.gallery  { padding-left:5px; padding-right:5px;}
	body div#content ul.gallery li  { display: block; max-width: 80%; margin-left:auto;margin-right:auto; margin-top:0px; margin-bottom:0px;}
	
	body div#content img { float: none; display: block; max-width: 80%; margin-left:auto;margin-right:auto; margin-top:20px; margin-bottom:20px;}
}