@charset "utf-8";
/* CSS Document - I've put the useful info first - note: the navbar CSS is in the SpryAssets folder */


body {
background-color:#095680;
/*background-image:url(../images/circle-gradient.png); */
/*background-image:url(../images/background-gradient-black.png);*/  /*there is also a standard black gradient (i.e. no circles) */
/*background-image:url(../images/background-gradient-white.png); */  /*there is also a standard white gradient */
/*background-image:url(../images/background-gradient-white-upside-down.png); */  /*and an upside-down gradient - white */
background-image:url(../images/background-gradient-black-upside-down.png);  /*upside-down gradient - black */
}


#header {
background-color:#b81210; /*is you change the background colour of the header, you'll probably want to change the colour of the whole drop down menu. see the CSS file in the SPRY directory for the submenu colours etc */
}


/* the logo positioning - it "floats" over the other items in the header, so you can nudge it anywhere - the logo needs to have a transparent background to work effectively */
#logo {
position:absolute;
left:0px;
top:500px;
z-index:100;
}


/* if you change the logo position, it may obscure the text in the header.... you can move the text further right with this padding*/
#header-text {
padding:100px 0 0 140px;
z-index:4000;
position:relative;
display:none;
}






/* this is the general text colour for paragraphs*/
.column {
color:#838383;
}



/* this changes the appearance of anchor LINKS*/
a {
text-decoration:none;
color:838383;
}

a:hover {
text-decoration:underline;
}

a:visited {
color:grey;
}










/* The remaining CSS information..........................................................*/


body {
background-repeat:repeat-x;
padding:0px;
margin:0px;
padding-top:40px;
font-family:"Arial Narrow", Arial, Helvetica, sans-serif;
}

#outer-wrapper {
margin:0px auto 0px auto;
padding:8px 0px 8px 0px;
background-color:white;
width:978px;
position:relative;
}

#inner-wrapper {
margin:auto;
width:962px;
background-color:white;
}

/*heading section - part 1 - the Menu Bar 
the menu bar CSS can be found in the SPRY folder, under the name "spryMenuBarHorizontal.css"..............................*/


/*header section part 2 - the logo / club name / and big photograph .......*/

h1 {
margin:0px;
padding:0px;
padding-top:16px;
font-size:1.8em;
font-weight:bold;
text-transform:uppercase;
color:white;
}

#header p{
padding:0px;
margin:0px;
text-transform:uppercase;
color:white;
font-size:0.8em;
font-weight:bold;
}


#header-photo {
width:962px;
height:304px;
background-image:url(../UserFiles/image/MyClubMate/HomePageHeading-photo.jpg);
z-index:90;
position:relative;
}

#header-photo-smaller {
width:962px;
height:204px;
background-image:url(../UserFiles/image/MyClubMate/SubPageHeading-photo.jpg);
z-index:90;
position:relative;
}

#logo {
position:absolute;
left:90px;
top:25px;
z-index:301;
}

/*end of heading section */


/*start of styling the columns .............................................................................*/

.column {
float:left;
width:275px;
margin:3px 3px 3px 0;

}

.column-info:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}



.column-box {
margin-bottom:5px;
border: 2px solid #adadad;
}


.column-border { /*This div is used by the plugin to round corners. this div becomes a bit redundant for this template, as there are no rounded corners. I have left it in as it is padding out the columns correctly. it does not actually control the column border. see column box above */
padding:0 2px 2px 2px;
margin:0;
}

.column-info {
background-color:#f3f3f3;
padding: 0 20px 1px 20px;
margin:0;
font-size:0.9em;
}

.column-info p {
padding: 0 20px 1px 20px;
margin:0;
font-size:0.9em;
font-weight:normal;
}


.column-info-shaded {
background-color:white;
padding: 0 0px 1px 0px;
margin:0;
font-size:0.9em;
}

#left-column {
width:390px;
}


#left-column p {
float:left;
width:340px;
}

#left-column p.newstext-with-photo {
width:200px;
}

#left-column img {
float:right;
width:104px;
padding:5px 0 5px 15px;
}


#right-column { 
width:300px;
float:right;
margin-right:0;
}

#right-column table { /*note the table colours are selected in the "myclubmate-instructions.js" file. the only colour option not in this javascript file, is the general background colour of the div.... see "column-info-shaded" instead */
/*cursor: pointer;*/ /*I have disabled this pointer, as there is no use for it currently*/
}



.match-result {
text-align:center;
}


.row-header {
font-weight:bold;
color:black;
padding:5px 0 0 10px;
}

.match-result {
font-weight:bold;
}

.home-team {
padding-left:20px;
}

#middle-column { 
float:left;
width:265px;
}

#single-column { 
float:left;
width:100%;
}

h2 {
padding:0;
margin:0;
z-index:50;
}

.coloured-heading {
text-align:left;
background-color:#8c0606;
background-image:url(../images/coloured-heading-gradient.png);
background-position:bottom;
background-repeat:repeat-x;
height:30px;
color:white;
text-transform:uppercase;
font-size:1em;
padding: 10px 0 0 15px;
z-index:50;
}

.uncoloured-heading {
color:#969696;
text-transform:uppercase;
font-size:1.6em;
padding:14px 0 0 0px;
}


h3 {
font-weight:bold;
font-size:1.2em;
padding:20px 0 10px 0;
color:black;
font-stretch:condensed;
margin:20px 0 0 0;
border-top:dotted 1px #838383;
clear:both;
}

.firstH3 {
padding:14px 0 10px 0;
border:none;
margin:0;
}

.column p {
margin:0 0 20px 0;
padding:0;
font-weight:bold;
}

.read-more {
text-align:right;
font-weight:bold;
position:relative;
right:20px;
color:660808;
}

.read-more a {
color:#B71C1A;
}




#white-for-sponsor-logos {
background-color:white;
text-align:center;
}


/*style the photo scroller on the homepage .............................................................................*/

#photo-scroller {
clear:both;
background-color:#cac19b;
}


.photo-wrapper {
list-style-type:none;
height:104px;

float:left;
}



.photo-wrapper img{
width:166px;
height:104px;
margin:4px;
border:1px solid #868165;
}


.prev {
background-image:url(../images/left-arrow.jpg);
background-repeat:no-repeat;
background-position:right;
padding:0 5px 0 0px;
margin:3px 5px 3px 0;
width:26px;
height:104px;
float:left;
}


.next {
background-image:url(../images/right-arrow.jpg);
background-repeat:no-repeat;
background-position:left;
width:26px;
height:104px;
float:left;
margin:3px 0 0 5px;
padding:0 0 0 5px;
}

.see-more-photos {
text-align:right;
font-weight:bold;
position:relative;
top:80px;
right:10px;
color:red;
}

.clear {
clear:both;
}






/*style the footer .............................................................................*/

#footer {
color:white;
text-align:center;
height:55px;
background-color:#8c0606;
}

#footer p {
padding:5px 0 0 0;
margin:0;
font-size:0.9em;
}

#footer a {
color:white;
}


#footer-line {
height:5px;
clear:both;
margin:0px;
}

#footer-outside {
color:white;
text-align:center;
font-size:0.8em;
}