/* --------------------------------------------------------
    Global Style Sheet
    Website: CanamGlass.org
    Created by: Armin Busatlic
    Filename: style.css
   -------------------------------------------------------- */


/* --------------------------------------------------------
    Body
   -------------------------------------------------------- */
    body {
		font-family: arial;
    	font-size: 13px;
		text-align: left;
    	margin: 0;
    	padding: 0;
	}

/* --------------------------------------------------------
    Anchor
   -------------------------------------------------------- */
	a:link     { color: #333333; text-decoration: none; }
	a:visited  { color: #333333; text-decoration: none; }
	a:hover    { color: #000000; text-decoration: none; }
    a:active   { color: #333333; text-decoration: none; }
    
    a.bl:link     { color: #0055A3; text-decoration: none; }
	a.bl:visited  { color: #0055A3; text-decoration: none; }
	a.bl:hover    { color: #000000; text-decoration: none; }
    a.bl:active   { color: #0055A3; text-decoration: none; }

    a.ul:link     { color: #333333; text-decoration: underline; }
	a.ul:visited  { color: #333333; text-decoration: underline; }
	a.ul:hover    { color: #000000; text-decoration: none; }
    a.ul:active   { color: #333333; text-decoration: underline; }

/* --------------------------------------------------------
    Table
   -------------------------------------------------------- */
    table {
    	border-collapse: collapse;
	}
    
    table#headtable {
    	width:1000px;
    	height:85px;
	}
	table#bigInp input{
    	border:1px solid #ccc;
    	font-size: 13px;
	}

    tr {}

    td {
        text-align:left;
    }
    td#headerleft {
		background-image: url('../images/logoline.gif');
		background-position: bottom left;
		width: 400px;
	}
	td#vessel {
		width:590px;
		background-image: url('../images/vessel.gif');
		background-position: bottom left;
    	background-repeat: no-repeat;
	}

	div.highlight {
    	background-color:#000000;
	}
	div.highlight a {
        color: #fff;
    }
	a.highlight a:link     { color: #ffffff; text-decoration: none; }
	a.highlight a:visited  { color: #ffffff; text-decoration: none; }
	a.highlight a:hover    { color: #cccccc; text-decoration: none; }
    a.highlight a:active   { color: #ffffff; text-decoration: none; }


/* --------------------------------------------------------
    Forms
   -------------------------------------------------------- */
    form {
    	padding: 0px;
    	margin: 0px;
	}
    
    input {
		border:1px solid #ccc;
    	font-size: 11px;
    	width: 200px;
	}
	input.inpSmll { 
    	width: 60px;
	}
	input.inpBtn {
		background-color: #000000;
		color: #ffffff;
		font-weight: bold;
	}
	input.logBtn {
        background-color: #000000;
		color: #ffffff;
		font-weight: bold;
		width: 50px;
    }
    input.readonly {
        background-color: #dddddd;
    }

    select {
    	font-size: 11px;
		width: 145px;
	}
    textarea {
    	font-size: 11px;
    	width: 300px;
    	height: 100px;
	}
	
	textarea.large {
    	font-size: 11px;
    	width: 500px;
    	height: 400px;
	}
	
	form td {
    	padding: 2px;
	}

/* --------------------------------------------------------
    Divs
   -------------------------------------------------------- */
    div {
	}

    div#wrapper       {
		width:100%;
	}

	div#container       {
		width:1000px;
		background-color: #ffffff;
		margin: 0 auto;
	}
	div#headertext {
		font-size: 20px;
    	padding-top: 38px;
		height: 35px;
    	vertical-align: bottom;
	}
	
	#toplink {
        height: 30px;
        line-height:30px;
		padding-left:5px;
		padding-right:5px;
	}
	#toplink.highlight {
        background-color: #7086C4;
        color:#fff;
    }
	#toplink:hover {
        background-color: #8DA2DC;
        color:#fff;
    }

	div#blackspace {
    	background-color: #000000;
    	width:100%;
		height:3px;
		overflow:hidden;
	}

    div#sublinks {
		font-size: 11px;
		float: left;
		width: 600px;
		height:16px;
		background-color: #000000;
		color: #ffffff;
		padding:2px;
	}

	div#curve {
    	float:left;
		width:100px;
	}
	
	div#leftcolumn {
		float:left;
    	width:674px;
    	margin-right: 8px;
	}

	div#rightcolumn {
		float:left;
    	width:312px;
	}
	div#maincolumn {
		float:left;
		width: 685px;
    	padding: 7px;
	}

	div#welcome {
        border: 1px dashed #cccccc;
		padding: 13px;
	}

	div#vessel {
		cursor: pointer;
		background-color: #f7f7f7;
		float: left;
		width: 140px;
		height: 155px;
		padding: 7px;
		margin: 4px;
    	border: 1px solid #cccccc;
    	overflow: hidden;
	}
	
	div#vessel:hover {
    	border: 1px solid #999999;
    	background-color: #FFFFD1;
	}
	
	div#other {
		float: left;
		width:654px;
		background-color: #F4F4F4;
		padding: 13px;
		margin-top: 10px;
	}
	
	div#err {
		width: 100%;
		padding: 3px;
		text-align: center;
		color: #ffffff;
		background-color: #cc0000;
	}
	
	div#status {
		background-color: #FFFFD1; 
		text-align:center;
		padding: 7px;
		margin: 4px;
	}
	
/* --------------------------------------------------------
    Superfish menu
   -------------------------------------------------------- */

	div#links {
		width: 1000px;
		height: 30px;
		font-size: 15px;
		font-weight: bold;
        line-height: 30px;
		background: url('../images/linksbg.gif');
	}
	
	.sf-menu {
		padding: 0;
		margin: 0;
	}
	
	.sf-menu li {
		background: none;
		z-index: 1001;
	}

	.sf-menu li.sf-primary-item {
		height: 30px;
	}
	
	.sf-menu li.sf-secondary-item {
		
	}
	
	.sf-menu a {
		border-left: #8DA2DC 1px solid;
		font-size: 1em;
		padding: 7px 10px;
	}  

	.sf-menu a.sf-primary-link {
		color: #333;
	}
	
	.sf-menu a.sf-primary-link:hover, .sf-menu a.highlight {
		background-color: #8DA2DC;
		color: #FFFFFF;
	}
	
	.sf-menu a.sf-secondary-link {
		color: #333;
		border-top: #8DA2DC 1px solid;
	}


/* --------------------------------------------------------
    Schedule Divs
   -------------------------------------------------------- */
   
    #schedule_map {
        position: relative;
        background: url('../locimages/lakes.gif') no-repeat top center;
        width: 484px;
        height: 261px;
        filter:alpha(opacity=50);
		opacity: 0.5;
		-moz-opacity:0.5;
		margin: 0 auto;
        z-index: 1;
    }
    
    #schedule_region {
        position: absolute;
        width: 484px;
        height: 261px;
        z-index:2;
    }
	
	/*
		Left tabs
	*/
	#lefttabs {
		float:left;
	}

	#lefttabs div {
		position: relative;
		background-color: #efefef;
		cursor: pointer;
		width: 180px;
		padding: 7px;
    	margin: 0 0 4px 0;
		z-index: 20;
	}
	#lefttabs div.selected {
    	background-color: #fff;
    	font-weight:bold;
    	border-left: 1px solid #cccccc;
    	border-top: 1px solid #cccccc;
    	border-bottom: 1px solid #cccccc;
        border-left: 1px solid #fff;
	}

	div#shipdetails {
		float: left;
    	position: relative;
		border: 1px solid #cccccc;
		left: -1px;
		font-size: 13px;
		width: 774px;
		padding: 7px;
		z-index: 1;
	}


	/*
		The following tab styles represent highlighted and non-highlighted tabs that are
		used in the control panels and navigation panels.
	*/
	
	div#hTab {
		position: relative;
		font-weight: bold;
		font-size: 13px;
		float: left;
    	padding: 5px;
    	margin-right: 4px;
    	cursor: pointer;
    	background-color: #bbbbbb;
    	color: #ffffff;
    	border-top: 1px solid #bbbbbb;
    	border-left: 1px solid #bbbbbb;
    	border-right: 1px solid #bbbbbb;
    	z-index: 1000;
	}

	div#eTab {
		position: relative;
		font-weight: bold;
		font-size: 13px;
		float: left;
    	padding: 5px;
    	margin-right: 4px;
		background-color: #ffffff;
		border-top: 1px solid #cccccc;
    	border-left: 1px solid #cccccc;
    	border-right: 1px solid #cccccc;
    	border-bottom: 1px solid #ffffff;
		cursor: pointer;
		z-index: 1000;
	}

	div#tabContent {
		position: relative;
		top: -1px;
		background-color: #ffffff;
		border: 1px solid #cccccc;
		clear: left;
		padding: 13px;
		z-index: 0;
	}
	
/* --------------------------------------------------------
    Ship Divs
   -------------------------------------------------------- */

	div#shippanels {
		clear:left;
		position:relative;
		padding: 0 0 0 7px;
		z-index: 100;
	}

	div#shipform {
		float:left;
		position: relative;
		left: -3px;
    	width: 545px;
    	padding: 1px;
	}
	
	div#paneltab {
		cursor: pointer;
		background-color: #dddddd;
		border-bottom: 1px solid #cccccc;
		padding:3px;
	}
    div#paneltab:hover {
    	background-color: #cccccc;
	}

	div#paneltab_selected {
    	background-color: #cccccc;
		padding:3px;
	}


/* --------------------------------------------------------
    Transparent Backgrounds
   -------------------------------------------------------- */
	.bgBag {
    	background-position: top right;
    	background-repeat: no-repeat;
		background-image: url('../images/bag_big.gif');
   	}
   	
   	.bgBulb {
    	background-position: top right;
    	background-repeat: no-repeat;
		background-image: url('../images/bulb_big.gif');
   	}
   	
   	.bgUser {
    	background-position: top right;
    	background-repeat: no-repeat;
		background-image: url('../images/user_big.gif');
   	}

/* --------------------------------------------------------
    Colors
   -------------------------------------------------------- */
	.darkgray 	{ color: #666666; }
	.lightgray 	{ color: #999999; }
	.black 		{ color: #000000; }
    .red 		{ color: #cc0000; }
    .white 		{ color: #ffffff; }
    .lightblue 	{ color: #ADBFF2; }
    .darkblue 	{ color: #0055A3; }

	.bgwhite 		{ background-color: #ffffff; }
	.bgyellow 		{ background-color: #FFFFD1; }
	.bggrey 		{ background-color: #efefef; }
	.bgdarkgrey 	{ background-color: #dddddd; }
	.bglightorange	{ background-color: #FAD8C2; }
	.bglightred 	{ background-color: #F78572; }
	.bglightgreen 	{ background-color: #D0EBBE; }
    .bglightblue 	{ background-color: #ADBFF2; }
    .bgblack	 	{ background-color: #000000; }
/* --------------------------------------------------------
    Img
   -------------------------------------------------------- */
	img {
		border:0;
		padding:0;
		margin: 0;
	}
	
	img#vesselthumb { 
		/*width: 140px;
		height: 105px;*/
	}

/* --------------------------------------------------------
    Fonts
   -------------------------------------------------------- */
   	h1 { font-size: 16px; display: inline; }
   	h2 { font-size: 14px; display: inline; }
   	h3 { font-size: 13px; display: inline; }
   	h4 { font-size: 12px; display: inline; font-weight: normal; }
   	h5 { font-size: 11px; display: inline; font-weight: normal; }
    h5 { font-size: 10px; display: inline; font-weight: normal; }


/* --------------------------------------------------------
    Extras
   -------------------------------------------------------- */

	p { display: inline; }
	hr {
    	border:0px;
    	color: #cccccc;
    	background-color: #dddddd;
	}


/* --------------------------------------------------------
    Attributes
   -------------------------------------------------------- */
    .aL 	{ text-align: left; }
    .aC 	{ text-align: center; }
    .aR 	{ text-align: right; }
    .vaT 	{ vertical-align: top; }

	.clL 	{ clear: left; }
	.flL 	{ float: left; }
	.flR 	{ float: right; }
	.hS 	{ width: 100%; }
	
	.fBo	{ font-weight: bold; }
    .fUl	{ text-decoration: underline; }
    .fOl	{ text-decoration: overline; }

    .bsD 	{ border-style: dashed; }

   	.b1G 	{ border: 1px solid #cccccc; }
    .b1B 	{ border: 1px solid #000000; }
    .b3RD 	{ border: 3px dotted #cc0000; }

   	.pad2 		{ padding: 2px; }
   	.pad7 		{ padding: 7px; }
   	.pad7lr 	{ padding: 0 7px 0 7px; }
	.pad7tb 	{ padding: 7px 0 7px 0; }
	.pad13 		{ padding: 13px; }
	.pad13lr 	{ padding: 0 13px 0 13px; }

	.mar4 	{ margin: 4px; }
	.mar4lr	{ margin: 0 4px 0 4px; }
    .mar4tb	{ margin: 4px 0 4px 0; }

	.vNo 	{ display: none; }
	.cP		{ cursor: pointer; }
	

/* --------------------------------------------------------
    Widths
   -------------------------------------------------------- */
	.wSS 	{ width: 20px; }
	.wES 	{ width: 40px; }
    .wS 	{ width: 65px; }
    .wM 	{ width: 120px; }
    .wL 	{ width: 200px; }
    .wML 	{ width: 250px; }
    .wXL 	{ width: 300px; }
    .wXLL 	{ width: 350px; }
	.wXXL 	{ width: 400px; }
	.wXXLL  { width: 475px; }
	.wXXXL  { width: 500px; }
	.wF		{ width: 100%; } /* width full */

/* --------------------------------------------------------
    Heights
   -------------------------------------------------------- */
   	.heSS 	{ height: 20px; }
	.heES 	{ height: 40px; }
    .heS 	{ height: 70px; }
    .heM 	{ height: 140px; }
    .heL 	{ height: 200px; }
    .heXL 	{ height: 300px; }
    .hF		{ height: 100%; } /* height full */