/* CSS Document */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	
}	
body {
	line-height: 1;
	background-image:url(images/grade.jpg);
	}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*all above is the reset*/



body{background-color:#F8F8F8 ;
background-position:top;
}

#header li {
padding:0;
margin:0;
}

#logo{
}

#logobar{ 
position:relative;
top:31px;
height:48px;
background-color:#D8D8D8;
z-index:-99;
}

#logo img{
height:100px;
float:left;
margin: 5px 0 0 0px;
}



#mylist{
	width:950px;
	margin: 0 auto 0 auto;
}

#test{
 	background-color:#CC33CC;
	width:100px;
	height:100px;
}

#mylist li{
display:inline;
}

#button1, #button2, #button3,#button4, #button5{
float:left;
margin:30px 0px 80px 40px;
display:block;
height:400px;
width:150px;
}

#button1 a, #button2 a, #button3 a,#button4 a, #button5 a{
display:block;
height:400px;
}

#button1 {
	margin-left:20px;
	background-image:url(images/button1.jpg);
}

#button1:hover{
	background-image:url(images/button1fade1.jpg);
}

#button2 {
	background-image:url(images/button2.jpg);
}

#button2:hover{
	background-image:url(images/button2fade2.jpg);
}

#button3 {
	background-image:url(images/button3.jpg);
}

#button3:hover{
	background-image:url(images/button3fade3.jpg);
}

#button4 {
	background-image:url(images/button4.jpg);
}

#button4:hover{
	background-image:url(images/button4fade.jpg);
}

#button5 {
	background-image:url(images/button5.jpg);
}

#button5:hover{
	background-image:url(images/button5fade.jpg);
}


#banner {
height:100px;
width:1263px;
margin:0px 0 0 0;
}

#gallerycontent{
width:1117px;
height:500px;}

#banner2 {
text-align:center;
height:30px;
width:1127px;
margin:0px 0 0 0px;
}

#banner2 ul{
text-align:center;
width:400px;
margin:auto;
}

#banner2 ul li{
text-align:center;
display:inline;
margin:auto;
}

#bigGalleryImage{
position:absolute;
left:700px;
top:80px;
float:right;
width:500px;
height:500px;
background-color:#CCCCCC;
margin:53px 0px 0 0;
}

imgGalleryBox {
min-width:1500px;
}


#image{
position:absolute;
margin:50px 10px 0 0;
left:180px;
width:320px;
height:320px;
background-color:#CCCCCC;
}

#aboutme{
padding:15px 5px 15px 5px;
position:absolute;
margin:50px 0 0 10px;
left:500px;
width:600px;
height:290px;
background-color:#FFFFFF;
font-family:sans-serif;
text-shadow:Black;
color:#999999;
text-align:justify;
}

#smallImageGalleryList{
float:left;
	width:600px;
	margin:20px 0 0 80px;
}

#smallImageGalleryList li{
	display:inline;
}

#smallImageGalleryList li img{
	margin:5px 5px 5px 5px;
	height:100px;
	width:100px;
}

#card{
text-align:center;
margin:60px 0 0 0;
}

#footer{
height:70px;
width:1109px;
margin:680px 0 0px 85px;
background-color:#CCCCCC;
}
.clear{
clear:both;
}

#title{
font:Verdana, Arial, Helvetica, sans-serif;
font-size:67px;
font-style:italic;
margin:50px 0 0 170px;
color:#bdbdbd;