/* CSS Document */

/* The Makeup Crew */

/* Website Design & Code : Hilmon Arts : http://www.hilmon.com */

html {height:100%; background: #000 url(../bg-photos/bg-02.jpg) no-repeat center;}

body {
  margin: 0;
  /*background: #000 url(../bg-photos/bg-01.jpg) no-repeat center;*/
  width: 100%;
  height:100%;
  display: table;
  font-family:Arial, Helvetica, sans-serif;
}

img, div {behavior: url(http://www.themakeupcrew.ie/iepngfix.htc); }

h1 {margin:5px 0 15px; padding:0; font-size:22px; line-height:22px; text-align:left;}

#wrapper {position:absolute; margin:2% 0 0 4%; width:960px;}
#logo { position:relative; width:940px; height:165px; background:url(../images/the-makeup-crew-logo-white.png);}
#bg-boxes-wrapper {position:absolute; margin-top:20px; filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50; z-index:2;}
#bg-box-1 {float:left; background:#fff; width:310px; height:360px;}
#bg-box-2 {float:left; background:#fff; width:310px; height:360px; margin:0 10px;}
#bg-box-3 {float:left; background:#fff; width:310px; height:360px;}
.dark {background:#000;}

#boxes-wrapper {position:absolute; margin-top:25px; z-index:3;}

#menu-box {float:left;}
#menu-box ul {margin:0; padding:0; font-size:21px; width:310px;}
#menu-box li { margin:12px 0px 12px 12px; list-style:none;}
#menu-box li a {background:#FF00A8; padding:5px 10px 5px 5px; color:#FFFFFF; text-decoration:none;}
#menu-box li a:hover {background:#FF00A8; font-size:24px; color:#630041; text-decoration:none;}
#menu-box #in {background:#630041; padding:5px 10px 5px 5px; font-size:24px; color:#FF00A8;}

#photo-wrapper {position:relative; float:left; width:300px; height:336px; margin:4px 0 0 17px; }
#photo-box { position:relative; width:300px; height:336px; overflow-y:hidden; line-height:1px;}
#photo-box img {margin-bottom:0px;}

#photo-arrow-up {position:absolute; left:430px; top:-32px; width:90px; height:27px; background:url(../images/arrow-up-off.gif) top #FF00A8; z-index:50;}
#photo-arrow-down {position:absolute; left:430px; top:355px; width:90px; height:27px; background:url(../images/arrow-down-off.gif) no-repeat #FF00A8; z-index:50;}
#photo-arrow-up a:hover { background:url(../images/arrow-up-on.gif) top #630041; display:block;}
#photo-arrow-down a:hover { background:url(../images/arrow-down-on.gif) top #630041; display:block;}

#gallery { position:relative; width:290px; height:auto;}
#gallery ul { margin:0; padding:0;}
#gallery li {position:relative; margin:0; padding:0; list-style-type:none;}
#gallery li a img {background:transparent;}
#gallery li a:link img {border:3px solid transparent; background:transparent;}
#gallery li a:visited img {border:3px solid transparent;}
#gallery li a:hover img {border:3px solid #630041;}

.photo-number {position:absolute; top:66px; left:270px; padding:10px 5px; width:12px; height:1px; background:#000; font-size:11px; font-weight:bold; color:#fff; filter:alpha(opacity=70); -moz-opacity:.70; opacity:.70; z-index:5;}

#text-box {position:relative; float:left; margin:7px 15px 0 22px; background:#fff; padding:10px; width:270px; height:313px; font-size:12px; line-height:17px; text-align:justify;}
#text-box a:link, #text-box a:visited {color:#FF00A8; font-weight:bold;}
#text-box a:hover {color:#630041; font-weight:bold; text-decoration:none; }

#footer-box {position:relative; top:420px; background:#333; width:930px; padding:10px 10px; filter:alpha(opacity=70); -moz-opacity:.70; opacity:.70; z-index:2; font-size:10px; color:#fff;}
#hilmon {float:right; width:200px; text-align:right}
#add-this {float:right; width:130px; text-align:right; margin-top:-1px;}
#footer-box a:link, #footer-box a:visited {color:#fff; text-decoration:none; font-weight:bold;}
#footer-box a:hover {color:#fff; text-decoration:underline; font-weight:bold;}

#form-wrapper {position:relative; float:left; width:290px; height:336px; margin:7px 8px 0 20px; background-color: #fff;}
form{margin:0px; padding:0px; font-size:16px; }
#feedback {padding: 5px 10px; height:313px; line-height:18px;}
input{border:1px solid #630041; color: #630041; padding:3px; margin:0px; background:#fff; font-size:16px;}
textarea{ font-family:Verdana, Arial, Helvetica, sans-serif; border:1px solid #630041; color:#630041; padding:3px; height:60px; margin:0px; background:#fff; font-size:12px;}
label { display: block; clear: left; font-weight:bold; padding:10px 0px 5px; }
#name { width: 260px; }
#email { width: 260px; }
#message { width: 260px;}

#contact-details {font-size:16px; font-weight:bold; line-height:24px;}
#contact-details a:link, #contact-details a:visited {color:#FF00A8; font-weight:bold;}
#contact-details a:hover {color:#630041; font-weight:bold; text-decoration:none; }