/* Colours Orange - ef7d15 Dark grey - 1b1819 */ /* Reset */ body,div,img,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} q:before,q:after {content:'';} abbr,acronym {border:0;} /* ------------------------------------------------------------------------------------ HTML / BODY ------------------------------------------------------------------------------------------------ */ html, body { height:auto !important; height:100%; min-height:100%;} html {font-size: 50%; background: #ccc;} body {background: #ccc; color: #1b1819; font-family: Arial, Helvetica, sans-serif; font-size: 125%; margin: 0; padding: 0; text-align:center;} /*FIX FIREFOX 1px JOG BUG*/ html>/**/body, x:-moz-any-link, x:default { position:relative; left:-0.1px; } /* ----------------------------------------------------------------------------------------- LAYOUT ------------------------------------------------------------------------------------------------ */ #master {width: 960px; margin: 20px auto 10px auto; padding: 0;text-align:left;} #header {height:90px; margin: 0 0 12px 0; padding:30px 0 0 0; background:url('../../images/p7_bg_header.gif') 0 0 repeat-x; border-bottom:1px solid #999;} #header div {width:510px; float:right; margin-right:11px;} #header p {color:#282828; text-align:right; padding-right:11px; font-size:16px; line-height:16px; height:16px;} #header a.logo {display:block; width:385px; height:65px; margin: 0 0 0 25px; float:left;} #content {display:inline; overflow:auto; float:left; width: 958px; padding-bottom:18px; background:#fff; border:1px solid #999; margin-bottom:12px;} #content_a {width:232px; height:385px; float:left; margin: 0 0 0 24px; background:url('../../images/p7_bg_work_content.gif') 0 0 repeat-x; overflow:hidden;} #content_b {width:678px; height:385px; float:left; margin: 0 24px 0 0; position:relative;} #content_c {display:inline; overflow:auto; float:left; width: 958px; padding-bottom:0; background:#fff; border:1px solid #999; margin-bottom:12px;} #content_d {display:inline; overflow:auto; float:left; width: 958px; padding-bottom:0; background:#fff; border:1px solid #999; margin-bottom:12px;} #footer { background:#FFFFFF url('../../images/p7_bg_footer_palms.gif') bottom right no-repeat; height:120px; position:relative; clear:both; border:1px solid #999;} /* ------------------------------------------------------------------------------------------- TEXT ------------------------------------------------------------------------------------------------ */ h1 {position: absolute; text-indent: -2000px; height:0;} h2 {font-size:1.6em; color:#282828; padding:10px 0; margin-left:25px; font-weight:bold; clear:both; text-transform: uppercase;} h3 {font-size:1.4em; color:#282828; margin: 14px 0 8px 15px; font-weight:normal;} h3 span {font-weight:bold; width:100px;} h4 {font-size:1.8em; color:#282828; padding:10px 0; margin: 0 0 0 25px; font-weight:bold; clear:both;} p {font-size: 1.2em; /*color: #1b1819;*/ color: #696969; line-height: 1.4em; margin: 0 0 8px 0; padding: 0 10px 0 0;} p.caption {font-size: 1.1em; color: #fff; line-height: 1.4em; margin: 0 0 8px 0; padding: 0;} code {font-size: 1.1em; color: #AEB4AE; line-height: 1.4em;} #content_a p {width:190px; margin-left:15px; clear:both;} #header p span {color: #282828;} a {color: #ef7d15; margin: 0; padding: 0; outline:none;} a:link, a:visited {text-decoration: none;} a:hover {color: #ef7d15; text-decoration: underline;} a.active {color: #ef7d15;} strong, em { font-weight:bold; color: #282828;} span.strong {color:#FFFFFF; font-weight:bold;} #content ul {font-size: 1.2em; color: #fff; line-height: 1.4em; margin: 0 0 8px 0; padding: 0; list-style-type:none;} /* ------------------------------------------------------------------------------------- NAVIGATION ------------------------------------------------------------------------------------------------ */ ul#nav {clear:both; float:right; list-style-type:none; margin: 0; position:relative; font-weight:normal; text-transform:uppercase; padding-top:28px; } ul#nav li {float:left;} ul#nav li a {color:#1b1819; font-size:1.2em; line-height:1.2em; padding:0 12px; border-right: 1px solid #ef7d15;} ul#nav li#nav_contact a {border-right:0;} ul#nav li a:hover {color:#ef7d15;} #page_home #nav_home a{color:#ef7d15;} #page_work #nav_work a{color:#ef7d15;} #page_work_item #nav_work a{color:#ef7d15;} #page_services #nav_services a{color:#ef7d15;} #page_news #nav_news a{color:#ef7d15;} #page_clients #nav_clients a{color:#ef7d15;} #page_contact #nav_contact a{color:#ef7d15;} #page_people #nav_people a{color:#ef7d15;} /* ----------------------------------------------------------------------------------------- FOOTER ------------------------------------------------------------------------------------------------ */ #footer div#footer_a {width:464px; float:left; margin-left:25px; margin-top:18px;} #footer div#footer_b {width:214px; float:left; margin-top:18px;} #footer dl {font-size: 1.2em; color: #696969; line-height: 1.4em; width:214px; float:right; margin-right:25px; margin-top:18px;} #footer dl dt {width:18px; float:left; font-weight:bold; color:#ef7d15;} #footer dl dd {width:194px; float:left;} #footer dl dd a {color:#696969;} #footer dl dd a:hover {color:#ef7d15;} #footer img {margin-bottom:8px;} #footer #footer_b span {font-weight:bold; color:#ef7d15;} /* ----------------------------------------------------------------------------------- MOVIE PLAYER ------------------------------------------------------------------------------------------------ */ #movie_wrapper {width:678px; height:385px; overflow:auto; background-color:#ef7d15; margin-bottom:20px; clear:both; padding: 0;} #player {margin:4px 0 0 4px;} #movie_overlay {width:9px; height:394px; background:url('../../images/p7_bg_work_movie_overlay.png') 0 0 no-repeat; position:absolute; top:0; right:0;} /* -------------------------------------------------------------------------------------- WORK PAGE ------------------------------------------------------------------------------------------------ */ #content_a dl {font-size: 1.2em; color: #1b1819; line-height: 1.4em; margin: 12px 0 8px 15px; display: inline; float:left; overflow:auto;} #content_a dl dt {font-weight:bold; width:60px; float:left;} #content_a dl dd { width:150px; float:left;} div.work_row {clear:both; width:928px; overflow:auto; margin-left:24px; padding-bottom:18px;} div.work_item {float:left; margin-right:18px; width:214px; height:120px; position:relative; overflow:hidden;} div.work_item a.work_desc {color:#FFFFFF; text-decoration:none; font-size:1.4em; line-height:1.4em; display:block; padding: 0; width:214px; height:120px; overflow:hidden; position:absolute; top:120px; left:0; background: url('../../images/p7_bg_play.gif') 100% 100% no-repeat; } div.work_item a.work_desc span {padding:14px 14px 0 14px; display:block;} div.work_item a.work_overlay {display:block; position:absolute; width:214px; height:120px; background:url('../../images/p7_bg_work_overlay.png') 0 0 no-repeat; top:0; left:0; text-indent:-2000px;} div.divider {width:910px; height:2px; border-top:1px solid #cccccc; clear:both; margin: 0 0 0 24px;} /* -------------------------------------------------------------------------------------- WORK ITEM ------------------------------------------------------------------------------------------------ */ #page_work_item #content_c h3 {margin-left:10px;} #page_work_item #content_d h3 {margin-left:10px;} #page_work_item #movie_wrapper {margin-bottom:0;} #movie_carousel {padding-top:6px; width:920px; clear:both; margin-left:24px;} #movie_carousel ul {width:920px; float:left; } #movie_carousel ul li {width:145px; height:81px; float:left; margin-right:6px; position:relative; overflow:hidden;} #movie_carousel ul li img {border:1px solid #ef7d15;} #movie_carousel ul li a.work_desc {color:#fff; background: url('../../images/p7_bg_play.gif') 100% 100% no-repeat; text-decoration:none; font-size:1em; display:block; width:145px; height:81px; position:absolute; top:81px; left:0; padding:0;} #movie_carousel ul li a.work_desc span {display:block; width:130px; height:70px; margin:5px;} #movie_carousel ul li a.work_overlay {display:block; position:absolute; width:145px; height:81px; top:0; left:0; text-indent:-2000px; background: url('../../images/transparent.png') 0 0 repeat; } /* -------------------------------------------------------------------------------------- HOME PAGE ------------------------------------------------------------------------------------------------ */ #page_home #content_a {width:288px; background:none; height:auto; margin-top: 0;} #page_home #content_b {width:598px; float:right; height:auto; margin-right: 14px;} #page_home #content_a p { float:none; width:auto; margin-left:0; font-size:1.4em; text-align:justify; padding-right:10px; ;} #page_home #content_a h3 {margin-left:0; padding-top:0; font-size:1.4em; line-height: 1.4em; font-weight:normal; text-align:justify; padding-right:10px; color:#696969} #page_home #content_b h3 {margin-left:0; font-weight:bold; text-transform:uppercase; font-size:1.6em;} #page_home #home_movie {position:relative; width:588px; height:336px;} #page_home #home_movie ul {width:588px; height:336px; position:absolute; top:4px; left:4px; display:none;} #page_home #home_movie ul li {width:588px; height:336px; position:absolute; top:0; left:0;} #page_home #movie_wrapper {width:588px; height:336px; overflow:auto; background-color:#ef7d15; margin-bottom:20px; clear:both; padding: 0;} #page_home #movie_overlay {width:9px; height:336px; background:url('../../images/p7_bg_work_movie_overlay_home.png') 0 0 no-repeat; position:absolute; top:0; right:0;} #page_home #movie_overlay_b {width:9px; height:336px; background:url('../../images/p7_bg_work_movie_overlay_home_b.png') 0 0 no-repeat; position:absolute; top:0; left:0;} #page_home #movie_carousel {width:598px; margin-left: 0;} #page_home #movie_carousel ul {width:598px;} #page_home #movie_carousel ul li {width: 190px; height: 108px; margin-right:9px;} #page_home #movie_carousel ul li a.work_overlay {width: 190px; height: 108px; background:url('../../images/p7_bg_work_overlay_home.png') 0 0 no-repeat; top:0; left:0;} #page_home #movie_carousel ul li a.work_desc {width: 190px; height: 108px; top:108px;} #page_home #movie_carousel ul li a.work_desc span {font-weight:bold; width:190px;} /* -------------------------------------------------------------------------------------- NEWS PAGE ------------------------------------------------------------------------------------------------ */ #page_news #content_a {width:665px; background: none; height: auto; margin-left: 0;} #page_news #content_a p {width:640px; margin-left:0; padding-right: 0;} #page_news #content_a div.news_item {clear:both; border-bottom:1px solid #ef7d15; width:640px; margin-left:25px; margin-bottom:15px;} #page_news #content_a div.news_article {clear:both; width:640px; margin-left:25px; margin-bottom:15px;} #page_news #content_a div.news_item h3, #page_news #content_a div.news_article h3 {margin:0; font-weight:bold; padding-bottom:10px;} #page_news #content_a h2 {width:400px; float:left;} #page_news #content_a div.news_item h3 {width:400px; float:left;} #page_news #content_a div.news_movie_wrapper {margin-bottom:10px;} #page_news #content_a p.back_link {width:140px; float:right; clear: none; padding-top: 10px; text-align: right; padding-right: 0;} #page_news #content_a p.news_date {width:140px; float:right; clear: none; padding-top: 0; text-align: right; padding-right: 0; font-weight:bold;} /* ----------------------------------------------------------------------------------- CLIENTS PAGE ------------------------------------------------------------------------------------------------ */ #page_clients p {margin-left:25px;} #content ul#client_logos {width:930px; margin-left:25px;} #content ul#client_logos li {width:176px; height:100px; float:left; margin-right:8px; margin-bottom:8px;} #content ul#client_logos li img {border:1px solid #999999;} /* ---------------------------------------------------------------------------------- SERVICES PAGE ------------------------------------------------------------------------------------------------ */ #page_services #content_a {width:500px; background:none; height:auto; margin-left:10px; } #page_services #content_b {width:400px; float:right; height:auto; margin-right: 25px; } #page_services #content_b img {border:none; margin-bottom:10px;} #page_services #content_a p {width:350px; font-size:1.4em;} #page_services #content_a h3 {width:350px; font-weight:bold; margin-top:0;} #page_services #content_a ul {font-size: 1.4em; color: #696969; line-height: 1.4em; margin: 0 0 8px 25px; padding: 0 10px 0 0;} #page_services #content_a ul li {background: url("../../images/ul_list_dash.gif") no-repeat scroll 0 0 transparent; padding: 0 0 0 10px;} /* ----------------------------------------------------------------------------------- CONTACT PAGE ------------------------------------------------------------------------------------------------ */ #page_contact #content_a {width:500px; background:none; height:auto; margin-left:10px; } #page_contact #content_b {width:299px; float:right; height:auto; margin-right: 25px; } #page_contact #content_a p {width:400px;} #page_contact #content_b img {border:1px solid #6a6a6a;} #map {border:1px solid #6a6a6a; width: 440px; height: 420px; margin-left:15px; margin-top:16px;} /* --------------------------------------------------------------------------------- THE BEACH PAGE ------------------------------------------------------------------------------------------------ */ #page_beach #content {background:#fff url('../../images/p7_bg_beach.jpg') 0 0 no-repeat;} #page_beach div.beach_item {border-bottom:1px solid #ef7d15; margin-left: 25px; width:480px; padding-bottom:10px;} #page_beach div.no_border {border:none;} #page_beach div.beach_intro p {margin-left: 25px;} #page_beach h3 {font-weight: bold; margin-left:0;} #page_beach #header h2, #page_beach #header h3 {float:right; width:400px; clear:none; padding:0; margin:0; text-align:right; margin-right:25px;} #page_beach #header h3 {padding-top:6px; font-weight:normal;} /* ------------------------------------------------------------------------------------ PEOPLE PAGE ------------------------------------------------------------------------------------------------ */ #page_people #content_a {width:665px; background: none; height: auto; margin-left: 0;} #page_people #content_a p {width:640px; margin-left:0; padding-right: 0; padding-top:8px; margin-bottom:0;} #page_people #content_a div.people_item {clear:both; border-bottom:1px solid #ef7d15; width:640px; margin-left:25px; margin-bottom:15px; padding-bottom:10px;} #page_people #content_a h3 {margin-left:0; font-size: 1.6em; font-weight: bold; margin-bottom:0; margin-top:0;} #page_people #content_a h4 {margin-left:0; font-size: 1.4em; font-weight: normal; padding-top:4px; padding-bottom:0;} /* ----------------------------------------------------------------------------------------- LOREAL ------------------------------------------------------------------------------------------------ */ #page_loreal h3, #page_loreal h2 {margin-left: 0;} #page_loreal #loreal_content { padding: 0 0 12px 25px; width: 935px; background:#fff; border:1px solid #999; margin-bottom:12px; position:relative;} #page_loreal p {color: #696969; line-height: 1.4em; margin: 0 0 12px 0; padding: 0 10px 0 0;} #page_loreal a.go {background: #EF7D15; width: 250px; text-align: center; padding: 5px; margin: 25px 0; font-size: 1.4em; font-weight: bold; color: #000; text-transform: uppercase; display: block;} #page_loreal div.loreal_intro {border-bottom: 1px solid #EF7D15; margin-bottom:20px;} #page_loreal #loreal_form {padding: 0 0 25px 0; margin: 0;} #page_loreal #loreal_form p {margin-left: 0; padding: 0;} #loreal_logo {display:block; width:200px; height:60px; position:absolute; top:10px; right:25px; background:url('../../images/loreal_portal_logo.gif') 0 0 no-repeat; text-indent:-2000px; overflow:hidden;} #loreal_form{} #loreal_form h3.first-header{padding-top: 20px} #loreal_form div{float: left; width: 50%; display: block;} #loreal_form div.first {margin-bottom:20px;} #loreal_form div.first label{text-align: left; width: 50px;} #loreal_form div label{width: 75px; text-align: right; } #loreal_form div input{width: 332px;} #loreal_form h3{text-transform: uppercase; clear: both; font-weight: bold;} #loreal_form span{font-size: 0.9em;} #loreal_form span.sub_text{float:right; margin-right:20px; width:350px;} #loreal_form label{margin: 4px 5px 5px 0; display: block; float: left; min-width: 80px; padding-right: 10px;} #loreal_form input[type="text"], #loreal_form input[type="email"], #loreal_form textarea{ border: 1px solid #000; padding: 6px; font-family: Arial,Helvetica,sans-serif; font-size: 12px;} #loreal_form input:focus, #loreal_form textarea:focus{ background-color: #efefef;} #loreal_form input[name="project_title"]{width: 800px;} #loreal_form input[name="project_type"]{width: 420px;} #loreal_form input[name="running_time"]{width: 340px; margin-bottom:20px;} #loreal_form input[name="no_allocation"]{ margin-top:5px; margin-bottom:20px;} #loreal_form input.submit { background: #EF7D15; color: #000000; display: block; font-size: 1em; font-weight: bold; padding: 5px; text-align: center; text-transform: uppercase; width: 80px; border:none;} #loreal_form input.submit:hover {cursor: pointer;} #loreal_form textarea{width: 895px; height: 75px;clear: left; margin-bottom:20px;} #loreal_form textarea[name="cost"]{ margin-bottom:0;}