A.example1
{
    BACKGROUND-COLOR: black
}
button
{
	background-color:#FFFFCC;
	bordercolor:#FFFFFF;
	font-family:Verdana; 
	font-size:10pt;
	color:#000000;
}
option
{
	background-color:#FFFFCC;
	bordercolor:#FFFFFF;
	font-family:Verdana; 
	font-size:10pt;
	color:#000000;
}
submit
{
	background-color:#FFFFCC;
	bordercolor:#FFFFFF;
	font-family:Verdana; 
	font-size:10pt;
	color:#000000;
}
text
{
	background-color:#000000;
	bordercolor:#FFFFFF;
	font-family:Verdana; 
	font-size:10pt;
	color:#FFFFFF;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
	color: #FF0000;
	text-decoration: none;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	color: #FF0000;
	text-decoration: none;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	color: #FF0000;
	text-decoration: none;
}
h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FF0000;
	text-decoration: none;
}

/*FOOTER STYLES ADDED BY RYAN URQUHART 27 SEPT 2011*/

#ryanfooter {
	width:940px;
	height:600px;
	margin:auto;
	background-color:#000;
	color:#fff;
	padding-left:10px;
	padding-right:10px;
	padding-top:3px;
	padding-bottom:3px;
	border-radius:10px;
	-moz-border-radius:10px;
	-moz-box-shadow: 2px 2px 5px #000;
	-webkit-box-shadow: 2px 2px 5px #000;
	box-shadow: 2px 2px 5px #000;
	list-style-position: outside;
	list-style-type: none;
	list-style-image: none;
	margin-bottom:15px;
		font-family:Arial, Helvetica, sans-serif;
	font-size:12px;	
	
	
	
}

#ryanfooter h3 {
	color:#CCC;
	text-align: center;	
	text-decoration:none;
	
}

#ryanfooter a {
	color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;	
	text-decoration:none;
	text-align:left;
	
	
}

#ryanfooter a:hover{
	text-decoration:underline;	
	
}

#footerhome {
	width:200px;
	float:left;
	margin-right:20px;
	margin-left:40px;
	
}

#footercat {
	width:200px;
	float:left;
	margin-right:20px;
	
}

#footerman {
	width:200px;
	float:left;
	margin-right:20px;
	
}

#footerext{
	width:200px;
	float:left;
	margin-right:20px;
	
}

#footaddress {
	width:900px;
	text-align:center;	
	float:left;
	margin:auto;
	clear:both;
	
	
}

#footerbrowse {
	
	width:450px;
	float:left;	
	clear:both;
	text-align:center;	
	
}

#footerdetail {
	
	width:450px;
	float:left;	
	text-align:center;	
	
}

p {

	text-align:left;		
	
}


/* CSS Document CODED BY RYAN URQUHART 647 409-9349 WWW.BEARCLAWDESIGN.CA MON OCT 3 2011*/

/*                  BROWSER RESET               */

*{
	margin:0px;
	padding:0px;
	border:none;	
}


#ryansitewrap {
	width:100%;
	background-image: url(img/headerbg.png);
	background-repeat: repeat-x;	
	
}

/*                  HEADER BEGINS            */

#ryanheader {
	width:960px;
	height:173px;
	margin:auto;
	
}

#ryanheaderright {
	width:379px;
	float:right;
	
	
}

#logo {
	
	width:417px;
	float:left;
}

#custser{
	
	width:379px;
	height:48px;
	float:right;
	
	
}
	
/*                     MENU LINKS BEGIN                */	


#ryanheader a{
	margin-top:10px;
	display:block;
	float:right;
	width:124px;
	height:33px;
	text-align:center;
	line-height:33px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-decoration:none;
	-moz-transition:all .3s ease;
	-webkit-transition:all .3s ease;
	color:#000000;
	
	
	
	
}

#ryanheader a:hover{
	
	font-size:18px;
	color:#ffffff;
	
}

#aboutbutt {
	background:url(img/about.png);
	-moz-transition:all .3s ease;
	-webkit-transition:all .3s ease;	
	
	
}

#aboutbutt:hover {
	background-position: left bottom;	
	
	
}

#homebutt {
	background:url(img/home.png);	
	-moz-transition:all .3s ease;
	-webkit-transition:all .3s ease;	
	
}

#homebutt:hover {
	background-position: left bottom;	
	
	
	
}

#contactbutt {
	background:url(img/contact.png);	
	-moz-transition:all .3s ease;
	-webkit-transition:all .3s ease-in;		
	
}

#contactbutt:hover {
	background-position: left bottom;
	transition-duration:.3s;
 	transition-timing-function:ease-in;
 		
}

/*                SOCIAL MEDIA BUTTONS               */

#socialmedia {
	width:310px;
	height:38px;
	float:right;

	
	
	
	
}

#socialmedia a{
	width:50px;
	margin-top:-1px;
	-moz-transform:scale(.85);	
	-webkit-transform:scale(.85);	
	opacity:1;
	-moz-transition:all .3s ease;
	-webkit-transition:all .3s ease;

	
}

#socialmedia a:hover{
	-moz-transform:scale(1);	
	-webkit-transform:scale(1);	
	opacity:1;	
	
}

/*                MAIN MENU STARTS                */

#goldmenu {
	clear:both;
	width:960px;
	
	
}

#goldmenu a{
	margin-top:0px;
	display:block;
	width:137px;
	height:33px;
	background-image:url(img/goldbutton.png);
	-moz-transition:all .3s ease;
	-webkit-transition:all .3s ease;
	-moz-text-shadow: -2px 2px 5px #000000;
	-webkit-text-shadow: -2px 2px 2px #000000;
	text-shadow: -2px 2px 2px #000000;
	color:#ffffff;
	
}

#goldmenu a:hover{
	background-position: left bottom;	
	
}

#leftround { 
	border-radius:0px 5px 0px 0px;



}


#rightround {
	border-radius:5px 0px 0px 0px;
	
	
	
}

/*                      BODY BEINGS HERE               */

#bodytop {
	
	width:960px;
	margin:auto;	
	
	
}

/*                        4 BOXES                     */


#boxwrap {
	margin-top:10px;
	width:960px;
	margin:auto;
	
	
}

#redbox a{
	margin-top:10px;
	margin-right:20px;
	width:225px;
	height:215px;
	float:left;
	background-image: url(img/red.jpg);
	color:#ffffff;
	-moz-text-shadow: -2px 2px 5px #000000;
	-webkit-text-shadow: -2px 2px 2px #000000;
	text-shadow: -2px 2px 2px #000000;
	text-align:center;
	text-decoration:none;
	font-size:24px;
	padding-top:35px;
		-moz-transition:all .3s ease;
	-webkit-transition:all .3s ease;	
	
}

#redbox a:hover{
	margin-top:20px;
	
}


#yellowbox a{
	margin-top:10px;
	margin-right:20px;
	width:225px;
	height:215px;
	float:left;
	background-image: url(img/yellow.jpg);	
	color:#ffffff;
	-moz-text-shadow: -2px 2px 5px #000000;
	-webkit-text-shadow: -2px 2px 2px #000000;
	text-shadow: -2px 2px 2px #000000;
	text-align:center;
	font-size:24px;
	padding-top:35px;
	text-decoration:none;
		-moz-transition:all .3s ease;
	-webkit-transition:all .3s ease;	
	
}

#yellowbox a:hover{
	margin-top:20px;
	
}

#bluebox a{
	margin-top:10px;
	margin-right:20px;
	width:225px;
	height:215px;
	float:left;
	background-image: url(img/blue.jpg);
	color:#ffffff;
	-moz-text-shadow: -2px 2px 5px #000000;
	-webkit-text-shadow: -2px 2px 2px #000000;
	text-shadow: -2px 2px 2px #000000;
	text-align:center;
	font-size:24px;
	padding-top:35px;
	text-decoration:none;	
		-moz-transition:all .3s ease;
	-webkit-transition:all .3s ease;
	
}

#bluebox a:hover{
	margin-top:20px;
	
}

#purplebox a{
	margin-top:10px;
	width:225px;
	height:215px;
	float:left;
	background-image: url(img/purple.jpg);
	color:#ffffff;
	-moz-text-shadow: -2px 2px 5px #000000;
	-webkit-text-shadow: -2px 2px 2px #000000;
	text-shadow: -2px 2px 2px #000000;
	text-align:center;
	font-size:24px;
	padding-top:35px;
	text-decoration:none;
		-moz-transition:all .3s ease;
	-webkit-transition:all .3s ease;	
	
	
}

#purplebox a:hover{
	margin-top:20px;
	
}