/*-----------------------------------------------------------------------------
OnlineAware Screen Stylesheet

version:   1.0
date:      26/03/09
author:    Freeflow Web Design & Development
email:     eugene@freeflowwebdesign.com
website:   www.freeflowwebdesign.com
version history: include/resources
-----------------------------------------------------------------------------*/
/* Main Layout
-----------------------------------------------------------------------------*/
* {
padding:0;
margin:0;
border:0;
}

body {
font: normal 75% 'Tahoma', Geneva, sans-serif;
background-color:#CCC;
color:#333;
}

#container {
width:100%;
}

#wrapper {
width:975px;
margin-left:15px;
}
/* Header
-----------------------------------------------------------------------------*/
#headerTop {
width:975px;
height:68px;
float:left;
z-index:999;
margin:4px 0;
}

#headerBottom {
width:1005px;
height:60px;
float:left;
margin-top:42px;
}

#crypticLogo {
height:60px;
width:170px;
margin-top:2px;
float:left;
}

#onlineAware {
height:60px;
width:250px;
margin-top:-12px;
float:left;
}

#safetyNet {
height:40px;
width:200px;
margin-left:10px;
float:left;
}

#downloads {
margin:auto;
}

#downloads li {
height:100px;
width:100px;
float:left;
margin:100px
}
/* Links
-----------------------------------------------------------------------------*/
a, a:link, a:visited {
color:#FF6600;
text-decoration:none;
outline:none;
}

a:hover {
color:#058FFF;
text-decoration:none;
outline:none;
}
/* Navigation
-----------------------------------------------------------------------------*/
#tools {
width:575px;
height:30px;
float:right;
}

#tools ul {
float:right;
}

#tools ul li  {
display:inline;
}

#tools ul li a {
margin:2px 0 0 20px;
float:left;
}

#tools ul li a#home {
height:20px;
width:40px;
background:transparent url(../images/home.png) 0px 0px no-repeat;
}

#tools ul li a:hover#home {
background-position:0px -20px;
}

#tools ul li a#aboutus {
height:20px;
width:65px;
background:transparent url(../images/aboutus.png) 0px 0px no-repeat;
}

#tools ul li a:hover#aboutus {
background-position:0px -20px;
}

#tools ul li a#products {
height:20px;
width:68px;
background:transparent url(../images/products.png) 0px 0px no-repeat;
}

#tools ul li a:hover#products {
background-position:0px -20px;
}

#tools ul li a#inthenews {
height:20px;
width:82px;
background:transparent url(../images/news.png) 0px 0px no-repeat;
}

#tools ul li a:hover#inthenews {
background-position:0px -20px;
}

#tools ul li a#support {
height:20px;
width:60px;
background:transparent url(../images/support.png) 0px 0px no-repeat;
}

#tools ul li a:hover#support {
background-position:0px -20px;
}

#tools ul li a#downloads {
height:20px;
width:80px;
background:transparent url(../images/downloads.png) 0px 0px no-repeat;
}

#tools ul li a:hover#downloads {
background-position:0px -20px;
}

#tools ul li a#buy {
height:20px;
width:65px;
background:transparent url(../images/buy.png) 0px 0px no-repeat;
}

#tools ul li a:hover#buy {
background-position:0px -20px;
}

#tools ul li a#contact {
height:20px;
width:58px;
background:transparent url(../images/contact.png) 0px 0px no-repeat;
}

#tools ul li a:hover#contact {
background-position:0px -20px;
}

#tools ul li a#login {
height:20px;
width:40px;
background:transparent url(../images/login.png) 0px 0px no-repeat;
}

#tools ul li a:hover#login {
background-position:0px -20px;
}

#tools2 {
width:565px;
height:20px;
float:right;
text-align:left;
}

#tools2 ul {
float:right;
}

#tools2 ul li  {
display:inline;
}

#tools2 ul li a {
margin:7px 0 0 20px;
float:left;
}

#tools2 ul li a#grooming {
height:20px;
width:77px;
background:transparent url(../images/grooming.png) 0px 0px no-repeat;
}

#tools2 ul li a:hover#grooming {
background-position:0px -20px;
}

#tools2 ul li a#bullying {
height:20px;
width:60px;
background:transparent url(../images/bullying.png) 0px 0px no-repeat;
}

#tools2 ul li a:hover#bullying {
background-position:0px -20px;
}

#tools2 ul li a#social {
height:20px;
width:133px;
background:transparent url(../images/social.png) 0px 0px no-repeat;
}

#tools2 ul li a:hover#social {
background-position:0px -20px;
}

#tools2 ul li a#chat {
height:20px;
width:32px;
background:transparent url(../images/chat.png) 0px 0px no-repeat;
}

#tools2 ul li a:hover#chat {
background-position:0px -20px;
}

#tools2 ul li a#gaming {
height:20px;
width:162px;
background:transparent url(../images/gaming.png) 0px 0px no-repeat;
}

#tools2 ul li a:hover#gaming {
background-position:0px -20px;
}

#navcontainer{
height:150px;
width:975px;
margin:5px auto;
font-weight:500;
}

#navcontainer ul {
}

#navcontainer ul li {
display:inline-block;
float:left;
}

#navcontainer ul li a#buy2 {
margin:0px 0px 0px 0px;
}

#navcontainer ul li a {
display:inline-block;
width:130px;
height:110px;
margin:0px 39px 0px 0px;
text-decoration: none;
text-align:center;
font-size:13pt;
padding:20px 0 0 0;
color:#333;
}

#navcontainer ul li a:hover {
}

#navcontainer ul li a img {
margin:12.5px;
}

#navcontainer ul li a#feature {
background:transparent url(../images/pead.png) no-repeat;
}

#navcontainer ul li a#monitor {
background:transparent url(../images/keyboard.png) no-repeat;
}

#navcontainer ul li a#parents {
background:transparent url(../images/girls.png) no-repeat;
}

#navcontainer ul li a#klaus {
background:transparent url(../images/hat.png) no-repeat;
}

#navcontainer ul li a#problem {
background:transparent url(../images/vgt.png) no-repeat;
}

#navcontainer ul li a#buy2 {
background:transparent url(../images/download.png) no-repeat;
}
/* Forms
-----------------------------------------------------------------------------*/
/* Panel Tab/button */
.tab {
background: url(../images/tab_m.png) repeat-x 0 0;
height: 68px;
position: relative;
top: 0;
}

#logForm {
height:310px;
width:305px;
}

#pt1, #pt2, #pt3, #pt4 {
height: 270px;
width: 223px;
padding: 7.5px;
float:left;
border:none;
text-align:left;
}

#pt5 {
height:30px;
width:960px;
border:none;
margin:0 auto;
text-align:left;
clear:both;
}

form {
	width: 400px;
	border: 1px solid #EEE;
	padding: 10px;
	margin: 0 auto;
}

label {
	display: block;
	margin-top : 8px;
	width: 100%;
	background-repeat: no-repeat;
}

.blue {
	color: #0099CC;
	font-weight: bold;
}

/* Congratulation message */
.MsgSent {
	Display: block;
	padding: 10px;
	margin: 40px auto;
	width: 400px;
	text-align: center;
	border: 1px solid #EEE;
	background-color: white;
}

.MsgSent h1 {
	background: url(../images/MsgSent.gif) no-repeat 0 0;
	padding-left: 20px;
	height: 85px;
	line-height: 85px;
}

/* Error message */
.MsgError {
	Display: block;
	padding: 10px;
	margin: 40px auto;
	width: 400px;
	text-align: center;
	border: 1px solid #EEE;
	background-color: white;
}

.MsgError h1 {
	background: url(../images/MsgError.gif) no-repeat 0 0;
	padding-left: 20px;
	height: 85px;
	line-height: 85px;
	color: #CC0000;
}

.MsgSent p, .MsgError p {
	font-size: 1.3em;
	color:#999;
}

/***** FormCheck *****/
.tipsbox .tipsbox_top_left{
	background : url('../images/top_left.png') no-repeat;
}

.tipsbox .tipsbox_top{
	background : url('../images/top.png') repeat-x;
	height : 17px;
}

.tipsbox .tipsbox_top_right{
	background : url('../images/top_right.png') no-repeat;
}

.tipsbox .tipsbox_left{
	background : url('../images/left.png') repeat-y;
	width : 17px;
}

.tipsbox .tipsbox_right{
	background : url('../images/right.png') repeat-y;
	width : 22px;
}

.tipsbox .tipsbox_bottom_left{
	background : url('../images/bottom_left.png');
}

.tipsbox .tipsbox_mark{
	background : url('../images/mark.png') no-repeat;
	height : 36px;
}

.tipsbox .tipsbox_bottom_right{
	background : url('../images/bottom_right.png');
}

.tipsbox .tipsbox_inner, .tipsbox .tipsbox_inner_ie6{
	background : url('../images/inner.png');
}

.tipsbox .tipsbox_inner_ie6 {
	padding : 4px;
}

.tipsbox .tipsbox_error {
	background : url('../images/error.png') no-repeat;
	width: 40px;
	height: 40px;
	margin-top: 5px;
	float: left;
	clear: left;
}

.tipsbox p, .tipsbox {
	font-size: 1em;
	font-family: tahoma, verdana, sans-serif;
	margin : 0;
	padding : 0;
	border : 0;
	color : #FFF;
}

.tipsbox p {
	padding-left: 55px;
	line-height: 15px;
}

.tipsbox p span {
	font-size: 1em;
	font-weight: bold;
	color: red;
	line-height: 35px;
}


.error_f {
	border : 1px dotted #666;
	margin-top : 5px;
	background-color : #EAEAEA;
}

.error_f p {
	margin : 5px;
	color : #A00;
}

.error_f p span {
	font-size : 1.1em;
	color : #000;
	margin : 5px 0px 0px 0px;
}

/*Forms defaults - change as needed*/
input, textarea {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#404040;
	border:1px #058FFF solid;
}
label {
	color:#999;
	cursor:pointer;
	padding-left:2px;
	line-height:16px;
}
label.chosen {color:#333;}

/*Transparent items*/
.outtaHere {
	position:absolute;
	left:-3000px;
}

/*Radio buttons*/
.radioArea, .radioAreaChecked {
	display:block;
	float:left;
	clear:left;
	width:15px;
	height:14px;
	font-size:0;
	cursor:pointer;
}
.radioArea {background:url(../images/radio.gif) no-repeat left top;}
.radioAreaChecked {background:url(../images/radio.gif) no-repeat left bottom;}

/*Checkboxes*/
.checkboxArea, .checkboxAreaChecked {
	display:block;
	float:left;
	clear:left;
	width:13px;
	height:13px;
	font-size:0;
	padding:0;
	margin:0;
	cursor:pointer;
}
.checkboxArea {background:url(../images/checkbox.gif) no-repeat left top;}
.checkboxAreaChecked {background:url(../images/checkbox.gif) no-repeat left bottom;}
.focused {border:1px dotted #ddd;}

/*Text inputs*/
.textinput, .textinputHovered {
	height:15px;
	background:url(../images/input_bg.gif) repeat-x left top;
	border:none;
	padding:4px 0;
	vertical-align:middle;
}
.textinputHovered {background-position:left bottom;}
.inputCorner {
	padding-bottom:0;
	vertical-align:middle;
}

/*Text areas*/
.txtarea .tr, .txtarea .tr_xon {background:url(../images/txtarea_tr.gif) no-repeat top right;}
.txtarea .tr_xon {background:url(../images/txtarea_tr_xon.gif) no-repeat top right;}
.txtarea img.txt_corner {
	width:5px;
	height:5px;
	display:block;
}
.txtarea .br, .txtarea .br_xon {background:url(../images/txtarea_br.gif) no-repeat top right;}
.txtarea .br_xon {background:url(../images/txtarea_br_xon.gif) no-repeat top right;}
.txtarea .cntr {background:url(../images/txtarea_cntr.gif) repeat-y right top;}
.txtarea .cntr_xon {background:url(../images/txtarea_cntr_xon.gif) repeat-y right top;}
.txtarea .cntr_l, .txtarea .cntr_l_xon {
	width:5px;
	background:url(../images/txtarea_l.gif) repeat-y left top;
	float:left;
}
.txtarea .cntr_l_xon {background:url(../images/txtarea_l_xon.gif) repeat-y left top;}
.txtarea textarea {
	border:0;
	background:none;
	padding:0;
	margin:5px;
}

/*Selects*/
.selectArea {
	width:200px;
	height:21px;
	background:url(../images/select_bg.gif) repeat-x left top;
}
.selectArea .left {
	width:8px;
	height:21px;
	float:left;
	background:url(../images/select_left.gif) no-repeat left top;
}
.selectArea .right {
	width:21px;
	height:21px;
	float:right;
	background:url(../images/select_right.gif) no-repeat left top;
}
.selectArea .right a {
	display:block;
	width:200px;
	height:21px;
	margin-left:-179px;
	position:absolute;
}
.selectArea .right i {display:none;}
.selectArea .center {
	width:160px;
	color:#FFF;
	padding-top:3px;
	overflow:hidden;
	white-space:nowrap;
}

/*Selects drop-down*/
.optionsDivInvisible, .optionsDivVisible {
	position:absolute;
	margin-top:-1px;
	margin-left:3px;
	width:172px;
	background:#6f7074;
	padding:2px;
	font-size:11px;
	z-index:20;
}
.optionsDivInvisible {display:none;}
.optionsDivVisible {display:block;}
.optionsDivVisible p {
	margin:0;
	padding:0;
}
.optionsDivVisible a {
	color:#F2F2F2;
	text-decoration:none;
	display:block;
	padding:1px 4px;
	border:1px solid #6f7074;
}
.optionsDivVisible a:hover {
	color:#FFF;
	background:#5F6062;
	border-color:#cfd0d6;
}

/*Button*/
.buttonSubmit, .buttonSubmitHovered {
	width:auto;
	height:26px;
	color:#FFF;
	font-weight:bold;
	padding:2px;
	background:url(../images/button_bg.gif) repeat-x left top;
	cursor:pointer;
	border:none;
}
.buttonSubmitHovered {background-position:left bottom;}
.buttonImg {vertical-align:bottom;}
/*-----END FORMS-----*/

/* Homepage
-----------------------------------------------------------------------------*/

/* Your template
-----------------------------------------------------------------------------*/
#textContainer {
height: 400px;	 
width: 975px;
margin-top:10px;
background:url(../images/scrollBack.png) no-repeat;
}

#Container {
height: 390px;	 
width: 975px;
margin-top:10px;
padding:10px 0px;
background:url(../images/container.png) no-repeat;
}

#main {  
overflow:hidden;		
height: 400px;	 
width: 975px;	
float:left;
}

.contentImg {	
width:390px;
height:390px;
padding:5px;
float:left;
}

.contentImg li a	{
display: block;
color:#43B1FF;
width: 360px;
padding:7px 0;
border-bottom:1px #FFF solid;
}

.contentImg li {
list-style-type:none;
}

.contentImg li a:hover	{
color: #FF6600;
}

.contentText {	
width:560px;
text-align:left;
height:390px;
margin:10px 0px 0 0;
float:right;
line-height:1.5em;
overflow:scroll;
}

.contentText h1 {
margin:0 0 10px 0;
}

.contentText h2 {
margin:0 0 10px 0;
color:#FF6600;
}

.contentText h4 {
margin:0 0 10px 0;
}

.contentText p {
line-height:1.5em;
}

.contentText ul li {
list-style:none;
}

.contentImg ul li {
list-style:none;
margin-left:15px;
font-size:1em;
}

.contentImg ul li.active {
color:#058FFF;
}

/*Common Formatting
-----------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}
 
h1 {
font-size: 2.2em;
color:#FF6600;
font-weight:500;
margin:10px;
}
    
h2 {
font-size: 1.2em;
color:#058FFF;
margin:10px;
}
    
h3 {
font-size: 1.2em;
color:#FF6600;
margin:10px;
}
    
h4 {
font-size: 1.2em;
color:#058FFF;
padding-top:10px;
font-style:italic;
text-decoration:underline;
}

h4 a {
color:#058FFF;
}
    
h5 {
font-size: 1.4em;    
}

h6 {
font-size: 1.2em;    
}

dt {
color:#000;
text-decoration:underline;
}

blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}
 
small {
font-size:0.85em;
}
 
img {
border:0;
}

.left {
float:left;
}

.right {
float:right;
}

.clear {
clear:both;
}
/* Forms
-----------------------------------------------------------------------------*/
input.text {
padding: 3px;
border: 1px solid #999999;    
}
/* Login
-----------------------------------------------------------------------------*/
#post_comment {background-color:#FFFF99;border:1px solid #000000;padding:10px 30px;}
.login {border-bottom:1px solid #000000;padding-bottom:10px;}
/* Tables 
-----------------------------------------------------------------------------*/
table { 
border-spacing: 0;
border-collapse: collapse;
}

td {
text-align: left;
font-weight: normal;
}