/* 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Designed & Coded By : Richard Carpenter
URL : www.richard-carpenter.co.uk
	  www.hv-designs.co.uk

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
*/

/* ----------MAIN BODY STYLES---------- */

* {
	margin: 0px; /*sets 0 margin to the whole website*/
	padding: 0px; /*sets 0 padding to the whole website*/
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif; /*website font family*/
	background-color: #000000; /*website background color*/
	color: #999a9a; /*website default text color*/
	background-image: url(images/bg.png); /*our background image*/
	background-repeat: repeat-y; /*repeats background image along the Y axis*/
	background-position: center; /*centers our background*/
}

a:link {
	color: #0096FF; /*color of our hyperlinks*/
}
a:visited {
	color: #FFFFFF; /*color of visited hyperlinks*/
}
a:hover {
	color: #FFFFFF; /*color of the hyperlink when hovered over*/
}
a:active {
	color: #0096FF; /*color of our active links*/
}

p {
	font-size: 0.7em; /*sets default paragraph text size*/
	line-height: 18px; /*sets default paragraph line height*/
	text-align: justify; /*justifys our paragraphs*/
}

h1 {
	color: #727372; /*color of our H1 tag*/
	text-transform: uppercase; /*sets all H1 tags to uppcase*/
	font-size: 1.2em; /*sets H1 font size*/
	font-weight: normal; /*sets H1 font weight to normal*/
}

h2 {
	color: #FFFFFF; /*color of our H2 tag*/
	text-transform: uppercase; /*sets all H2 tags to uppcase*/
	font-size: 1em; /*sets H2 font size*/
	font-weight: normal; /*sets H2 font weight to normal*/
}

h3 {
	color: #727372; /*color of our H3 tag*/
	text-transform: uppercase; /*sets all H3 tags to uppcase*/
	font-size: 0.9em; /*sets H3 font size*/
	font-weight: normal; /*sets H3 font weight to normal*/
}

h4 {
	color: #727372; /*color of our H4 tag*/
	text-transform: uppercase; /*sets all H4 tags to uppcase*/
	font-size: 0.8em; /*sets H4 font size*/
	font-weight: normal; /*sets H4 font weight to normal*/
}

img {
	border:none; /*removes borders from images*/
}

.float-left {
	float:left; /*class for float left*/
}

.float-right {
	float:right; /*class for float right*/
}

/* ----------MAIN CONTAINER STYLES---------- */

#container {
	width: 900px; /*width of our container*/
	margin-top: 0px; /*sets top margin to 0*/
	margin-right: auto; /*sets right margin to auto which centers our website*/
	margin-left: auto; /*sets left margin to auto which centers our website*/
}

/* ----------HEADER STYLES---------- */

#header {
	background-image: url(images/hd_bg.png); /*sets our header background image*/
	background-repeat: no-repeat; /*sets our background to no repeat*/
	float: left; /*floats our header left*/
	width: 900px; /*gives our header a width of 900px*/
}

#top-elements {
	float: left; /*floats top elements left*/
	width: 900px; /*sets our top elements width to 900px*/
	padding-top: 20px; /*gives our top elements a padding of 20px*/
}

/* ----------LOGO STYLES---------- */

#logo {
	float: left; /*floats our logo left*/
	height: 70px; /*gives our logo a height of 37px same as our logo image*/
	width: 270px; /*sets our logo div's height to 270px same as our logo image*/
}

/* ----------NAVIGATION STYLES---------- */

#nav-bar {
	float: right; /*floats our navigation right*/
	height: 29px; /*gives our navigation a height of 29px*/
	padding-top: 8px; /*gives our navigation top padding*/
	margin-bottom: 40px; /*gives our navigation a bottom margin*/
}

.navlinks ul {
	margin: 0px; /*gives our unordered list 0 margin*/
	padding: 0px; /*gives our unordered list 0 padding*/
}

.navlinks li {
	display: inline; /*displays our navigation links inline*/
	list-style-type: none; /*removes bullets points from our navigation*/
	padding-left: 20px; /*gives our navigation list items left padding*/
}

.navlinks li a {
	text-decoration: none; /*removes bottom line from nav links*/
	font-size: 12px; /*sets navigation font size*/
	color: #FFFFFF; /*sets navigation link color*/
	padding-bottom: 2px; /*gives our navigation links bottom padding*/
}

.navlinks li a:hover {
	border-bottom-width: medium; /*gives links a medium thickness bottom border*/
	border-bottom-style: solid; /*makes the bottom border line solid*/
	border-bottom-color: #0096ff; /*sets the color of the border*/
}

.navlinks li.current a{
	border-bottom-width: medium; /*gives links a medium thickness bottom border*/
	border-bottom-style: solid; /*makes the bottom border line solid*/
	border-bottom-color: #0096ff; /*sets the color of the border*/
}

/* ----------FEATURED CONTENT STYLES---------- */

#featured {
	float: right; /*floats our featured area right*/
	width: 900px; /*gives our featured area a width of 900px*/
	margin-bottom: 20px; /*gives our featured area a bottom margin*/
}

.featured-text {
	float: left; /*floats our featured text left*/
	width: 450px; /*sets our featured text box width*/
	margin-top: 40px; /*gives our featured text box a top margin*/
}

#featured-text p {
	font-size: 0.7em; /*sets our featured text paragraph font size*/
	line-height: 24px; /*sets our featured text line height*/
	text-align: justify; /*justifys our paragraphs*/
	padding-top: 10px; /*adds top padding to our featured text paragraph*/
}

#featured-image01, #featured-image02, #featured-image03 {
	float: right; /*floats our featured images rights*/
	width: 449px; /*gives our featured images a fixed width same as our images*/
	background-repeat: no-repeat; /*stops images from repeating*/
	background-position: right; /*sets background position right*/
	height: 214px; /*gives our featured image a fixed height same as our images*/
}

#featured-image01 {
	background-image: url(images/featured_image.png); /*our featured image #1*/
}

#featured-image02 {
	background-image: url(images/featured_image2.png); /*our featured image #2*/
}

#featured-image03 {
	background-image: url(images/featured_image3.png); /*our featured image #3*/
}

.hidden {
	display: none; /*hides our 2nd and 3rd featured images*/
}

h1.featured {
	color: #FFFFFF; /*sets featured H1 color*/
	text-transform: uppercase; /*transforms featured H1 tag to uppercase*/
	font-size: 18px; /*sets font size of featured H1 tag*/
	background-image: url(images/bullet_icon.png); /*addeds our bullet image to our featured H1 tag*/
	background-repeat: no-repeat; /*stops bullet from repeating*/
	padding-left: 30px; /*adds padding to the left of our featured H1 tag*/
	line-height: 24px; /*sets featured H1 tag's line height*/
}

h1.featured a{
	color: #FFFFFF; /*sets featured H1 color*/
	text-decoration: none;
}

#featured-image {
	float: right; /*floats our featured image right*/
	width: 449px; /*sets our featured image width same dimensions as our featured image*/
	background-image: url(images/featured_image.png); /*adds a featured image as a background*/
	background-repeat: no-repeat; /*stops featured image repeatsing*/
	background-position: right; /*sets our featured image backgroud position*/
	height: 214px; /*adds a fixed height same dimensions as our featured image*/
}

.featured-btn {
	height: 34px; /*adds a fixed height*/
	width: 34px; /*adds a fixed width*/
	cursor: pointer; /*sets cursor to point cursor*/
}

.featured-buttons {
	height: 144px; /*sets fixed height*/
	width: 34px; /*sets fixed width*/
	margin-left: 75px; /*adds left margin*/
	padding-top: 70px; /*adds top padding*/
}

/* ----------CONTENT LEFT STYLES---------- */

#content-left {
	float: left; /*floats left*/
	width: 600px; /*adds a fixed width*/
	padding-bottom: 40px; /*adds bottom padding*/
}

.box {
	float: left; /*floats left*/
	width: 498px; /*adds a fixed width*/
	border: 1px solid #121212; /*adds a 1 px colored border*/
	margin-bottom: 15px; /*adds a bottom margin*/
	width: 490px; /*adds a fixed width*/
}

.box-inside {
	background-color: #0c0c0c; /*adds a background color*/
	border: 1px solid #030303; /*adds a 1px colored border*/
	float: left; /*floats left*/
	width: 576px; /*adds a fix width */
	padding: 10px; /*adds padding all the way around*/
}

.box-inside p {
	padding-top: 10px; /*adds top padding*/
}

#content-left-pagination {
	float: left; /*floats left*/
	width: 600px; /*adds a fixed width*/
	padding-bottom: 40px; /*adds bottom padding*/
}

.box-pagination {
	float: left; /*floats left*/
	width: 498px; /*adds a fixed width*/
	border: 1px solid #121212; /*adds a 1 px colored border*/
	margin-bottom: 15px; /*adds a bottom margin*/
	width: 490px; /*adds a fixed width*/
}

.box-inside-pagination {
	background-color: #0c0c0c; /*adds a background color*/
	border: 1px solid #030303; /*adds a 1px colored border*/
	float: left; /*floats left*/
	width: 576px; /*adds a fix width */
	padding: 10px; /*adds padding all the way around*/
}

.box-inside-pagination p {
	padding-top: 0px; /*adds top padding*/
}

.boxtitle1 {
	color: #FFFFFF; /*text color*/
	text-transform: uppercase; /*transforms text to uppercase*/
	font-size: 1em; /*sets font size*/
	font-weight: normal; /*sets font weight*/
	background-image: url(images/post_icon.png); /*adds our right icon to our header*/
	background-repeat: no-repeat; /*stops icon repeating*/
	background-position: right; /*positions background right*/
}

.boxtitle2 {
	color: #aaaaaa; /*sets font color*/
	text-transform: uppercase; /*transforms text to uppercase*/
	font-size: 0.7em; /*sets font size*/
	background-image: url(images/divider.png); /*adds our divider image*/
	background-repeat: repeat-x; /*repeats our divider image horizontally*/
	background-position: bottom; /*positions divider at the bottom*/
	padding-bottom: 10px; /*adds bottom padding*/
}



/* ----------CONTENT FEATURED STYLES---------- */

.ft-box {
	float: left; /*floats left*/
	width: 498px; /*adds a fixed width*/
	border: 1px solid #121212; /*adds a 1 px colored border*/
	margin-bottom: 15px; /*adds a bottom margin*/
	width: 490px; /*adds a fixed width*/
}

.ft-box-inside {
	background-color: #0c0c0c; /*adds a background color*/
	border: 1px solid #030303; /*adds a 1px colored border*/
	float: left; /*floats left*/
	width: 576px; /*adds a fix width */
	padding: 10px; /*adds padding all the way around*/
}

.ft-box-inside p {
	padding-top: 10px; /*adds top padding*/
}

#ft-content-left-pagination {
	float: left; /*floats left*/
	width: 600px; /*adds a fixed width*/
	padding-bottom: 40px; /*adds bottom padding*/
}

.ft-box-pagination {
	float: left; /*floats left*/
	width: 498px; /*adds a fixed width*/
	border: 1px solid #121212; /*adds a 1 px colored border*/
	margin-bottom: 15px; /*adds a bottom margin*/
	width: 490px; /*adds a fixed width*/
}

.ft-box-inside-pagination {
	background-color: #0c0c0c; /*adds a background color*/
	border: 1px solid #030303; /*adds a 1px colored border*/
	float: left; /*floats left*/
	width: 576px; /*adds a fix width */
	padding: 10px; /*adds padding all the way around*/
}

.ft-box-inside-pagination p {
	padding-top: 0px; /*adds top padding*/
}

.ft-boxtitle2 {
	color: #aaaaaa; /*sets font color*/
	text-transform: uppercase; /*transforms text to uppercase*/
	font-size: 0.7em; /*sets font size*/
	background-image: url(images/divider.png); /*adds our divider image*/
	background-repeat: repeat-x; /*repeats our divider image horizontally*/
	background-position: bottom; /*positions divider at the bottom*/
	padding-bottom: 10px; /*adds bottom padding*/
}

.ft-boxtitle1 {
	color: #FFFFFF; /*text color*/
	text-transform: uppercase; /*transforms text to uppercase*/
	font-size: 1em; /*sets font size*/
	font-weight: normal; /*sets font weight*/
	background-position: right; /*positions background right*/
}

.ft-boxtitle1 a{
	color: #FFFFFF; /*text color*/
	text-decoration: none;
}






.ft2-box {
	float: left; /*floats left*/
	width: 498px; /*adds a fixed width*/
	border: 1px solid #121212; /*adds a 1 px colored border*/
	margin-bottom: 15px; /*adds a bottom margin*/
	width: 490px; /*adds a fixed width*/
}

.ft2-box-inside {
	background-color: #0c0c0c; /*adds a background color*/
	background-image: url(images/community_bg.png); /*adds our footer background image*/
	border: 1px solid #030303; /*adds a 1px colored border*/
	float: left; /*floats left*/
	width: 576px; /*adds a fix width */
	padding: 10px; /*adds padding all the way around*/
}

.ft2-box-inside p {
	padding-top: 10px; /*adds top padding*/
}

#ft2-content-left-pagination {
	float: left; /*floats left*/
	width: 600px; /*adds a fixed width*/
	padding-bottom: 40px; /*adds bottom padding*/
}

.ft2-box-pagination {
	float: left; /*floats left*/
	width: 498px; /*adds a fixed width*/
	border: 1px solid #121212; /*adds a 1 px colored border*/
	margin-bottom: 15px; /*adds a bottom margin*/
	width: 490px; /*adds a fixed width*/
}

.ft2-box-inside-pagination {
	background-color: #0c0c0c; /*adds a background color*/
	border: 1px solid #030303; /*adds a 1px colored border*/
	float: left; /*floats left*/
	width: 576px; /*adds a fix width */
	padding: 10px; /*adds padding all the way around*/
}

.ft2-box-inside-pagination p {
	padding-top: 0px; /*adds top padding*/
}

.ft2-boxtitle2 {
	color: #aaaaaa; /*sets font color*/
	text-transform: uppercase; /*transforms text to uppercase*/
	font-size: 0.7em; /*sets font size*/
	padding-bottom: 10px; /*adds bottom padding*/
}

.ft2-boxtitle1 {
	color: #FFFFFF; /*text color*/
	text-transform: uppercase; /*transforms text to uppercase*/
	font-size: 1em; /*sets font size*/
	font-weight: normal; /*sets font weight*/
	background-position: right; /*positions background right*/
}

.ft2-boxtitle1 a{
	color: #FFFFFF; /*text color*/
	text-decoration: none;
}
/* ----------CONTENT RIGHT (sidebar) STYLES---------- */

#content-right {
	float: right; /*floats right*/
	width: 290px; /*sets a fixed width*/
	margin-left: 10px; /*adds a left margin*/
	padding-bottom: 40px; /*adds bottom padding*/
}

.sidebar {
	float: left; /*floats left*/
	width: 287px; /*adds a fixed width*/
	border: 1px solid #121212; /*adds a 1 px colored border*/
	margin-bottom: 15px; /*adds a bottom margin*/
	float: left; /*floats left*/
}

.sidebar-inside {
	background-color: #0c0c0c; /*sets background color*/
	border: 1px solid #030303; /*adds a 1px colored border*/
	float: left; /*floats left*/
	width: 266px; /*sets a fixed width*/
	padding: 10px; /*adds padding all the way around*/
}

.sidebar-inside p {
	padding-top: 10px; /*adds top padding*/
}

.sidebar-title1 {
	background-image: url(images/sidebar_bullet.png); /*adds our sidebar bullet icon*/
	background-repeat: no-repeat; /*stops background from repeating*/
	background-position: right; /*positions background right*/
}

.tweet-sidebar-title1 {
	background-image: url(images/blue-tweet.png); /*adds our sidebar bullet icon*/
	background-repeat: no-repeat; /*stops background from repeating*/
	background-position: right; /*positions background right*/
}

.sidebar-title2 {
	color: #aaaaaa; /*sets text color*/
	text-transform: uppercase; /*transforms text to uppercase*/
	font-size: 0.7em; /*sets font size*/
	background-image: url(images/divider.png); /*adds our divider image*/
	background-repeat: repeat-x; /*repeats divider imaage horizontally*/
	background-position: bottom; /*positions background bottom*/
	padding-bottom: 10px; /*adds bottom padding*/
}

/* ----------FOOTER STYLES---------- */

#footer {
	background-image: url(images/footer_bg.png); /*adds our footer background image*/
	background-repeat: repeat-x; /*repeats background horizontally*/
	height: 140px; /*adds a fixed height*/
	clear: both; /*clears both floats*/
	margin-top: 50px; /*adds a top margin*/
}

#footer-content {
	background-image: url(images/footer_contentbg.png); /*adds our footer background image*/
	background-repeat: no-repeat; /*stops background repeating*/
	margin: auto; /*centers our footer*/
	height: 90px; /*adds a fixed height*/
	width: 900px; /*adds a fixed width*/
	clear: both; /*clear's both floats*/
	padding-top: 50px; /*adds top padding*/
}

#footer-content p {
	text-align: center; /*aligns text center*/
}

.left{
text-align:left;
float:left;
}
.right{
float:right;
text-align:right;
}
.centered{
text-align:center;
}

/* ----------SERVICE'S PAGE STYLES---------- */

.services {
	float: left;
	border: 1px solid #121212;
	margin-bottom: 15px;
	float: left;
	width: 898px;
}

.services-inside {
	background-color: #0c0c0c;
	border: 1px solid #030303;
	float: left;
	width: 876px;
	padding: 10px;
}

.services-inside p {
	padding-top: 10px;
}

.services-inside a {
	text-decoration: none; /*removes bottom line from nav links*/
	color: #FFFFFF; /*color of our H2 tag*/
}

.service-list li{
	padding-left: 10px;
	font-size: 0.7em;
	color: #FFFFFF;
	margin-left: 40px;
	line-height: 18px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.service-img {
	padding: 5px;
	background-color: #000000;
	border: 1px solid #383838;
	margin-left: 6px;
	margin-top: 10px;
	margin-bottom: 5px;
}

/* ----------PRODUCT'S PAGE STYLES---------- */

.imgfloat-left {
	width:170px;
	height:140px;
	float:left;
	padding: 5px;
	background-color: #000000;
	border: 1px solid #383838;
	margin-right: 6px;
	margin-bottom: 6px;
	margin-top: 6px;
	margin-left: 6px;
}

.imgfloat-right {
	width:170px;
	height:140px;
	float:right;
	padding: 5px;
	background-color: #000000;
	border: 1px solid #383838;
	margin-left: 6px;
	margin-bottom: 6px;
	margin-top: 6px;
	margin-right: 6px;
}

/* ----------TESTIMONIAL'S PAGE STYLES---------- */

.testimonial {
	float: left;
	width: 498px;
	border: 1px solid #121212;
	margin-bottom: 15px;
	float: left;
	width: 898px;
	margin-right: 25px;
	background-color: #0c0c0c;
}

.testimonial-inside {
	background-color: #0c0c0c;
	border: 1px solid #030303;
	float: left;
	width: 876px;
	padding: 10px;
}

.testimonial-inside p {
	padding-top: 10px;
}

.rating {
	float: left;
	height: 18px;
	width: 876px;
	margin-top: 10px;
}

.rating img{
	float: right;
}

/* ----------CONTACT PAGE STYLES---------- */

.textfield {
	background-color: #000000;
	border: 1px solid #383838;
	padding: 2px;
	margin-top: 5px;
	margin-bottom: 5px;
	color: #CCCCCC;
	font-style: italic;
}

.textbox {
	background-color: #000000;
	border: 1px solid #383838;
	padding: 2px;
	margin-top: 5px;
	margin-bottom: 5px;
	font-style: italic;
	color: #CCCCCC;
}

.form-button {
	background-color: #000000;
	border: 1px solid #383838;
	padding: 4px;
	color: #CCCCCC;
	margin-right: 5px;
	font-size: 0.8em;
}

#contact {
	margin-top: 10px;
	width: 300px;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}


/* ----------TWITTER STYLES---------- */
#tweet {
color: #999a9a;
font-size:0.7em;
font-style:italic;
list-style: none;
padding-top:10px;
}

#tweet ul{
list-style: none;
}


/* ----------PLAYLISTS TABLES STYLES---------- */
table.playlists
{
border-collapse:collapse;
font-size:0.6em;
}
table.playlists td, th
{
border:1px solid #383838;
padding-bottom:5px;
padding-left:5px;
padding-top:5px;
padding-right:5px;
}


/* ----------EXPANDABLE BOXES STYLES---------- */







.ft-boxtitleComm {
	color: #FFFFFF; /*text color*/
	text-transform: uppercase; /*transforms text to uppercase*/
	font-size: .7em; /*sets font size*/
	font-weight: normal; /*sets font weight*/
	background-image: url(images/divider.png); /*adds our divider image*/
	background-repeat: repeat-x; /*repeats our divider image horizontally*/
	background-position: top; /*positions divider at the bottom*/
	padding-top: 10px; /*adds bottom padding*/
}

.ft-boxtitleComm a{
	color: #FFFFFF; /*text color*/
	text-decoration: none;
}