/*
---------------------------------------------
Style: Elixir
Description: Elixir
Author: Visual Elixir
Author URI: http://www.visualelixir.com
Copyright: Visual Elixir, All Rights Reserved
--------------------------------------------- */

/* Imported Styles
--------------------------------------------- */
@import url(colorbox.css);

/* Global
--------------------------------------------- */
body {font:16px Georgia, serif; background:#08201f url(../images/vex_bkg.png) 50% 0 repeat;}
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin:0; padding:0;}
img {border-style:none;}
ul,ol,li {list-style-type:none;}

/* Typography
--------------------------------------------- */
a,a:link,a:active,a:visited {color:#789321; text-decoration:none;}
a:hover {color:#258984; text-decoration:none;}
p {font-size:16px; margin:0 0 1.4em 0; line-height:1.8em;}

h1, h2, h3, h4, h5 {color:#08201f;}
h1 {font:bold 78px Georgia, serif; margin:0 0 0.2em 0; line-height:1em;}
h2 {font:48px Georgia, serif; margin:0 0 0.2em 0; line-height:1.4em;}
h3 {font:36px Georgia, serif; margin:0 0 0.2em 0; line-height:1.4em;}
h4 {font:22px Georgia, serif; margin:0 0 0.2em 0; line-height:1.4em;}
h5 {font:18px Georgia, serif; margin:0 0 0.2em 0; line-height:1.4em;}

#logo h1 {margin:0; padding:0;}
#logo a {width:550px; height:202px; margin:0 auto; padding:0; text-indent:-9999px; display:block; background:url(../images/vex_logo.png) no-repeat; text-align:center; overflow:hidden;}
.title h1 {margin:0; padding:0;}
#intro h4 {color:#899f44; line-height:1.8em;}
.design-entry {font-size:14px; line-height:1.4em;}
.footer-content p {color:#e2e7d1;}
.footer-content a {color:#a4bd55;}
.footer-content a:hover {color:#26908a;}
.anti {display:none;}

/* Navigation
--------------------------------------------- */
#top-nav {margin:0; padding:70px 0 0 0;}
ul#nav {width:840px; height:75px; margin:0; padding:0 0 0 120px; background:url(../images/top_nav_bkg.png) 50% 0 no-repeat;}
ul#nav li {float:left; margin:0; padding:0; height:75px; display:block; text-align:center;}
ul#nav li a {margin:0; padding:0; height:75px; display:block; text-indent:-9999px; overflow:hidden;}
ul#nav li a:hover {color:#fff;}		
li#nav1 {width:119px; height:75px;}
li#nav2 {width:187px; height:75px;}
li#nav3 {width:126px; height:75px;}
li#nav4 {width:122px; height:75px;}
li#nav5 {width:146px; height:75px;}
li#nav1 a {background:url(../images/top_nav.png) no-repeat; background-position:0 0;}
li#nav2 a {background:url(../images/top_nav.png) no-repeat; background-position:-119px 0;}
li#nav3 a {background:url(../images/top_nav.png) no-repeat; background-position:-306px 0;}
li#nav4 a {background:url(../images/top_nav.png) no-repeat; background-position:-432px 0;}
li#nav5 a {background:url(../images/top_nav.png) no-repeat; background-position:-554px 0;}
li#nav1 a:hover {background-position:0 -75px;}
li#nav2 a:hover {background-position:-119px -75px;}
li#nav3 a:hover {background-position:-306px -75px;}
li#nav4 a:hover {background-position:-432px -75px;}
li#nav5 a:hover {background-position:-554px -75px;}

#slide-left a {width:40px; height:110px; margin:0; padding:0; text-indent:-9999px; display:block; background:url(../images/slide_arrow_left.png) no-repeat; background-position:0 0; text-align:center; outline:0; overflow:hidden;}
#slide-left a:hover {background-position:0 -110px;}
#slide-right a {width:40px; height:110px; margin:0; padding:0; text-indent:-9999px; display:block; background:url(../images/slide_arrow_right.png) no-repeat; background-position:0 0; text-align:center; outline:0; overflow:hidden;}
#slide-right a:hover {background-position:0 -110px;}

.tpn-nav {width:50px; height:50px; margin:0 auto; padding:30px 0 0 0;}
.tpn-prev a {width:50px; height:19px; padding:0; text-indent:-9999px; display:block; background:url(../images/tpn_nav.png) no-repeat; background-position:0 0; text-align:center; outline:0; overflow:hidden;}
.tpn-prev a:hover {background-position:-50px 0;}
.tpn-top a {width:50px; height:12px; padding:0; text-indent:-9999px; display:block; background:url(../images/tpn_nav.png) no-repeat; background-position:0 -19px; text-align:center; outline:0; overflow:hidden;}
.tpn-top a:hover {background-position:-50px -19px;}
.tpn-next a {width:50px; height:19px; padding:0; text-indent:-9999px; display:block; background:url(../images/tpn_nav.png) no-repeat; background-position:0 -31px; text-align:center; outline:0; overflow:hidden;}
.tpn-next a:hover {background-position:-50px -31px;}
.top-up a {width:50px; height:50px; margin:0 auto; padding:0; text-indent:-9999px; display:block; background:url(../images/top_arrow.png) no-repeat; background-position:0 0; text-align:center; overflow:hidden;}
.top-up a:hover {background-position:0 -50px;}

.design-title a {width:240px; height:24px; margin:0 auto; padding:15px 0 15px 0; font-size:20px; color:#d6e3ae; display:block; background:url(../images/col_13_title_bkg.png) no-repeat; text-align:center;}
.design-title a:hover {color:#d6e3ae;}

/* Layout
--------------------------------------------- */
#container {margin:0; padding:0;}

.col-1 {width:960px; margin:0; padding:0; clear:both;}
.col-12 {float:left; width:420px; margin:0; padding:0 0 0 60px;}
.col-13 {float:left; width:240px; margin:0; padding:0 0 0 60px;}
.col-23 {float:left; width:600px; margin:0; padding:0 0 0 60px;}
.title {margin:0; padding:30px 0 30px 0; text-transform:uppercase; text-align:center;}
.top-up {margin:0; padding:30px 0 0 0;}
.entry {margin:0; padding:0 30px 0 0;}

#top {margin:0; padding:0; background:url(../images/vex_top_bkg.png) 50% 0 repeat-x;}
.top-content {width:960px; margin:0 auto; padding:0;}

#main {margin:0; padding:0; background:#e1e5ce url(../images/vex_main_bkg.jpg) repeat;}
.main-content {width:960px; margin:0 auto; padding:0 0 30px 0;}

#intro {margin:0; padding:0;}
#intro-content {margin:0; padding:30px 0 30px 0; background:url(../images/col_13_divide.png) repeat-y;}
#intro-1 {float:left; width:240px; margin:0; padding:60px 30px 60px 60px;}
#intro-2 {float:left; width:300px; margin:0; padding:0;}
#intro-3 {float:left; width:240px; margin:0; padding:60px 30px 60px 60px;}
#slide {width:300px; margin:0; padding:0; overflow:hidden;}
#slide-image {float:left; width:218px; height:335px; margin:0; padding:0; overflow:hidden;}
#slide-image img {border:1px solid #bcc994; background:#e2e7d1; padding:8px;}
#slide-left {float:left; width:40px; margin:0; padding:100px 0 0 0;}
#slide-right {float:left; width:40px; margin:0; padding:100px 0 0 0;}

#illustration {margin:0; padding:0;}
#illus-text {margin:0; padding:0;}
#illus-image {margin:0; padding:30px 0 30px 0; background:url(../images/col_12_divide.png) repeat-y;}
.artwork ul {margin:0; padding:0; overflow:visible;}
.artwork li {float:left; width:85px; margin:0 0 25px 25px; padding:0; text-align:center; display:inline;}
.artwork img {border:1px solid #bcc994; background:#e2e7d1; padding:8px;}
.artwork a:hover img {border:1px solid #103432; background:#e2e7d1; padding:8px;}

#design {margin:0; padding:0;}
.design-entry {width:900px; margin:0; padding:0 0 30px 60px;}
.design-info {width:900px; margin:0 0 16px 0; padding:0;}
.design-view a {float:left; width:108px; height:39px; margin:0 15px 0 0; padding:0; text-indent:-9999px; display:block; background:url(../images/view_btn.png) no-repeat; overflow:hidden;}
.design-client {float:left; width:170px; margin:0; padding:0 0 0 30px;}
.design-detail {float:left; width:510px; margin:0; padding:0 0 0 30px;}
.design-image {width:900px; margin:0; padding:0;}
.design-image img {border:1px solid #bcc994; background:#e2e7d1; padding:8px;}

#info {margin:0; padding:0;}
#info-text {margin:0; padding:30px 0 30px 0; background:url(../images/col_13_divide.png) repeat-y;}

#contact {margin:0; padding:0;}
#contact-text {margin:0; padding:30px 0 30px 0; background:url(../images/col_23_divide.png) repeat-y;}

#footer {margin:0; padding:0 0 240px 0; background:url(../images/zigzag_btm.png) 50% 0 repeat-x;}
.footer-content {width:960px; margin:0 auto; padding:60px 0 0 0;}
#copyright {margin:0; padding:0 60px 0 60px; text-align:center;}

/* Forms
--------------------------------------------- */
#contact {width:450px; margin:0; padding:0; font-size:16px;}
#contact label {margin:0; padding:0 0 20px 0; font-weight:bold;}
#contact input {width:520px; margin:10px 0 20px 0; padding:6px; border:1px solid #bcc994; background:#fff;}
#contact textarea {width:520px; margin:10px 0 20px 0; padding:3px; border:1px solid #bcc994; background:#fff;}
#contact .zemSubmit {width:90px; height:31px; margin:0; padding:0; border:0; font-weight:bold;}
#contact .zemError {color:#e16e1a;}
fieldset {margin:0; padding:0; border:0; }
legend {display:none;}
ul.zemError {margin:0; padding:0 0 15px 0;}
ul.zemError li {margin:0; padding:0; font-size:16px;}

/* Clear
--------------------------------------------- */
.clr:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clr {display:inline-block;}

/* Hide from IE Mac \*/
.clr {display:block;}
* html .clr {height: 1%;}
/* End hide from IE Mac */

/* The End */