/** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 ************************************************************************
 *
 *	netFrog.at
 *
 *	Copyright notice
 *	(c) 2006 Arno Dudek, Vienna (office@adgrafik.at)
 *
 ************************************************************************
 ** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *	interface
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
	
body {
	margin:				0;
	padding:			0 10px 0 10px;

	font-family:		"Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
	font-size:			9.5pt;
	color:				#555555;
	text-align:			center;
	line-height:		1.5em;

	background-color:	white;
	background-image:	url(../_img/interface/netfrog-bg.gif);
	background-repeat:	no-repeat;
	background-position: right 70%;
	background-attachment: fixed;
}

#areas {
	position:			relative;
	width:				800px;
	margin:				auto;
	text-align:			left;
}

#top-area {
	height:				140px;
}

#nav-area {
	min-height:			30px;

	margin:				-30px 110px 0 270px;
	padding:			0 5px 0 0;

	font-family:		Verdana,Arial,Helvetica,sans-serif;
	font-size:			0.8em;
	text-align:			right;
	line-height:		3em;
	white-space:		nowrap;

	border-top:			1px solid #cccccc;
	border-right:		1px solid #cccccc;
}

#subnav-area {
	position:			absolute;

	top:				141px;
	right:				0;

	width:				110px;
}

#content-area {
	margin:				0 110px 0 50px;
	padding:			20px 30px 5px 30px;

	border:				1px solid #cccccc;
	background-color:	#fafafa;
}

#services-area {
	margin:				0 110px 0 50px;
	padding:			3px 0 4px 0;

	font-family:		Verdana,Arial,Helvetica,sans-serif;
	font-size:			0.8em;
	text-align:			center;

	border:				1px solid #cccccc;
	border-top:			none;
	background-color:	#f9ffed;
}

#footer-area {
	margin:				10px 110px 10px 50px;
	padding:			4px 0 5px 0;

	font-family:		Verdana,Arial,Helvetica,sans-serif;
	font-size:			0.8em;
	text-align:			center;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *	navigation
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

a, 
a:visited {
	color:				#666666;
	text-decoration:	none;
	border-bottom:		1px dotted #999999;
}

a:hover {
	color:				#333333;
	border-bottom:		1px solid #66cc00;
}

.csc-textpic-image-div a, 
.csc-textpic-image-div a:visited, 
.csc-textpic-image-div a:hover {
	border-bottom:		none;
}

a.external-link {
	padding:			0px 0px 0px 14px;

	background-image:	url(../_img/interface/link_ext.gif);
	background-position: 1px 3px;
	background-repeat:	no-repeat;
}

a.mail {
	padding:			1px 0px 0px 14px;

	background-image:	url(../_img/interface/link_mailto.gif);
	background-position: 0px 4px;
	background-repeat:	no-repeat;
}

/*
	----	main nav
*/

#nav-area ul {
	position:			relative;
	margin:				0;
	padding:			0;
}

#nav-area li {
	display:			inline;
	border-left:		2px solid #66cc00;
}

#nav-area a {
	margin:				0 6px 0 6px;
}

#nav-area a.cur {
	color:				#333333;
	border-bottom:		1px solid #66cc00;
}

#nav-area li.first-item {
	border-left:		none;
}

/*
	----	sub nav
*/

#subnav-area ul {
	margin:				0;
	padding:			0;

	list-style-type:	none;
	list-style-position: outside;

	font-family:		Verdana,Arial,Helvetica,sans-serif;
	font-size:			0.8em;
	text-align:			left;
	line-height:		1.3em;

	border-top:			1px solid #cccccc;
	border-right:		1px solid #cccccc;
}

#subnav-area li {
	margin:				0;
	padding:			0;

	border-left:		none;
	background-image:	none;
}

#subnav-area li:hover {
	background-image:	none;
}

#subnav-area ul a {
	margin:				0;
	padding:			3px 0 3px 15px;
	display:			block;

	background-image:	none;
}

#subnav-area ul a:hover {
	background-image:	url(../_img/interface/pointer-0.gif);
	background-repeat:	no-repeat;
	background-position: 4px 7px;
}

#subnav-area ul a.cur {
	color:				#333333;
	border-bottom:		1px solid #66cc00;
	background-color:	#f9ffed;
	background-image:	url(../_img/interface/pointer-1.gif);
	background-repeat:	no-repeat;
	background-position: 4px 7px;
}

/*
	----	services nav
*/

#services-area ul {
	position:			relative;
	margin:				0;
}

#services-area li {
	display:			inline;
	border-left:		2px solid #66cc00;
}

#services-area li a {
	margin:				0 6px 0 6px;
}

#services-area li a.cur {
	color:				#333333;
	border-bottom:		1px solid #66cc00;
}

#services-area li.first-item {
	border-left:		none;
}

/*
	----	totop
*/

#content-area .totop {
	position:			relative;
	height:				16px;
	margin:				0 -30px 0 -30px;
}

#content-area .totop-l {
	position:			absolute;

	width:				16px;
	height:				16px;

	background-image:	url(../_img/interface/top-l.gif);
	background-repeat:	no-repeat;
}

#content-area .totop-r {
	position:			absolute;

	top:				0;
	right:				0;

	width:				16px;
	height:				16px;

	background-image:	url(../_img/interface/top-r.gif);
	background-repeat:	no-repeat;
}

#content-area .totop a, 
#content-area .totop a:visited {
	height:				16px;
	display:			block;
	text-decoration:	none;
	border:				none;
}

#content-area .totop a:hover {
	text-decoration:	none;
	border:				none;
}

/*
	----	buttons
*/

#content-area .button-s {
	text-align:			center;
}

#content-area .button-m a, 
#content-area .button-m a:visited, 
#content-area .button-s a, 
#content-area .button-s a:visited {
	margin:				0 auto 0 auto;

	height:				20px;

	display:			block;

	color:				#66cc00;
	font-weight:		bold;
	text-align:			center;
	line-height:		1.7em;

	border:				none;
	background-repeat:	no-repeat;
}

#content-area .button-m a, 
#content-area .button-m a:visited {
	width:				150px;
	background-image:	url(../_img/interface/button-m.gif);
}

#content-area .button-s a, 
#content-area .button-s a:visited {
	width:				100px;
	background-image:	url(../_img/interface/button-s.gif);
}

#content-area .button-m a:hover, 
#content-area .button-s a:hover {
	color:				#333333;
	border:				none;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *	content styles
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

h1, 
.header h1 {
	margin:				0px 0 20px -25px;
	padding:			0 0 3px 20px;

	display:			inline;
	font-size:			1.2em;
	color:				#333333;

	border-left:		3px solid #66cc00;
	border-bottom:		1px dotted #cccccc;
}

h2, 
.header h2 {
	margin:				13px 0 10px 0;
	padding:			0;
	font-size:			1em;
	color:				#333333;
}

.bodytext {
	width:				100%;
}

.frog {
	color:				#66cc00;
}

#content-area ul {
	margin:				5px 0 5px 0;
	padding-left:		13px;
}

#content-area li {
	margin:				0;
	padding:			0;
	list-style-image:	url(../_img/interface/pointer-0.gif);
}

#content-area li:hover {
	list-style-image:	url(../_img/interface/pointer-1.gif);
}

#content-area .detail {
	font-size:			0.9em;
	line-height:		1.2em;
	color:				#999999;
	display:			block;
}

#content-area .detail .frog {
	color:				#c3e66d;
}

#content-area .detail a {
	color:				#999999;
}

#content-area .detail:hover {
	color:				#555555;
}

#content-area .detail:hover .frog {
	color:				#66cc00;
}

#content-area .detail:hover a {
	color:				#555555;
}

#content-area .download-box {
	margin:				8px 0 0 0;
}

#content-area .download-box a {
	padding:			5px;
	display:			block;
	border:				1px solid #cccccc;
	background-color:	white;
}

#content-area .download-box a:hover {
	padding:			5px;
	display:			block;
	border:				1px solid #cccccc;
	background-color:	#f9ffed;
}

#content-area .download-box a:hover .detail {
	color:				#555555;
}

.content-element {
	margin-bottom:		15px;
	padding:			0 25px 5px 25px;
	border-bottom:		1px dotted #cccccc;
}

.error {
	margin-bottom:		15px;
	padding:			5px;

	width:				290px;

	font-family:		Verdana,Arial,Helvetica,sans-serif;
	font-size:			0.8em;
	color:				#C80000;

	background-color:	white;
	border:				2px solid #C80000;
}

.sepetator {
	margin:				5px 0 5px 0;
	display:			block;
	line-height:		2em;
	border-top:			1px dotted #66cc00;
}

.center {
	text-align:			center;
}

.clear {
	clear:				both;
}

abbr, 
acronyme {
	cursor:				help;
}

dfn, 
.hidden {
	display:			none;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *	images
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

img {
	border:				none;
}

.csc-textpic-center {
	text-align:			center;
}

.csc-textpic-intext-left .csc-textpic-imagewrap {
	margin-right:		10px;
	float:				left;
}

.csc-textpic-intext-right .csc-textpic-imagewrap {
	margin-left:		10px;
	float:				right;
}

.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap {
	margin-right:		10px;
	float:				left;
}

.csc-textpic-clear {
	clear:				both;
}

.csc-textpic-imagewrap a img, 
.csc-textpic-imagewrap a:visited img {
	border:				1px solid #999999;
}

.csc-textpic-imagewrap a:hover img {
	border:				1px solid #66cc00;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *	tables
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

table {
	font-size:			0.9em;
	line-height:		1.3em;

	border:				1px solid #cccccc;
	border-top:			none;
	background-color:	white;
}

caption {
	padding:			2px;

	font-size:			1.2em;
	font-weight:		bold;
	color:				white;

	border:				1px solid #5fa500;
	border-bottom:		none;
	background-image:	url(../_img/interface/box-top.gif);
	background-repeat:	no-repeat;
}

th, 
td {
	margin:				0;
	padding:			2px;
}

th.table-cell-2, 
th.table-cell-1 {
	border-top:			1px solid #cccccc;
	background-color:	#f8fff2;
}

th.table-cell-2-l {
	font-size:			1.2em;
	text-align:			center;

	border-top:			1px solid #cccccc;
	border-left:		1px solid #bbbbbb;
	background-color:	#dddddd;
}

td.table-cell-0 {
	border-top:			1px solid #cccccc;
}

td.table-cell-0-l {
	text-align:			center;
	border-top:			1px solid #cccccc;
	border-left:		1px solid #cccccc;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *	forms
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

form {
	margin:				0;
	line-height:		1.2em;
}

fieldset {
	margin:				0;
	padding:			0;
	border:				none;
}

.field-line {
	margin:				0 0 4px 0;
}

.button-line {
	width:				300px;
	padding:			4px 0 6px 0;
	text-align:			center;
}

input.field, 
select.field,
textarea.field {
	width:				300px;

	padding:			1px 2px 1px 2px;

	font-family:		Verdana,Arial,Helvetica,sans-serif;
	font-size:			0.8em;
	text-align:			left;

	border:				1px solid #cccccc;
	background-color:	#f8fff2;
}

#content-area .button-s {
	text-align:			center;
}

input.button-s {
	width:				100px;
	height:				20px;

	color:				#66cc00;
	font-size:			0.8em;
	font-weight:		bold;
	text-align:			center;

	border:				none;
	background-repeat:	no-repeat;
	background-image:	url(../_img/interface/button-s.gif);
}

input.button-m {
	width:				150px;
	background-image:	url(../_img/interface/button-m.gif);
}

input[type=reset]:hover, 
input[type=submit]:hover {
	color:				#333333;
}

select {
	width:				300px;
	border:				1px solid #cccccc;
}

.tx-rlmpdomaincheck-pi1 input[type=text] {
	margin-right:		5px;
	width:				200px;
}

input[type=checkbox], 
input[type=radio], 
.tx-rlmpdomaincheck-pi1 select {
	width:				auto;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *	feature-amazon
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#subnav-area .content-element {
	margin:				0;
	padding:			0;
	border:				none;
}

#feature-amazon {
	padding:			20px 4px 20px 5px;
	width:				100px;

	font-family:		Verdana,Arial,Helvetica,sans-serif;
	font-size:			0.8em;
	text-align:			center;
	line-height:		1.3em;

	border-right:		1px solid #cccccc;
	border-bottom:		1px solid #cccccc;

	background-image:	url(../_img/interface/frog-top-right.gif);
	background-repeat:	no-repeat;
	background-position: 70px 7px;
}

#feature-amazon img {
	margin:				5px 0 3px 0;
}

#feature-amazon a {
	border:				none;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *	boxes
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.boxes {
	position:			relative;
	width:				100%;
	margin:				15px 0 12px 0;
	clear:				both;
}

.boxes .top {
	position:			relative;

	height:				25px;

	background-image:	url(../_img/interface/box-top-m.gif);
	background-repeat:	repeat-x;
}

.boxes .top-l {
	position:			absolute;

	width:				25px;
	height:				25px;

	background-image:	url(../_img/interface/box-top-l.gif);
	background-repeat:	no-repeat;
}

.boxes .top-r {
	position:			absolute;

	top:				0;
	right:				0;

	width:				25px;
	height:				25px;

	background-image:	url(../_img/interface/box-top-r.gif);
	background-repeat:	no-repeat;
}

.boxes .top h2 {
	margin:				0;
	padding:			0;
	font-size:			1em;
}

.boxes .top a {
	position:			absolute;

	top:				0;
	left:				0;
	right:				0;
	width:				100%;
	height:				25px;

	margin:				0;

	display:			block;

	text-align:			center;
	line-height:		2em;
}

.boxes .content {
	padding:			8px;

	border:				1px solid #cccccc;
	border-top:			none;
	background-image:	url(../_img/interface/box-content-bg.gif);
	background-repeat:	repeat-y;
}

.boxes .content:hover {
	color:				#333333;
}

.boxes ul {
	font-size:			0.9em;
	line-height:		1.3em;
}

/*
	----	individual boxes
*/

.boxes .webservices, 
.boxes .domain, 
.boxes .starter, 
.boxes .cms {
	position:			relative;

	width:				49%;
	margin-right:		1%;

	float:				left;
	overflow:			hidden;

	background-color:	white;
}

.boxes .domain, 
.boxes .cms {
	margin-right:		0;
}

.boxes .webservices:hover, 
.boxes .domain:hover, 
.boxes .starter:hover, 
.boxes .cms:hover {
	color:				#333333;
}

.boxes .starter .text {
	background-image:	url(../_img/interface/frog-bottom-left.gif);
	background-repeat:	no-repeat;
	background-position: 90% 50px;
}

.boxes .domain .text {
	background-image:	url(../_img/interface/frog-bottom-right.gif);
	background-repeat:	no-repeat;
	background-position: 90% 70px;
}

.boxes .vk, 
.boxes .m, 
.boxes .l, 
.boxes .xl {
	position:			relative;

	width:				24%;
	margin-right:		1%;

	float:				left;
	overflow:			hidden;

	background-color:	white;
}

.boxes .xl {
	margin-right:		0;
}

.boxes .m .text {
	background-image:	url(../_img/interface/frog-top-right.gif);
	background-repeat:	no-repeat;
	background-position: 90% 130px;
}

.boxes .xl .text {
	background-image:	url(../_img/interface/frog-top-left.gif);
	background-repeat:	no-repeat;
	background-position: 90% 60px;
}