/*  -----------------------------------------------------
    
	INFO
	
	Project:				Wireless Media
	Version:				2.0
	Last change:			--/--/--
	Author:					Milan Zivkovic
	Author URL:				http://www.wm.rs

	- - - - - - - - - - - - - - - - - - - - - - - - - - -
	
	TABLE OF CONTENTS
   
	=Reset CSS
	=Basic
	=Body
		=Container
			=Header
				=Navigation
			=Content
			=Footer
    
	----------------------------------------------------- */
	
/*  =Reset
	----------------------------------------------------- */
	
	@import url("reset.css");
	
	
/*  =Container
	----------------------------------------------------- */
	
	body {
		background: url(../images/bg-inner.png) repeat-x;
		color: #555;
		font: 12px/18px Arial, Helvetica, sans-serif;
	}
	
		body#home {
			background: url(../images/bg.png) repeat-x;
		}
	
	#container {
		margin: 0 auto;
		text-align: left;
		width: 940px;
	}
	
	/*  =Generic
	----------------------------------------------------- */
	
	a:link,
	a:visited {
		color: #7b9a00;
		text-decoration: none;
	}
	
	a:hover,
	a:active {
		text-decoration: underline;
	}
	
	h1,
	h2,
	h3,
	h4 {
		clear: both;
		color: #555;
		font-family: "Lucida Grande", "Trebuchet MS", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
	}
	
	h1 {
		background:  no-repeat left center;
		font-size: 46px;
		height: 129px;
		line-height: 129px;
		margin-bottom: 40px;
		text-shadow: 1px 1px 0 #c4da1a;
	}
	
	h1,
	#featured h2 {
		color: #222;
	}
	
	h2 {
		border-bottom: 1px solid #ddd;
		font-size: 24px;
		line-height: 24px;
		padding-bottom: 5px;
	}
	
		h2.sub-title {
			border-bottom: 0;
			clear: both;
			font-size: 28px;
			line-height: 60px;
			margin-bottom: 30px;
			overflow: hidden;
		}
	
	h3 {
		/*color: #7b9a00;*/
		font-size: 18px;
	}
	
	h3,
	h4,
	h5,
	h6 {
		margin-bottom: 5px;
	}
	
	p,
	ul,
	ol,
	h2,
	blockquote,
	table {
		margin-bottom: 18px;
	}
	
	.hr {
		border-bottom: 1px dashed #7b9a00;
		clear: both;
		height: 1px;
		margin-bottom: 20px;
	}
	
		.hr hr {
			visibility: hidden;
		}
	
	small {
		font-size: 10px;
	}
	
	em {
		font-style: italic;
	}
	
	strong,
	th,
	dt {
		font-weight: bold;
	}
	
	blockquote {
		padding-left: 35px;
	}
	
	.col {
		display: inline;
		float: left;
		margin: 0 60px 60px 0;
	}
	
		#footer .col {
			margin: 0 20px 0 0;
		}
	
	.last {
		margin-right: 0!important;
		overflow: hidden;
		position: relative;
		zoom: 1;
	}
	
	.box {
	}
		
		.hidden {
			visibility: hidden;
		}
	
	.clearboth {
		clear: both;
	}
	
	.floatleft {
		float: left;
		margin: 0 10px 0 0;
	}
	
	.floatright {
		float: right;
		margin: 0 0 0 10px;
	}
	
	.more,
	.button {
		line-height: 31px;
	}
	
	/*.more {
		background: url(../images/arrows.png) no-repeat 3px 6px;
		padding-left: 15px;
	}*/
	
	#content .button {
		background: url(../images/bg-button-black-casestudy.png) no-repeat;
		border: none;
		color: #fff;
		display: inline-block;
		font-weight: bold;
		height: 31px;
		text-align: center;
		text-indent: -9999px;
		text-transform: uppercase;
		width: 121px;
	}
		
		.page #content .preview .button {
			left: 415px;
			position: absolute;
			text-indent: -9999px;
			top: 385px;
		}
		
		.page #content .preview .button {
			background: url(../images/bg-button-green-livedemo.png) no-repeat;
		}
		
		.project #content .preview .button {
			background: url(../images/bg-button-green-visit.png) no-repeat;
		}
		
			#content .button:hover,
			.page #content .preview .button:hover,
			#content form .button:hover {
				background-position: left bottom;
			}
		
			#content .button:active,
			.page #content .preview .button:active,
			#content form .button:active {
				background-position: right top;
			}
		
		#content .button:hover,
		#content .button:active {
			color: #fff;
			text-decoration: none;
		}
	
	td,
	th {
		padding: 0 5px;
	}

	
	/*  =Notices
	----------------------------------------------------- */

	.notice {
		/*background: #f2f2f2;*/
		border: 1px solid #eee;
		display: block;
		margin-bottom: 10px;
		padding: 10px;
	}
	
		.failure {
			background-color: #fdf5f5;
			border-color: #e2a4a4;
			color: #a93232;
		}
	
		.success {
			/*background-color: #f5fdf5;*/
			border-color: #b2d235;
			/*color: #338120;*/
		}
	
		.update {
			background-color: #f5f5fd;
			border-color: #a4a4e2;
			color: #324ea9;
		}
		
		
	/*  =Lists
	----------------------------------------------------- */
	
	#content ul li {
		background: url(../images/arrows.png) no-repeat -18px 4px;
		line-height: 18px;
		margin: 0 0 18px 10px;
		padding-left: 20px;
	}
	
		#content ul ul {
			margin: 0;
			padding-top: 10px;
		}
	
	#content .feature-list {
		clear: both;
		overflow: hidden;
	}
		
		#content .feature-list li {
			float: left;
			width: 250px;
		}
			
	#content .feature-list-thumb {
	}
	
		#content .feature-list-thumb li {
			background: none;
			float: left;
			height: 80px;
			margin: 0 0 30px;
			overflow: hidden;
			padding: 0;
			width: 280px;
		}
		
			#content .feature-list-thumb li p,
			#content .feature-list-thumb li h3 {
				clear: none;
				margin-right: 40px;
			}
		
			#content .feature-list-thumb li a {
				display:block;
			}
		
		
	/*  =Contact Form
	----------------------------------------------------- */

	.contactForm {
		margin-top: 50px;
		width: 500px;
	}
	
		label {
			color: #555;
			float: left;
			font-weight: bold;
			margin-right: 10px;
			width: 120px;
		}
		
		.contactForm small {
			display: block;
			padding-left: 110px;
		}
		
		input,
		textarea,
		select {
			border: 1px solid #7b9a00;
			padding: 5px;
			width: 200px;
		}
	
		#content form .button {
			background: url(../images/bg-button-green-send.png) no-repeat;
			margin-left: 130px;
		}
				
		#message_ok {
			display: none;
			margin: 50px 0;
		}
			
/*  =Pagination
	----------------------------------------------------- */
	
	.pagination {
		margin-top: 50px;
		overflow: hidden;
	}
	
		#content .pagination li {
			float: left;
			margin-right: 3px;
			padding: 0;
		}
		
			.pagination li a {
				border: 1px solid;
				display: block;
				width: 16px;
			}
	
	

/*  =Widths & Margins
	----------------------------------------------------- */
	
	.width_180 {
		width: 180px;
	}
	
	.width_220 {
		width: 220px;
	}
	
	.width_260 {
		width: 260px;
	}
	
	.width_280 {
		width: 280px;
	}
	
	.width_300 {
		width: 300px;
	}
	
	.width_375 {
		width: 375px;
	}
	
	.width_440 {
		width: 440px;
	}
	
	.width_580 {
		width: 580px;
	}
	
	.width_600 {
		width: 600px;
	}
	
	.width_620 {
		width: 620px;
	}
	
	.width_940 {
		width: 940px;
	}


/*  =Header
	----------------------------------------------------- */

	#header {
		height: 76px;
	}
	
		#header .brand {
			display: block;
			float: left;
			margin-top: 15px;
		}
	
		.languages {
			color: #949596;
			text-align: right;
		}
		
			.languages a:link,
			.languages a:visited {
				color: #949596;
				font-size: 10px;
			}


/*  =Navigation
	----------------------------------------------------- */
		
		#header #menu {
			float: right;
			margin: 30px 0 0;
			position: relative;
			text-shadow: 1px 1px 0 #000;
			z-index: 100;
		}
		
		/*** ESSENTIAL STYLES ***/
		.sf-menu, .sf-menu * {
			margin:			0;
			padding:		0;
			list-style:		none;
		}
		.sf-menu {
			line-height:	1.0;
		}
		.sf-menu ul {
			padding: 15px 0!important;
			position:		absolute;
			top:			-999em;
			width:			10em; /* left offset of submenus need to match (see below) */
		}
		.sf-menu ul ul {
			padding: 0!important;
		}
		.sf-menu ul li {
			line-height: 20px;
			width: 100%;
		}
		.sf-menu li:hover {
			visibility:		inherit; /* fixes IE7 'sticky bug' */
		}
		.sf-menu li {
			background: none;
			float:			left;
			padding: 0;
			position:		relative;
		}
		.sf-menu a {
			display:		block;
			position:		relative;
		}
		.sf-menu li:hover ul,
		.sf-menu li.sfHover ul {
			left:			0;
			top:			2.5em; /* match top ul list item height */
			z-index:		99;
		}
		ul.sf-menu li:hover li ul,
		ul.sf-menu li.sfHover li ul {
			top:			-999em;
		}
		ul.sf-menu li li:hover ul,
		ul.sf-menu li li.sfHover ul {
			left:			10em; /* match ul width */
			top:			0;
		}
		ul.sf-menu li li:hover li ul,
		ul.sf-menu li li.sfHover li ul {
			top:			-999em;
		}
		ul.sf-menu li li li:hover ul,
		ul.sf-menu li li li.sfHover ul {
			left:			10em; /* match ul width */
			top:			0;
		}
		
		/*** DEMO SKIN ***/
		.sf-menu {
			float:			left;
			margin-bottom:	1em;
		}
		.sf-menu a {
			border-left: 1px solid #282828;
			border-right: 1px solid #474747;
			padding: 5px 15px;
			text-decoration:none;
		}
		
			.sf-menu li li a {
				border: none;
			}
		
			.sf-menu .first a {
				border-left: 0;
				padding-left: 0;
			}
			
			.sf-menu .last a {
				border-right: 0;
				padding-right: 0;
			}
			
		.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
			color:			#bbbdbf;
		}
		
		.sf-menu a:hover,
		.sf-menu a:active {
			color: #b2d235;
		}
		
		/*.sf-menu li {
			background:		#BDD2FF;
		}*/
		.sf-menu li li {
			background:		#3a3a3a;
		}
		.sf-menu li li li {
			background:		#262626;
		}
		.sf-menu li:hover, .sf-menu li.sfHover,
		.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
			outline:		0;
		}
		
		/*** arrows **/
		.sf-menu a.sf-with-ul {
			padding-right: 	2.25em;
			min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
		}
		.sf-sub-indicator {
			position:		absolute;
			display:		block;
			right:			.75em;
			top:			1.05em; /* IE6 only */
			width:			10px;
			height:			10px;
			text-indent: 	-999em;
			overflow:		hidden;
			background:		url('../images/arrows.png') no-repeat -10px -103px; /* 8-bit indexed alpha png. IE6 gets solid image only */
		}
		a > .sf-sub-indicator {  /* give all except IE6 the correct values */
			top:			.8em;
			background-position: -10px -103px; /* use translucent arrow for modern browsers*/
		}
		/* apply hovers to modern browsers */
		a:focus > .sf-sub-indicator,
		a:hover > .sf-sub-indicator,
		a:active > .sf-sub-indicator,
		li:hover > a > .sf-sub-indicator,
		li.sfHover > a > .sf-sub-indicator {
			background-position: 0 -103px; /* arrow hovers for modern browsers*/
		}
		
		/* point right for anchors in subs */
		.sf-menu ul .sf-sub-indicator { background-position:  0 0; }
		.sf-menu ul a > .sf-sub-indicator { background-position:  -10px -1px; }
		/* apply hovers to modern browsers */
		.sf-menu ul a:focus > .sf-sub-indicator,
		.sf-menu ul a:hover > .sf-sub-indicator,
		.sf-menu ul a:active > .sf-sub-indicator,
		.sf-menu ul li:hover > a > .sf-sub-indicator,
		.sf-menu ul li.sfHover > a > .sf-sub-indicator {
			background-position: 0 -1px; /* arrow hovers for modern browsers*/
		}

	
/*  =Content
	----------------------------------------------------- */
	
	#content {
		clear: both;
		font-size: 14px;
		zoom: 1;
	}
	
		#content #testimonials li {
			background: none;
			float: left;
			margin: 0 60px 0 0;
			padding: 0;
		}
		
			#testimonials em {
				text-align: justify!important;
			}
		
			#testimonials strong,
			#testimonials span {
				clear: right;
				display: block;
				line-height: 14px;
				font-size: 11px;
				text-align: right;
			}
	
	.preview {
		/*height: 430px;*/
		margin-bottom: 60px;
		position: relative;
	}
	
		.link-block {
			display: block;
			position: absolute;
			text-indent: -9999px;
		}
		
			#top .preview #cmf-link {
				height: 99px;
				left: 249px;
				top: 210px;
				width: 212px;
			}
		
			#top .preview #sdf-link {
				height: 79px;
				left: 543px;
				top: 219px;
				width: 212px;
			}
		
			#top .preview #dmm-link {
				height: 79px;
				left: 543px;
				top: 94px;
				width: 212px;
			}
			
			#top .preview #games-link {
				height: 59px;
				left: 525px;
				top: 5px;
				width: 69px;
			}
			
			#top .preview #music-link {
				height: 59px;
				left: 614px;
				top: 5px;
				width: 69px;
			}
			
			#top .preview #module-link {
				height: 79px;
				left: 83px;
				top: 161px;
				width: 92px;
			}
			
			#top .preview #widget-link {
				height: 79px;
				left: 83px;
				top: 266px;
				width: 92px;
			}
			
			#cmf .preview #sdf-link {
				height: 79px;
				left: 734px;
				top: 163px;
				width: 92px;
			}
			
			#cmf .preview #websitebuilder-link {
				height: 59px;
				left: 228px;
				top: 215px;
				width: 153px;
			}
			
			#cmf .preview #cms-link {
				height: 59px;
				left: 228px;
				top: 126px;
				width: 153px;
			}
			
			#cmf .preview #usermanager-link {
				height: 59px;
				left: 228px;
				top: 37px;
				width: 153px;
			}
			
			#cmf .preview #module-link {
				height: 59px;
				left: 228px;
				top: 304px;
				width: 153px;
			}
		
			#dmm .preview #cmf-link {
				height: 79px;
				left: 351px;
				top: 296px;
				width: 162px;
			}
		
			#dmm .preview #sdf-link {
				height: 79px;
				left: 734px;
				top: 159px;
				width: 92px;
			}
		
			#sdf .preview #cmf-link {
				height: 99px;
				left: 35px;
				top: 237px;
				width: 212px;
			}
		
	
/*  =Featured
	----------------------------------------------------- */

	#featured {
		color: #222;
		height: 420px;
		margin-bottom: 40px;
		margin-left: -40px;
		position: relative;
		width: 1020px;
	}
	
		#featured h2 {
			border: none;
			font-size: 60px;
			line-height: 60px;
			margin: 120px 0 20px;
			padding: 0;
			text-shadow: 1px 1px 0 #c4da1a;
		}
	
		#featured h2,
		#featured p {
			margin-left: 45px;
			width: 300px;
		}
		
		#featured p {
			font-size: 14px;
		}
		
		#featured img {
			position: absolute;
			right: 0;
			top: 0;
		}
		
		#coda-nav-1 {
			position: absolute;
		}
			
		
		#featured .more {
			background-position: 0 -47px;
			color: #000;
			margin: 0 0 0 20px;
		}
		
		#featured-mask {
			background: url(../images/featured/featured-mask.png) no-repeat;
			height:420px;
			width: 1020px;
			position: absolute;
			z-index: 80;
		}
	
	/* Change the width of the entire slider (without dynamic arrows) */
	.coda-slider, .coda-slider .panel { width: 1020px }
	
	/* Change margin and width of the slider (with dynamic arrows) */
	/*.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 600px }*/
	/*.coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }*/
	
	/* Arrow styling */
	.coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 5px; width: 100px }
	
	/* Preloader */
	.coda-slider p.loading { padding: 20px; text-align: center }

/* Don't change anything below here unless you know what you're doing */

	/* Tabbed nav */
	#content #featured .coda-nav {
		margin-top: 10px;
		position: absolute;
		z-index: 81;
	}
	#content #featured .coda-nav ul {
		clear: both;
		display: block;
		margin: auto 35px auto auto;
		overflow: hidden;
		width:960px;
	}
	#content #featured .coda-nav ul li {
		display: inline;
		margin: 0;
		padding: 0;
	}
	#content #featured .coda-nav ul li a {
		background: url(../images/bg-featured-tabs.png) no-repeat left top;
		display: block;
		float: left;
		height: 8px;
		margin-right: 1px;
		text-indent: -9999px;
		width: 8px;
	}
	
		#content #featured .coda-nav ul li a:hover { background-position: -9px top }
	
		#content #featured .coda-nav ul li a.current { background-position: right top; }
	
	/* Miscellaneous */
	.coda-slider-wrapper { clear: both; overflow: auto }
	.coda-slider { float: left; overflow: hidden; position: relative }
	.coda-slider .panel { display: block; float: left; position: relative; height: 420px }
	.coda-slider .panel-container { position: relative }
	.coda-nav-left, .coda-nav-right { float: left }
	.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
	

/*  =Footer
	----------------------------------------------------- */

	#footer {
		background: url(../images/bg-footer.png) repeat-x;
		clear: both;
		color: #b8b8b8;
		overflow: hidden;
		text-align: left;
	}
	
		#footer .wrapper {
			margin: 30px auto;
			width: 940px;
		}
		
			#footer li {
				background: none;
				padding: 0;
			}
		
			#footer h2 {
				border-bottom-color: #555;
				color: #fff;
				font-size: 14px;
			}
		
			#footer a:link,
			#footer a:visited {
				color: #b2d235;
			}
		
			#footer .copy {
				clear: both;
				color: #898989;
				text-align: center;
			}