div.carousel{position:relative;} /* This line sets position of carousel to relative which is good as it means you can place anywhere using tables rather than absolute positioning which is tricky */

div.carousel div.scroller{overflow:hidden;position:relative;} /* This hides all the other stories and stuff so they appear when you click left or right */

div.carousel ul.itemList li { float: left;} /* formats the carousel into horizontal layout, without it everything messes up */

div.gammaCarousel { background: #; font-family: Arial; padding: 14px 16px; padding-top: 5px; width: 932px; margin-bottom: 12px;} /* background color of whole carousel, width of whole carousel, fontface for title and leader line, plus the padding and margins for the whole carousel in relation to the news items */

div.gammaCarousel div.carousel { clear: both; width: 932px;} /* sets width of inner part of carousel including stories and nav buttons */

div.gammaCarousel ul.itemList { font-family: Verdana; margin-left: -176px; width: 5000px;} /* fontfamily doesnt seem to affect anything but have left in anyway, in fact only the margin-left element seems to affect it but offsetting the stories position relative to left side */

div.gammaCarousel div.scroller { margin: 0 34px; width: 864px;} /* margin sets distance between stories and nav buttons and also stories and top/bottom of carousel, width sets the width of the stories displayed so if you increase width it will show more stories, decrease will show less but must be used in conjuction with the 2 widths above (whole carousel width and inner carousel width */

div.gammaCarousel ul.itemList li { margin-right: 16px; position: relative; overflow: hidden;} /* marginright sets distance between newsitems, the rest is to do with setting out the mousover boxes and probably shouldnt be touched */

div.gammaCarousel ul.itemList span { color: #FFFFFF; font-family: Verdana; font-size: 1.1em; height: 140px; left: 0; padding: 2px 6px; position: absolute; top: 113px; width: 160px; opacity: 0.9; filter:alpha(opacity=90);} /* font color, face and size for newsitem text. The rest is about setting up the position, size and width of the mouseover boxes (dont know about opacity and filter but probably best left */

div.gammaCarousel ul.itemList a { display: block; height: 140px; width: 160px;} /* height, width and display style of the links in the list items */

div.gammaCarousel div.pagingControls a { background-position: 0 0; background-repeat: no-repeat; height: 140px; position: absolute; top: 0; width: 100px;} /* styles for the next and previous buttons. They are background images, you probably wont need to edit this line */


div.gammaCarousel div.pagingControls a.next { right: 0; width: 20px;} /* sets the position and width of the next button relative to the right hand side */
div.gammaCarousel div.pagingControls a.previous { left: 0; width: 20px;} /* sets the position and width of the previous button relative to the left hand side */

div.gammaCarousel h3 { float: left; font-size: 1.4em; padding: 2px 0px; text-transform: uppercase; background:transparent; margin:0; padding:0;} /* Sets font size, padding, background and margins for the top title of carousel. Also makes it uppercase */

div.gammaCarousel p { float: right; font-size: 1.2em; padding: 2px 0px; font-weight: bold;} /* Sets font size, padding and font weight for the leaderline/description of carousel (top right). */

div.gammaCarousel ul.itemList a:hover { text-decoration: none; } /* removes hover underline from item text in carousel as they are all links */

div.fancythatCarousel div.gammaCarousel h3, div.fancythatCarousel div.gammaCarousel p { color: #312C6E;} /* Sets font colour for the carousel title and description, can be seperated out if you want different font color for each */

div.fancythatCarousel div.gammaCarousel ul.itemList span { background-color: #312C6E;} /* sets bacground colour for the item text including the part that pops up on mouseover */

div.fancythatCarousel div.gammaCarousel div.pagingControls a.next { background-image: url("../images/fancythatCarousel_right.gif") ;} /* sets the image to use for the next button on the right */
div.fancythatCarousel div.gammaCarousel div.pagingControls a.previous { background-image: url("../images/fancythatCarousel_left.gif") ;} /* sets the image to use for the previous button on the left */

.gammaCarousel {font-size: 62.5%;} /* not sure why they done this but it sets the relative size of all the text to 62.5% of what has already been set above. Tricky to get rid of but let me know if a problem */

.gammaCarousel :link,:visited { text-decoration:none } /* removes underline on news items text */

.gammaCarousel ul,h3,p,body { margin:0; padding:0 } /* removes any whitespace around the carousel */

.gammaCarousel a img,:link img,:visited img,fieldset { border:none } /* removes border from images used in each story */

.gammaCarousel h3 { font-size: 1.7em; margin: 0 0 10px 0; padding: 0 0 0 9px; min-height: 27px; line-height: 27px; background-color: #333; color: #fff; } /* this mainly seems to remove padding from above carousel title */