/* 
 * CSS file for Youth Ballet and Contemporary Dance of Saskatchewan
 * 
 * by D. H. Hepting, May 2010
 */
 
/* 
 * anchor specifiers must appear in this order: link, visited, hover, active
 * - otherwise they will not work
 */
a:link {outline:none; color: white; text-decoration: none}
a:visited {outline:none;color: silver; text-decoration: none}
a:hover {outline:none; color: yellow; text-decoration: none}
a:active {outline:none; text-decoration: none}

/* background for all pages is grey */
body 
{ 
background-color: #7e7e7e; 
}

/* turn off default borders for images */
img
{
border-style: none;
text-decoration: none;
} 

/* div to hold page contents, pc = page container */
#pc{
 	background-color: black;
 	position: relative;
	text-align: left;
	font-family: serif;
	margin-bottom: auto;
	margin-top: auto;
	border-style: ridge;
	border-width: medium;
	color: #fffafd;
	margin-left: auto;
	margin-right: auto;
	height: 600px;
	width: 800px;
}

/* div to hold text - within the 800x600 page */
#text {
	font-size: medium;
	border-spacing: 0px 0px;
	border-left-style: none;
	border-bottom-style: none;
	border-top-style: none;
	padding: 10px;
	height: 540px;
	width: 740px;
	left: 20px;
	top: 40px;
	display: block;
	position: absolute;
}

/* div to hold longer text - pc long. */
#pcl{
	background-color: black;
 	position: relative;
	text-align: left;
	font-family: serif;
	margin-bottom: auto;
	margin-top: auto;
	border-style: ridge;
	border-width: medium;
	color: #fffafd;
	margin-left: auto;
	margin-right: auto;
	height: 800px;
	width: 800px
}

/* div to hold text - within the longer 800x800 page */
#textl {
	border-spacing: 0px 0px;
	border-left-style: none;
	border-bottom-style: none;
	border-top-style: none;
	padding: 10px;
	height: 740px;
	width: 740px;
	left: 20px;
	top: 40px;
	display: block;
	position: absolute;
}

/* div to hold even longer text - provided by custom search engine (google) */
#pccse{
	background-color: black;
 	position: relative;
	text-align: left;
	font-family: serif;
	margin-bottom: auto;
	margin-top: auto;
	border-style: ridge;
	border-width: medium;
	color: #fffafd;
	margin-left: auto;
	margin-right: auto;
	height: 1750px;
	width: 800px
}

/* mosaic div for homepage */
#mosaic {
	float: none;
	display: inline;
	left: 10px;
	top: 56px;
	position: absolute;
	background-color: #111111;
	height: 480px;
	width: 780px;
}

/* div for upper navigation bar */
#unavbar{
font-size: medium;
font-variant: small-caps;
padding-top: 5px;
padding-bottom: 5px;
border-bottom-width: 2px;
border-bottom-style: ridge;
position: absolute; 
left: 0; 
width: 100%; 
top: 0;
text-decoration: none;
margin-top: 10px;
margin-bottom: 10px;
font-family: serif;
color: white;
	background-color: black;
	margin-left: 0px;
	margin-right: 0px;
	text-align: center
	
}

/* div for lower navigation bar - rarely used */
#lnavbar{
padding-top: 5px;
padding-bottom: 5px;
border-top-width: 2px;
border-top-style: ridge;
position: absolute; 
left: 0; 
width: 100%; 
bottom: 0;
text-decoration: none;
margin-top: 10px;
font-family: serif;
color: white;
	background-color: black;
	margin-left: 0px;
	margin-right: 0px;
	text-align: center
	
}

/* background div for bio page */
#bioback {
	background-color: #333333;
	left: 100px;
	top: 100px;
	height: 400px;
	width: 600px;
	position: absolute;
}

/* photo div for bio page */
#photo {
	visibility: visible;
	border-width: 2px;
	border-style: groove;
	height: 150px;
	width: 120px;
	left: -20px;
	top: -20px;
	position: relative;
	display: inline-table;
}

/* bio div for bio page */
#bio {
	top: -100px;
	left: 120px;
	border-style: groove;
	border-width: 2px;
	background-color: #666666;
	visibility: visible;
	text-align: left;
	padding: 10px;
	position: relative;
	height: 300px;
	width: 500px;
}

/* div for calendar placement */
#cal {
	display: block;
	position: relative;
	left: 10px;
	top: 50px;
}

/* div for map placement */
#map {
	border-style: groove;
	border-width: 2px;
	left: 157px;
	display: block;
	position: relative;
	top: 5px;
}

/*custom search engine stuff (google) */
#cse-form {
	display: block;
	position: relative;
	left: 10px;
	top: 50px;
}

/*custom search engine stuff (google) */
#cse-results {
	width: 780px;
	height:540px;
	display: block;
	position: relative;
	left: 10px;
	top: 40px;
}

/* div for facebook widget placement */
#fb {
	left: 10px;
	top: 50px;
	position: relative;
	height: 400px;
	width: 780px;
	margin-right: auto;
	margin-left: auto;
}

/* div for blog button */
#blogbutton {
	border-style: inset;
	font-variant: small-caps;
	font-family: serif;
	line-height: normal;
	text-align: center;
	left: 10px;
	height: 40px;
	width: 774px;
	background-color: #666666;
	position: relative;
	top: 30px;
}

/* div for blog page */
#blogpage {
	position: relative;
	display: block;
	left: 10px;
	top: 50px;
}

/* div for twitter widget placement */
#twit {
	position: relative;
	left: 10px;
	top: 50px;
}

/* special formatting for a link - click me! */
#button {
	font-weight: bold;
	padding: 4px;
	background-color: #666666;
}
#history {
	padding: 10px;
	border-width: 2px;
	bottom: 6px;
	visibility: visible;
	background-color: #4c4c4c;
	border-style: groove;
	position: absolute;
	left: 24px;
	height: 18px;
	width: 720px;
}
.textimg {
	vertical-align:middle;
}