/* general styling for HTML tags */

html, body
{
margin:0;
padding:0;
border-style:none;
}

body
{
background:#fff url(../graphics/body_bg.jpg) repeat-x;
font:80% verdana, "trebuchet ms", sans-serif;
text-align:left;
margin:0 0 5px 0;
color:#000;
}

/* main paragraph styles */
p, p.noindent
{
margin:5px 10px 5px 20px;
padding-bottom:5px;
line-height:18px;
text-indent:15px;
}

p.noindent
{text-indent:0;}

p.center
{
text-align:center;
text-indent:0;
font-weight:bold;
}

p.direction
{
color:#aaa;
font:italic bold 14px georgia, "times new roman", serif;
text-indent:0;
margin-bottom:0;
}

/* header tag default syle formatting - individual h(x) tags can be styled separately */

h1, h2, h3, h4, h5, h6
{
font:bold 80% arial, verdana, sans-serif;
text-align:center;
margin:5px 30px;
padding-bottom:5px;
}

h1
{
margin-top:15px;
font-size:25px;
}

h2
{font-size:20px;}

h3
{font-size:18px;}

h3.left
{
font-size:14px;
text-align:left;
color:#3d02a0;
}

h4
{font-size:15px;}

h4.left
{
font-size:13px;
text-align:left;
}

h5
{font-size:11px;}

h6
{font-size:10px;}

a, a:visited
{
text-decoration:underline;
color:#b11e0d;
font-weight:bold;
}

a:hover, a:active
{color:#435152;}

/* special listbox for ordered/unordered lists to indent properly on page */

ul.listbox, ol.listbox
{
width:500px;
margin:0 auto 15px auto;
}

ul.listbox li
{
list-style-image:url(../graphics/rt_arrow.gif);
padding-bottom:4px;
font-size:13px;
}

ol.listbox li
{
padding-bottom:4px;
font-size:13px;
list-style-type: decimal;
}

/* removes border around linked images */
img
{border-style:none;}

div.imgcenter
{
display:block;
text-align:center;
margin:10px auto;
}

/* text formatting classes start here */

*.bold
{font-weight:bold;}

*.italic
{
font-style:italic;
text-decoration:none;
}

*.strike
{
font-weight:bold;
text-decoration:line-through;
}

*.symbol
{
color:#3d02a0;
font-weight:bold;
font-size:18px;
}

*.variant
{font-variant:small-caps;}

/* color classes for the text start here */

*.red
{color:#f00;}

*.green
{color:#5ca353;}

*.blue
{color:#3d02a0;}

/* style to create text with a colored background for emphasis */
*.hilite
{background:#f7e77b;}

span.cap, span.cap2 /* creates the large drop-cap first-letter in the paragraphs */
{
font:bold 35px/35px "times new roman", times, serif;
color:#3d02a0; /* blue */
float:left;
height:35px;
margin:-4px 3px 0 0;
}

span.cap2
{color:#f00;}

/* floated image classes start here */

img.heading /*special style for small images before header text */
{
border-style:none;
margin-right:5px;
}

img.left
{
float:left;
margin:5px 5px 5px 30px;
}

img.right
{
float:right;
margin:5px 30px 5px 5px;
}

img.imgcenter
{
display:block;
text-align:center;
margin:5px auto;
}

/* layout div's start here */

div#wrapper
{
background:#fff;
width:1000px;
border-style:none;
text-align:left;
margin:0 auto;
}

div#header
{
display:block;
height:150px;
background:#fbf0cf url(../graphics/haemukwan_header.jpg) top center no-repeat;
margin:0 auto 15px auto;
}

div#maincol
{
background:#fff;
border-style:none;
float:right;
display:inline;
position:relative;
width:700px;
}

div#leftcol
{
background:#fff;
width:300px;
float:left;
position:relative;
}

div#leftcol h3
{
text-align:center;
margin:15px 20px 10px 20px;
font:bold 22px georgia, "times new roman", serif;
}

div#footer
{
width:100%px;
height:50px;
background:#fbf0cf url(../graphics/haemukwan_footer.jpg) repeat-x;
clear:both;
}

div#footer p
{
padding-top:10px;
color:#fff;
font-size:12px;
font-weight:bold;
text-align:center;
margin:0 30px 0 300px;
}

div#footer a, div#footer a:visited
{
color:#fcf4dd;
text-decoration:none;
border-bottom:1px dotted #fcf4dd;
font:small-caps bold 15px verdana, "trebuchet ms", sans-serif;
}

div#footer a:hover, div#footer a:active
{
color:#ffc601;
text-decoration:underline;
border-bottom:2px dashed #ffc601;
font:normal bold 13px verdana, "trebuchet ms", sans-serif;
border-style:none;
}

/* style that creates the main photos container */
div#photos
{
width:580px;
height:362px;
margin:0 auto;
position:relative;
padding:5px 0;
border-top:1px solid #f3ecdc;
border-right:1px solid #f3ecdc;
border-bottom:1px solid #f3ecdc;
border-left:1px solid #f3ecdc;
background:#f3ecdc url(../graphics/gallerybg.jpg) 75px 50px no-repeat;
}

/* style for the upper right box that holds the
hovered-over image */
div#photos em
{
display:block;
width:209px;
height:175px;
position:absolute;
top:0;
right:0;
border-top:1px dotted #02467a;
border-right:1px dotted #02467a;
border-bottom:1px dotted #02467a;
border-left:1px dotted #02467a;
}

/* font style for info at bottom of large image
photos box Haemukwan.com .... */
div#photos em b.info
{font-style:normal;}

/* style creates main large image display on-click */
div#photos span
{
display:block;
width:360px;
height:370px;
position:absolute;
top:0;
left:0;
border-top:1px dotted #02467a;
border-right:1px dotted #02467a;
border-bottom:1px dotted #02467a;
border-left:1px dotted #02467a;
}

/* positions info text in main photos box */
div#photos span b.info,
div#photos em b.info
{
color:#aaa;
position:absolute;
bottom:5px;
right:20px;
font:italic bold 10px georgia, "times new roman", serif;
}

/* styles the scrollable container that holds the
thumbnail images */
div#photos b.thumbs
{
display:block;
width:200px;
height:180px;
overflow:auto;
float:right;
margin-top:175px;
border-style:dotted;
border-color:#02467a;
border-width:1px 0 1px 1px;
padding:5px;
}

/* creates the anchor link margins - positioning
box that displays the thumbnail image */
div#photos b.thumbs a
{
display:block;
float:left;
margin:0 3px 10px 3px;
background:#aebcd7;
width:50px;
height:65px;
border-top:1px dotted #02467a;
border-right:1px dotted #02467a;
border-bottom:1px dotted #02467a;
border-left:1px dotted #02467a;
}

/* styles the container box for the thumbnail
image anchor box */
div#photos b.thumbs a img
{
width:50px;
height:65px;
border-style:none;
}
/* styles for the hover state and displays the
click_on.gif image */
div#photos b.thumbs a:hover
{
border-top:1px dotted #02467a;
border-right:1px dotted #02467a;
border-bottom:1px dotted #02467a;
border-left:1px dotted #02467a;
background:#fff url(../graphics/click_on.gif);
}

/* styles for the active/focus state when image
is displayed in main photos window */
div#photos b.thumbs a:active,
div#photos b.thumbs a:focus
{
border-top:1px dotted #02467a;
border-right:1px dotted #02467a;
border-bottom:1px dotted #02467a;
border-left:1px dotted #02467a;
background:#fff url(../graphics/active.gif);
outline:0;
}

/* positions the active/focus image in the thumbnail box.
z-index means it's positioned above other layers */
div#photos b.thumbs a:hover img
{
display:block;
position:absolute;
background:#fff;
z-index:500;
}

/* positions the thumbnail image below the
graphic active.gif */
div#photos b.thumbs a:active img,
div#photos b.thumbs a:focus img
{
display:block;
position:absolute;
background:#fff;
z-index:100;
}

/* styles the size of the horizontal (hr)
image in the hover state upper right box */
div#photos b.thumbs a:hover img.hr,
div#photos b.thumbs a:focus img.hr
{
width:160px;
height:140px;
right:25px;
top:7px;
border-style:none;
}

/* styles the size of the vertical (vt)
image in the hover state upper right box */
div#photos b.thumbs a:hover img.vt,
div#photos b.thumbs a:focus img.vt
{
width:110px;
height:150px;
right:45px;
top:7px;
border-style:none;
}

/* styles size of horizontal image in active/focus
state - make your .hr images this size */
div#photos b.thumbs a:active img.hr,
div#photos b.thumbs a:focus img.hr
{
width:320px;
height:300px;
left:20px;
top:7px;
border-style:none;
}

/* styles size of vertical image in active/focus
state - make your .vt images this size */
div#photos b.thumbs a:active img.vt,
div#photos b.thumbs a:focus img.vt
{
width:240px;
height:320px;
left:60px;
top:7px;
border-style:none;
}

/* neon menu styles */

ul.neon
{
margin:0 auto 20px 40px;
list-style:none;
background:#fff;
width:150px;
}

 /* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */
ul.neon li
{
background:url(../graphics/scroll_on.gif);
margin:8px 0;
width:140px;
}

/* style the links and place the background image to start from left edge */
ul.neon li a
{
display:block;
height:35px;
width:140px;
background:url(../graphics/scroll_off.gif);
text-decoration:none;
font:bold 10px/16px verdana, sans-serif;
letter-spacing:1px;
text-align:center;
}

/* style the b element to position it to the right by 20 pixels and even out the text with 20 pixel right padding */
ul.neon li a b
{
margin:0 0 0 20px;
display:inline;
width:100px;
float:left;
height:35px;
background:url(../graphics/scroll_off.gif) right top;
padding:0 20px 0 0;
color:#3d02a0;
font-weight:bold;
text-align:center;
}

/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */
ul.neon li a:hover,
ul.neon li a:hover b
{
border-style:none;
background-image:url(../graphics/scroll_on.gif);
cursor:pointer;
color:#f00;
font-weight:bold;
font-variant:small-caps;
}

ul.neon li a.current,
ul.neon li a.current b,
ul.neon li a.current:hover,
ul.neon li a.current:hover b
{
background-image:url(../graphics/scroll_active.gif);
color:#5ca353;
font-weight:bold;
cursor:pointer;
}

/* testimonial box styles here */

div.testimonial,
div.mission
{
width:486px;
margin:0 auto;
}

div.testimonial div.top,
div.mission div.top
{
width:486px;
height:101px;
position:relative;
background:url(../graphics/testimonial_top.jpg) top center no-repeat;
}

div.mission div.top
{background:url(../graphics/mission_top.jpg);}

div.testimonial div.content,
div.mission div.content
{
padding:10px 0;
width:486px;
position:relative;
background:url(../graphics/testimonial_content.jpg) repeat-y;
}

div.mission div.content
{background:url(../graphics/mission_content.jpg);}

div.testimonial div.content p,
div.mission div.content p
{
margin:0 20px;
text-align:left;
text-indent:0;
padding:5px 10px;
font:14px courier, "courier new", monospace;
}

div.mission div.content p
{text-indent:10px;}

div.testimonial div.content img.lft,
div.mission div.content img.lft
{
float:left;
margin:0 5px 0 10px;
}

div.testimonial div.content img.rgt,
div.mission div.content img.rgt
{
float:right;
margin:0 10px 0 5px;
}

div.testimonial div.foot,
div.mission div.foot
{
width:486px;
height:60px;
background:url(../graphics/testimonial_foot.jpg) bottom center no-repeat;
}

div.mission div.foot
{background:url(../graphics/mission_foot.jpg);}

div.movie
{
width:500px;
margin:0 auto 15px auto;
}

div.movie div.top
{
width:500px;
height:101px;
background:url(../graphics/video_top.jpg) top center no-repeat;
}

div.movie div.content
{
padding:10px 0;
width:500px;
position:relative;
background:url(../graphics/video_content.jpg) repeat-y;
}

div.movie div.content p
{
text-align:center;
margin:0 auto;
padding:0;
text-indent:0;
}

div.movie div.content div.video
{
width:428px;
height:327px;
margin:0 auto;
background:#3d02a0;
border-style:none;
}

div.movie div.foot
{
width:500px;
height:60px;
background:url(../graphics/video_foot.jpg) bottom center no-repeat;
}

div.news
{
width:180px;
margin:5px auto;
}

div.news div.top
{
width:100%;
height:42px;
background:url(../graphics/news_top.jpg) top center no-repeat;
}

div.news div.content
{
padding:10px 0;
position:relative;
width:100%;
background:url(../graphics/news_center.jpg) repeat-y;
}

div.news div.content fieldset
{
width:160px;
margin:5px 20px 5px 5px;
border-style:none;
padding:5px;
background:transparent;
text-align:center;
}

div.news div.content fieldset label
{
font:bold 13px/16px arial, sans-serif;
padding:5px;
margin:5px;
}

div.news div.content fieldset.textfield
{
display:block;
margin:3px 10px 3px 5px;
height:20px;
width:150px;
background:#fff;
color:#000;
}

div.news div.center *.pad
{
display:block;
height:10px;
}

div.news div.content fieldset *.submit
{
display:block;
margin:10px auto 5px auto;
width:150px;
height:25px;
text-align:center;
cursor:pointer;
}

div.news div.content p
{
margin:5px;
text-indent:0;
font:bold 13px/16px verdana, arial, sans-serif;
color:#3d02a0;
text-align:center;
}

div.news div.content p.first
{
margin:0 10px 5px 10px;
padding:0 5px 10px 5px;
}

div.news div.content p.last
{
margin:5px 10px 0 5px;
padding:5px 5px 0 5px;
}

div.news div.foot
{
width:180px;
height:29px;
background:url(../graphics/news_foot.jpg) bottom center no-repeat;
}

div.orderdvd
{
width:486px;
margin:0 auto;
}

div.orderdvd div.top
{
width:486px;
height:101px;
background:url(../graphics/orderdvd_top.jpg) top center no-repeat;
}

div.orderdvd div.content
{
padding:10px 0;
width:486px;
position:relative;
background:url(../graphics/mission_content.jpg) repeat-y;
}

div.orderdvd div.content p.first
{
margin:0 20px 5px 20px;
padding:0 5px 10px 5px;
}

div.orderdvd div.content p.last
{
margin:5px 20px 0 20px;
padding:5px 5px 0 5px;
}

div.orderdvd div.content p
{
margin:0 20px;
text-align:center;
text-indent:0;
padding:5px 10px;
font:14px courier, "courier new", monospace;
}

div.orderdvd div.content h3
{
margin:0 20px;
text-align:center;
text-indent:0;
padding:0 10px 10px 10px;
font:18px verdana, arial, sans-serif;
color:#f00;
}

div.orderdvd div.content img
{
border-style:none;
display:block;
margin:5px auto;
text-align:center;
}

div.orderdvd div.foot
{
width:486px;
height:60px;
background:url(../graphics/mission_foot.jpg);
}

*.clear
{clear:both;}

/* fixes clearing of the floating elements on maincol and leftcol */

*.clearfix:after /* :after is a pseudo-element that inserts something after an element.  So, after content: which is defined as "." it will clear the columns by displaying a "block of text that has a height of 0", clears any content that is floating, and is effectively hidden from view */
{
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

*.clearfix
{display:inline-table;}

/* Hides from IE-mac \*/
* html *.clearfix
{height:1%;}

*.clearfix
{display:block;}
/* End hide from IE-mac */