/* CSS Garden */

body { background: #bbdfeb; /* url(../images/sitebg.png); */ }

/* common */

a { outline:none; border:none; }

.clear { width:100%; clear:both; margin:0;height:0;padding:0; }

/* header */

#header { width:100%; clear:both; position:fixed; height:70px; background:#FFF; z-index: 1000; }

#header .in { width: 90%; height: 70px; position:relative; margin:0 auto; }

#header .in a.csg { display:block; height:28px; width:109px; position:absolute; top:19px; left:0px; background: url(../images/cssglogo.png) no-repeat center center; }

#header .in #menu, #user_access { width:auto; height:70px; margin:0px; position:absolute; top:0px; left:130px; display:block; padding: 0px; line-height: 70px; }

#header .in #menu li, #user_access li { float:left; display:block; }

#header .in #menu li a , #user_access a { margin-right: 20px; display:block; color: #000; text-decoration: none; font-size:14px; line-height:70px; height:70px; }

#header .in #menu li a:hover , #user_access a:hover { color: #666; text-shadow: 1px 1px 1px #ECEDF0; }

#header .in #menu li a.twitter:hover { color: #09F; }

#header .in #menu li a.rss:hover { color: #F60; }

#header .in #user_access {position: absolute; top:0px; right: 0px; left:auto; }

/* supporters */

.support { width: 100%; min-height: 100px; padding-top:15px; position: relative; z-index: 10; }

.support.base { padding-top:0px;	border-bottom: 1px solid #19150F;	-moz-box-shadow: 0 1px rgba(245,240,212,0.05);	-webkit-box-shadow: 0 1px rgba(245,240,212,0.05);	box-shadow: 0 1px rgba(245,240,212,0.05);	padding-bottom: 30px; margin-bottom: 45px; }

.support a { margin:0 0 15px 15px; float:left;  display:block; }

.support .adhere { width:300px; height:100px; line-height:100px; color: #333; background: #96CEE0; text-align:center; text-decoration:none; border:none; font-size: 13px; }

.support .adhere:hover { background: #87C0DC; }

.support.base .adhere { background: #5D4F3A; color: #A29C92; text-shadow: 1px 1px 1px #000; }

.support.base .adhere:hover { background: #4B3F2E; color: #A29C92; text-shadow: -1px -1px 1px #000; }

.support #bsap_1252763 .adhere { width:125px; height:125px; line-height:125px; }

#main { padding-top:70px; padding-bottom:300px; width: 100%; background: url(../images/green-bit.png) no-repeat center bottom; }

#main.fourohfour { background: url(../images/404-bit.png) no-repeat center bottom;  }

#main.fourohfour #error-page { text-align: center; margin: 0px 30%; } #error-page p{ font-size: 1em; line-height: 1.8em; color: #000; text-shadow: 1px 1px 1px #E7F3F8 }

.cen { margin: 0px auto; width: 100%; max-width: 960px; } 

/* page heading styles */

#main h1, h5{ text-align:center; font-size: 24px; line-height: 24px; padding:0px 0px 15px 0px; display:block; font-family: 'Oswald', sans-serif; width: 100%; clear:both; }

/* profile */

#profile { margin: 0px auto; width: 100%; max-width: 930px; padding: 0 15px; position: relative;} 

#profile #im-like { max-width: 930px; width: 100%; position: relative; background: #fff; /*#96CEE0*/height:480px; box-shadow:0px 0px 20px #87C7DC; border-radius:2px; }

#profile a.bigger { display:block; width: 100%; max-width:640px; outline:none; border:none; float:left; margin-right: 20px;}

#profile a.bigger img { display:block; width: 100%; max-width:640px; min-width:320px; }

#profile .share { width: 150px; padding: 0; display:block; position: absolute; top:60px; right: 60px;  z-index: 0;  }

#profile .share li { height: 80px; width: 55px; float:left; margin: 0px 20px 0px 0px; display:block;}

#profile .share li#forst { width: 130px; margin: 0px; font: bold 18px 'Oswald', sans-serif; text-align: center; color: #000; text-shadow: 1px 1px 1px #ccc; }

#profile .share li.css-like { clear:both; width: 130px; height:80px;  }

#profile .share li.css-like a { text-decoration:none; display:block; width: 128px; height:65px; border-radius:2px; text-align:center; background: #FFF url(../images/cssglike.png) no-repeat center 10px; font-size: 12px; color: #000; padding-top: 13px; border: 1px solid #ccc; }

#profile .share li.css-like a b { clear:both; display:block; color: #fff; font: bold 16px 'Oswald', sans-serif; margin-bottom: 8px; text-shadow: 1px 1px 10px #000; }

#profile .share li.css-like a:hover { border: 1px solid #333; }

#profile h1 { text-align: center; font-size: 32px; line-height: 100px; text-shadow: 1px 1px 1px #E7F3F8; display:block; height: 100px; clear:both; margin: 0px; padding: 0px; }

#profile p { font-size: 1em; line-height: 1.8em; color: #000; text-shadow: 1px 1px 1px #E7F3F8; margin-bottom: 20px;}

#profile p.zap { font-size: 0.8em; line-height: 24px; color: #000; margin-bottom: 0px; }

#profile p.zap.last {margin-bottom: 20px;}

#profile p.zap a { color: #000; }

#profile p.zap a:hover { color: #5B7A1B; text-decoration:none; }

#profile .byuser { margin: 0px auto; width: 100%; max-width: 610px; padding: 15px; margin-bottom:20px; background:#fff; border-radius: 2px; box-shadow:0px 0px 20px #87C7DC; }

#profile .byuser h5 {font-size: 18px;}

#profile .byuser h5 a { color:#069; text-decoration:none; font-size: 14px; margin: 0 0 0 10px; }

#profile .byuser h5 a:hover { text-decoration:underline; }

/* comments area */

#comment-area { margin: 0px auto; width: 100%; max-width: 640px; padding: 0 15px; position:relative; }

#comment-area a.do_com { display:block; background:#FFF; width: 80px; height: 80px; color: #000; position:absolute; top: 0px; left: -75px; border-radius:2px;}

#comments, #add-comment { width: 100%; max-width: 640px; position: relative; float:left; box-shadow:0px 0px 20px #87C7DC; }

#comments { margin-bottom: 20px; }

#comments li { margin-bottom: 1px; padding: 15px; background:#FFF; border-radius: 2px; max-width: 610px; position:relative; }

#comments li.comment.shd { background: #E1F1F7; }

#comments .comment #counter { position: absolute; top: 15px; right: 15px; font-size: 14px; color: #E5E5E5; }

#comments .comment:hover #counter { color: #3983B9; }

#comments b, #comments b a { color: #3983B9; font-size: 14px; line-height: 14px; font-weight:bold;  }

#comments .comment p { display:block; width: 100%; font-size: 16px; line-height: 24px;  padding-top: 20px;  }

#add-comment { padding: 15px; background:#FFF; border-radius: 2px; max-width: 610px;}

#add-comment p { font-size: 14px; line-height: 24px; }

#add-comment .red { color:#C00; }

#add-comment h5 { color: #3983B9; font-size: 18px;  }

/* categories */

#all_categories { background:#FFF; width: 15%; min-width: 300px; position:fixed; top: 70px; left: 0px; height:100%; z-index:990; box-shadow:0px 0px 20px #87C7DC; padding: 15px; display:none;  }

#all_categories h4, #search h4{ clear:both; display:block; color: #000; font: 16px 'Oswald', sans-serif; margin: 0 0 10px 0; text-shadow: 1px 1px 1px #ccc; }

#all_categories .cats { display:block; width: auto; margin: 0px; padding: 0 0 20px 0; }

#all_categories .cats li { display:block; height: 24px; width: 100%; }

#all_categories .cats li a { font-size: 14px; color: #2979B4; text-decoration:none;display:block; height: 24px; width: 100%; }

#all_categories .cats li a:hover { color: #143C58; text-decoration:underline; }

#all_categories .cats li.clr { display:block; height: 20px; width: 20px; float: left; margin: 0 2px 2px 0; padding: 3px; border-radius: 2px; background: #CCC; }

#all_categories .cats li.clr:hover { background: #000; }

#all_categories .cats li.clr a {display:block; height: 20px; width: 20px;}

#all_categories .cats li.clr a.white { background-color: #fff; }

#all_categories .cats li.clr a.green { background-color: #95BA23; }

#all_categories .cats li.clr a.blue { background-color: #2796CB; }

#all_categories .cats li.clr a.red { background-color: #EF1B03; }

#all_categories .cats li.clr a.yellow { background-color: #FC0; }

#all_categories .cats li.clr a.black { background-color: #000; }

#all_categories .cats li.clr a.purple { background-color: #636; }

#all_categories .cats li.clr a.grey { background-color: #999; }

#all_categories .cats li.clr a.pink { background-color: #FCC; }

#all_categories .cats li.clr a.brown { background-color: #960; }

#all_categories .cats li.clr a.orange { background-color: #F90; }

#all_categories .cats li.clr a.cream { background-color: #FDFAD7; }

#all_categories .cats li.clr a.darkblue { background-color: #13356C; }

#all_categories .close_cats, #search .close_sear { cursor:pointer; width: 100%; background: #C30; font-size: 24px; color: #FFF; font-family:'Oswald', sans-serif; display:block; height: 40px; line-height: 40px; position: fixed; bottom: 15px; left: 15px; text-decoration:none; text-shadow: 0px 0px 10px #930; text-indent: 15px;}

/* search box */

#search { background:#FFF; width: 15%; min-width: 300px; position:fixed; top: 70px; left: 0px; height:100%; z-index:990; box-shadow:0px 0px 20px #87C7DC; padding: 15px; display:none; }

#search .search-form { display: block; width: 100%; }

#search .search-form .field { background-color: #F3F7EE; border: 1px solid #ccc; height: 34px; width: 98%; border-radius:2px;-moz-border-radius:2px;  margin: 0 0 10px 0; display: block; float: left; font-size: 16px; padding: 0px 0px 0px 5px; }

#search .search-form .field:focus { outline:none; }

#search .search-form .button { height: 40px; width: 100px; margin:0px; border: none; border-radius:2px; -moz-border-radius:2px; font-size: 16px; color: #FFF; display: block; padding: 0px; line-height: 40px; background: #A2B726; }

/* Comments */

#add-comment label { display:block; clear:both; font-size: 14px; line-height: 24px; font-weight: bold; padding-top: 20px; }

#add-comment textarea { display:block; clear:both; font-size: 12px; font-family: 'Droid Sans', sans-serif; line-height: 22px; width: 99%;}

/* gallery */

#gallery { display: block; padding: 0px; list-style: none; clear: both; margin: 0px auto; width: 100%; max-width: 960px;}

#gallery li { display: block; list-style:none; float:left; padding: 0px; width:300px; position: relative; margin: 0px 15px 15px 15px; height: 200px; background: #000;  }

#gallery li.edge { margin: 0px 0px 15px 0px; }

#gallery li a.item img { width:300px; height:200px; }

#gallery li .info { width:280px; height:180px; padding:10px; color:#FFF; text-align:center; position: absolute; left: 0px; top: 0px; z-index: 200; display:none; }

#gallery li .info h2 { display:block; clear:both; margin:0px; padding:66px 0px 10px 0px; font: 16px 'Oswald',sans-serif; }

#gallery li .info a.visit { width:80px; height:20px; line-height:20px; text-align:centre; color:#FFF; display:block; float:left; margin:0px; z-index:1000; font-size:14px; position: relative; }

#gallery li .info a.visit.mleft { margin-left:60px; }

#gallery li .info a.visit.mright { margin-right:60px; }

#gallery li .info a.visit:hover { color:#3CC; }

#gallery li .info a.clover { width:300px; height:200px; position:absolute; top:0px; left:0px; z-index: 10; }

/* gallery pagination - may remove for ajax load */

.pgouter { height: 40px; margin: 0px auto; width: 520px; text-align:center; padding: 0px; }

#pagination { display: block; margin: 0px auto; padding: 0px ; clear: both; width: 520px; list-style: none; height:40px; border-radius:2px;  background: #A2C058; }

#pagination li { display:block; width:40px; float:left; height:40px;  }

#pagination li.right { float:right; }

#pagination li a { font-size: 14px; line-height:40px; color: #474a4b; text-shadow:1px 1px 1px #DCE8BF;  display: block; width: 40px; height: 40px; text-align:center; text-decoration: none; }

#pagination li a.this_page { width: 40px; background: #61772D; color: #FFF; text-shadow:1px 1px 1px #333; border-radius:2px;}

#pagination li a.older { float: right; }

#pagination li a:hover { color: #FFF; text-shadow:1px 1px 1px #333; }

/* sign up / login forms / submit site */

.form { width: 100%; max-width: 900px; padding: 15px; margin: 0 auto; color:#333; background: #FFF; border-radius:2px; box-shadow:0px 0px 20px #87C7DC; position:relative; }

.form h1 , .form h2 { clear:both; display:block; color: #29758D; font: 16px 'Oswald', sans-serif; margin: 0 0 10px 0; text-shadow: 1px 1px 1px #f0f0f0; }

.form p { margin: 0 0 15px 0; font-size: 14px; line-height: 22px; }

.form .section { width: auto; padding: 15px 15px 5px 15px; background: #E0F0F5; border-radius: 2px; margin-bottom:15px; }

.form .row { width: auto; clear:both; margin: 0 0 10px 0; height: 40px; position:relative; }

.form .row.description { height: 212px; margin-bottom: 10px; }

.form .row label { width: 200px; display:block; float:left; background: #F4F4F4; border-radius: 3px 0 0 3px; height: 36px; line-height: 36px; text-indent: 10px; border: 1px solid #CCC; border-right:none; font-size: 14px; }

.form .row input { width: 300px; display:block; float:left; border: solid 1px #ccc; border-radius: 0 3px 3px 0; height: 36px; line-height: 36px; font-size: 16px; padding: 0 0 0 10px; }

.form .row input#file { font-size: 14px; padding: 8px 0 0 10px; height: 28px; line-height: 28px; }

.form .row select { width: 300px; display:block; float:left; border: solid 1px #ccc; border-radius: 0 3px 3px 0; height: 38px; line-height: 38px; font-size: 14px; padding: 5px; }

.form .row select#colour_one, .form .row select#per_page { width: 100px; }

.form .row select#colour_two { margin: 0 0 0 10px; width: 100px; }

.form .row.checkbox .input { width: 32px; display:block; float:left; border: solid 1px #ccc; border-radius: 0 3px 3px 0; height: 28px; padding: 8px 0 0 10px; background: #FFF; }

.form .row.checkbox input { width: auto; display:inline;  border: none; border-radius: 0; height: auto; line-height: auto; padding: 0 0 0 10px;}

.form .row.description textarea { font-family: 'Droid Sans', sans-serif; width: 600px; height: 200px; display:block; float:left; border: solid 1px #ccc; border-radius: 0 3px 3px 3px; line-height: 24px; font-size: 14px; padding: 5px; }

.form .row.submit input { margin: 0 0 0 201px; height: 40px; background: #A3BA1D; width:210px; text-align:center; font-size: 14px; font-weight:bold; border: none; text-indent: 0; padding: 0; color: #FFF; text-shadow: 1px 1px 1px #000; }

.form .row .error { position:absolute; font-size: 12px; top: 0px; right: 0px; width: 365px; height: 38px; line-height: 38px; border-radius: 2px; background: #900; color: #FFF; font-weight:bold; padding: 0 5px; z-index: 500;}

.form .ed_img { position:absolute; top:30px; right: 30px; border: solid 1px #ccc; }

/* footer */

#footer { min-height: 400px; background: #251E14 url(../images/foot_bg_bt.png) no-repeat center bottom; }

#footer-top { background: url(../images/footer_bg_tp.png) no-repeat center top; padding-top: 45px; }

#footer .detail { width: 70%; margin: 0 15%; border-bottom: 1px solid #19150F; -moz-box-shadow: 0 1px rgba(245,240,212,0.05); -webkit-box-shadow: 0 1px rgba(245,240,212,0.05); box-shadow: 0 1px rgba(245,240,212,0.05); padding-bottom: 45px; margin-bottom: 45px; }

/* footer about */

#about { width: 48%; float:left; color: #A29C92; text-shadow: 1px 1px 1px #000; }

#about p { font-size: 1em; line-height: 1.8em; }

#friends { width: 48%; float:right; display:block; }

#friends li { width: auto; float:left; margin: 0px 5px 5px 5px; height: 35px; }

#friends li a { height: 25px; line-height:25px; border-radius: 2px; background: #5D4F3A; padding:5px; color: #211A11; text-decoration:none; font-size: 14px; }

#friends li a:hover { color: #A29C92;text-shadow: 1px 1px 1px #000; }

#friends li.become { width: 100%; clear:both; text-align: left; }

#friends li.become a { height: 25px; line-height:25px; border-radius: 2px; background: none; padding:0px; color: #5F5952; text-shadow: 1px 1px 1px #000; text-decoration:none; font-size: 0.8em; line-height: 1.8em;  }

#friends li.become a:hover { color: #A29C92;text-shadow: 1px 1px 1px #000; }

.copy {	clear:both; color: #A29C92; text-shadow: 1px 1px 1px #000; font-size: 14px; text-align:center; width: 70%; margin: 0 15%; padding-bottom: 80px; }

.copy a { color: #A29C92; }

.copy a:hover { text-shadow: -1px -1px 1px #000; }

/* different screens */

@media all and (max-width: 960px)
	{	
		#main { padding-top:70px; }
	
		#gallery li { margin: 0px 0px 15px 15px; }
		
		#gallery li.edge { margin: 0px 0px 15px 15px; }
		
		#about { width: 100%; float:none; margin-bottom: 20px; }

		#friends { width: 100%; float:none; }
		
	}

@media all and (max-width: 680px)
	{	
		#main { padding-top:0px; }
		
		#header { height:140px; }
		
		#header .in { height:140px; }
		
		#header .in #user_access { position: absolute; bottom: 0px; top:auto; right: 0px; left:auto; }
		
		#gallery li { margin: 0px 0px 15px 15px; }
		
		#gallery li.edge { margin: 0px 0px 15px 15px; }
		
	}
@media all and (max-width: 630px)
	{
		
		#header {position:static; height:auto; }
		
		#header .in { width: 100%; height:70; margin:0 auto; }

		#header .in #menu, #user_access {height:auto; position:absolute; top:0px; left:130px; display:block; padding: 0px; line-height: 70px; }


	}
@media all and (max-width: 520px)
	{	
		.pgouter { height: 40px; margin: 0px auto; width: 100%; text-align:center; padding: 0px; }
		
		#pagination { display: block; margin: 0px auto; padding: 0px ; clear: both; width: 100%; list-style: none; height:40px; border-radius:2px;  background: #A2C058; }

		#pagination li { display:block; width:7.692307692307692%; float:left; height:40px;  }

		#pagination li.right { float:right; }

		#pagination li a { font-size: 0.8em; line-height:40px; color: #474a4b; text-shadow:1px 1px 1px #DCE8BF;  display: block; width: 100%; height: 40px; text-align:center; text-decoration: none; }

		#pagination li a.this_page { width: 100%; background: #61772D; color: #FFF; text-shadow:1px 1px 1px #333; border-radius:2px;}
	}
@media all and (max-width: 400px)
	{
		
		#header {position:static; height:auto; }
		
		#header .in { width: 100%; height:auto; margin:0 auto; }
		
		#header .in a.csg { display:block; height:30px; width:auto; position:static; top:auto; left:auto; background: url(../images/cssglogo.png) no-repeat center center; }

		#header .in #menu, #user_access {height:auto; position:static; top:auto; left:auto; display:block; padding: 0px; line-height: 30px; }
		
		#header .in #menu li, #user_access li { float:none; clear:both; display:block; height:30px; }

		#header .in #menu li a , #user_access a { margin-right: 0px; line-height:30px; height:30px; text-align:center; }

		#header .in #menu li a:hover , #user_access a:hover { color: #666; text-shadow: 1px 1px 1px #ECEDF0; }

		#header .in #user_access { position: static; top:auto; right: auto; left:auto; }
		
		#main { padding-top:0px; }
				
		#gallery li { margin: 0px 0px 15px 15px; }
		
		#gallery li.edge { margin: 0px 0px 15px 15px; }

	}