[cssbeginner]

Hi There

I am a beginner to using css and I am trying to do some changes for a template I am busy with.

I have managed to change quite a lot of things myself but there are a few things that I am stuck on.

.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



#isotopeContainer {}
.isotope .item_introtext {}
.isotope .item_introtext p {margin: 0;}
ul.isotope li {min-height: 300px; margin-bottom: 0 !important; overflow: hidden;}

/*======================= TYPOGRAPHY =======================*/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}
h1,
.category_title h2,
h3.moduleTitle {
  font: 600 35px/40px 'Open Sans', sans-serif;
  color: #71bf44;
  margin: 0 0 12px;
}
h1.category_name {
  font: 600 45px/48px 'Open Sans', sans-serif;
  color: #71bf44;
  margin: 0 0 12px;
}
span.item_title_part0 {
  color: #3587a8;
}
h2 {
  font: 600 30px/40px 'Open Sans', sans-serif;
  color: #3587a8;
  margin: 0 0 17px;
}
h2.moduleTitle {
  margin: 0 0 10px;
}
h2.moduleTitle span.item_title_part0 {
  color: #71bf44;
}
h2.item_title,
h3 {
  font: 25px/1.2307em 'Open Sans', sans-serif;
  color: #71bf44;
  letter-spacing: -1px;
  margin-bottom: 1px;
}
p {
  margin-bottom: 21px;
}
p.title {
  font-size: 15px;
  font-weight: bold;
  color: #4d4d4d;
}
p.top {
  margin-bottom: 6px !important;
}
.overflow {
  overflow: hidden;
}
/*======================= LISTS =======================*/
ul.list,
ul.categories-module,
ul.archive-module {
  margin: 0;
  padding: 0;
}
ul.list li,
ul.categories-module li,
ul.archive-module li {
  list-style: none;
  background: url(../images/template/marker.gif) 0 8px no-repeat;
  padding: 0 0 5px 16px;
}
ul.list li a,
ul.categories-module li a,
ul.archive-module li a {
  color: #3587a8;
  display: inline-block;
}
ul.list li a:hover,
ul.categories-module li a:hover,
ul.archive-module li a:hover {
  text-decoration: underline;
  background: none;
}
/**/
.bg {
  background-color: #40a5ce;
  background-image: -moz-linear-gradient(top, #40a5ce, #3587a8);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#40a5ce), to(#3587a8));
  background-image: -webkit-linear-gradient(top, #40a5ce, #3587a8);
  background-image: -o-linear-gradient(top, #40a5ce, #3587a8);
  background-image: linear-gradient(to bottom, #40a5ce, #3587a8);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff40a5ce', endColorstr='#ff3587a8', GradientType=0);
  padding: 29px 20px 31px 25px;
  width: 195px;
  min-height: 143px;
}
.bg strong,
.bg1 strong,
.bg2 strong {
  font: bold 25px/30px 'Open Sans', sans-serif;
  color: white;
  display: block;
  padding-bottom: 15px;
}
.bg span,
.b1 span,
.bg2 span {
  font: 400 14px/22px 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: white;
}
.bg1 {
  background: #71bf44;
  border-bottom: 1px solid #e2e2e2;
  min-height: 34px;
  padding: 17px 20px 0;
  text-align: center;
}
.bg2 {
  background: #5d5d5d;
  border-bottom: 1px solid #e2e2e2;
  min-height: 34px;
  padding: 19px 20px 20px 58px;
}
.bg2 strong {
  padding-bottom: 3px;
}
.bg-indent {
  display: inline-block;
  background: url("../images/template/bg1.png") no-repeat scroll 100% 50% transparent;
  padding-right: 33px;
}
.bg-indent1 {
  background: url(../images/template/bg3.png) center bottom no-repeat;
  padding-bottom: 19px;
  margin-bottom: 4px;
}
.bg-indent2 {
  background: url(../images/template/bg2.png) 0 center no-repeat;
  padding-left: 129px;
  margin-left: -33px;
}
/**/
/*======================= ICONS =======================*/
.icons-marker {
  font-size: 14.399999999999998px;
  line-height: 21px;
}
/*Buttons*/
.btn-primary {
  padding: 7px 15px 10px;
  font: 15px/20px 'Open Sans', sans-serif;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #71bf44;
  background-image: -moz-linear-gradient(top, #83de4f, #5fab33);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#83de4f), to(#5fab33));
  background-image: -webkit-linear-gradient(top, #83de4f, #5fab33);
  background-image: -o-linear-gradient(top, #83de4f, #5fab33);
  background-image: linear-gradient(to bottom, #83de4f, #5fab33);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff83de4f', endColorstr='#ff5fab33', GradientType=0);
  border-color: #5fab33 #5fab33 #376022;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #5fab33;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  border-left: 1px solid #83de4f;
  border-right: 1px solid #83de4f;
  border-top: 2px solid #83de4f;
  border-bottom: none;
  text-shadow: none;
  text-transform: uppercase;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  box-shadow: none;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  color: #ffffff;
  background-color: #5fab33;
  *background-color: #68a823;
}
.btn-primary:active,
.btn-primary.active {
  background-color: #447c27 \9;
}
.btn-primary.active,
.btn-primary:active {
  box-shadow: none;
}
.btn,
.btn-info {
  padding: 7px 15px 10px;
  font: 15px/20px 'Open Sans', sans-serif;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #71bf44;
  background-image: -moz-linear-gradient(top, #83de4f, #5fab33);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#83de4f), to(#5fab33));
  background-image: -webkit-linear-gradient(top, #83de4f, #5fab33);
  background-image: -o-linear-gradient(top, #83de4f, #5fab33);
  background-image: linear-gradient(to bottom, #83de4f, #5fab33);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff83de4f', endColorstr='#ff76b136', GradientType=0);
  border-color: #5fab33 #5fab33 #376022;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #5fab33;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  border-left: 1px solid #83de4f;
  border-right: 1px solid #83de4f;
  border-top: 2px solid #83de4f;
  border-bottom: none;
  text-shadow: none;
  text-transform: uppercase;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  box-shadow: none;
}
.btn:hover,
.btn-info:hover,
.btn:active,
.btn-info:active,
.btn.active,
.btn-info.active,
.btn.disabled,
.btn-info.disabled,
.btn[disabled],
.btn-info[disabled] {
  color: #ffffff;
  background-color: #5fab33;
  *background-color: #68a823;
}
.btn:active,
.btn-info:active,
.btn.active,
.btn-info.active {
  background-color: #447c27 \9;
}
.btn.active,
.btn-info.active,
.btn:active,
.btn-info:active {
  box-shadow: none;
}
/*Lists*/
ul.categories-module h5 {
  font-size: 1em;
  line-height: inherit;
  font-weight: normal;
  margin: 0;
}
ul.type {
  display: table;
  width: 100%;
  margin-bottom: 31px;
}
ul.type li {
  display: table-cell;
  border-right: 1px solid #a4a6a8;
  border-left: 1px solid #e3e3e3;
  border-top: 2px solid #e4e4e4;
  border-bottom: 1px solid #c0c0c0;
  background: url(../images/template/list.jpg) center 0 repeat;
}
ul.type li a {
  display: block;
  text-align: center;
  padding: 31px 0 24px;
}
ul.type li a:hover {
  background: none;
}
ul.type li a img {
  display: block;
  margin: 0 auto;
  padding-bottom: 6px;
}
ul.type li a span.image-title {
  font: bold 16px/21px 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: white;
  text-shadow: 0px 1px 0px rgba(120, 97, 12, 0.2);
}
ul.type li a:hover span.image-title {
  color: #71bf44;
}
/*Pagination*/
.pagination ul {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  margin: 0 auto;
}
.pagination ul li .pagenav {
  font: 24px/24px 'Open Sans', sans-serif;
  text-transform: none;
  color: #555555;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-right: 15px;
}
.pagination ul li span.pagenav {
  color: #555555;
}
.pagination ul li a.pagenav {
  color: #83de4f;
}
.pagination ul li a.pagenav:hover {
  background: none;
  color: #4d4d4d;
}
.pagination ul li.num span.pagenav {
  color: #4d4d4d;
}
/*Forms*/
input[type='radio'],
input[type='checkbox'] {
  margin: 3px 0 0;
}
/* Images */
.item_img,
.category_img {
  margin-bottom: 24px;
}
.img-intro__left,
.img-full__left {
  float: left;
  margin: 5px 23px 9px 0;
}
.img-intro__right,
.img-full__right {
  float: right;
  margin: 0 18px 9px 0;
}
/*======================= TOP =======================*/
/*======================= HEADER =======================*/
#header-row {
  padding: 76px 0 35px;
  overflow: hidden;
}
#header-row #logo {
  width: 289px;
}
#header-row div.time {
  float: right;
  background: url(../images/template/time.png) 0 0 no-repeat;
  padding-left: 27px;
  font: 12px/14px Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  margin: 8px 0 0 0;
  color: #3587a8;
  text-align: left;
}
#header-row div.time strong {
  display: block;
  font: 20px/14px Arial, Helvetica, sans-serif;
  color: #4d4d4d;
  padding-bottom: 7px;
}
/*======================= NAVIGATION =======================*/
.select-menu {
  display: none;
}
.navigation ul.sf-menu {
  position: relative;
  background-color: #71bf44;
  background-image: -moz-linear-gradient(top, #83de4f, #5fab33);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#83de4f), to(#5fab33));
  background-image: -webkit-linear-gradient(top, #83de4f, #5fab33);
  background-image: -o-linear-gradient(top, #83de4f, #5fab33);
  background-image: linear-gradient(to bottom, #83de4f, #5fab33);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1de15', endColorstr='#ff5fab33', GradientType=0);
  display: table;
  width: 100%;
  table-layout: fixed;
  border-bottom: 1px solid #7bce4a;
  /*SubMenu Styles*/

  /*Define 1st SubMenu position*/

  /*Define SubMenu position*/

  /*Define 2nd+ SubMenu position*/

}
.navigation ul.sf-menu > li {
  text-align: center;
  float: none;
  display: table-cell;
  padding: 0;
  margin: 0;
  border-top: 2px solid #83de4f;
  background-color: #71bf44;
  background-image: -moz-linear-gradient(top, #83de4f, #76b136);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#83de4f), to(#76b136));
  background-image: -webkit-linear-gradient(top, #83de4f, #76b136);
  background-image: -o-linear-gradient(top, #83de4f, #76b136);
  background-image: linear-gradient(to bottom, #83de4f, #76b136);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff83de4f', endColorstr='#ff76b136', GradientType=0);
  position: relative;
}
.navigation ul.sf-menu > li.active,
.navigation ul.sf-menu > li.sfHover,
.navigation ul.sf-menu > li.current,
.navigation ul.sf-menu > li:hover {
  background-color: #d9a70c;
  background-image: -moz-linear-gradient(top, #4dd84d, #5b951d);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4dd84d), to(#5b951d));
  background-image: -webkit-linear-gradient(top, #4dd84d, #5b951d);
  background-image: -o-linear-gradient(top, #4dd84d, #5b951d);
  background-image: linear-gradient(to bottom, #4dd84d, #5b951d);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe3bd0e', endColorstr='#ffc98609', GradientType=0);
  color: #ffffff;
}
.navigation ul.sf-menu > li.firstItem {
  border-left: none;
  width: 66px;
}
.navigation ul.sf-menu > li.firstItem > span.sfHolder > a,
.navigation ul.sf-menu > li.firstItem > span.sfHolder > span.separator,
.navigation ul.sf-menu > li.firstItem > span.sfHolder > a:hover,
.navigation ul.sf-menu > li.firstItem > span.sfHolder > span.separator:hover {
  background: url(../images/template/homeitem.png) center 44% no-repeat;
  filter: none;
  text-indent: -9999em;
}
.navigation ul.sf-menu > li.lastItem {
  border-right: none;
}
.navigation ul.sf-menu > li > span.sfHolder {
  position: relative;
  display: block;
}
.navigation ul.sf-menu > li > span.sfHolder > a,
.navigation ul.sf-menu > li > span.sfHolder > span.separator {
  color: #ffffff;
  height: 67px;
  display: block;
  font: bold 16px/21px 'Open Sans', sans-serif;
  line-height: 67px;
  text-transform: uppercase;
  border-left: 1px solid #f3e31f;
  border-right: 1px solid #79b637;
}
.navigation ul.sf-menu > li > span.sfHolder > a:hover,
.navigation ul.sf-menu > li > span.sfHolder > span.separator:hover {
  background-color: #d9a70c;
  background-image: -moz-linear-gradient(top, #4dd84d, #5b951d);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4dd84d), to(#5b951d));
  background-image: -webkit-linear-gradient(top, #4dd84d, #5b951d);
  background-image: -o-linear-gradient(top, #4dd84d, #5b951d);
  background-image: linear-gradient(to bottom, #4dd84d, #5b951d);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4dd84d', endColorstr='#ff5b951d', GradientType=0);
  color: #ffffff;
}
.navigation ul.sf-menu li:hover > span > ul,
.navigation ul.sf-menu li.sfHover > span > ul {
  top: 68px;
}
.navigation ul.sf-menu ul {
  width: 212px;
  background: #5b951d;
}
.navigation ul.sf-menu li li:hover ul,
.navigation ul.sf-menu li li.sfHover ul {
  top: 0;
  left: 213px;
}
.navigation ul.sf-menu li li li:hover ul,
.navigation ul.sf-menu li li li.sfHover ul {
  top: 0;
  left: 213px;
}
.navigation ul.sf-menu ul {
  background: #5b951d;
  padding: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.navigation ul.sf-menu ul li {
  margin: 0;
}
.navigation ul.sf-menu ul li a,
.navigation ul.sf-menu ul li span.separator {
  font: bold 13px/21px 'Open Sans', sans-serif;
  color: #ffffff;
  background: none;
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
}
.navigation ul.sf-menu ul li a:hover,
.navigation ul.sf-menu ul li span.separator:hover {
  background: #f2e116;
  color: #4d4d4d;
}
.navigation ul.sf-menu ul li.active > .sfHolder > a,
.navigation ul.sf-menu ul li.sfHover > .sfHolder > a,
.navigation ul.sf-menu ul li.active > .sfHolder > span.separator,
.navigation ul.sf-menu ul li.sfHover > .sfHolder > span.separator,
.navigation ul.sf-menu ul li.active > .sfHolder > a:hover,
.navigation ul.sf-menu ul li.sfHover > .sfHolder > a:hover,
.navigation ul.sf-menu ul li.active > .sfHolder > span.separator:hover,
.navigation ul.sf-menu ul li.sfHover > .sfHolder > span.separator:hover {
  background: #f2e116;
  color: #4d4d4d;
}
.navigation ul.sf-menu ul li.firstItem {
  border: none;
}
/*======================= SHOWCASE =======================*/
/*======================= FEATURE =======================*/
/*======================= MAINTOP =======================*/
#maintop-row .container {
  padding: 50px 0 0px;
}
.staff.span4 .mod-newsflash-adv > div > .item {
  margin: 6px 0 14px 20px;
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 172px;
}
.staff.span4 .mod-newsflash-adv > div > .item:first-child,
.staff.span4 .mod-newsflash-adv > div > .item:first-child + div + div {
  margin-left: 0;
}
.staff.span4 .mod-newsflash-adv div.item_img {
  margin: 0;
}
.staff .mod-newsflash-adv .item_content {
  background: url(../images/template/staff.png) 0 0 repeat;
  color: white;
  position: absolute;
  top: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 20px 12px;
}
.staff .mod-newsflash-adv h5,
.staff .mod-newsflash-adv h5 span.item_title_part0 {
  font: bold 12px/20px Arial, Helvetica, sans-serif;
  color: white;
  padding: 0;
  margin: 0;
}
.staff .mod-newsflash-adv .links {
  padding-top: 10px;
}
/*======================= CONTENT TOP =======================*/
#content-row .container {
  padding: 45px 0 40px;
}
#content-row .container #content-top {
  padding-bottom: 56px;
  overflow: hidden;
}
/*======================= CONTENT =======================*/
.item {
  margin: 0 0 28px;
}
.page-header {
  border: none;
  padding: 0;
  margin: 0;
}
/*===== Home Page ======*/
.trav .img-intro__left {
  float: left;
  margin: 9px 16px 0px 0;
}
.trav h1 {
  margin-bottom: 24px;
}
.news .item_content {
  overflow: hidden;
}
/*===== Blog Page ======*/
.item_header {
  padding-bottom: 13px;
}
.isotope .item_header {
  padding-bottom: 0px;
}
.item_create {
  float: left;
  width: 76px;
  background: url(../images/template/date.png) right 9px no-repeat;
  padding-right: 12px;
  margin: 7px 7px 0 0;
  font: bold 20px/25px 'Open Sans', sans-serif;
  text-align: center;
  text-transform: uppercase;
  color: white;
}
.item_create_bg {
  background-color: #ffffff;
  background-image: -moz-linear-gradient(top, #40a5ce, #3587a8);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#40a5ce), to(#3587a8));
  background-image: -webkit-linear-gradient(top, #40a5ce, #3587a8);
  background-image: -o-linear-gradient(top, #40a5ce, #3587a8);
  background-image: linear-gradient(to bottom, #40a5ce, #3587a8);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff40a5ce', endColorstr='#ff3587a8', GradientType=0);
  padding-bottom: 9px;
}
.item_create span {
  display: block;
  font: 25px/25px 'Open Sans', sans-serif;
  padding-top: 9px;
}
.item_createdby,
.item_info.muted,
.item_info_dl dd,
.item_category-name {
  display: inline;
  font-weight: bold;
  font-size: 14px;
  color: #91939a;
}
.item_createdby {
  color: #91939a;
}
.item_category-name,
.item_info.muted {
  margin-right: 20px;
}
.item_info_dl {
  margin: 0;
  display: inline;
}
.item_info_dl dd {
  margin: 0;
}
/**/
.mod-newsflash-adv .row {
  margin: 0;
}
.news .mod-newsflash-adv .item,
.posts .mod-newsflash-adv .item {
  border-top: 1px solid #e8e8e8;
  margin: 10px 0 0px;
  padding: 13px 0 0;
}
.news .mod-newsflash-adv .item:first-child,
.posts .mod-newsflash-adv .item:first-child {
  border: none;
  padding-top: 0;
  margin-top: 0;
}
.posts .mod-newsflash-adv .img-intro__left,
.posts .mod-newsflash-adv .img-full__left {
  float: left;
  margin: 5px 19px 0px 0;
}
.isotope .img-intro__left,
.isotope .img-full__left {
  float: none;
  margin: 0px 0px 10px 0;
}
.news .mod-newsflash-adv .item_introtext p,
.posts .mod-newsflash-adv .item_introtext p {
  margin: 0;
}
.item_published {
  font: bold 14px/21px Arial, Helvetica, sans-serif;
  color: #4d4d4d;
}
#aside-right .moduletable {
  padding-bottom: 40px;
}
#aside-right .moduletable.indent {
  padding-bottom: 0px;
}
/*===== Gallery Page ======*/
.page-item__gallery .item_fulltext {
  overflow: hidden;
}
/*===== Team Page ======*/
.page-category__team .item_introtext {
  overflow: hidden;
}
/*======================= CONTENT BOTTOM =======================*/
/*======================= MAINBOTTOM =======================*/
/*======================= BOTTOM =======================*/
#bottom-row .container {
  padding-bottom: 36px;
}
/*======================= FOOTER =======================*/
#copyright-row .container {
  border-top: 1px solid #e9e9e9;
  padding-top: 15px;
}
#copyright-row .container #copyright {
  color: #3587a8;
}
#copyright-row .container #copyright .mod-footer {
  padding-top: 4px;
}
#copyright-row .container #copyright .mod-footer .siteName {
  font-weight: bold;
}
#copyright-row .container #copyright .mod-footer a {
  color: #3587a8;
}
#copyright-row .container #copyright .mod-footer a:hover {
  text-decoration: underline;
}
/*===== Social Media ======*/
.social li {
  margin: 0 0 0 9px;
}
.social li a {
  width: 38px;
  height: 38px;
  line-height: 38px;
  overflow: hidden;
}
.social li a img {
  position: relative;
  top: 0;
}
.social li a:hover img {
  top: -38px;
}

What I would like to change:

The Background colour of the page to white
The Sliding text: EG "Home" currently goldish want to change to green

The Sliding text: EG" Insurance Solutions" below the Home. Currently Grey want to change to Blue

The Grey tabs: EG "Tackle , Motor , Home , Business , Watercraft" I think its using a grey gradient but I want to change this to a Blue gradient.

The Grey tabs text change to green if you scroll over them, I want to make this change to white

The bottom tabs: EG "Car Insurance, Home Insurance, Tackle Insurance, Watercraft Insurance" I want to change the size of this text to slightly smaller so it fits better on the page.

If someone could please show me on what lines of the CSS to change each of these points it would be greatly appreciated.

Any help would be greatly appreciated.

Thank you.

[Cree8ivDezignR]

Originally Posted by cssbeginner

What I would like to change:

The Background colour of the page to white
The Sliding text: EG "Home" currently goldish want to change to green

The Sliding text: EG" Insurance Solutions" below the Home. Currently Grey want to change to Blue

The Grey tabs: EG "Tackle , Motor , Home , Business , Watercraft" I think its using a grey gradient but I want to change this to a Blue gradient.

The Grey tabs text change to green if you scroll over them, I want to make this change to white

The bottom tabs: EG "Car Insurance, Home Insurance, Tackle Insurance, Watercraft Insurance" I want to change the size of this text to slightly smaller so it fits better on the page.

If someone could please show me on what lines of the CSS to change each of these points it would be greatly appreciated.

Any help would be greatly appreciated.

Thank you.

.bg { background-color: #40a5ce; background-image: -moz-linear-gradient(top, #40a5ce, #3587a8); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#40a5ce), to(#3587a8)); background-image: -webkit-linear-gradient(top, #40a5ce, #3587a8); background-image: -o-linear-gradient(top, #40a5ce, #3587a8); background-image: linear-gradient(to bottom, #40a5ce, #3587a8); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff40a5ce', endColorstr='#ff3587a8', GradientType=0); padding: 29px 20px 31px 25px; width: 195px; min-height: 143px;

Not sure but seems you are using a gradient for the background or at least I believe that is the background, you should have it set like this:

.bg { background-color: #fff; }

by taking all the gradient properties out, also for future reference try not using the filter property in the gradients.

As for the rest of the things you mentioned, are they installed as images?

Can you provide a link?

[cssbeginner]

Its
w
w
w
.tacklesure.
co.
za

[Cree8ivDezignR]

Originally Posted by cssbeginner

Its
w
w
w
.tacklesure.
co.
za

Check the parent and child elements here for the green gradient nav buttons:

.navigation ul.sf-menu > li > span.sfHolder > a:hover, .navigation ul.sf-menu > li > span.sfHolder > span.separator:hover

For the grey tabs here is what I found, it looks like its using a list.jpg image with a gradient:

ul.type li {
display: table-cell;
border-right: 1px solid #a4a6a8;
border-left: 1px solid #e3e3e3;
border-top: 2px solid #e4e4e4;
border-bottom: 1px solid #c0c0c0;
background: url(../images/template/list.jpg) center 0 repeat;
}

For the green text on hover you can make the change here:

ul.type li a:hover span.image-title {
color: #71bf44;
}

and finally the text is inherited from h2.moduleTitle and the code looks like this:

h2 {
font: 600 30px/40px 'Open Sans', sans-serif;
color: #3587a8;
}

Hope that helps man.

[cssbeginner]

Thanks very much.

I fixed the grey tabs, the grey tabs text hover and also changed the bottom tabs text size and its all 100%

Still having issues with the following:

1. Home Insurance Solutions ( Text ) :
Home ( goldy colour to be changed to Blue )
Insurance Solutions ( grey to be changed to green )

2. Featured News ( Text ):
Dolore Ipsum ( goldy colour to be changed to green )

3. Background

.bg { background-color: #40a5ce; background-image: -moz-linear-gradient(top, #40a5ce, #3587a8); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#40a5ce), to(#3587a8)); background-image: -webkit-linear-gradient(top, #40a5ce, #3587a8); background-image: -o-linear-gradient(top, #40a5ce, #3587a8); background-image: linear-gradient(to bottom, #40a5ce, #3587a8); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff40a5ce', endColorstr='#ff3587a8', GradientType=0); padding: 29px 20px 31px 25px; width: 195px; min-height: 143px

Must I replace all of the above code with this ?

.bg { background-color: #fff; }

Thanks again for all your help

[cssbeginner]

All fixed, Thanks

[Cree8ivDezignR]

Originally Posted by cssbeginner

All fixed, Thanks

Glad to see you got it all fixed