/*importing the reset CSS*/
@import url('reset.css');

body {
	background-image: url(/images/background.png);
}














      #board { position: relative; }
      
      td { color: #FFF; font-family: "museo-slab"; font-size: 12px; margin: 0; padding-bottom: 25px; line-height: 18px; }
      th { color: #FFF; font-family: "museo-slab"; text-align: left; width: 240px; padding: 165px 25px 5px 20px; border-bottom: 1px #FFF solid;}
      tr { width: 100px; height: 80px; padding: 0; }

      
      




      



                 
#type {
    width: 75px;
    height: 75px;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#880000FF, endColorstr=#880000FF);
}

#bug { background-image: url(/images/bug.png); }
#dark { background-image: url(/images/dark.png); } 
#dragon { background-image: url(/images/dragon.png); } 
#electric { background-image: url(/images/electric.png); } 
#fighting { background-image: url(/images/fighting.png); }
#fire { background-image: url(/images/fire.png); } 
#flying { background-image: url(/images/flying.png); } 
#ghost { background-image: url(/images/ghost.png); } 
#grass { background-image: url(/images/grass.png); }
#ground { background-image: url(/images/ground.png); } 
#ice { background-image: url(/images/ice.png); }
#normal { background-image: url(/images/normal.png); } 
#poison { background-image: url(/images/poison.png); } 
#psychic { background-image: url(/images/psychic.png); }
#rock { background-image: url(/images/rock.png); }
#steel { background-image: url(/images/steel.png); } 
#water { background-image: url(/images/water.png); }


#bug, #dark, #dragon, #electric, #fighting, #fire, #flying, #ghost, #grass, #ground, #ice, #normal, #poison, #psychic, #rock, #steel, #water {
	width: 75px;
    height: 75px;
    background-size: 75px 75px;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#880000FF, endColorstr=#880000FF);
}
                 
#main {
	margin: 0;
}

#board {
	width: 1020px;
	height: 700px;
	margin-top: 15px;
}

#board, #list {
	float: left;
	clear: none;
}

#type, #bug, #dark, #dragon, #electric, #fighting, #fire, #flying, #ghost, #grass, #ground, #ice, #normal, #poison, #psychic, #rock, #steel, #water, .obstacle {
	position: absolute;
}

#col1 {
	width: 100px;
	height: 25px;
}



img {
	width: 75px;
	height: 75px;
} 









a.bug {
width: 75px;
height: 75px;
background-image : url(images/bug.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.bug:hover {
width: 75px;
height: 75px;
background-image : url(images/bugG.png);
background-repeat: no-repeat;
}


a.dark {
width: 75px;
height: 75px;
background-image : url(images/dark.png);
background-size: 75px 75px;
background-repeat: no-repeat;
} 

a.dark:hover {
width: 75px;
height: 75px;
background-image : url(images/darkG.png);
background-repeat: no-repeat;
}


a.dragon { width: 75px;
height: 75px;
background-image : url(images/dragon.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.dragon:hover {
width: 75px;
height: 75px;
background-image : url(images/dragonG.png);
background-repeat: no-repeat;
}


a.electric { width: 75px;
height: 75px;
background-image : url(images/electric.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.electric:hover {
width: 75px;
height: 75px;
background-image : url(images/electricG.png);
background-repeat: no-repeat;
}


a.fighting { width: 75px;
height: 75px;
background-image : url(images/fighting.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.fighting:hover {
width: 75px;
height: 75px;
background-image : url(images/fightingG.png);
background-repeat: no-repeat;
}


a.fire { width: 75px;
height: 75px;
background-image : url(images/fire.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.fire:hover {
width: 75px;
height: 75px;
background-image : url(images/fireG.png);
background-repeat: no-repeat;
}


a.flying { width: 75px;
height: 75px;
background-image : url(images/flying.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.flying:hover {
width: 75px;
height: 75px;
background-image : url(images/flyingG.png);
background-repeat: no-repeat;
}


a.ghost { width: 75px;
height: 75px;
background-image : url(images/ghost.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.ghost:hover {
width: 75px;
height: 75px;
background-image : url(images/ghostG.png);
background-repeat: no-repeat;
}


a.grass { width: 75px;
height: 75px;
background-image : url(images/grass.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.grass:hover {
width: 75px;
height: 75px;
background-image : url(images/grassG.png);
background-repeat: no-repeat;
}


a.ground { width: 75px;
height: 75px;
background-image : url(images/ground.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.ground:hover {
width: 75px;
height: 75px;
background-image : url(images/groundG.png);
background-repeat: no-repeat;
}


a.ice { width: 75px;
height: 75px;
background-image : url(images/ice.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.ice:hover {
width: 75px;
height: 75px;
background-image : url(images/iceG.png);
background-repeat: no-repeat;
}


a.normal { width: 75px;
height: 75px;
background-image : url(images/normal.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.normal:hover {
width: 75px;
height: 75px;
background-image : url(images/normalG.png);
background-repeat: no-repeat;
}


a.poison { width: 75px;
height: 75px;
background-image : url(images/poison.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.poison:hover {
width: 75px;
height: 75px;
background-image : url(images/poisonG.png);
background-repeat: no-repeat;
}


a.psychic { width: 75px;
height: 75px;
background-image : url(images/psychic.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.psychic:hover {
width: 75px;
height: 75px;
background-image : url(images/psychicG.png);
background-repeat: no-repeat;
}


a.rock { width: 75px;
height: 75px;
background-image : url(images/rock.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.rock:hover {
width: 75px;
height: 75px;
background-image : url(images/rockG.png);
background-repeat: no-repeat;
}


a.steel { width: 75px;
height: 75px;
background-image : url(images/steel.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.steel:hover {
width: 75px;
height: 75px;
background-image : url(images/steelG.png);
background-repeat: no-repeat;
}


a.water { width: 75px;
height: 75px;
background-image : url(images/water.png);
background-size: 75px 75px;
background-repeat: no-repeat;
}

a.water:hover {
width: 75px;
height: 75px;
background-image : url(images/waterG.png);
background-repeat: no-repeat;
}






















































/*style the main menu*/
.nav-dropdown {
	margin:0;
	padding:0;
	position: absolute;
	top: 23px;
	left: 1000px;
}

.nav-dropdown li {
	color: #FFF;
	font-family: "museo-slab";
	font-size: 15px;
	list-style:none;
	float:left;
	text-transform: lowercase;
}

.nav-dropdown li a:link, li a:visited {
	width: 50px;
	height: 20px;
	display:block;
	text-decoration:none;
	text-align: center;
	background-color:#414141;
	padding: 6px 20px 6px 20px;
	margin:0;
	color: #FFF;
}

.nav-dropdown li a:hover {
	color: yellow;
	background-color: #000;	
}

/*style the sub menu*/
.nav-dropdown li ul {
	position:absolute;
	visibility:hidden;
	margin:0;
	padding:0;
}

.nav-dropdown li ul li {
	display:inline;
	float:none;
}

.nav-dropdown li ul li a:link, {
	background-color: #000;
	width:auto;
}

.nav-dropdown li ul li a:hover {
	background-color: #000;	
}


















#linkcontent {
	font-family: "museo-slab";
	font-size: 10px;
	font-weight: bold;
	line-height: 15px;
}







#refresh {
	position: absolute;
	top: 8px;
	left: 1120px;
	width: 50px;
	height: 20px;
	text-decoration:none;
	text-align: center;
	background-color:#414141;
	padding: 7px 20px 4px 20px; 
	margin:0;
    border-radius: 3px;
}










#container {
	margin: 100px 0px 100px 100px;
}

#info {
	color: #939393;
	font-family: "museo-slab";
	font-size: 13.5px;
	font-weight: lighter;
	line-height: 20px;
	width: 400px;
	position: absolute;
	left:970px;
	top:227px;
}

#info b {
	font-weight: bold;
}

#info a {
	color: #FFF;
	text-transform: lowercase;
	text-decoration: none;
}

#info a:hover {
	color: #909090;
}

#TypeInfo {
	color: #909090;
	font-family: "museo-slab";
	font-size: 13.5px;
	font-style: italic;
	font-weight: lighter;
	line-height: 19px;
	width: 400px;
	position: absolute;
	top: 60px;
	left: 43px;
}

#instructions {
	color: #a9a9a9;
	font-family: "museo-slab";
	font-size: 11px;
	font-weight: lighter;
	line-height: 20px;
	width: 400px;
	position: absolute;
	left:470px;
	top:550px;
}

#instructions b {
	color: #bfbfbf;
	font-weight: bold;
	letter-spacing: .1em;
	text-transform: uppercase;
}

		#quote p {
			margin: 0 0 0 0;
		}
		
		#quote h1 {
			color: #c1d13a;
		}

#nav-bar {
	margin-top: 15px;
	width: 100%;
	height: 50px;
}

#nav {
	font-family: "museo-slab";
}

		#nav h1 {
			color: #FFF;
			font-size: 24px;
			padding: 11px 0 0 40px;
			float: left;
			font-weight: bold;
			letter-spacing: .1em;
		}
		
		#nav h2 {
			font-size: 24px;
			padding: 11px 0px 0px 6px;
			float: left;
			font-weight: bold;
			letter-spacing: .1em;
		}

		#nav a {
			color: #FFF;
			font-size: 15px;
			text-transform: lowercase;
			text-decoration: none;
			margin-right: 50px;
			margin-top: 15px;
			float: right;
		}
		
		#nav a:hover {
			color: #909090;
			
		}
		
		#nav a.current {
			color: #909090;
		}

#content {
	font-family: Arial, Helvetica, sans-serif;
	width: 650px;
	padding: 30px;
	font-size: 12px;
	line-height: 80px;
}

#aboutcontent {
	width: 650px;
}

		#aboutcontent p {
			background-color: #c1d13a;
			color: #333;
			font-family: Tahoma, Geneva, sans-serif;
			font-size: 14px;
			line-height: 25px;
			padding: 20px;
			margin-bottom: 15px;
			border-bottom-right-radius: 30px;
		}
		
		#aboutcontent em {
			font-style: italic;
		}
		
		#aboutcontent strong {
			font-size: 16px;
			font-weight: bold;
		}
		
		#aboutcontent h3 {
			font-style: italic;
		}
		


.social {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	float: left;
}

#dribbble { background-image: url(../imgs/socialicons.png); background-position: 0 0; }
#pinterest { background-image: url(../imgs/socialicons.png); background-position: 0 -50px; }
#twitter { background-image: url(../imgs/socialicons.png); background-position: 0 -100px; }

a.social#dribbble:hover { background-position: -50px 0; }
a.social#pinterest:hover { background-position: -50px -50px; }
a.social#twitter:hover { background-position: -150px -100px; }

#blogcontent {
	background-color: #FFF;
	width: 650px;
	padding-bottom: 50px;
}
		  
		  #blogcontent p {
			  color: #333;
			  font-family: Arial, Helvetica, sans-serif;
			  font-size: 12px;
			  line-height: 18px;
			  padding: 0 50px 20px 100px;
		  }
		  
		  #blogcontent h1 {
			  background-color: #c1d13a;
			  color: #333;
			  font-family: Arial, Helvetica, sans-serif;
			  font-size: 16px;
			  font-style: italic;
			  font-weight:bold;
			  padding: 10px 20px 10px 20px;
			  width: 200px;
			  border-bottom-right-radius: 30px;
			  margin-top: 30px;
		  }
		  
		  #blogcontent h5 {
			  color: #999;
			  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			  font-size: 10px;
			  line-height: 15px;
			  padding: 15px 0 10px 20px;
		  }
		  
		  #blogcontent a {
			  color: #999;
			  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			  font-size: 10px;
			  text-align: right;
			  text-decoration: none;
			  float: right;
			  margin-right: 50px;
		  }
		  
		  #blogcontent a:hover {
			  color: #333;
		  }
		  
		  .blogtitle {
			  text-align: left;
		  }
		
.face {
	float: left;
	padding-right: 10px; 
}

#clear {
	clear: both
}
		
#workcontent {
	width: 650px;
}

#workcontentdisplay {
	background-color: #FFF;
	width: 650px;
	padding: 20px 20px 30px 20px;
}

#workcontentdisplay p {
	background-color: #c1d13a;
	color: #333;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	line-height: 20px;
	width: 550px;
	padding: 50px;
}

#workcontentdisplay h1 {
	color: #333;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
}

#workcontentdisplay strong {
	color: #000;
	font-weight: bold;
}

		  .workcontentinfo {
			  position: absolute;
			  top: 0px;
			  left: 335px;
			  width: 265px;
			  height: 360px;
			  background-color: #c1d13a;
			  float: right;
		  }
		  
		  .workcontentinfo p {
			  color: #c1d13a;
			  font-family: Arial, Helvetica, sans-serif;
			  font-size: 14px;
			  padding: 10px;
		  }
		  
		  .workcontentinfo h1 {
			  background-color: #c1d13a;
			  color: #333;
			  font-family: Tahoma, Geneva, sans-serif;
			  font-size: 10px;
	 	      line-height: 20px;
			  padding: 30px;
			  text-transform: lowercase;
		  }

.filter {
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 20px;
}

.thumbnail {
	display: block;
	width: 600px;
	height: 100px;
	margin-bottom: 20px;
}

#t01 { background-image: url(/imgs/thumbnail.jpg); background-position: 0 0; }
#t02 { background-image: url(/imgs/thumbnail.jpg); background-position: 0 -100px; }
#t03 { background-image: url(/imgs/thumbnail.jpg); background-position: 0 -200px; }
#t04 { background-image: url(/imgs/thumbnail.jpg); background-position: 0 -300px; }
#t05 { background-image: url(/imgs/thumbnail.jpg); background-position: 0 -400px; }
#t06 { background-image: url(/imgs/thumbnail.jpg); background-position: 0 -500px; }
#t07 { background-image: url(/imgs/thumbnail.jpg); background-position: 0 -600px; }
#t08 { background-image: url(/imgs/thumbnail.jpg); background-position: 0 -700px; }

.thumbnail#t01:hover { background-position: -600px 0; }
.thumbnail#t02:hover { background-position: -600px -100px; }
.thumbnail#t03:hover { background-position: -600px -200px; }
.thumbnail#t04:hover { background-position: -600px -300px; }
.thumbnail#t05:hover { background-position: -600px -400px; }
.thumbnail#t06:hover { background-position: -600px -500px; }
.thumbnail#t07:hover { background-position: -600px -600px; }
.thumbnail#t08:hover { background-position: -600px -700px; }

.logo {
	float: right;
	margin-left: 10px;
}