/*  
TJ Nails
Designed by Katy
http://24cmedia.com
*/

html, body { margin:0 auto; padding: 0; background-color: #FFF; text-align: center; font-family: Georgia, Times New Roman, serif; font-size:12pt; line-height:20pt; color:#464646;  background:url(http://tj-nails.com/tj/public/themes/tjnails01/img/bg.jpg) repeat-y 50% 0;}

/* ----------------------------- PAGE SET UP ----------------------------- */

#container {margin:0 auto; padding: 0;}

#topbar {height:10px; background-color:#1fadad;}
#banner {height:380px; background-color:#1fadad; background:url(http://tj-nails.com/tj/public/themes/tjnails01/img/topbg.jpg);}
#midbar {height:50px; background-color:#1fadad; color:#ebebeb; font-family: MrsEavesPetiteCaps; font-size:22pt; line-height:34pt; letter-spacing:1px;}

#bannerContainer {width:1000px; margin:0 auto; padding: 0;}
#logo {width:364px; height:380px; background:url(http://tj-nails.com/tj/public/themes/tjnails01/img/logo.png); float:left;}
#hand {width:186px; height:298px; float:left; margin-top:82px; position:relative; left:260px; background:url(http://tj-nails.com/tj/public/themes/tjnails01/img/hand.png) no-repeat; z-index:2}
#nav {width:250px; height:380px; background:#FFF; opacity:0.85; float:right; text-align:right; list-style:none; z-index:1}
#menu {padding: 165px 10px 10px 10px; line-height: 10pt; font-family: MrsEavesPetiteCaps; font-size:18pt;}

#content {width:1000px; margin:0 auto; padding: 0;}
#main {width:650px; float:left;padding:10px;}
#sidebar {width:250px; float:right; height: 100%}
#footer {width:650px; border-top:1px dashed #3eb7b7;margin-top: 20px;}

/* ----------------------------- TEXT STYLING ----------------------------- */

@font-face {
  font-family: 'MrsEavesRoman';
  src: url('http://tj-nails.com/tj/public/themes/tjnails01/fonts/MrsEavesRoman.otf'’);}

@font-face {
  font-family: 'MrsEavesBold';
  src: url('http://tj-nails.com/tj/public/themes/tjnails01/fonts/MrsEavesBold.otf');}

@font-face {
  font-family: 'MrsEavesPetiteCaps';
  src: url('http://tj-nails.com/tj/public/themes/tjnails01/fonts/MrsEavesPetiteCaps.otf');}

h1 {color:#3eb7b7; font-size:20pt; margin-bottom:-16pt; font-family: MrsEavesPetiteCaps; line-height:0px;}
h2 {font-size:14pt; font-family: MrsEavesPetiteCaps;}
h3 {font-size:12pt; font-family: MrsEavesBold;}

strong {color:#3eb7b7; font-weight:bolder; font-size:18pt; font-family: MrsEavesRoman; letter-spacing:-1px}
#midbar strong {color:#FFF; font-weight:bolder; font-family: MrsEavesBold;  font-size:23pt;}
#nav strong {color:#1fadad;}

.prices {color:#f3497d}

/* ----------------------------- LINKS ----------------------------- */

a:link {text-decoration:none; color:#1fadad; -webkit-transition: color 1s ease-in; /*safari and chrome */  -o-transition: color 1s ease-in; /* opera */}
a:visited {text-decoration:none; color:#1fadad;}
a:hover	{text-decoration:none; color:#FFF;} 

#menu a {color: #555555; padding:3px 5px 3px 5px;  -moz-border-radius:7px; border-radius:7px;
 -webkit-transition-property: color, background;
 -webkit-transition-duration: 1s, 1s;
 -webkit-transition-timing-function: linear, ease-in;}
#menu a:hover {color: #FFF; background: #1fadad; -moz-border-radius:7px; border-radius:7px;}

.directions a {background:#1fadad; color: #FFF; padding:5px 8px 5px 8px;  -moz-border-radius:7px; border-radius:7px;
 -webkit-transition-property: color, background;
 -webkit-transition-duration: 1s, 1s;
 -webkit-transition-timing-function: linear, ease-in;}
.directions a:hover {color: #FFF; background: #478d8d; -moz-border-radius:7px; border-radius:7px;}

/* ----------------------------- PAGE ELEMENTS ----------------------------- */

hr { border-bottom: solid 1px #1fadad; margin: 5px 0 5px 0;}
small {font-size:8pt; text-transform:uppercase;color:#3eb7b7;}
input,textarea { border:0px solid #1fadad; color: #FFF; background:#1fadad;} 
img { border:0 }
table {border:0}

.left {float:left}
.right {float:right}
.clear {clear: both}

/* ----------------------------- FANCY GALLERY ----------------------------- */

/* Class for the "fancy_parent" function 
 * It gives a thick 1px grey border around image*/

.link img { border: 1px solid #999; outline:none;padding:5px;margin:5px;}
.link img:hover {border:1px solid #ccc;}

/* Class for single image listing (fancy function) 
 * It gives a grey 1px border around image*/

.photo { padding: 5px; margin: 5px; border: 1px solid #999; display: block; float: left; }
.photo:hover { border-color: #ccc; }