/* -----------------------------------------------


	Garnier : Website

	Author: 	Daniel Billingham
	Studio:		Interactive@Optimedia
	Email: 		daniel.billingham@optimedia.com.au
	Version:  	13.09.05


----------------------------------------------- */

/* BODY */
/* ---- */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
	background-image: url(../images/back.gif);
	background-position: center top;
	margin: 0px;
	padding: 0px;
	height: 100%;
}

html,body {
	height: 100%;
}

#body {
	width: 100%;
	height: 100%;
}

html,body, #body {
	height: 100%;
}

#page {
	width: 755px;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	background-color: #FFFFFF;
	height: 100%;
	text-align: left;
}

html,body, #body, #page {
	height: auto;
}

/* HEADER */
/* ------ */

#header {
	padding: 25px 20px 16px 30px;
}

#header .logo {
	width: auto;
}

#header-home {
	padding: 25px 20px 6px 30px;
}

#header .logo {
	width: auto;
}


/* NAVIGATION */
/* ---------- */

#topnav {
	background-image: url(../images/header/back.gif);
	background-repeat: repeat-x;
	background-position: center top;
	height: 27px;
	text-align: right;
	padding: 6px 20px 0 0;
}

#nav {
	height: 33px;
	background-image: url(../images/header/nav-back.gif);
	background-position: center top;
	text-align: right;
	padding-right: 7px;
}

#nav-home {
	height: 33px;
	background-image: url(../images/home/back_nav.gif);
	background-position: center top;
	text-align: right;
	padding-right: 7px;
}

#subnav {
	margin-top: -4px;
	height: 24px;
	padding-right: 3px;
	text-align: right;
	background-image: url(../images/header/subnav-back.gif);
	background-repeat: repeat-x;
	background-position: top;
}

#submenu ul {
	list-style-type: none;
	width: 192px;
	margin: 0px;
	padding: 0px;
}

#submenu li {
	margin: 0px;
	padding: 0px;
	height: 22px;
}

#submenu li a:link, #submenu li a:visited, #submenu li a:active {
	text-align: right;
	font-size: 11px;
	color: #333333;
	display: block;
	text-decoration: none;
	padding: 6px 18px 6px 6px;
	margin: 0px;
	background-image: none;
}

#submenu li a:hover {
	color: #FFFFFF;
	background-image: url(../images/submenu/back_submenu.gif);
	background-repeat: repeat-x;
	background-position:top;
	text-decoration: none;
}

/* Submenu Competitions */

#submenu-comp ul {
	list-style-type: none;
	width: 219px;
	margin: 0px;
	padding: 0px;
}

#submenu-comp li {
	margin: 0px;
	padding: 0px;
	height: 34px;
}

#submenu-comp li a:link, #submenu-comp li a:visited {
	text-align: right;
	font-size: 11px;
	color: #333333;
	display: block;
	text-decoration: none;
	padding: 6px 18px 6px 6px;
	margin: 0px;
	background-image: none;
}

#submenu-comp li a:hover, #submenu-comp li a:active {
	color: #FFFFFF;
	background-image: url(../images/submenu/back_submenu_comp.gif);
	background-repeat: repeat-x;
	background-position:top;
	text-decoration: none;
}


/* FOOTER */
/* ------ */

#footer {
	height: 125px;
	background-image: url(../images/footer/back.gif);
	background-position: center top;
}

#footer .image {
	padding: 15px 10px 10px 10px;
	width: 286px;
}

#footer .links {
	padding: 25px 20px 0 0;
	text-align: right;
	color: #888888;
	font-size: 11px;
}

#footer .links a:link, #footer .links a:visited {
	color: #888888;
}

#footer .links a:hover, #footer .links a:active {
	color: #666666;
}


/* HEADINGS, TEXT & LINKS */
/* ---------------------- */

.greenText {
	color: #76BC1E;
	font-weight: bold;
}

a:link, a:visited {
	color: #0055C3;
	text-decoration: none;
}

a:hover, a:active {
	color: #006FFF;
	text-decoration: underline;
}

/* CONTENT */
/* ------- */

#content {
	margin: 20px 0 10px 0;
}

h2 {
	color: #76BC1E;
	font-size: 14px;
	font-weight: bold; 
	padding-bottom: 0px;
}

.heading {
	padding-bottom: 15px;
	padding-top: 10px;
	padding-left: 25px;
}

#content .text {
	padding-left: 45px;
	padding-right: 25px;
}

td {
	padding: 0px;
	margin: 0px;
}

.vertline {
	background-image: url(../images/submenu/dot.gif);
	background-repeat: repeat-y;
	width: 3px;
}

.horline {
	background-image: url(../images/submenu/dot.gif);
	background-repeat: repeat-x;
	width: 100%;
	height: 3px;
	padding: 0px;
	margin: 0px;
}

.family {
	padding-left: 25px;
	padding-bottom: 15px;
}

.top {
	text-align: right;
	padding: 0px 25px 10px 0;
}

/* HOME - FEATURE */

.home-feature .heading {
	height: 50px;
	margin-top: 8px;
	padding-left: 7px;
}

.home-feature p {
	padding: 0 5px 15px 7px;
	margin: 0;
	/*height: 168px;*/
}

.home-feature .link {
	text-align: right;
	padding: 0 10px 15px 0;
}

/* CONTENT-COMPETITIONS */

#content-competitions {
	width: 513px;
	padding-left: 20px;
	padding-right: 20px;
}

#content-competitions .intro {
	padding: 5px 20px 30px 25px;
}

#content-competitions .feature {
	text-align: center;
	padding: 25px 0 25px 0;
}


#content-competitions .image {
	background-repeat: no-repeat;
}


#content-competitions .includes, #content-competitions .toenter {
	padding: 18px 10px 0px 12px;
	font-size: 11px;
}



#content-competitions .includes {

}

#content-competitions .includes strong {
	color: #008DD7;
}

#content-competitions .toenter strong {
	color: #008DD7;
}

#content-competitions .exclusive  {
	padding-left: 18px;
	padding-top: 15px;
}

#content-competitions .terms {
	padding: 5px 10px 30px 18px;
	font-size: 10px;
}

/* CONTENT-SKINCARE */

#content-skincare #intro {
	height: 227px;
	padding: 0px;
	margin: 0px;
}

#content-skincare #intro .photo {
	width: 266px;
	padding: 0px;
	margin: 0px;
}

#content-skincare #intro .icon {
	width: 55px;
	text-align: left;
	padding-top: 17px;
}

#content-skincare #intro .text {
	width: auto;
	padding-top: 23px;
}

#content-skincare #intro .cubes {
	width: 145px;
	text-align: center;
}


#content-skincare .productimage {
	width: 385px;
	text-align: center;
	padding-top: 20px;
}

#content-skincare .productdetails {
	width: auto;
	padding: 45px 65px 10px 0;
}

#content-skincare .productdetails h2 {
	color: #339999;
	font-size: 18px;
	font-weight:  bold;
}

#content-skincare .productdetails h3 {
	color: #339999;
	font-size: 12px;
	font-weight:  bold;
}


/* CONTENT-SUNCARE */

#content-suncare #intro {
	height: 227px;
	padding: 0px;
	margin: 0px;
}

#content-suncare #intro .photo {
	width: 265px;
	padding: 0px;
	margin: 0px;
}

#content-suncare #intro .icon {
	width: 55px;
	text-align: left;
	padding-top: 18px;
}

#content-suncare #intro .text {
	width: auto;
	padding-top: 25px;
}

#content-suncare #intro .cubes {
	width: 125px;
	text-align: center;
}

#content-suncare .productimage {
	width: 385px;
	text-align: center;
	padding-top: 20px;
}

#content-suncare .productdetails {
	width: auto;
	padding: 45px 65px 10px 0;
}

#content-suncare .productdetails h2 {
	color: #B86C00;
	font-size: 18px;
	font-weight:  bold;
}

#content-suncare .productdetails h3 {
	color: #B86C00;
	font-size: 12px;
	font-weight:  bold;
}

/* CONTENT-BODYCARE */

#content-bodycare #intro {
	height: 227px;
	padding: 0px;
	margin: 0px;
}

#content-bodycare #intro .photo {
	width: 270px;
	padding: 0px;
	margin: 0px;
}

#content-bodycare #intro .icon {
	width: 55px;
	text-align: left;
	padding-top: 25px;
}

#content-bodycare #intro .text {
	width: auto;
	padding-top: 33px;
}

#content-bodycare #intro .cubes {
	width: 120px;
	text-align: center;
}

#content-bodycare .productimage {
	width: 385px;
	text-align: center;
	padding-top: 20px;
}

#content-bodycare .productdetails {
	width: auto;
	padding: 45px 65px 10px 0;
}

#content-bodycare .productdetails h2 {
	color: #FF9900;
	font-size: 18px;
	font-weight:  bold;
}

#content-bodycare .productdetails h3 {
	color: #FF9900;
	font-size: 12px;
	font-weight:  bold;
}

/* CONTENT-HAIR COLOUR */

#content-haircolour #intro {
	height: 227px;
	padding: 0px;
	margin: 0px;
}

#content-haircolour #intro .photo {
	width: 276px;
	padding: 0px;
	margin: 0px;
}

#content-haircolour #intro .icon {
	width: 55px;
	text-align: left;
	padding-top: 25px;
}

#content-haircolour #intro .text {
	width: auto;
	padding-top: 33px;
}

#content-haircolour #intro .cubes {
	width: 126px;
	text-align: center;
}

#content-haircolour .productimage {
	width: 385px;
	text-align: center;
	padding-top: 20px;
}

#content-haircolour .productdetails {
	width: auto;
	padding: 45px 65px 10px 0;
}

#content-haircolour .productdetails h2 {
	color: #AB0104;
	font-size: 18px;
	font-weight:  bold;
}

#content-haircolour .productdetails h3 {
	color: #AB0104;
	font-size: 12px;
	font-weight:  bold;
}

/* CONTENT-HAIRCARE */

#content-haircare #intro {
	height: 227px;
	padding: 0px;
	margin: 0px;
}

#content-haircare #intro .photo {
	width: 242px;
	padding: 0px;
	margin: 0px;
}

#content-haircare #intro .icon {
	width: 55px;
	text-align: left;
	padding-top: 25px;
}

#content-haircare #intro .text {
	width: auto;
	padding-top: 33px;
}

#content-haircare #intro .cubes {
	width: 160px;
	text-align: right;
}

#content-haircare .productimage {
	width: 100%;
	height: 347px;
	text-align: center;
}

#content-haircare .productdetails .left, #content-haircare .productdetails .right {
	width: 50%;
	padding: 0px 30px 20px 30px;
}

#content-haircare h2 {
	color: #66CC00;
	font-size: 16px;
	font-weight:  bold;
	height: 28px;
	padding: 0px;
	margin: 0px;
}

/* CONTENT-HAIRCARE */

#content-hairstyling #intro {
	height: 227px;
	padding: 0px;
	margin: 0px;
}

#content-hairstyling #intro .photo {
	width: 299px;
	padding: 0px;
	margin: 0px;
}

#content-hairstyling #intro .icon {
	width: 55px;
	text-align: left;
	padding-top: 25px;
}

#content-hairstyling #intro .text {
	width: auto;
	padding-top: 33px;
	padding-right: 30px; 
}

#content-hairstyling #text {
	padding: 18px 30px 10px 30px;
}

#content-hairstyling #text .productshot {
	text-align: right;
	padding-top: 15px;
}

#content-hairstyling .productdetails .image {
	width: 85px;
	padding-top: 6px;
	padding-bottom: 8px;
	text-align: center;
}

#content-hairstyling .productdetails .text {
	padding-top: 6px;
	height: 100px;
	padding-right: 10px;
	text-align: left;
}

#content-hairstyling .productdetails .column {
	width: 50%;
	padding: 0px 30px 20px 30px;
}

#content-hairstyling h2 {
	color: #3B69B9;
	font-size: 18px;
	font-weight:  bold;
	padding: 0px;
	margin: 0px;
}

#content-hairstyling h3 {
	font-size: 12px;
	font-weight:  bold;
	padding: 0px;
	margin: 0px;
}

/* CONTACT FORM */
/* ------------ */

#contactform .required {
	color: #CC0000;
	font-weight: bold;
}

#contactform .fieldname {
	text-align: right;
	padding: 8px 10px 5px 5px;
	color: #666666;
	font-weight: bold;
}

#contactform .field {
	width: 200px;
	padding: 8px 0px 5px 0px;	
}

#contactform .txtfield {
	width: 200px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

#contactform textarea {
	width: 200px;
	height: 120px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

#contactform .submitBtn {
	margin-top: 30px;
	margin-bottom: 20px;
}