/*======================================================================
Abergele Camera Club CSS
url: www.abergelecameraclub.co.uk

author: brynmor harries and  michelle palmer
url:    www.stylecymru.co.uk

Last update: 07 Nov 2009
======================================================================*/

/*======================================================================
Structure
======================================================================*/
body {
	text-align: center;
	margin:  0 auto;
	background: #999 url(../images/general/bodybg2.jpg) repeat-y top;
}

/*======================================================================
Links styling
======================================================================*/
a:link, a:visited {
	color: #004e77;
	background: transparent; 
	outline: none;
}

a:hover {
	color: #fffffa;
	background: #004e77;
	text-decoration: none;	
}

a:active {
	color: Red;
	background: Yellow;
	text-decoration: none;
}

a.piclink:hover {
	background: transparent;
	text-decoration: none;	
}

.fpic a:link, .fpic a:visited {
	color: #bce8ff;
	background: transparent; 
	text-decoration: none;	
	outline: none;
}

.fpic a:hover {
	color: #ff8800;
}

/*======================================================================
Grid layout
======================================================================*/
.size1 { width:60px; margin: 0 10px;	overflow: hidden;	float: left; display: inline; }
.size2 { width:140px; margin: 0 10px;	overflow: hidden;	float: left; display: inline; }
.size3 { width:220px; margin: 0 10px;	overflow: hidden;	float: left; display: inline; }
.size4 { width:300px; margin: 0 10px;	overflow: hidden;	float: left; display: inline; }
.size5 { width:380px; margin: 0 10px;	overflow: hidden;	float: left; display: inline; }
.size6 { width:460px; margin: 0 10px;	overflow: hidden;	float: left; display: inline; }
.size7 { width:540px; margin: 0 10px;	overflow: hidden;	float: left; display: inline; }
.size8 { width:620px; margin: 0 10px;	overflow: hidden;	float: left; display: inline; }
.size9 { width:700px; margin: 0 10px;	overflow: hidden;	float: left; display: inline; }
.size10 { width:780px; margin: 0 10px;	overflow: hidden;	float: left; display: inline; }
.size11 { width:860px; margin: 0 10px;	overflow: hidden;	float: left; display: inline; }
.size12 { width:940px; margin: 0 10px;	overflow: hidden;	float: left; display: inline; }

.box {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
	text-align: left;
}

.box .box {
	margin: 0 -10px;
	width: auto;
}

/*======================================================================
Content styling
======================================================================*/
.size4panel { width: 233px; margin: 0 30px; overflow: hidden;	float: left; display: inline; /*background: #eee;*/ }
.size3panel { width: 160px; margin: 0 30px; overflow: hidden;	float: left; display: inline; /*background: #eee;*/ }
.size6panel { width: 380px; margin: 0 30px; overflow: hidden;	float: left; display: inline; /*background: #eee;*/ }
.size12panel { width: 820px; margin: 0 30px; overflow: hidden;	float: left; display: inline; /*background: #eee;*/ }
.size3panelwide { width: 180px; margin: 0 15px 0 20px; overflow: hidden;	float: left; display: inline; font-size: 0.8em; }

.fullwidthpanel {
	margin: 0 40px;
	padding: 30px 0 0;
	width: 880px;
	overflow: hidden;
	float: left;
	display: inline;
	border-top: 1px solid #999;
	background: #fefefe url(../images/general/fullwidthpanel_bg.jpg) no-repeat 0 0;
}

.fullwidthbottom {
	clear: both;
	background : transparent url(../images/general/fwbg_bottom.jpg) no-repeat top left;
	margin: 0 40px 20px;
	width: 880px;
	height: 25px;
}

.featuretop {
	width: 960px;
	height: 25px;
	margin: -1.6em auto 0;
	background: #bf6200 url(../images/general/featuretop.jpg) repeat-y 0 0;
}

.feature {
	width: 900px;
	margin: 0 auto;
	padding: 20px 30px;
	overflow: hidden;
	text-align: left;
	color: #fff;
	background: #131a1e url(../images/general/featurebg3.jpg) no-repeat 0 0;
}

.featurepanel {
	clear: both;
	width:888px;
	margin: 0 0 0 10px;
	overflow: hidden;
	float: left;
	display: inline;
}

/* front page feature pic */
.featurepic img {
	margin: 0 auto;
}

.fpic {
	float: left;
	display: inline;
	overflow: hidden;
	margin : 5px;
	width: 100px;
	text-align: center;
}

.fpic a img {
	padding: 3px;
	background: #fff;
	border: 2px solid #fff;
}

.fpic a:hover img {
	padding: 3px;
	background: #fff;
	border : 2px solid #ff8800;
}

.fpic p {
	padding: 10px 0 0 0;
	font-size: 12px;
}

.bgbottom { background : transparent url(../images/general/navbg_bottom.jpg) no-repeat top left; height: 20px; }

/*======================================================================
Text - additional styling
======================================================================*/
h2 { font-size: 2.8em; }
h3 { font-size: 2.2em; }
h4 { font-size: 1.8em; }
p, li, td { font-size: 1.5em; }

h2.title { text-transform : lowercase; padding: 0 40px; margin-bottom: 10px; }
.feature h2 { text-transform : lowercase; padding: 0 10px; }
h3.date { color: #004e77; text-transform : lowercase; padding: 0.6em 40px 0; margin-bottom: 0px; }
p.nobox  { padding: 0 40px; }
.cushycms h3, h3.date { text-transform : lowercase; color: #004e77; }
.list ul  { margin-bottom: 3em; }
.list li  { margin-bottom: 1em; }
.programme li  { margin-bottom: 1em; }

.special, h3.special {
  color: #ff8800;
	font-weight: bold;
}

.cushycms {} /* external content editor class */

/*======================================================================
Image styling
======================================================================*/
img.lightbox {
	padding: 10px;
	border: 1px solid #000;
	background: #fff;
}

.floatpicright {
	float : right;
	text-align : center;
}

.floatpicright img {
	border : 1px solid #ccc;
	padding: 10px;
	margin : 1em;
}

.middlepic {
	margin: 0 auto;
	text-align: center;
}

.middlepic img {
	border : 1px solid #ccc;
	padding: 10px;
	margin : 1em;
}

.piclink a {
	background : transparent;	
	text-decoration : none;
	border : none;	
}

.piclink a:hover img {
	border : 1px solid #ff8800;
}

.noborderlink a, .noborderlink a:hover img  {
	background : transparent;	
	text-decoration : none;
	border : none;	
}
/*======================================================================
Banner Image Replacement for header
======================================================================*/
#header {
	margin:  0 auto;
	text-align: left;
	width: 960px;
	overflow: hidden;
	background: #000;
}

#header h1 { margin-bottom: 0; } /* removes h1 margin set in screen.css for image replacement in header */

.rir { 
	width: 960px;
	height: 130px;
	position: relative;
}

.rir span {
	background: url(../images/general/banner1.jpg) no-repeat 0 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

/*======================================================================
Main Site Navigation
======================================================================*/
#global_nav {
	margin: 0 auto;
  width: 960px;
	overflow: hidden;
	color : #fff;
	background : #000 url(../images/general/navbg.jpg) repeat-x 0 0;
	border-top: 1px solid #000;
}

#global_nav ul {
  font-size : 1.2em;
  margin: 0;
	padding: 0;
}

#global_nav li {
  float: left;
	list-style: none;
	margin-bottom: 0;
}

#global_nav ul li a {
  display: block; /*makes the floats into blocks of width... */
  width: 160px; /* 960 width divided by 6 */
  padding: 15px 0; /* top and bottom padding */
  text-align: center;
  color : #ff8800;
  background: transparent;
  text-decoration: none; /* removes underline */
	outline: none;
	font-weight: normal;
}

#global_nav ul li a:hover {
  color : #fff;
  background: transparent;
  text-decoration: none;
}

/*Page Here Indicator*/
#one li.one a, #one li.one a:hover,
#two li.two a, #two li.two a:hover,
#three li.three a, #three li.three a:hover,
#four li.four a, #four li.four a:hover,
#five li.five a, #five li.five a:hover,
#six li.six a, #six li.six a:hover
{
	color : #bce8ff;
	background : transparent;
  cursor : default;
}

/*======================================================================
Footer styling
======================================================================*/
#footer {
	margin: 10px auto 0;
	padding: 30px;
  width: 900px;
	overflow: hidden;
	color : #fff;
	background : #000 url(../images/general/navbg.jpg) repeat-x 0 0;
}

#footer a {
	color: #fff;
	background : transparent;
}

#footer a:hover {
	color : #f80;
	background : transparent;
}

/*======================================================================

Login Form Styling Adapted from Surreal
http://www.edit-content.com/login

======================================================================*/
#main_container {
	background:#fff;
	margin:0 auto 20px;
	/*width:400px;*/
	border:solid 1px #9d9d9d;
	-moz-box-shadow:0 2px 8px #ddd;
	-webkit-box-shadow:0 2px 8px #ddd;
	box-shadow:0 2px 8px #ddd;
}

#main_container form {
  background: url(../images/general/lock.jpg) 60px 93px no-repeat;
	padding: 1em 2em 2em 105px;
	margin: 0em auto;
	height: 200px;
	overflow: hidden;
}

#main_container h3 {
  color: #fff;
	background:#9d9d9d url(../images/general/navbg.jpg) 0 0 repeat-x;
	border-top: 1px solid #111;
	border-bottom: 1px solid #111;
	padding: 10px 0 10px 105px;
}

#main_container input.button{
  /*font-size:11px;*/
	color:#444;
	background:#ddd url(../images/general/button.gif) left center repeat-x;
	border-top:solid 1px #CCC;
	border-left:solid 1px #CCC;
	border-bottom:solid 1px #999;
	border-right:solid 1px #999;
	text-shadow:#FFF -1px 1px 0px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	padding:2px 6px;
	margin:0;
	display:inline-block;
}

#main_container input.button:hover{
  border:solid 1px #666;
	color:#000;
}

#main_container input.textfield, textarea, select {
  /*font-family:Arial,Helvetica,sans-serif;
	font-size:12px;*/
	color:#000;
	border-top:solid 1px #888;
	border-left:solid 1px #888;
	border-bottom:solid 1px #ddd;
	border-right:solid 1px #ddd;
}

a.formlink {margin-left:1em; font-size: 0.75em;}