body { min-width: 900px; font-family: Georgia;  margin:0;}

.tutorial_entries_list {  width: 30%; height: 90%; overflow: auto; position: absolute;}
.tutorial_entries_list ul { margin: 0; }
/* .tutorial_entries_list li { white-space: nowrap;}*/
.tutorial_frame { height: 90%; position: absolute; right: 0;  width: 70%; }


.tutorial_entris_view ul {list-style-type: none; padding-top: 4px;}

/* Tutorial Entry Style */
.tutorial_entris_view li a {display: block;}
.tutorial_entris_view li a:hover { background-color:#B4D5FF; }
/* Tutorial Entry Revise Style */
.tutorial_entris_view li span { cursor: pointer;}
.tutorial_entris_view li span:hover { background-color:#B4D5FF; }
.tutorial_entry_container .action_buttons_container {display: inline;}
.tutorial_entry_container {height: 20px;}

.arrangeHighlight { background-color: #DDEEFF; }

.comprenhend { text-decoration:underline; font-weight: bold;}
.scan{ text-decoration:underline; font-style: italic;}
.glance{ text-decoration:underline; }
/* These colors are from google logo */
.vital { color:#DD1812; }
.major { color:#0140CA; }
.minor { color:#16A61E; }
.trivia { color:#FCCA03;}

/* Start New Tutorial Style */
.start_view_container {
    padding: 0 40px;
}
.start_view_container input[type="text"] {
    width: 400px;
    height: 25px;
    font-size: 15px;
}

.start_view_container textarea {
    width: 400px;
    height: 200px;
    resize: none;
    font-size: 15px;
}

/* Tutorial Entry Link Style */
.main_title, .tutorial_root_entry {
    background: url("../res/images/title-bg.png") repeat scroll 0 0 transparent;
    margin: 0;
    margin-bottom: 20px;
    padding: 10px;
}
.tutorial_root_entry a { text-decoration: none; color: #000000; font-size: 42px;}
li a { color:#000000; text-decoration: none; }

/* Tutorials List Link Style */
.tutorials_list_container {padding: 10px;}
.tutorials_list_container table {width: 100%;  border-spacing: 0;}
.tutorials_list_container td { text-align: center;}
.tutorials_list_container tbody tr:nth-child(odd) { background:#FFFFFF; }
.tutorials_list_container tbody tr:nth-child(even) { background:#F1F5FA; }
.tutorials_list_container thead tr{ 
    color:#FFFFFF; 
    background: #4c4c4c; /* Old browsers */
    background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
    height: 32px;
}
.tutorials_list_container td a { text-decoration:none; color:#0000FF; font-size: 16px;}
.tutorials_list_container td a:hover { color:#FF0000; }

/* Action Panel */
.action_panel {
    position: absolute;
    right: 10px;
    background-color: #111111;
    border-color: #444444 #1C1C1C #1C1C1C;
    border-image: none;
    border-radius: 5px;
    border-right: 1px solid #1C1C1C;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 0 #727272 inset;
    color: #FFFFFF;
    font-size: 12px;
    padding: 0 10px 10px;
    text-align: left;
    width: 460px;
    z-index: 320;
    border-bottom: 1px solid #727272;
    font-weight: bold;
    display: none;
}
.action_panel td { color: #FFFFFF; }
.caption { font-weight: bold; }
.action_panel input[type="text"], .action_panel textarea { background-color: #CBCBCB; resize: none;}
.action_more_toggler { 
    float: right; 
    font-size: 12px; 
    margin: 5px 20px 0 0; 
    border-bottom: 1px dashed #DDDDDD;
    cursor: pointer;
    color: #DDDDDD;
}

.deletedHightlight { background-color: #FFC6CA !important; }

/*.action_panel div span {width: 70px; display: inline-block;}*/


/* Notification Message */
.validation_error {
    background-color: #FFC6CA;
    background-image: url("../res/images/notification-cross.gif");
    background-position: 5px 5px;
    background-repeat: no-repeat;
    border: 1px solid #EFB9C3;
    display: block;
    padding: 5px;
    padding-left: 25px;
    color: #A71700;
    font-size: 13px;
}

.error_message {
    background-color: #FFC6CA;
    background-image: url("../res/images/notification-slash.gif");
    background-position: 20px 20px;
    background-repeat: no-repeat;
    border: 1px solid #EFB9C3;
    display: block;
    margin-bottom: 20px;
    padding: 20px 20px 20px 45px;
    color: #A71700;
}

.warn_message {
    background-color: #F9E497;
    background-image: url("../res/images/notification-exclamation.gif");
    background-position: 20px 20px;
    background-repeat: no-repeat;
    border: 1px solid #FFCB4F;
    display: block;
    margin-bottom: 20px;
    padding: 20px 20px 20px 45px;
}
.tutorialName { text-transform:capitalize; }


/* Button Style */
button.punch {
    background: none repeat scroll 0 0 #4162A8;
    border-color: #38538C #1F2D4D #151E33;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 10px 1px #5C8BEE inset, 0 1px 0 #1D2C4D, 0 6px 0 #1F3053, 0 8px 4px 1px #111111;
    color: #FFFFFF;
    font: bold 16px/1 "Comic Sans MS",helvetica,arial,sans-serif;
    margin-right: 7px;
    padding: 7px;
    text-align: center;
    text-shadow: 0 -1px 1px #1E2D4D;

}
button.punch:hover {
    box-shadow: 0 0 20px 1px #87ADFF inset, 0 1px 0 #1D2C4D, 0 6px 0 #1F3053, 0 8px 4px 1px #111111;
    cursor: pointer;
}
button.punch:active {
    box-shadow: 0 1px 10px 1px #5C8BEE inset, 0 1px 0 #1D2C4D, 0 2px 0 #1F3053, 0 4px 3px 0 #111111;
    margin-top: 7px;
}

.close_button {
    background-color: transparent;
    position: absolute;
    top: -20px;
    right: -10px;
}