/*****Basic Elements
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.
*****/
html {
background: #FFF url(../img/top-body.jpg) 50% -10px;
}   

body {
background: url(../img/top-html.jpg) repeat-x 50% 0;
font-family: Cambria, serif;
font-size: 16px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.2em;
color: #000;
}

em { font-style: italic;}

/*****Generic Classes
Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently 
*****/

html {overflow:-moz-scrollbars-vertical;}

a:active, a:focus {outline:none;}

/* shims */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
.hidden { visibility: none; }
.bye { display: none; }
.textleft { text-align: left; }
.textright { text-align: right; }
.textcenter { text-align: center; }


.replace, #header h1 a, #header ul li a, #footer ul li a
{ display: block; float: left; font-size: 1px; text-indent: -9000px;}

/* typo */




/*****Basic Layout
Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site
*****/

#header h1 a, #header ul a, #footer ul a { background-image: url(../img/sprite.gif);}

#content { margin-top: -50px; float: left;}

.pagination li {display: inline;}
 
/*****Header
Define all elements in the header
*****/



.wrap, #footer { text-align: center; width: 1000px; margin: auto;}

.wrap {background: url(../img/header.gif) no-repeat 50% 11px;}

#footer {background: url(../img/footer.gif) no-repeat 50% 11px; height: 120px;}

#header { margin-bottom: 25px;}

#header h1 { float: left; width: 100%; margin: 0; padding: 0;}

#header h1 a { background-position: 0 0; height: 85px; width: 420px; margin: 10px 0 0 180px; display: inline; }

#header h1 a:hover { background-position: 0 -85px;}

#header ul, #footer ul { clear: both; overflow: hidden; display: block; width: 780px; float: left;}

#header ul { margin: 5px 0 0 0;}

#footer ul { margin: 20px 0 0 0;}

#header ul li, #footer ul li { display: inline; margin: 0;}

#header ul li a { margin: 10px; height: 27px;}

#footer ul li a { margin: 10px; height: 27px;}

#header ul li .item01, #footer ul li .item01 { margin-left: 65px; display: inline;}

.item01 { width: 109px; background-position: 0 -170px;}

.item01:hover { background-position: 0 -197px;}

.item02 { width: 133px; background-position: -129px -170px;}

.item02:hover { background-position: -129px -197px;}

.item03 { width: 87px; background-position: -281px -170px;}

.item03:hover { background-position: -281px -197px;}

.item04 { width: 47px; background-position: -387px -170px;}

.item04:hover { background-position: -387px -197px;}

.item05 { width: 47px; background-position: -453px -170px;}

.item05:hover { background-position: -453px -197px;}

.item06 { width: 40px; background-position: -519px -170px;}

.item06:hover { background-position: -519px -197px;}

.item07 { width: 56px; background-position: -578px -170px;}

.item07:hover { background-position: -578px -197px;}

#special_effects .item01 {background-position: 0 -197px;}

#fashion_beauty .item02 { background-position: -129px -197px;}

#advertising .item03 { background-position: -281px -197px;}

#media .item04 { background-position: -387px -197px;}

#events .item05 { background-position: -453px -197px;}

#link .item06 { background-position: -519px -197px;}

#contact .item07 { background-position: -578px -197px;}

/*****Content
Define all elements in the content area
*****/



/* #home */

.listpicture a img {}

#last_makeup ul a, .listpicture a { border: 1px solid #dbdbdb; float: left; height: 178px; background: url(../img/back_50.gif); margin-bottom: 15px;}

#last_makeup ul a:hover,  .listpicture a:hover { border: 1px solid red;}

#last_makeup ul a img,  .listpicture a img { margin: 7px;}

#about_me p, #resume ul { text-transform:uppercase; font-size: 11px; font-style:normal; letter-spacing: 0.1em;}

/* link */



#link .link ul { margin: 20px 0 0 0; overflow: hidden;}

#link .link ul li { margin-bottom: 10px; overflow: hidden;}

#link .link ul li.alpha { clear: both;}

#link .link ul a { `}

#link #footer { margin-top: 20px;}

/* contact */

/*****Footer
Define all elements in the footer
*****/

#footer p { font-size: 11px; padding: 70px 0 0 0; clear: both; }