two css on one page...i don't know how to do this properly

Just getting started, trying to throw together a simple website. I have created pages with 1 css script, but now I want to combine them, and don't know how to do this...any help would be greatly apprecited, the more explicit, the better!

Here's what I want for my background/menu, and the page that I made to provide the html code:
stonezoneco.com/opentrial.html
Here's what I want for my gallery, which would be inserted below the menu:
stonezoneco.com/gallery.html

Here's my failed attempt of combining them:
stonezoneco.com/gallery2.html

And here are my CSS scripts:

css/style.css

body { width: 100%; height:1000PX;}
#menu {width: 100%; height: 100px;}
#gallery {width: 100%; height: 900px;}

css/hoverbox.css

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

/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/

a
{
text-decoration: none;
}

body
{
background: #fff;
color: #777;
margin: 0 auto;
padding: 50px;
position: relative;
width: 620px;
}

h1
{
background: inherit;
border-bottom: 1px dashed #ccc;
color: #933;
font: 17px Georgia, serif;
margin: 0 0 10px;
padding: 0 0 5px;
text-align: center;
}

p
{
clear: both;
font: 10px Verdana, sans-serif;
padding: 10px 0;
text-align: center;
}

p a
{
background: inherit;
color: #777;
}

p a:hover
{
background: inherit;
color: #000;
}

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
cursor: default;
list-style: none;
}

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}

.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}

.hoverbox .preview
{
border-color: #000;
width: 250px;
height: 175px;

css/tree_frog_horizontal.css

#outer {width:880px; height:600px; border:1px solid #ddd;}

#menu {list-style-type:none; padding:0 0 20px 0; margin:0 auto; width:800px; position:relative;}
#menu ul {list-style-type:none; padding:0; margin:0; background:#fff;}
#menu li {float:left; background:#657; position:relative;}
#menu li.sub {background:#d30; margin-right:1px; }

#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none; text-align:center; cursorointer; font-weight:bold;}

#menu ul li a {text-align:left; text-indent:5px;}

#menu ul {position:absolute;left:-9999px;}
#menu li.click ul ul {position:absolute;left:-9999px;}
#menu li.click ul li.hover ul ul {position:absolute;left:-9999px;}

#menu li.hover {background:#663; z-index:500;}
#menu li.click {background:#663;}

#menu li.click ul li {margin-top:1px; border-right:0;}

#menu li.click ul {left:0px; top:24px; background:#fff; border-right:1px solid #fff;}
#menu li.click ul li.hover ul,
#menu li.click ul li.hover ul li.hover ul {left:110px; top:-1px; border-left:1px solid #fff; background:#fff;}

#menu li.click ul li.hover ul li {background:#c60;}
#menu li.click ul li.hover ul li.hover ul li {background:#780; z-index:500;}

#menu li.click ul li.hover ul li.hover {z-index:500; background:#fa4;}
#menu li.click ul li.hover ul li.hover a {color:#000;}

#menu li.click ul li.hover ul li.hover ul li.hover {background:#aa0;}
#menu li.click ul li.hover ul li.hover ul li.hover a {color:#fff;}

#outer img.frog {display:block; float:left; margin:0 20px 20px 0;}
#outer p {margin:0px; padding:17px 20px 0 0; color:#000; font-size:12px; font-family:arial, sans-serif; text-align:justify;}
​