/* csans-design.css                                              */
/* This file defines the css elements used within site design.   */
/* Issue 1.0, 17-April-2011 - VLD                                 */

@import url("/css/Core/csans-reset.min.css");

body {margin:0; padding:0; background:url(/images/design/bkgrnd-tile.png) repeat}
.page {width:900px; text-align:left; margin:0 auto; padding-bottom:70px; position:relative; background:url(/images/design/bkgrnd-page.png) no-repeat 0 360px}
#container {min-height:100%; position:relative}

.hidden {display:none}
h1{display:none}

/* Header */
#header{width:100%; height:360px; text-align:center; position:absolute; top:0; left:0; z-index:100; background:url(/images/design/bkgrnd-header.png) repeat}
#header .page{padding:0; background:none}
#header .logo{width:310px; height:57px; margin:110px 295px 0; background:url(/images/design/image-matrix.png) no-repeat 0 0}
#header h2{font-size:1.1em; color:#FDBE57; text-transform:lowercase; text-align:center}

#header .language {height:17px; text-align:right; padding-top:10px}
#header .language .english{width:72px; height:17px; background:url(/images/design/image-matrix.png) no-repeat -177px -57px}
#header .language .english:hover{background-position:-177px -74px}

#header ul.navigation {text-align:center; margin:0; margin-top:70px}
#header .navigation li {display:inline-block; *display:inline; margin:0; padding:0 20px 0 30px; text-transform:lowercase; font-size:1em; line-height:1em; font-weight:bold; list-style:none; color:#FFF; background:url(/images/design/image-nav.png) no-repeat left} 
#header .navigation li a{color:#CCC}
#header .navigation li a:hover,
#header .navigation li a.active {text-decoration:none; color:#FFF}
#header .navigation li.who,
#header .navigation li.home{padding-left:0; background:none}
#header .navigation li.contact{padding-right:0}

/* Content */

/* THREE column content class                          */
.content-3-col {float:left; width:500px;margin:0; margin:10px 0 0 210px; padding:0}
/* TWO column content class. Includes equivalent of t2 l7                          */
.left-col-3-col {float:left; width:170px; margin-left:-710px; padding:0}
* html .left-col-3-col {display:inline;}
.content-2-col {float:left; width:720px;margin:0; margin:10px 0 0 210px; padding:0}
/* TWO column left column class. Includes equivalent of col6 t5                    */
.left-col-2-col {float:left; width:170px; margin-left:-930px; padding:0}
* html .left-col-2-col {display:inline;}
/* TWO column content class WITHOUT left column. Includes equivalent of  col17 t1  */
.content-2-col-no-left {float:left; width:710px; margin:0; margin-top:10px; padding:0}
* html .content-2-col-no-left {display:inline;}
/* ONE column content class. Includes equivalent of  row  */
.content-1-col {float:left; width:100%; margin:0; margin-top:21px}

#content {margin-top:420px}

#content h3{text-align:center; font-size:1.5em; line-height:1.2em; margin:0; margin-bottom:20px}
#content span{display:block; font-size:70%; line-height:0.9em; font-weight:normal; color:#CCC}
#content .module{float:left; position:relative; width:240px; padding:20px; padding-bottom:0; height:140px; margin:0 10px; background:url(/images/design/bkgrnd-column.png) repeat}
#content .module h3{text-align:left; font-size:1.2em; line-height:1.1em; margin:0; margin-bottom:5px}
#content .more-link{position:absolute; bottom:-24px; right:0}
#content .module-image {width:280px; height:160px; padding:0; background:none}
#content .module-image h3{display:none}
#content .module-image img{display:block; width:280px; height:160px; margin:0}

.row{position:relative}
.up-link{position:absolute; bottom:60px; left:-20px; width:13px; height:14px; background:url(/images/design/icon-top.png) no-repeat}

#introduction {padding-bottom:60px; border-bottom:1px solid #d2d2d2}
#introduction .module{width:390px}
#introduction .work{width:280px; height:160px; padding:0}
#introduction .work img{display:block; width:280px; height:160px; margin:0}
#introduction .work .more-link{width:87px; height:17px; background:url(/images/design/image-matrix.png) no-repeat 0 -57px}
#introduction .work .more-link:hover{background-position:0 -74px}
#introduction .work h3{display:none}
#introduction .news h3{margin-bottom:10px}
#introduction .news ul{margin:0}
#introduction .news li{margin:0; margin-bottom:10px; list-style:none outside; font-size:1em}
#introduction .news li h4{margin:0; font-size:0.9em; line-height:1.2em}
#introduction .news li p{margin:0; color:#999}
#introduction .news .more-link{width:77px; height:17px; background:url(/images/design/image-matrix.png) no-repeat -87px -57px}
#introduction .news .more-link:hover{background-position:-87px -74px}

#who,
#what,
#work,
#news,
#contact {margin:0; padding:40px 0 60px; border-top:1px solid #FFF; border-bottom:1px solid #d2d2d2}

#what .module{height:250px}
#what .module-image {width:280px; height:307px; padding:0; margin-top:-35px}
#what .module-image img{display:block; width:280px; height:auto; margin:0}
#what .module-image .more-link{width:202px; height:17px; background:url(/images/design/image-matrix.png) no-repeat 0 -91px}
#what .module-image .more-link:hover{background-position:0 -108px}

#work {padding:40px 0 40px}
#work ul{float:left; width:100%; margin:0}
#work li{float:left; width:205px; height:160px; margin:0 10px 20px 10px; list-style:none outside; font-size:1em; background:#FFF}
#work li img{display:block; width:205px; height:117px; margin:0}
#work li h4{margin:0; margin-top:4px; font-size:0.9em; line-height:1.2em; padding:0 8px}
#work li p{font-size:0.8em; line-height:1.2em; padding:0 8px; color:#999}

#news .news-container{float:left; position:relative; width:840px; margin:0 10px; padding:10px 20px; background:#FFF}
#news table{float:left; width:100%; margin:0; padding:0; border:none}
#news td{border:none; border-bottom:1px solid #e2e2e2}
#news td.date{width:150px; color:#999}
#news .last td{border:none}
#news .more-link{width:77px; height:17px; background:url(/images/design/image-matrix.png) no-repeat -87px -57px}
#news .more-link:hover{background-position:-87px -74px}

#contact {border-bottom:0}
#contact .more-link{width:59px; height:17px; background:url(/images/design/image-matrix.png) no-repeat 0 -125px}
#contact .more-link:hover{background-position:0 -142px}
#contact h4{margin:0; margin-bottom:5px}

#breadcrumbs {margin:0; margin-bottom:30px}
#breadcrumbs p{font-weight:bold; font-size:0.85em; text-transform:lowercase; color:#2A2C2D}
#breadcrumbs a{color:#449DB2}
#breadcrumbs a:hover{text-decoration:none}
#breadcrumbs .separator{color:#CCC; margin:0 5px}



/* Pagination */
#content .pagination {padding:5px 0; margin:0; margin-top:1px; background:#2A2C2D}
#content .pagination ul {text-align:center; margin:2px 10px; padding:0}
#content .pagination li {display:inline; list-style:none; color:#fff; font-size:0.9em; padding:0 5px; margin:0}
#content .pagination li a{color:#fff; margin:0; padding:0; border:none; text-decoration:none}
#content .pagination li a:hover{text-decoration:underline}
#content .pagination li a.active{text-decoration:none; color:#449DB2}
#content .pagination a.previous {width:7px; height:11px; padding-top:5px; background:url(/images/design/icon-arrowleft.png) no-repeat}
*:first-child+html #content .pagination a.previous {padding-top:4px} * html #content .pagination a.previous {padding-top:4px}
#content .pagination a.next {width:7px; height:11px; padding-top:5px; background:url(/images/design/icon-arrowright.png) no-repeat}
*:first-child+html #content .pagination a.next {padding-top:4px} * html #content .pagination a.next {padding-top:4px}


/* Standard Form */
.standard-form {float:left; width:100%; margin:0; margin-bottom:20px; padding:0; background:#EEE}
.standard-form h3{font-size:1.2em; margin:0; margin-bottom:20px}
.standard-form fieldset{border:none; margin:20px}
.standard-form p{font-size:0.9em}
.standard-form ul {float:left; width:100%; list-style:none; margin:0; margin-bottom:30px; padding:0}
.standard-form .sub-section {padding-bottom:20px; margin-bottom:20px; border-bottom:1px dotted #CCC}
.standard-form li {float:left; font-size:12pt; width:100%; margin:4px 0; padding:0}
.standard-form li.check-box {display:inline-block; width:auto; margin:0; margin-right:20px}
.standard-form li.date {display:inline-block; width:auto; margin-right:40px}
.standard-form li.time {width:200px; margin-right:10px}
.standard-form .compulsory{font-style:italic; font-weight:normal}
.standard-form .caption{display:block; font-size:0.75em; font-style:italic; font-weight:normal; margin:4px 0 8px 22%; padding:0}
.standard-form label {display:inline-block; vertical-align:middle; width:20%; font-size:0.9em; line-height:1.2em; font-weight:bold; color:#454545; margin-right:1%}
.standard-form label.textarea-label {vertical-align:top}
.standard-form label.checkbox-label {width:auto; margin-right:0}
.standard-form label.date-label {width:auto; min-width:60px}
.standard-form label.editor-label {width:auto; margin:20px 0 20px 2%}
.standard-form select {display:inline-block; vertical-align:middle; padding:4px; border:1px solid #CCC; color:#333}
.standard-form input {display:inline-block; vertical-align:middle; width:auto; margin:0; padding:5px; border:1px solid #CCC; color:#333; border-radius:6px; -ms-border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px}
.standard-form input.text {width:74%}
.standard-form input.medium {width:50%}
.standard-form input.small {width:25%}
.standard-form input.xsmall {width:12%}
.standard-form input.date {width:80px}
.standard-form input.time {width:160px}
.standard-form input.checkbox {border:none}
.standard-form input.radio {border:none}
.standard-form input.hidden{display:none}  /* For Firefox to prevent white squares appearing */
.standard-form input.no-label{margin-left:21.5%}
.standard-form textarea {border:1px solid #CCC; padding:4px; color:#333}
.standard-form textarea.standard-textarea {width:74%}
.standard-form span.options {float:left; height:20px; margin-right:14px}
.standard-form .form-separator {border-bottom:1px dotted #CCC}
.standard-form .captcha-container {display:inline-block; vertical-align:top; width:500px; padding:20px; border-radius:8px; -ms-border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px; background:#E2E2E2}
.standard-form label.captcha-label {*float:left; display:inline-block; vertical-align:middle}
.standard-form input.captcha {*float:left; display:inline-block; vertical-align:middle; width:120px; margin-bottom:6px; padding:6px 4px; border:none}
.standard-form a.captcha-image-change{display:inline-block; vertical-align:middle; font-size:0.9em; text-decoration:underline; margin:0 0 0 8px}
.standard-form a.captcha-image-change:hover{text-decoration:none}
#imgCaptcha {display:inline-block; vertical-align:middle; margin:0 0 0 8px}
.standard-form input.send-button {float:left; display:block; margin:0; margin-left:22%; padding:6px 12px; border:0px; color:#FFF; font-size:1.1em; font-weight:bold; background:#449DB2; cursor:pointer}

/* Used for multi select checkbox panel as alternative to standard multi select which used CTRL key */
#content .multiselectchecks-container {float:left; width:100%; margin:0 0 20px; padding-bottom:20px}
#content .multiselectchecks {display:block; height:10em; width:19em; overflow:auto; background:#fff; color:#000; padding:10px; border:none; overflow-x:hidden}
#content .multiselectchecks ul {float:left; padding:0; margin:0; white-space:nowrap}
#content .multiselectchecks ul li {margin:2px 0;padding:0}
#content .multiselectchecks ul li input{float:left; border:1px solid #ccc}
#content .multiselectchecks ul li label{margin-left:5px;float:left;text-align:left}

/* Calendar icons */
input.dp-applied {}
a.dp-choose-date {display:inline-block; vertical-align:middle; width:16px; height:16px; padding:0; margin:5px 3px 0; text-indent:-2000px; overflow:hidden; background: url(/images/design/button-matrix-en.png) -481px -67px no-repeat}
a.dp-choose-date.dp-disabled {background: url(/images/design/button-matrix-es.png) -481px -87px no-repeat; cursor:default}

/* Response message styles */
#content p.response-message {clear:left; padding:5px 10px 5px 30px; color:#FFF; text-align:left; font-weight:bold; margin:4px 0}
.error {color:#FFF;background:#eb6c16 url(/images/admin/icon-error.png) no-repeat left}
.success {color:#FFF;background:#a2d40f url(/images/admin/icon-success.png) no-repeat left}
.warning {color:#FFF;background:#f6b415 url(/images/admin/icon-warning.png) no-repeat left}




/* Footer */
#footer {position:absolute; width:100%; height:70px; left:0; bottom:0}
#footer .page{padding:20px 0 0; background:none}
#footer ul{text-align:center; margin:0; margin-top:22px}
#footer li{display:inline-block; margin:0; padding:0 8px; color:#555; font-size:0.7em; line-height:1em; list-style:none}
#footer li a{text-transform:lowercase; color:#555}
#footer li a:hover{color:#555}