/* SIMPLY SOLUTIONS ------------------------------------- ----------------------------------------------- AMAZE PLC ---------------------------------------------- M.ROBINSON ----------------------------- PROJECT COMMENCED: 05/03/09 LIST OF CONTENTS ---------------------------------------- 1 - CORE ELEMENTS 1.1 - STANDARD RULES 1.2 - VARIENT RULES 2 - BASE ELEMENT DEFAULT STYLING 3 - STRUCTURAL ELEMENTS 3.1 - MAIN STRUCTURAL ELEMENTS 3.2 - SUB STRUCTURAL ELEMENTS 3.3 - SUB STRUCTURAL INNER ELEMENTS 3.4 - SUB STRUCTURAL VARIENTS 4 - CONTENT BLOCKS 4.1 - BASE RULES 4.2 - INNER ELEMENT STYLING 4.3 - VARIENT RULES 5 - PAGE SPECIFIC STYLING 5.1 - GLOBAL 5.2 - HOME PAGE 5.3 - CONTENT PAGE 5.4 - FORM PAGES 5.5 - INBOX / SENT ITEMS PAGES 6 - FORMS 6.1 - BASE FORM ELEMENTS 6.2 - FORM CONTROLS 6.3 - FORM BUTTONS APPENDIX A - USEFUL CLASSES -------------------------------------------------------*/ /* 1 - CORE ELEMENTS -------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------*/ /* -- MASTER RESET -- */ body,div,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,em,strong,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} /* 1.1 -- STANDARD RULES -- */ body {width: 100%;} div#outer-wrapper {margin: 0 auto; width: 1024px;} div#inner-wrapper {background: transparent url(/_includes/images/ss_hp_background.gif) center bottom repeat-y; float: left; width: 825px; padding: 0 99px 40px; position: relative;} div#main-footer {float: left; clear: both; width: 100%; margin: -30px 0 0 0; position: relative;} /* 1.2 -- VARIENT RULES -- */ /* (Currently None) */ /* 2 - BASE ELEMENT DEFAULT STYLING ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------*/ body {font: normal 62.5% Arial, Helvetica, sans-serif} h1 {font-weight: bold; font-size: 2.4em; line-height: 1em;} h2 {font-weight: bold; font-size: 1.4em} h3 {font-weight: bold; font-size: 1.4em} h4 {font-weight: bold; font-size: 2.4em} p, blockquote, address, ul, ol, table {font-size: 1.1em; color: #61656A;} p {margin: 20px 0 0 0} p a {font-size: 1em} cite {} hr {} a {font-size: 1.2em; color: #D90033} a:link {} a:visited {} a:hover {text-decoration: none} a:active {} img {} ol {} ol li {} ul {} ul li {} iframe {} address {} strong {font-weight: bold} table a {font-size: 1em} /* 3 - STRUCTURAL ELEMENTS -------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------*/ /* 3.1 -- MAIN STRUCTURAL ELEMENTS -- */ div#main {float: left; padding: 0 16px 10px; position: relative;} div#header {background: #D90033 url(/_includes/images/ss_header_graphic.gif) top right no-repeat; position: relative; height: 152px;} div#footer {position:absolute; bottom: 0; left: 16px; z-index: 0;} /* 3.2 -- SUB STRUCTURAL ELEMENTS -- */ div#col-one, div#col-two {margin: 20px 0 0 0;} div#col-one {float:left; padding: 0 0 80px 0;} div#col-two {float:left;} /* 3.3 -- SUB STRUCTURAL INNER ELEMENTS -- */ div#header img#logo {margin: 12px 0 0 25px} div#header div#profile-container{background: #000 url(/_includes/images/ss_yp_panel_back_left.gif) bottom left no-repeat; position: absolute; top: 0; right: 30px; padding: 0 0 0 10px;} div#header div#profile-container div#profile {background: #000 url(/_includes/images/ss_yp_panel_back_right.gif) bottom right no-repeat; padding: 8px 10px 8px 0; width: 240px; float: left;} div#profile img {float: left; border: 1px solid #999; background: #FFF; padding: 2px; margin: 0 10px 0 0;} div#profile h3, div#profile p {color: #FFF} div#profile h3 {font-weight: bold; font-size: 1.4em; margin: 0 0 4px 0;} div#profile p {margin: 0} div#profile a.arrowlink {background-image: url(/_includes/images/ss_white_arrow.png); float: left; color: #FFF; margin: 10px 20px 0 0} ul#main-nav {background: transparent url(/_includes/images/ss_hp_black_strip.gif) left bottom repeat-x; float: left; position: absolute; bottom: 0px; left: 0; width: 100%; display: block;} ul#main-nav.accessible {position: absolute; top: 70px; left: 0; height: 50px} ul#main-nav li {background: #000 url(/_includes/images/ss_tab_black_left.gif) top left no-repeat; float: left; position: relative; top: -3px; padding:0 0 0 11px ; min-width: 92px; text-align: center} ul#main-nav li a {background: transparent url(/_includes/images/ss_tab_black_right.gif) top right no-repeat; font-weight: bold; text-decoration: none; color: #FFF; display: block; padding: 10px 10px 10px 0} ul#main-nav li a:hover{text-decoration: underline;} ul#main-nav li.active {background: #FFF url(/_includes/images/ss_tab_white_left.gif) top left no-repeat; margin: 0; top: 0;} ul#main-nav li.active a {background: transparent url(/_includes/images/ss_tab_white_right.gif) top right no-repeat; color: #D90033;} ul#main-nav li:first-child {margin: 0 0 0 20px;} ul#main-navhome {float: left; position: absolute; bottom: 0px; left: 0; width: 100%; display: block;} ul#main-navhome.accessible {position: absolute; top: 70px; left: 0; height: 50px} ul#main-navhome li {background: #000 url(/_includes/images/ss_tab_black_left.gif) top left no-repeat; float: left; position: relative; top: 0px; padding:0 0 0 11px ; min-width: 92px; text-align: center} ul#main-navhome li a {background: transparent url(/_includes/images/ss_tab_black_right.gif) top right no-repeat; font-weight: bold; text-decoration: none; color: #FFF; display: block; padding: 10px 10px 10px 0} ul#main-navhome li a:hover{text-decoration: underline;} ul#main-navhome li.active {background: #FFF url(/_includes/images/ss_tab_white_left.gif) top left no-repeat; margin: 0; top: 0;} ul#main-navhome li.active a {background: transparent url(/_includes/images/ss_tab_white_right.gif) top right no-repeat; color: #D90033;} ul#main-navhome li:first-child {margin: 0 0 0 20px;} div#footer-container {width: 825px; margin: 0 auto;} div#main-footer p {float: left; font-size: 1em; margin: 3px 0 0 0px;} div#main-footer img {float: right; margin: 0 20px 0 0} div#main-footer ul {float: left;} div#main-footer ul li:first-child {border: none;} div#main-footer ul li {display: inline; font-size: 0.8em; padding: 0 0 0 20px; border-left: 1px solid #61656A; margin: 0 0 0 20px} div#main-footer ul li a {font-size: 1em; color:#61656A} /* 3.4 -- SUB STRUCTURAL VARIENTS -- */ div#main.home div#col-one {width: 471px; margin-right: 11px;} div#main.home div#col-two {width: 318px; margin: 0} div#main.home {padding: 0 0 10px 25px} div#header.home {height: 120px; border-bottom: 7px solid #000} div#main.twocol div#col-one {width: 482px; margin-right: 11px;} div#main.twocol div#col-two {width: 300px} div#main.forms div#col-one {width: 482px; margin-right: 11px;} div#main.forms div#col-two {width: 300px} /* 4 - CONTENT BLOCKS ------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------*/ /* 4.1 -- BASE RULES -- */ div.content-block {background: #FFF; float: left; width: 100%; border-top: 4px solid #D90033; border-bottom: 1px solid #EEE; margin: 20px 0 0 0; padding: 0 0 10px 0} div.content-block.last {border-bottom: none; padding: 0} /* 4.2 -- INNER ELEMENT STYLING -- */ div#col-one div.content-block h2, div#col-one div.content-block h3 {position: relative} div.content-block h2, div.content-block h3 {margin: 6px 0 10px 10px; text-transform: uppercase;} div.content-block h2 a {position: absolute; right: 10px; top:0px; text-transform: none; font-size: 0.8em; font-weight: normal; margin: 0;} div.content-block h2.icon {position: relative; top: 0; margin: 6px 0 10px 0;} div.content-block h2.icon span {background: transparent top left no-repeat;} div.content-block h2.icon.inbox span {background-image: url(/_includes/images/ss_hp_inbox_icon.gif); padding: 20px 0 2px 65px;} div.content-block h2.icon.postopp span {background-image: url(/_includes/images/post_an_opportunity.gif); padding: 13px 0 2px 70px; } div.content-block h2.icon.newmembers span {background-image: url(/_includes/images/ss_hp_new_members_icon.gif); padding: 20px 0 2px 65px;} div.content-block h2.icon.video span {background-image: url(/_includes/images/ss_login_take_the_tour_icon.gif); padding: 20px 0 2px 56px;} div.content-block h2.icon.sent span {background-image: url(/_includes/images/sent_items_icon.gif); top: -15px; padding: 16px 0 11px 75px} div.content-block h3.table {margin: 20px 0 0 10px; text-transform: none; font-size: 1.1em} div.content-block h4 {margin: 16px 0 0 0} div.content-block h4.divider {margin: 20px 0 10px 10px; text-transform: uppercase; font-size: 1.4em; border-top: 1px solid #999; padding: 6px 0 0 0} div.content-block p {display: block; margin: 10px 10px 0 10px;} div.content-block p.intro {font-weight: bold;} div.content-block p.first {margin: 0 0 0 10px;} div.content-block img.promo {margin: 0 10px; float: left} div.content-block img.float-img {float: left; margin: 10px 80px 0 0} div.content-block ul {list-style: inside disc; margin: 10px 0 0 10px;} div.content-block ul li a {font-size: 1em} div.content-block dl {margin: 0 0 0 10px; font-size: 1.1em} div.content-block dl dt {display: block; float: left; margin: 0 10px 0 0; width: 140px;} div.content-block dl dd {margin: 0 0 10px 0;} div.content-block dl dd a {font-size: 1em} div.content-block div.sub-col-1 {float: left; width: 49%; border-right: 1px solid #EEE;} div.content-block div.sub-col-2 {float: left; width: 50%;} div.content-block div.video-container {float: right; margin: -30px 0 0 0;} /* 4.3 -- VARIENT RULES -- */ div#col-one div.content-block:first-child, div#col-two div.content-block:first-child, div#col-two div.ad-block:first-child {margin: 0;} div#rss-container div.content-block {background: #EEEEEE url(/_includes/images/genric_grey_background.gif) repeat-x scroll left bottom; width: 240px; padding: 0 0 10px 0; margin: 0 0 0 60px} div.content-block.first {margin: 0} div.content-block.grey {background: #EEEEEE url(/_includes/images/genric_grey_background.gif) repeat-x scroll left bottom} div.content-block.alert {background: #fff2a9 url(/_includes/images/genric_alert_background.gif) repeat-x scroll left bottom} div#col-one div.content-block h2.tools, div#col-two div.content-block h2.tools {margin: 6px 0 0 10px; } /* 5 - PAGE SPECIFIC STYLING ------------------------------------------------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------------------------------*/ /* 5.1 -- GLOBAL -- */ a.arrowlink {display: block; background: transparent url(/_includes/images/ss_red_arrow.png) left 2px no-repeat; padding: 0 0 0 20px; margin: 10px 0 0 10px; text-decoration: none;} a.arrowlink:hover {text-decoration: underline} div.content-block a.arrowlink {} a.subscript {font-size: 0.9em; margin: 5px 0 0 0} div.content-block ul.members li img, div.content-block div.imgblock img, div.company-list-container table tr td img {padding: 2px; background: #FFF; border: 1px solid #999} div.tab-block ul.tabs {border-bottom: 4px solid #D90033; width: 100%; display: block;} div.tab-block ul.tabs li {background: #000 url(/_includes/images/ss_pi_form_tab_black_left.png) top left no-repeat; display: inline-block; padding:0 0 0 33px ; text-align: center; margin: 0;} div.tab-block ul.tabs li a {background: transparent url(/_includes/images/ss_pi_form_tab_black_right.png) top right no-repeat; font-weight: bold; text-decoration: none; color: #FFF; display: block; padding: 5px 33px 5px 0;} div.tab-block ul.tabs li a:hover{text-decoration: underline;} div.tab-block ul.tabs li.active {background: #D90033 url(/_includes/images/ss_pi_form_tab_red_left.png) top left no-repeat; position: relative; top: 4px} div.tab-block ul.tabs li.active a {background: transparent url(/_includes/images/ss_pi_form_tab_red_right.png) top right no-repeat; color: #FFF;} div.tab-block h1 {margin: 16px 0 0 0} div.tab-block div.content-block, div.form-block div.content-block {margin: 20px 0 0 0;} div.form-block div.content-block {float: none} div.tab-block div.content-block, div.tab-block ul.pagination {float: left;} div.form-block div.content-block {background: #EEEEEE url(/_includes/images/genric_grey_background.gif) left bottom repeat-x; border-top: 4px solid #999999} div#col-one div.tab-block div.content-block:first-child, div#col-one div.form-block div.content-block:first-child {margin: 16px 0 0 0} div#footer img {float: left; margin: 0 20px 0 0;} div#main.forms div#col-one div.content-block {border-top: 2px solid #999} div.content-block a.cta:first-child {margin: 0 0 0 5px;} a.cta {background: transparent url(/_includes/images/ss_cta_button_arrow_bg_left.gif) left -35px no-repeat; float: left; clear: both; margin: 9px 0 0 5px; padding: 0 0 0 40px; color: #666; font-weight: bold; text-decoration: none; width: 250px} a.cta span {background: transparent url(/_includes/images/ss_cta_button_bg_right.gif) right top no-repeat; display:block; padding: 10px 20px 10px 0;} a.cta:hover {background-position: left 0;} a.cta:hover span {background-position: right -35px;} div#AjaxProgressClass {background: transparent url(/_includes/images/ss_update_overlay.png) center top no-repeat; position: absolute; left: 50%; top: 200px; width: 206px; margin-left: -103px; text-align: center; font-size: 1.2em; min-height:206px;} div#AjaxProgressClass img {padding: 60px 75px 30px;} /* 5.2 -- HOME PAGE -- */ div#header img#laptop {position: absolute; bottom: -7px; right: 0} p.home-intro {font-size: 1.3em; margin: 15px 0 0 0;} div.login-block-container {clear: both;} div.login-block {background: #FBFBFB url(/_includes/images/ss_login_pink_box.jpg) left -25px no-repeat; float: left; width: 232px; margin: 26px 0 0 0; padding: 0 0 10px 0;} div.login-block.first {margin: 26px 3px 0 0;} div.login-block h2 {background: #D90033; color: #FFF; font-size: 1.8em; font-weight: normal; text-align: center; padding: 10px 0} div.login-block ol {text-align: center; margin: 10px 0 0 0; float: none} div.login-block ol li {margin: 10px 0 0 0; float: none} div.login-block ol li:first-child {margin: 0;} div.login-block fieldset, div.login-block ul {min-height: 90px;} div.login-block fieldset input {width: 206px; float:none; margin: 0} div.login-block a.subscript {margin: 15px 0 9px 10px;} div.login-block ul {list-style:outside disc; margin: 0 0 0 24px; color: #000} div.login-block ul li {font-size: 1em; padding: 5px 0 0 0; margin: 0 10px 0 0;} div.login-block ul li:first-child {padding: 10px 0 0 0;} div.login-block a.cta {background: transparent left top no-repeat; width: 100px; margin: 10px 0 0 10px} div.login-block a.cta span {background: transparent url(/_includes/images/ss_cta_button_bg_right.gif) right top no-repeat;} div.login-block a.cta:hover span {background-position: right -35px;} div.login-block a.cta.login {background-image: url(/_includes/images/ss_cta_button_login_bg_left.gif); background-position: left -35px;} div.login-block a.cta.login:hover {background-position: left 0px;} div.login-block a.cta.register {background-image: url(/_includes/images/ss_cta_button_register_bg_left.gif); background-position: left -35px;} div.login-block a.cta.register:hover {background-position: left 0;} div#rss-container{background: transparent url(/_includes/images/ss_login_laptop_bottom.png) top left no-repeat; width: 318px; height: 374px;} div#rss-heading{background: #FFF; float: left; margin: 103px 0 0 28px; width: 144px; padding: 0 5px;} div#rss-content{background: #FFF; float: left; margin: 5px 0 0 28px; clear: left; width: 144px; padding: 5px; border-top: 3px solid #000;} div#rss-heading p, div#rss-heading h3, div#rss-heading h4 {font-size: 0.9em; margin: 0; color: #000;} div#rss-container div.content-block ul {list-style: outside disc; margin: 5px 0 0 25px; color: #000;} /* 5.3 -- CONTENT PAGE -- */ a.findoutmore {float: right; background: transparent url(/_includes/images/ss_hp_findoutmore_button.gif) left top no-repeat; width: 105px; height: 65px; overflow:hidden; margin-top: -20px; font-size: 2em; color: #FFF; text-decoration: none; padding: 10px 15px } a.findoutmore:hover {background-position: left -85px;} div.content-block ul.members {float: left; margin: 0 0 0 10px; list-style: none} div.content-block ul.members li:first-child {margin: 0 0 0 0;} div.content-block ul.members li {float: left; clear: both; margin: 5px 0 0 0; width: 100%} div.content-block ul.members li img {float: left; vertical-align: middle; margin: 0 5px 0 0} div.content-block ul.members li a {margin: 0 5px 0 0;} div.ad-block {float: left; width: 100%; margin: 20px 0 0 0; color: #000} div.survey-block {background: #78D62A; float: left; width: 100%; margin: 10px 0 0 0;} div.survey-block h3 {font-weight: bold; font-size: 1.2em; margin: 10px 10px 0} div.survey-block ul {color: #000} div.survey-block ul li {margin: 5px 0 0 0;} div.survey-block ul li:first-child {margin: 0} div.survey-block fieldset {margin: 10px} div.survey-block fieldset label {float: none; display: inline;} div.survey-block fieldset input {margin: 0 5px 0 0} div.survey-block fieldset input.submit {margin: 10px 0 0 0} /* 5.4 -- FORM PAGES -- */ div.content-block ul.nolist {list-style: none} div.content-block.grey h2 {text-transform:none; font-size: 1.8em; margin-left: 10px} div.content-block.grey p, div.content-block.grey ul {color: #000; margin-left: 10px} div.content-block.grey li {margin:10px 0 0 0} div.content-block.grey ul {list-style-type: none; list-style-position: inside;} div.content-block.grey ul.members {margin: 0 0 0 10px} div.content-block.grey ul.members li {margin: 10px 0 0 0} div.content-block.grey ul.members.expanded li {margin: 20px 0 0 0} div.content-block.grey ul.members li:first-child {margin: 0} div.content-block.grey ul.members ul.contacts {float: left; margin: 0; font-size: 1em} div.content-block.grey ul.members ul.contacts li {margin: 5px 0 0 0;} div.content-block.grey ul.members ul.contacts li:first-child {margin: 0} div.content-block div.imgblock {margin: 0 0 0 10px;} div.content-block div.imgblock img {float: left; margin: 0 10px 10px 0; vertical-align: top;} div.content-block div.imgblock p {margin: 0 0 0 160px} div.content-block div.imgblock ul {list-style: none; margin: 0 0 0 60px} div.content-block div.imgblock ul li {margin: 5px 0 0 0; color: #000; font-size: 1.1em} div.content-block div.imgblock ul li a {font-size: 1em} div.content-block address {display: inline-block; font-size: 1em} div.content-block address a {margin: 10px 0 0 0} div#col-one h1.icon {border-top: 4px solid #D90033; padding: 5px 0 0 0} div#col-one h1.icon span {background-position: left top; background-repeat: no-repeat; position: relative; top: 0} div#col-one h1.icon.register span {background-image: url(/_includes/images/join_business_network_icon.gif); padding: 25px 0 0 56px;} div#col-one h1.icon.postopp span {background-image: url(/_includes/images/post_an_opportunity.gif); padding: 10px 0 0 70px} div#col-one h1.icon.inbox span {background-image: url(/_includes/images/ss_hp_inbox_icon.gif); padding: 17px 0 0 60px} div#col-one h1.icon.sent span {background-image: url(/_includes/images/sent_items_icon.gif); padding: 21px 0 0 75px} div#col-one h1.icon.search span {background-image: url(/_includes/images/search_icon.gif); padding: 21px 0 8px 45px} fieldset a.calendar {background: transparent url(/_includes/images/ss_cal_01.png) top left no-repeat; padding: 0 12px 20px 0; text-decoration: none; } fieldset a.calendar:hover {background-image: url(/_includes/images/ss_cal_02.png)} fieldset a.calendar span {visibility: hidden} div.ajax__calendar_container {z-index: 1} /* 5.5 -- INBOX / SENT ITEMS PAGES -- */ div.content-block h3.subject {background: transparent url(/_includes/images/ss_hp_inbox_open_mail_icon.gif) left top no-repeat; text-transform: none; padding: 0 0 0 20px; margin: 16px 10px 10px 10px} div#hidden-container {display: none} div#hidden-container div.content-block {float: none} div.table-container {background: #DDDDDD; padding: 0 10px 10px; margin: 10px 0 0 0; border-top: 1px solid #000; } div.table-container table {width: 100%; color: #000} div.table-container table table {border: 1px solid #000} div.table-container table th {font-weight: bold; border-bottom: 1px solid #000; padding: 7px 0; text-transform: uppercase} div.table-container table td {border-bottom: 1px solid #333; padding: 8px 2px;} div.table-container table tr td a {color: #000; text-decoration: none;} div.table-container table tr td:first-child {background:transparent url(/_includes/images/ss_hp_inbox_open_mail_icon.png) 3px 8px no-repeat; padding: 2px 8px 2px 25px;} div.table-container table tr.alternate td:first-child {background:#EDEDEC url(/_includes/images/ss_hp_inbox_open_mail_icon.png) 3px 8px no-repeat; padding: 2px 8px 2px 25px;} div.table-container table tr.alternate {background-color: #EDEDEC!important} div.table-container table tr.unread {font-weight: bold;} div.table-container table tr.unread td:first-child {background-image: url(/_includes/images/ss_hp_inbox_new_mail_icon.png)} /* Gridview attributes */ table tr.gridviewrow {background: #EDEDEC!important} table tr.pagination {background: #FFF;} table tr.pagination table td {padding: 20px 0 10px 0!important; text-align: center; border: none;} table tr.pagination table td a {border:2px solid #CCCCCC; color:#000000; font-weight:bold; margin:0 8px 0 0; padding:2px 5px; text-decoration:none; display:inline!important} table tr.pagination table td span {background: #CCC; border:2px solid #000; color:#000000; font-weight:bold; margin:0 8px 0 0; padding:2px 5px; text-decoration:none;} table tr.gridviewfooter td {background-image: none!important; height: 10px;} div.table-container table tr.gridviewrow td:first-child, div.table-container table tr.gridviewrowalternate td:first-child, div.table-container table tr.pagination td:first-child {background:none; padding: 0;} div.table-container table tr.gridviewrow td:first-child img, div.table-container table tr.gridviewrowalternate td:first-child img, div.table-container table tr.pagination td:first-child img {margin: 5px;} div.table-container table th a, div.table-container table tr.gridviewrow a, div.table-container table tr.gridviewrowalternate a {color: #000; text-decoration: none} div.table-container table tr.pagination td {padding: 10px;} div.table-container table tr.pagination td {border: none} div.company-list-container {margin: 10px 10px 0} div.company-list-container table {width: 100%;} div.company-list-container table tr {width: 100%; font-weight: normal!important} div.company-list-container table th {display: none;} div.company-list-container table table {border: 1px solid #000} div.company-list-container table tr.alternate {background-color: #EDEDEC !important} div.company-list-container table tr th, div.company-list-container table tr td {padding: 10px 5px} div.company-list-container table tr th {color: #000; font-size: 1.1em; font-weight: bold;} div.company-list-container table tr td {vertical-align: top; text-align: left; border-top: 1px solid #999} div.company-list-container table tr td strong {color: #000; text-align: right; display: block; margin-top: 5px;} div.company-list-container table tr td a {display: block;} div.company-list-container table tr td.image {width: 52px} div.company-list-container table tr td.status {width: 80px; text-align: right} div.company-list-container table tr td a.info, div.company-list-container table tr td.status a {position: relative; background-position: left 0px; text-align: right;} div.company-list-container table tr td a.info span, div.company-list-container table tr td.status a span {background: transparent url(/_includes/images/ss_hover_box.gif) right -175px no-repeat; display: none; position: absolute; right: 88px; top: -27px; padding: 0 20px 0 0; z-index: 1; width: 400px;} div.company-list-container table tr td a.info span span, div.company-list-container table tr td.status a span span {background: #FCE6E7; border: 1px solid #C8C7C7; border-right: none; position: static; left: auto; top: auto; padding: 0; padding: 10px; color: #000; width: 389px; text-align: left;} div.company-list-container table tr td a.info span span h4, div.company-list-container table tr td.status a span span h4 {text-transform: uppercase; color: #000; font-size: 1.2em; font-weight: bold; margin: 0 0 10px 0; text-transform: uppercase; border: none; padding: 0;} div.company-list-container table tr td a.info:hover span, div.company-list-container table tr td.status a:hover span {display: block;} div.company-list-container table tr.pagination td {border: none; padding: 0;} div.company-list-container table tr.pagination table td {text-align: center} /* 6 - FORMS ---------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------*/ /* 6.1 -- BASE FORM ELEMENTS -- */ form {} fieldset {margin: 0 10px 0 10px} fieldset legend {display: none} fieldset p {margin: 10px 0 0 0;} fieldset p.first, div.content-block fieldset p.first {margin: 0;} fieldset ol, fieldset ul, fieldset p {color: #000} fieldset ol {margin: 20px 0 0 0;} fieldset ol li {clear: left; margin: 10px 0 0 0;} fieldset ol li:first-child {margin: 0} fieldset ol li a.img {display: inline-block} fieldset ol li input, fieldset ol li select, fieldset ol li textarea {font-size: 1em; padding: 0 0 0 3px; width: 305px; vertical-align: top;} fieldset ol li select {width: 312px} fieldset ol li textarea {font-size: 1.2em; height: 120px} div.content-block fieldset ol li p {font-size: 1em; margin: 10px 10px 10px 0} fieldset input.disabled {border: none; background: none; color: #000; font-weight: bold; padding: 0} fieldset input.short {width: 200px!important} fieldset select.short {width: 207px!important} fieldset input.tiny {width: 100px!important;} fieldset select.tiny {width: 107px!important;} fieldset input.medium {width: 133px!important;} fieldset select.medium {width: 140px!important;} fieldset input.searchbox {width: 175px; margin: 0 0 0 0} fieldset input.postcode {width: 140px!important} fieldset input.search {width: 356px!important} fieldset select.search {width: 360px!important} fieldset input.findcom {width: 311px!important} fieldset select.findcom {width: 360px!important} fieldset li select.browse {width: 384px!important} fieldset li input.browse {width: 347px!important} fieldset li select.go {width: 384px!important} fieldset li input.go {width: 347px!important} fieldset label {width: 150px; display: block; float: left; font-weight: bold; font-size: 9px;} fieldset table label {display: inline; float: none; margin-left: 10px;} fieldset ol li ul.check-radio {font-size: 1em; float: left} fieldset ul.check-radio {list-style: none; margin: 10px 0 0 0} fieldset ul.check-radio li:first-child {margin: 0} fieldset ul.check-radio li {margin: 10px 0 0 0} fieldset ul.check-radio li label, fieldset ul.check-radio li input {width: auto; margin: 0 10px 0 0; float: none; display: inline; vertical-align: top;} fieldset div.check-radio {margin: 20px 0 0 0;} fieldset div.check-radio span {} fieldset div.check-radio span label {width: 440px; float: none; display: inline-block; margin: 0 0 10px 20px} fieldset div.check-radio span input {width: auto; display: inline; margin: 0 0 0 -460px;} fieldset div.check-radio span br {clear: both;} fieldset li.fullwidth label {width: 449px;} fieldset li.fullwidth input, fieldset li.fullwidth textarea {width: 454px; margin: 7px 0 0 0} fieldset li.fullwidth select {margin: 7px 0 0 0;} fieldset li.fullwidth select.fullwidth {width: 460px} /* Nested List Forms */ fieldset ol ol {font-size: 1em} fieldset ol li ol {float: left; display: block; margin: 0 0 0 20px;} fieldset ol li ol:first-child {margin: 0;} fieldset ol li ol li label {float: none; width: auto;} fieldset ol li ol li input, fieldset ol li ol li select {margin: 5px 0 0 0} /* 6.2 -- FORM CONTROLS -- */ div.content-block ul.controls {clear: both; list-style: none; margin: 20px 0 0 10px} div.content-block ul.controls li {margin: 0 10px 0 0; display: inline} div.content-block ul.controls li a {margin: 0;} div.content-block fieldset ul.controls {margin: 20px 0 0 0;} ul.pagination {background: transparent url(/_includes/images/genric_grey_background.gif) left bottom repeat-x; clear: both; list-style: none; margin: 20px 0 0 0; border-top: 2px solid #999; padding: 10px 0; width: 100%} ul.pagination li {margin: 0 0 0 10px; display: inline} ul.pagination li a {vertical-align: middle; margin: 0} div.form-block ul.pagination {border-top: 2px solid #999;} /* 6.3 -- FORM BUTTONS -- */ /* -- Default Styling -- */ a.button {background-position: left top; background-repeat: no-repeat; display: inline-block; margin: 0 0 0 10px; padding: 0 0 0 38px; font-weight: bold; text-decoration: none; font-size: 1.1em; vertical-align: top;} a.button span {background-position: right top; background-repeat: no-repeat; display: inline-block; padding: 10px 12px 10px 0;} a.button {margin-top: 5px; vertical-align: middle;} ul li a.button, ol li a.button {font-size:1em} /* -- Varient Styling -- */ /* Cancel */ a.button.cancel {background-image: url(/_includes/images/form_buttons/ss_r_red_cancel_button.gif); color: #D90033; background-position: left 0px; } a.button.cancel span {background-image: url(/_includes/images/form_buttons/ss_l_red_cap.gif); background-position: right -35px; } a.button.cancel:hover {background-position: left -35px; } a.button.cancel:hover span {background-position: right -70px; } a.button.cancel:active {background-position: left -70px;} a.button.cancel:active span {background-position: right -105px;} /* Confirm */ a.button.tick {background-image: url(/_includes/images/form_buttons/ss_r_green_tick_button.gif); color: #3B7E35; background-position: left 0px; } a.button.tick span {background-image: url(/_includes/images/form_buttons/ss_l_green_cap.gif); background-position: right -35px; } a.button.tick:hover {background-position: left -35px; } a.button.tick:hover span {background-position: right -70px; } a.button.tick:active {background-position: left -70px;} a.button.tick:active span {background-position: right -105px;} /* Go */ a.button.go {background-image: url(/_includes/images/form_buttons/ss_r_green_go_button.gif); color: #3B7E35; background-position: left 0px; } a.button.go span {background-image: url(/_includes/images/form_buttons/ss_l_green_cap.gif); background-position: right -35px; } a.button.go:hover {background-position: left -35px; } a.button.go:hover span {background-position: right -70px; } a.button.go:active {background-position: left -70px;} a.button.go:active span {background-position: right -105px;} /* Search */ a.button.search {background-image: url(/_includes/images/form_buttons/ss_r_grey_search_button.gif); color: #000000; background-position: left 0px; } a.button.search span {background-image: url(/_includes/images/form_buttons/ss_l_grey_cap.gif); background-position: right -35px; } a.button.search:hover {background-position: left -35px; } a.button.search:hover span {background-position: right -70px; } a.button.search:active {background-position: left -70px;} a.button.search:active span {background-position: right -105px;} /* Post */ a.button.post {background-image: url(/_includes/images/form_buttons/ss_r_grey_post_opportunity_button.gif); color: #000000; background-position: left 0px; } a.button.post span {background-image: url(/_includes/images/form_buttons/ss_l_grey_cap.gif); background-position: right -35px; } a.button.post:hover {background-position: left -35px; } a.button.post:hover span {background-position: right -70px; } a.button.post:active {background-position: left -70px;} a.button.post:active span {background-position: right -105px;} /* Back to Profile */ a.button.profile {background-image: url(/_includes/images/form_buttons/ss_r_grey_back_to_profile_ro.gif); color: #000000; background-position: left 0px; } a.button.profile span {background-image: url(/_includes/images/form_buttons/ss_l_grey_cap.gif); background-position: right -35px; } a.button.profile:hover {background-position: left -35px; } a.button.profile:hover span {background-position: right -70px; } a.button.profile:active {background-position: left -70px;} a.button.profile:active span {background-position: right -105px;} /* Find Company */ a.button.findcompany {background-image: url(/_includes/images/form_buttons/ss_r_grey_find_company_button.gif); color: #000000; background-position: left 0px; } a.button.findcompany span {background-image: url(/_includes/images/form_buttons/ss_l_grey_cap.gif); background-position: right -35px; } a.button.findcompany:hover {background-position: left -35px; } a.button.findcompany:hover span {background-position: right -70px; } a.button.findcompany:active {background-position: left -70px;} a.button.findcompany:active span {background-position: right -105px;} /* Review */ a.button.review {background-image: url(/_includes/images/form_buttons/ss_r_grey_review_later_button.gif); color: #000000; background-position: left 0px; margin-left: 89px!important } a.button.review span {background-image: url(/_includes/images/form_buttons/ss_l_grey_cap.gif); background-position: right -35px; } a.button.review:hover {background-position: left -35px; } a.button.review:hover span {background-position: right -70px; } a.button.review:active {background-position: left -70px;} a.button.review:active span {background-position: right -105px;} /* Upload */ a.button.upload {background-image: url(/_includes/images/form_buttons/ss_r_grey_upload_button.gif); color: #000000; background-position: left 0px; } a.button.upload span {background-image: url(/_includes/images/form_buttons/ss_l_grey_cap.gif); background-position: right -35px; } a.button.upload:hover {background-position: left -35px; } a.button.upload:hover span {background-position: right -70px; } a.button.upload:active {background-position: left -70px;} a.button.upload:active span {background-position: right -105px;} /* Next */ a.button.next {background-image: url(/_includes/images/form_buttons/ss_r_grey_next_button.gif); color: #000000; background-position: left -35px; } a.button.next span {background-image: url(/_includes/images/form_buttons/ss_l_grey_cap.gif); background-position: right -35px; } a.button.next:hover {background-position: left -70px; } a.button.next:hover span {background-position: right -70px; } a.button.next:active {background-position: left -105px;} a.button.next:active span {background-position: right -105px;} /* Previous */ a.button.previous {background-image: url(/_includes/images/form_buttons/ss_r_grey_previous_button.gif); color: #000000; background-position: left -35px; } a.button.previous span {background-image: url(/_includes/images/form_buttons/ss_l_grey_cap.gif); background-position: right -35px; } a.button.previous:hover {background-position: left -70px; } a.button.previous:hover span {background-position: right -70px; } a.button.previous:active {background-position: left -105px;} a.button.previous:active span {background-position: right -105px;} /* Delete */ a.button.delete {background-image: url(/_includes/images/form_buttons/ss_r_red_decline_delete_button.gif); color: #D90033; background-position: left 0px; } a.button.delete span {background-image: url(/_includes/images/form_buttons/ss_l_red_cap.gif); background-position: right -105px; } /* Pagination */ a.pagination {background: #FFF; color: #000; padding: 2px 5px; border: 2px solid #CCC; text-decoration: none; font-weight: bold; margin: 0 8px 0 0; display: inline;} a.pagination:hover {border: 2px solid #000} a.pagination.active {background: #999; border: 2px solid #000} /* APPENDIX - --------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------*/ /* A -- USEFUL CLASSES -- */ .nofloat{float: none!important} .nodisplay{display:none!important} .inline{display:inline!important} .nomargin{margin: 0!important} .fr {float: right!important;} .fl {float: left!important;} .clr {clear:both!important} .wauto {width: auto!important} .nomargin{margin: 0!important} .ml0 {margin-left: 0!important} .mt20 {margin-top:20px!important} .mt10 {margin-top:10px!important} .ml150 {margin-left: 150px!important;} .mt8 {margin-top: 8px!important} .mt7 {margin-top: 7px!important} span.error {color: red!important}