/*
Theme Name: Richard Cole
Version: 1.0
Description: Custom website for Richard Cole
Author: Intervision Design (Ehren Fergusson)
Author URI: https://www.intervision.com.au
*/





/************************************/
/*** CSS CODED BY EHREN FERGUSSON ***/
/************************************/






/************************************/
/************ START CSS *************/

html {height:100%;}
body {margin:0px; padding:0; line-height:1.5em; height:100%; background:#000;}
body,td,th {color:#fff; font-family: 'Open Sans', sans-serif; font-size: 12px;}

/**********************************/
/************* RESET **************/

h1, h2, h3, h4, h5, h6, div, a, li, ul, fieldset, form, p, span {padding:0; margin:0; text-decoration:none; font-weight:normal; list-style:none; border:0; outline:none;}
img { margin:0 0 -5px 0 !important; padding:0; outline:none; border:0;}
h1, h2, h3, h4, h5, h6 {color: #fff; line-height: 1em;}

input[type="button"],input[type="submit"] {-webkit-appearance: none;}
a { color:#98CE00; outline:none; text-decoration:none; cursor:pointer;}
a:hover { color:#fff;}
.clear {clear:both;}
.hidden { overflow: hidden;}
::selection {background: #98CE00; color:#fff;}
::-moz-selection {background: #98CE00; color:#fff;}

/************************************/
/********** SITE ALIGNMENT **********/

#site {display: table; height: 100%; #position: relative; overflow: hidden; width:100%;}
#site2 {#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;}
#wrapper {#position: relative; #top: -50%; margin:0 auto; width:100%;}
#contentfullwidth { width:100%; border-top: 1px solid #98CE00; display: block; position: relative;}
#greenbox { width: 100%; height: 100%; position: absolute; top: 610px; background: #98CE00; z-index: 99;}

/************************************/
/************** HEADER **************/

#logobox { width: 840px; height: 30px; margin: 0 auto; display: block; position: relative;}
#logo { width: 380px; height: 10px; background: url(images/richardcole.png) no-repeat; position: absolute; left: 0; bottom: 10px;}

/************************************/
/*************** MENU ***************/

#subbox { width: 100%; height: 70px; display: block; position: relative; background: #98CE00;}
#submenu {width: 840px; height: 70px; margin: 0 auto; display: block; position: relative; background:#98CE00; z-index: 999;}
#menu {}
#menu ul { float: left; width: 202px; margin: 10px 0 0 0;}
#menu ul li { float: left; width: 100px; border-left:1px solid #c1e266;}
#menu ul li a { display: block;  padding: 3px 5px;}
#menu ul li a h2 { font-size: 12px; text-transform: uppercase; color: #fff;}
#menu-proj {position: absolute; top: 10px; left: 200px; border-left:1px solid #c1e266; padding: 3px 5px;}
#menu-proj h2 {font-size: 12px; text-transform: uppercase; color: #fff;}
#facebook { position: absolute; top: 50px; left: 200px; width: 14px; height: 14px; background: url(images/facebook.png) no-repeat;}
#houzz { position: absolute; top: 47px; left: 225px; width: 20px; height: 20px; background: url(images/houzz.png) no-repeat;}

/************************************/
/*********** MAIN CONTENT ***********/

#content { margin: 0 auto; width: 840px; height: 520px; display: block; position: relative; padding: 10px 0}
#homeslide { margin: 0 auto; width: 840px; height: 520px; display: block; z-index: 8;}
#homeslide li { float: left; display: block; width: 840px; height: 520px;}
.pagebg {width: 840px; height: 520px; display: block;}
.pagetitle { font-size: 24px; /*float: left;*/ text-transform: uppercase; padding: 10px 0; position: absolute; left: 50px; bottom: 50px; font-weight: 300; color: #999;}
.pagetext { padding: 10px;}

#c-carousel {height: 100%; padding: 10px 0; margin: 0;}
#c-carousel {min-height: 520px; min-width: 840px;}
#carousel_wrapper {width: 100%; height: 520px; overflow: hidden; position: absolute; left: 0;}
#carousel_article {width: 100%; height: 520px; overflow: hidden; position: absolute; left: 0;}
#carousel .item { display: block; position: relative; float: left; width: 840px; height: 520px; margin: 0 5px;}
#articles .item { display:block; float: left; width: 410px; height: 520px; margin: 0 5px; position: relative;}
#prev, #next { background: url(images/clear70.png) repeat; display: block;height: 520px; width: 50%;top: 0;position: absolute; z-index: 998;}
#prev:hover, #next:hover {background: url(images/clear80.png) repeat;}
#prev {left: -419px;}
#next {right: -419px;}
#next span, #prev span { display: block; width: 30px; height: 30px; position: absolute; top: 250px;}
#next span { left: 20px; background: url(images/plus.png) no-repeat;}
#prev span { right: 20px; background: url(images/prev.png) no-repeat;}
#false_prev { background: #000; display: block;height: 520px; width: 50%;top: 0;position: absolute; z-index: 999; left: -419px;}

#project_desc { position: absolute; display: block; width: 430px; padding: 15px; color: #fff; background: url(images/clear70.png) repeat; bottom: 25px; left: 50%; z-index: 999; margin-left: -39px;}
#project_desc h2 {text-transform: uppercase; font-size: 14px; padding: 0 0 5px 0;}
#close_desc { position: absolute; width: 14px; height: 14px; background: url(images/close.png) no-repeat; top: 5px; right: 5px;}
#open_desc { position: absolute; width: 100px; padding: 3px 10px; color: #fff; background: url(images/clear70.png) repeat; bottom: -40px; left: 50%; z-index: 999; margin-left: -350px; text-align: center; text-transform: uppercase;}

#navi { position: absolute; display: block; /*width: 160px;*/ max-width:200px;  top:10px; right:0; z-index: 999;}
#navi a { display: block; float: left; width: 10px; height: 10px; margin: 3px; background: #c1e266;}
#navi a.selected { background: #fff;}
#navi a span { display: none;}
#navi a:last-child { display: none !important;}

.projtitle { position: absolute; text-transform: uppercase; top:13px; left: 400px; font-size: 12px;}
/*.slidetitle { position: absolute; text-transform: uppercase; top:25px; left: 50%; margin-left: -418px; font-size: 12px; z-index: 999;}*/
.slidetitle { font-size: 24px; /*float: left;*/ text-transform: uppercase; padding: 10px 50px; position: absolute; left: 50%; margin-left:-420px; bottom: 120px; font-weight: 300; color: #999; z-index: 999; background: rgba(0,0,0,0.9)}
.awardtitle { text-transform: uppercase; padding: 0 0 10px 0;}

ul.projtype {position: absolute; text-transform: uppercase; top:10px; left:300px; font-size: 12px;}
ul.projtype li { border-left:1px solid #c1e266;}
ul.projtype li a { color: #fff; display: block; padding: 3px 5px; line-height: 1em;}

/*#scrollbox { position: absolute; right: 0; top: 0; width: 400px; height: 520px; background: #666; overflow: hidden;}*/

#scrollbox { width: 250px; clear: both; position: absolute; right: 0; top: 10px; }
#scrollbox .viewport { width: 245px; height: 520px; overflow: hidden; position: relative; }
#scrollbox .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbox .thumb .end,
#scrollbox .thumb { background-color: #666; }
#scrollbox .scrollbar { position: relative; float: right; width: 5px; }
#scrollbox .track { background-color: #000; height: 100%; width:5px; position: relative; }
#scrollbox .thumb { height: 20px; width: 5px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbox .thumb .end { overflow: hidden; height: 5px; width: 3px; }
#scrollbox .disable{ display: none; }

#scrollbox2 { width: 400px; clear: both; position: absolute; right: 0; top: 10px; }
#scrollbox2 .viewport { width: 395px; height: 520px; overflow: hidden; position: relative; }
#scrollbox2 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbox2 .thumb .end,
#scrollbox2 .thumb { background-color: #666; }
#scrollbox2 .scrollbar { position: relative; float: right; width: 5px; }
#scrollbox2 .track { background-color: #000; height: 100%; width:5px; position: relative; }
#scrollbox2 .thumb { height: 20px; width: 5px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbox2 .thumb .end { overflow: hidden; height: 5px; width: 3px; }
#scrollbox2 .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

.newspost li { padding: 10px;}
.newspost li a .text {color: #fff !important;}
.newspost li a h3.newstitle { color: #98CE00; text-transform: uppercase; font-size: 13px; padding: 0 0 5px 0;}
.newspost li a .readmore { color: #98CE00;}

.subnews { position: absolute; bottom: 55px; right: 270px; width: 400px;}
.subnews li a { color: #666; font-size: 12px; text-transform:uppercase; text-align: right; display: block;}
.subnews li a:hover { color: #98CE00;}

.myslidetitle { padding: 3px 10px; background: #000; color: #fff; position: absolute; display: block; bottom: 0; right:0; z-index: 99;}

/************************************/
/*********** TEXT STYLING ***********/

.text { line-height:1.3em; display:block;}
.text p { padding:0 0 7px 0;}
.text ul { padding:0 0 7px 0;}
.text ul li { list-style:square; list-style-position:outside; margin:0 0 0 20px;}
.text a {}
.text h6 { font-size:16px;}
.text h5 { font-size:18px;}
.text h4 { font-size:24px;}
.text h3 { font-size:36px;}
.text h2 { font-size:45px;}
.text h1 { font-size:60px;}
.text input, .text textarea { margin:3px 5px 3px 0; padding:4px 10px; border:1px solid #ccc; background:#fff; color:#666;/* width:auto;*/ font-size:12px;}
.text textarea { height:100px;}
.text input:focus, .text textarea:focus {/* background:#333;*/}
.text input:hover, .text textarea:hover { /*color:#fff;*/ border:1px solid #999;}
input[type="button"],input[type="submit"] { width:auto; border:1px solid #000; background:#333; color:#fff; font-size:12px; cursor:pointer;}
input:hover[type="button"],input:hover[type="submit"] { background:#1a1a1a; border:1px solid #000;}

/************************************/
/************ SHORTCODES ************/

.column_01 { width:25%;}
.column_02 { width:50%;}
.column_03 { width:75%;}
.column_04 { width:100%;}
.textrow {margin: 0 auto; overflow: hidden; position:relative; display:block;}
.textcolumn {float: left; display: inline;}
.paddingcol { padding:5px 10px 5px 0;}

ul.square li { list-style:square;}
ul.circle li { list-style:circle;}
ul.tick li { list-style-image:url(images/li_tick.png);}
ul.arrow li { list-style-image:url(images/li_arrow.png);}

.twothirdonethird { display:block; padding:5px 0;}
.twothird { float:left; width:60%;}
.onethird { float:right; width:35%; border-left:1px dotted #999; padding:0 0 0 10px;}

.dropcap { float:left; padding:5px; background:rgba(0,0,0,0.4); color:#fff; font-size:24px; text-transform:uppercase; font-family:"Times New Roman", Times, serif; margin:4px 5px 0 0;}
hr.line { margin:20px 0; border:0; background:none; border-bottom:1px dotted #666;}
.highlight { padding:1px 3px 2px 3px; background:#438; color:#fff;}
.quotes { font-size:14px; font-style:italic;}
.quote { float:left; margin:4px 5px 0 -10px; width:40px; height:24px; font-family:Arial, Helvetica, sans-serif; font-size:90px; line-height:0.8em; letter-spacing:-0.09em;}

/************************************/
/************* COMMENTS *************/

.commentboxes .text { padding:20px;}
#commentform { display:block; padding:15px;}
#commentform input[type="text"] { width:200px;}
#commentform textarea { height:65px; width:430px;}
#comments {display:block;}
#comments h2 { font-size:18px; padding:15px; font-weight:700;}
#comments ol { margin:0; padding:0 15px;}
#comments ol li { border-top:1px solid #ccc; padding:10px 20px;}
#comments ol li .quote {}
#comments ol li cite { font-size:10px; padding:10px 0; color:#999;}

/************************************/
/************** FOOTER **************/



/************************************/
/************** BUTTONS *************/


/************************************/
/************ ALIGNMENTS ************/

.aligncenter { display: block; margin-left: auto; margin-right: auto; padding:10px 0;}
.wp-caption { border: 1px solid rgba(0,0,0,0.6); text-align: center; background-color:rgba(0,0,0,0.5); color:#fff; padding-top: 4px; margin-bottom: 10px; }
.wp-caption.alignleft { margin: 0px 10px 10px 0px; }
.wp-caption.alignright { margin: 0px 0px 10px 10px; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; }
.alignright { float: right; margin:0 0 10px 10px;}
.alignleft { float: left; margin:0 10px 10px 0;}
img.alignleft { display:inline; float:left; margin:2px 10px 0 0 !important;}
img.alignright { display:inline; float:right; margin:2px 0 0 10px !important;}

/************************************/
/************* PAGENAVI *************/

.wp-pagenavi { font-size:13px; margin:0 auto; background:#fff; padding:10px 0 0 10px; text-align:right;}
#pagenavs span.pages, #pagenavs span.extend { cursor:text;}


/************************************/
/********** CONTACT FORM 7 **********/

.wpcf7-form .wpcf7-validation-errors{ border:none;  background-color:#eacebd;  margin:0;  padding:7px; -webkit-border-radius:3px; -moz-border-radius:3px;  border-radius:3px}
.wpcf7-form .wpcf7-mail-sent-ok{ border:none;  background-color:#daeabd;  margin:0;  padding:7px; -webkit-border-radius:3px; -moz-border-radius:3px;  border-radius:3px}
.wpcf7-form .wpcf7-mail-sent-ng{ border:none;  background-color:#eacebd;  margin:0;  padding:7px; -webkit-border-radius:3px; -moz-border-radius:3px;  border-radius:3px}
.wpcf7-form span.wpcf7-not-valid-tip{ border:none;  background-color:#eacebd;  padding:7px; -webkit-border-radius:3px; -moz-border-radius:3px;  border-radius:3px}

/************************************/
/************* END CSS! *************/